Your codez is overkill

Published on Tuesday, 8 June 2021.
At 345 words, this article should take about 2 minutes to read.

Once upon a time, I encountered a bug.

The implementation was for a "View PDF" button: when the user clicks the button, a PDF opens in a new browser tab.

The problem

The code looked a bit like this…

const downloadDocument = (document) =>
  new Promise((resolve, reject) => {
    return axios.get(
      `${ENDPOINT}/${document.id}`, {
        headers: {
          'Content-Type': 'application/json',
          Authorization: AUTH_TOKEN
        },
      }
    ).then(({
      status,
      statusText,
      data
    }) => {
      if (status !== 200) {
        throw new Error(statusText);
      }
      return jwt.decode(data);
    }).then((response) => {
      if (response.responseStatus !== 200) {
        throw new Error(
          response.errors ?
          response.errors[0].message :
          response.responseMessage
        );
      }
      resolve(response);
    }).catch((error) => {
      reject({
        status: 401,
        error: error.message,
      });
    });
  });

const webDownload = () => {
  downloadDocument(document)
    .then((response) => {
      if (!response || response.responseStatus !== 200)
        throw new Error(response);

      const {
        href
      } = response;

      if (!href) throw new Error("No file");

      window.location = href;
    })
    .catch(() => {
      appDispatch({
        type: "APP_ERROR",
        error: "Failed to access the file",
      });
    })
};

<button
  type="button"
  onClick={webDownload}
  className="button"
>
  <Icon name="file-download" />
</button>

The solution

The actual solution I eventually used was to fix the window.location = href line.

It worked but, later that day, I started thinking that the correct answer would be…

Use a link!

If the criteria are: I click a button and the PDF opens in a new tab.

Then the only code needed is;

<a 
  class="button"
  href="/path/to/file.pdf"
  title="View file.pdf"
  target="_blank"
  rel="nofollow noopener noreferrer"
>
  View pdf
</a>

Conclusion

Sometimes codebases are quagmires of over-engineered code that blinker us to the best solution.

It was all too easy to dive into that convoluted code to find the bug - and it was tricky to figure out what was causing the issue because there was so much code to read.

There's nothing really wrong with the code as it is — it handles errors, authenticates requests, JWT encodes traffic, abstracts the download function so it can be used elsewhere; it's just overkill for I click a button and the PDF opens in a new tab.

There are no bugs in the code you didn't write.

PS: Whatever you do, try to avoid this… 🤣

Fin

Cover image courtesy of Wikipedia.

onward-journeys module