DEV Community: Nans Dumortier

Exploit Airtable inside your React app

Nans Dumortier — Wed, 11 May 2022 16:57:09 +0000

Cover photo by Jan Antonin Kolar on Unsplash

Intro

At Karbon 🌱, we iterate fast and we are always looking for ways to improve our products and services.

We had the idea of building an idea box, allowing users to create, share and vote for ideas of new features.

This is the typical project where we have to store unsensitive data entered by users. However we wanted to avoid impacting the rest of our application (e.g we don't want to change our database schema).

Airtable is a great tool for this kind of usecase.

Let's build this idea box ! 🗳️

Airtable provides an npm package to interact with their API.
However, since I was working with multiple tables (one for votes, another one for ideas), I found myself repeating a lot of boilerplate code.
I landed on a hook that seemed to provide a nice abstraction to interact with Airtable, but it had some bugs and the author didn't seem to willing to spend time on it. So I decided to write my own hook.

On top of fixing a few issues, I worked on the following points :

provide an option to handle errors when fetching, updating or deleting data
provide an option to filter records using Airtable's QueryParams

Usage 👩‍💻👨‍💻

Install the hook and Airtable's package with your favorite package manager, for example npm :

npm install --save airtable use-airtable-crud

const { records, createRecord, updateRecord, deleteRecord, getRecords, loading } = useAirtable(
    'TABLE_NAME',
    AIRTABLE_API_KEY,
    'TABLE_BASE_ID',
    {
      filterByFormula: '{myField} = TRUE()',
    },
  );

You can find the source code of the hook here.

Outro

I hope this hook can be useful for you too! Prototyping and iterating is a great way to learn new things.

An elegant solution for memory leaks in React

Nans Dumortier — Thu, 30 Jul 2020 16:35:26 +0000

Cover image from Valentin Petkov from Unsplash

An elegant solution for memory leaks in React

🔴 UPDATE

This "solution" doesn't seem to really avoid leaks, and I'm investigating for a true and elegant way to solve this. Even AbortController doesn't seem to be the silver bullet against memory leaks 😰.
Check out the discussion in the comments!

When working with asynchronous calls, for example API calls, you might have encountered this error :

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

A GIF is worth a thousand words ...

This is a small page that simulates some asynchronous logic on load, and then updates the view accordingly. Here, I unmount the component before the async work has been finished, and trigger the Error. (I took this example from this StackOverFlow post)

This is caused by this code :

function Example() {
  const [text, setText] = useState("waiting...");

  useEffect(() => {
    simulateSlowNetworkRequest().then(() => {
      setText("done!"); // ⚠️ what if the component is no longer mounted ?
      // => Warning: Can't perform a React state update on an unmounted component.
    });
  }, []);

  return <h2>{text}</h2>;
}

When running into that issue, I found multiple solutions, the most used one seems to be this one :

function OtherExample() {
    const [text, setText] = useState("waiting...");

  useEffect(() => {
    let isMounted = true; // 👈
    simulateSlowNetworkRequest().then(() => {
      if (!isMounted) { // 👈
        setText("done!"); // no more error
      }
    });
    return () => {
      isMounted = false; // 👈
    };
  }, []);

  return <h2>{text}</h2>;
}

But it requires you to add quite a lot of stuff into your component, having to deal with that isMounted variable all over the place ...

There are other interesting solutions, like making your Promises cancellable :

🍦 Cancel Properly HTTP Requests in React Hooks and avoid Memory Leaks 🚨

Victor de la Fouchardière ・ Jul 29 '20

#react #javascript #tutorial #showdev

You told me there would be an elegant solution !

I wasn't lying! The solution I came up with is a very simple hook. It works just like React's useState, but it basically checks if the component is mounted before updating the state !

Here is an example of the refactored code :

function OtherExample() {
  const [text, setText] = useStateIfMounted("waiting..."); // 👈

  React.useEffect(() => {
    simulateSlowNetworkRequest().then(() => {
      setText("done!"); // no more error
    });
  }, [setText]);

  return <h2>{text}</h2>;
}

Here is the CodeSandBox if you wanna play around !

TLDR

Use useStateIfMounted hook, that will only update the state if your component is mounted ! 🚀

I hope this might be helpful, feel free to reach me out in any case ! 🤗

Struggle with React and unit tests

Nans Dumortier — Mon, 23 Mar 2020 18:21:09 +0000

Context

I'm trying to learn TDD at the moment, and so I decided to exercise on my Gatsby project.

This is the blog I'm working on.

What do I want to achieve ?

I wanted to add a theme toggler to it, simply by using gatsby-plugin-dark-mode.

So I went ahead and created a theme-toggle.js along with a theme-toggle.test.js file.

Then, I decided to write my first test. But for that, I had to ...

Setup tests on a Gatsby Project

I followed this tutorial which is well made, along with this one.

Now I can run npm run test -- --watch and everything seems to be working.

Here I am, with jest, @testing-library/react and everything ready to go.

Now, what should I do ?

I've been able to create a simple React component that contains a label with a check box, and successfully tested it with :

describe('ThemeToggle', () => {
  it('renders an input', async () => {
    const themeToggle = render(<ThemeToggle />);
    const toggle = themeToggle.getByLabelText('Dark mode');
    expect(toggle).not.toBeNull(); // this passes ✅
  });
});

But then, I "cheated" for a bit, and looked at the tutorial to see what I had to build to make it work.

Here is how it should look like :

function ThemeToggle() {
  return (
    <ThemeToggler>
      {({ theme, toggleTheme }) => (
        <label htmlFor="themeToggle">
          <input
            id="themeToggle"
            type="checkbox"
            onChange={(e) => toggleTheme(e.target.checked ? 'dark' : 'light')}
            checked={theme === 'dark'}
          />
          {' '}
          Dark mode
        </label>
      )}
    </ThemeToggler>
  );
}

So now my question is : how do I write suitable tests for that component ?

I'm a bit lost 😅

Thank you for your help !

Nevertheless, my team mate Coded

Nans Dumortier — Fri, 06 Mar 2020 20:35:37 +0000

I'm lucky because I have a great team mate !

Despite an extremely stressful context and a solid imposter syndrome, she coded. She joined the team 1 year ago, and has made great progress although the project was tense.
She's started to express herself more and more, and she still sometimes encounters some setbacks.
I admire her for her perseverance and for the great mood she brings to the team.
Even though the management did not trust her, she has solved some extremely complex problems !

I'm trying my best to support her in tough situations, and we have great time pair programming.

My advice for allies to support self-identifying women and non-binary folks who code is ...

Try and be helpful. On tough problems, simply propose to give a hand, and be comprehensive when the person is feeling insecure.
Do not hesitate to compliment your team mates if you feel so, and ensure they have a healthy work atmosphere.

I'm Nans Dumortier, and I support women devs.

Nans Dumortier — Tue, 05 Mar 2019 17:53:45 +0000

I will advocate for gender equality by...

Doing my best to be a good teammate, being respectful to anyone !

I hope to see my school/work/developer/tech community...

Having more and more "gender-balanced" teams. People with different backgrounds can bring a lot to a project, and can teach a lot to each other !

What should we, developers, tell our relatives about ?

Nans Dumortier — Sun, 10 Feb 2019 18:19:53 +0000

As a web/mobile developer, I feel like my job is very obscure to most of my relatives.
On the other hand, it seems to me that some technical knowledge might be useful for anyone, to have a better understanding of the web in general.
What should we, developers, teach our relatives about ?