Forem: Andrzej Fricze

Introduction to Jotai. Derived atoms. Controlling UI

Andrzej Fricze — Sun, 25 Sep 2022 18:59:16 +0000

Intro to Jotai. Part 1
Intro to Jotai. Part 2

Creating derived atoms is easy and useful. From one data source you can create many atoms. They allow to transform source data, or create new information based on it. Derived atoms are your first tool to structure your data models, and to control your UI state.

You already created simple form with one input and validation. Now let’s add another input with validation and submit button. Later, we can use validation atoms to decide whether user can submit the form. In this part, you’ll also switch from bare HTML elements to Material UI.

import TextField from "@mui/material/TextField";

const Input = ({ type = "text", label, sourceAtom }: InputProps) => {
  const [text, setText] = useAtom(sourceAtom);
  return (
    <TextField
      type={type}
      label={label}
      variant="filled"
      value={text}
      onChange={(e) => setText(e.target.value)}
    />
  );
};

Let’s use new version of Input component and create inputs for name and password.

const nameAtom = atom("John");
const passwordAtom = atom("");

const Form = () => {
  return (
    <Box
      component="form"
      sx={{
        "& > :not(style)": { m: 2, width: "25ch" }
      }}
    >
      <Typography variant="h3" gutterBottom>
        Registration form
      </Typography>

      <Input label="Name" sourceAtom={nameAtom} />
      <Input type="password" label="Password" sourceAtom={passwordAtom} />
    </Box>
  );
};

Source atoms are ready. Next step is creating derived validation atoms.

const nameLengthAtom = atom((get) => get(nameAtom).length);
const passwordLengthAtom = atom((get) => get(passwordAtom).length);

const isNameValid = atom((get) => get(nameLengthAtom) >= 3);
const isPasswordValid = atom((get) => get(passwordLengthAtom) >= 3);

Because you want to control whether user can submit a form we need one more atom. It’s a general atom describing whether whole form is in valid state.

const isFormValid = atom((get) => get(isNameValid) && get(isPasswordValid));

This atom derives values from name and password validation atoms and joins those values together. Using this new atom you’re ready to create submit button.

const SubmitButton = () => {
  const isValid = useAtomValue(isFormValid);

  return (
    <Box>
      <Button disabled={!isValid} variant="outlined">
        Register
      </Button>
    </Box>
  );
};

If form is valid submit button is ready to click. If form is invalid button is disabled. Simple.

Let’s see how full form looks now.

const Form = () => (
  <Box
    component="form"
    sx={{
      "& > :not(style)": { m: 2, width: "25ch" }
    }}
  >
    <Typography variant="h3" gutterBottom>
      Registration form
    </Typography>

    <Input label="Name" sourceAtom={nameAtom} />
    <Input type="password" label="Password" sourceAtom={passwordAtom} />

    <Error sourceAtom={isNameValid} errorInfo="Name is too short" />
    <Error sourceAtom={isPasswordValid} errorInfo="Password is too short" />

    <SubmitButton />
  </Box>
);

This form also uses new, general Error component to display particular errors. Check out full code to see source of this component.

As always check out Jotai website for docs and more examples of Jotai code.

Introduction to Jotai. Derived atoms. Data validation

Andrzej Fricze — Sun, 04 Sep 2022 12:47:52 +0000

Read first part to know what's going on here.

You created first atom to hold your input text value. Then you created a derived atom that holds text length. Based on this code let’s create registration form, with basic validation.

First, let’s add label to your text input, so users know to put their name in there.

const nameAtom = atom("hello");

const Input = () => {
  const [text, setText] = useAtom(nameAtom);
  return (
    <div>
      <label>Name: </label>
      <input value={text} onChange={(e) => setText(e.target.value)} />
    </div>
  );
};

Then take Input component and put it in Form component. Form component has a title and one input. Later we’ll add Error component there to show validation results.

const Form = () => {
  return (
    <form>
      <h1>Registration form</h1>
      <Input />
    </form>
  );
};

Now create new, derived atom. Based on nameLengthAtom you check that name has at least 3 chars. If length is bigger, or equal, to 3, name is valid. Otherwise, it’s not.

const isNameValid = atom((get) => get(nameLengthAtom) >= 3);

Use this new atom in Error component to show user whether name he typed in is valid. If name is valid don’t show anything. If name is invalid inform user that name has to be longer.

const Error = () => {
  const isValid = useAtomValue(isNameValid);
  return isValid ? 
      null : 
      <div style={{ color: "red" }}>Name is too short</div>;
};

In this component you only read value from isNameValid atom, so you can use useAtomValue function, instead of useAtom. This is a more specialised version of useAtom. It gives access to value of atom, without exposing the ability to change atoms’ value. Using specialised API makes your code easier to understand, and more maintainable. const isValid = useAtomValue(isNameValid); is equal to const [isValid] = useAtom(isNameValid);

Now you’re ready to add Error component to Form component. This Form component can be used in your application.

const Form = () => {
  return (
    <form>
      <h1>Registration form</h1>
      <Input />
      <Error />
    </form>
  );
};

const App = () => (
  <Provider>
    <Container>
      <Form />
    </Container>
  </Provider>
);

Check out this code live.

Check out Jotai website for docs and more examples of Jotai code.

Introduction to Jotai. From React hooks to Jotai atoms

Andrzej Fricze — Sat, 03 Sep 2022 18:32:33 +0000

Jotai is simple. There's one concept there: atom. You eat with it, you sleep with it, you fight with it.

You create an atom with atom function. You can use atom in your component just like React local state. Instead of useState, write useAtom.

const textAtom = atom('hello')

const Input = () => {
  const [text, setText] = useAtom(textAtom)
  return <input value={text} onChange={(e) => setText(e.target.value)} />
}

This component works the same way as similar component with useState.

const Input = () => {
  const [text, setText] = useState('hello')
  return <input value={text} onChange={(e) => setText(e.target.value)} />
}

Atoms are more flexible than the local state. They live outside components. Components refer to atoms but don't own them. Atoms can be composed together. Using composition you can create derived atoms. Derived atom holds data dependent on other atoms. When value of the source atom changes, value of the derived atom also changes.

const textLengthAtom = atom((get) => get(textAtom).length)

Atom above is a derived atom. Its value is length of text from textAtom. You can use it in any component you want.

const TextLength = () => {
  const [length] = useAtom(textLengthAtom)
  return <div>Length: {length}</div>
}

Input and TextLength components are not connected. Their state comes from atoms that live outside them. You can use them in your application in any place you want. State will be propagated properly.

<Provider>
  <Container>
    <Input />
  </Container>
  <Container>
    <Column>
      <TextLength />
    </Column>
  </Container>
</Provider>

If you build React application with hooks, go on and try replacing your useState with useAtom from Jotai. You install Jotai with npm i jotai. It comes with TypeScript declarations. No need to look for additional typings.

Shown code is based on Jotai official examples. Check out this code live.

Check out Jotai website for docs and more examples of Jotai code.

Check out next part of Introduction to Jotai.

Programmer’s Guide to Working From Home

Andrzej Fricze — Tue, 17 Mar 2020 10:32:18 +0000

The latest events made a lot of companies switch to a remote-first work style. Some people love it, some have problems adjusting. After years of getting used to home/office balance, staying at home for a whole day might make you crazy. Fortunately, there’s a lot of people who work from home office on a daily basis and are willing to share their experience with you. Read a few vital pieces of advice that will help you stay sane and productive through these demanding times.

Start day actively

Probably the most important thing is how you start a day. When you work in the office, you have your routine of waking up, going to the bathroom, getting breakfast and commuting to work. When you work from home, it’s really tempting to oversleep. Your desk is, ultimately, just two steps from the bed. If you want your workday to go well, you should wake up once alarm rings, make your bed and move. 10 squats and sit-ups will activate your body. Maybe few jumping jacks. If you’re too sleepy in the morning, go on and wash some dishes or clean the kitchen and water your flowers. If your flat is all clean call a friend and gossip for a while. Make sure to start a day actively, before sitting by the computer. This will give you a great boost to stay focused and happy for the rest of the day.

Plan and prepare meals in advance

When you know you’re staying home the whole day, it may be tempting to think: my fridge is full, I’ll just eat when I’m hungry. Then you do and somehow, you spend half a day choosing what to eat and looking up a recipe. Finally, you eat scrambled eggs with a piece of bread and this tomato hiding in the corner of the fridge for the last week. Then you get angry about eating sloppy, but, for unknown reasons next day looks the same. If you want to eat properly, the best you can do is to plan the next day’s meals, and prepare what you can the evening before. Even if you end-up eating few similar meals for a week, it’s still better than scrambled eggs, oatmeal and instant soups all the time. When you prepare most of your meals in a batch, it takes about an hour, even less. When you do this only when you feel hungry, it’s interrupting your workday every few hours. Of course, while you’re planning meals for the next day don’t forget your greens!

Turn on your camera during work calls

Even if you stay at home, make sure you feel you’re at work along with your colleagues. Seeing coworkers’ faces help you understand each other and stay focused on work together. What’s more, it requires you to stay dressed and keep your apartment fairly organized. One, two calls a day help remember that even you’re sitting in your cozy flat, you’re still at work. Work together and help each other!

Plan breaks

Working in an office, you’ll always find some way to stand up from the computer and relax. Your colleagues go for coffee or want to play some foosball. There’s a design meeting and you need to draw something on a blackboard. Getting up, changing the environment and perspective is great for your back, brain, and eyes. At home, it’s easier to just sit down non-stop. Hour after hour, your eyes get dry and you slouch but, since you want to finish just one more task you don’t get up. To avoid that you should plan 3-4 breaks. You may plan them at a specific time, or after finishing a substantial piece of work. If you didn’t use Pomodoro before, this is the day. What’s important, you should plan exactly what you’re gonna do for a break. Try reading a book, playing with your dog or… exercising.

Exercise

The best way to stay focused and sharp through the day is exercise. You don’t need gym equipment, weights nor machines. If you have some loose pants and a t-shirt you’re all set. Working out at home, you may even do without shoes. Depending on your current condition and health you may choose more or less demanding exercise. If you’re not sure where to look for exercise try ATHLEAN-X, MadFit full of home workouts, or Jeff Nippard who prepared proper home replacement for gym exercise. I advise to plan your exercise after the first 3-4 hours of work, so you have a chance to refresh your mind and get back to work with new energy.

Using this little advice will help you organize your work from home properly and not give in to laziness and tardiness. Last important thing is to remember when to stop. Set a starting and ending time. When you’re done with work, make sure to close your computer. You’ll feel that the workday is done. I know you may get back to watch some movies on your laptop :). Before doing that, spend at least 15 minutes talking with family or roommates or calling your mom. This helps to change context from work to rest.

Working from home is not that hard. Stick to a few simple rules and you may even benefit from that. Maybe you’ll build this few healthy habits you always wanted to. Good luck!