Learning React State Manager Jotai With 7GUIS Tasks
Tags: react, javascript
Published: 2021-09-18 11:12:37

##### Challenge yourself with the tasks

## Introduction

I stumbled upon [7GUIS](https://eugenkiss.github.io/7guis/) tasks while reading [XState Tutorials](https://xstate.js.org/docs/tutorials/7guis/counter.html). This motivated me to challenge those 7 tasks with [jotai](https://github.com/pmndrs/jotai).

It turned out that this would be a good resource to learn jotai. They are from basic tasks to advanced tasked, and you will see how they are implemented, occasionally magically.

It's recommended to try it yourself first. If you succeed to implement it, then you can compare. Even if you fail, you can read and learn.

## Task 1: Counter


> The task is to build a frame containing a label or read-only textfield T and a button B. ...

[See full task description](https://eugenkiss.github.io/7guis/tasks#counter)

This is pretty easy. Good to try for the first time.

Check the codesandbox link in the following tweet.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">While I was learning xstate tutorials, I found the 7GUIs tasks very interesting. So, I will try the same with jotai <a href="https://t.co/xpbgHr1XM0">https://t.co/xpbgHr1XM0</a>.<br><br>Task 1: Counter<a href="https://t.co/U9ye25rxA8">https://t.co/U9ye25rxA8</a><br>Usually I define atoms and components in one file, but for this one, atoms.ts is a separate file. <a href="https://t.co/k8nlw4YBZl">pic.twitter.com/k8nlw4YBZl</a></p>&mdash; Daishi Kato (@dai_shi) <a href="https://twitter.com/dai_shi/status/1432313981176205319?ref_src=twsrc%5Etfw">August 30, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Task 2: Temperature Converter

> The task is to build a frame containing two textfields TC and TF representing the temperature in Celsius and Fahrenheit, respectively. ...

[See full task description](https://eugenkiss.github.io/7guis/tasks#temp)

This is a bit confusing (at least for me), because converting tempertures seems a best fit for derived atoms. We need to handle non numeric input and thus it's rather straightforward.

Check the codesandbox link in the following tweet.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Task 2: Temperature Converter<a href="https://t.co/7lvlG9tPsP">https://t.co/7lvlG9tPsP</a><br>We need to keep stale value for non-numeric value. The implementation is fairly close to that with xstate.<a href="https://t.co/xpbgHr1XM0">https://t.co/xpbgHr1XM0</a> 👻 <a href="https://t.co/B9DslJzC2G">https://t.co/B9DslJzC2G</a> <a href="https://t.co/F2lG0yA483">pic.twitter.com/F2lG0yA483</a></p>&mdash; Daishi Kato (@dai_shi) <a href="https://twitter.com/dai_shi/status/1432325078419587079?ref_src=twsrc%5Etfw">August 30, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Task 3: Flight Booker

> The task is to build a frame containing a combobox C with the two options "one-way flight" and "return flight", two textfields T1 and T2 representing the start and return date, respectively, and a button B for submitting the selected flight. ...

[See full task description](https://eugenkiss.github.io/7guis/tasks#flight)

I thought this is faily easy except for parsing a string for a date. You would need to keep both string and date for comparison.

Check the codesandbox link in the following tweet.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">7GUIs challenge for jotai <a href="https://t.co/xpbgHr1XM0">https://t.co/xpbgHr1XM0</a> 👻<br><br>Task 3: Flight Booker<a href="https://t.co/89RSj7nEwS">https://t.co/89RSj7nEwS</a><br>This was a bit tricky with jotai. `null` implies invalid and flight option directly disables return date. There might be room for improvement. xstate may fit better. <a href="https://t.co/B9DslJzC2G">https://t.co/B9DslJzC2G</a> <a href="https://t.co/sY3RVjP2W3">pic.twitter.com/sY3RVjP2W3</a></p>&mdash; Daishi Kato (@dai_shi) <a href="https://twitter.com/dai_shi/status/1432355221020168196?ref_src=twsrc%5Etfw">August 30, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Task 4: Timer

> The task is to build a frame containing a gauge G for the elapsed time e, a label which shows the elapsed time as a numerical value, a slider S by which the duration d of the timer can be adjusted while the timer is running and a reset button R. ...

[See full task description](https://eugenkiss.github.io/7guis/tasks#timer)

Getting hard. We need to take care of timing. I'm not 100% sure if my implementation is readable enough.

Check the codesandbox link in the following tweet.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">7GUIs challenge <a href="https://t.co/w9yhyIeVHp">https://t.co/w9yhyIeVHp</a> for jotai <a href="https://t.co/xpbgHqKmUs">https://t.co/xpbgHqKmUs</a>.<br><br>Task 4: Timer<a href="https://t.co/vjLtFtiRuO">https://t.co/vjLtFtiRuO</a><br>I tried it without using useEffect, so it might look complicated/advanced. If someone is interested, please try and we can compare differences. <a href="https://t.co/aJC8CWaezl">pic.twitter.com/aJC8CWaezl</a></p>&mdash; Daishi Kato (@dai_shi) <a href="https://twitter.com/dai_shi/status/1432723166086971401?ref_src=twsrc%5Etfw">August 31, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Task 5: CRUD

> The task is to build a frame containing the following elements: a textfield Tprefix, a pair of textfields Tname and Tsurname, a listbox L, buttons BC, BU and BD and the three labels as seen in the screenshot. ...

[See full task description](https://eugenkiss.github.io/7guis/tasks#crud)

This would be a good challenge to handle a list and filter it. My implementation uses a technique called atoms-in-atom, but you could implement without it.

Check the codesandbox link in the following tweet.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">7GUIs challenge <a href="https://t.co/w9yhyIwwyX">https://t.co/w9yhyIwwyX</a> for jotai <a href="https://t.co/xpbgHr1XM0">https://t.co/xpbgHr1XM0</a>.<br><br>Task 5: CRUD<a href="https://t.co/nHXkonPJMf">https://t.co/nHXkonPJMf</a><br>Is there a better select component? I&#39;m really bad at styling. Don&#39;t look at the code around styling. 🙈 <a href="https://t.co/gh5EOkxogE">pic.twitter.com/gh5EOkxogE</a></p>&mdash; Daishi Kato (@dai_shi) <a href="https://twitter.com/dai_shi/status/1433116078540935170?ref_src=twsrc%5Etfw">September 1, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Task 6: Circle Drawer

> The task is to build a frame containing an undo and redo button as well as a canvas area underneath. Left-clicking inside an empty area inside the canvas will create an unfilled circle with a fixed diameter whose center is the left-clicked point. ...

[See full task description](https://eugenkiss.github.io/7guis/tasks#circle)

This is a fun task. In Web, we can use SVG, so drawing part is trivial. On the other hand, movable dialog is hard. I did it in a naive way. There should be some better ways. Using canvas instead of SVG and using browser window using postMessage would be advanced challenges.

Check the codesandbox link in the following tweet.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">7GUIs challenge <a href="https://t.co/w9yhyIwwyX">https://t.co/w9yhyIwwyX</a> for jotai <a href="https://t.co/xpbgHr1XM0">https://t.co/xpbgHr1XM0</a>.<br><br>Task 6: Circle Drawer<a href="https://t.co/cAcTf2iLSN">https://t.co/cAcTf2iLSN</a><br>I used SVG to draw circles. I didn&#39;t know about draggable modal dialog libraries, so it&#39;s homegrown. <a href="https://t.co/wrSi4UVZMw">pic.twitter.com/wrSi4UVZMw</a></p>&mdash; Daishi Kato (@dai_shi) <a href="https://twitter.com/dai_shi/status/1433480261547663377?ref_src=twsrc%5Etfw">September 2, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Task 7: Cells

> The task is to create a simple but usable spreadsheet application. The spreadsheet should be scrollable. The rows should be numbered from 0 to 99 and the columns from A to Z. Double-clicking a cell C lets the user change C's formula. After having finished editing the formula is parsed and evaluated and its updated value is shown in C. ...

[See full task description](https://eugenkiss.github.io/7guis/tasks#cells)

I wanted to try this task from the start. I thought this would be very interesting with jotai, which already has dependency tracking. The result is it is very interesting. The code is surprisingly small. Note that I cheated formula evaluation with `eval`.

Check the codesandbox link in the following tweet.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Finally all done! 🥳<br><br>7GUIs challenge <a href="https://t.co/w9yhyIwwyX">https://t.co/w9yhyIwwyX</a> for jotai <a href="https://t.co/xpbgHr1XM0">https://t.co/xpbgHr1XM0</a>.<br><br>Task 7: Cells<a href="https://t.co/u7bRzOIV80">https://t.co/u7bRzOIV80</a><br>Wow, this is so easy with jotai. Certainly, more refinements are necessary for real use cases, but it shows the power of derived atoms. <a href="https://t.co/kaJP0n2VaA">pic.twitter.com/kaJP0n2VaA</a></p>&mdash; Daishi Kato (@dai_shi) <a href="https://twitter.com/dai_shi/status/1433804219828490241?ref_src=twsrc%5Etfw">September 3, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Summary

How was it? Would you like to challenge yourself? Even if it's too hard, I suppose reading the implementation will help you to learn. I am so impressed that these 7 tasks are well designed.

Enjoy coding.

---
Originally published at [https://blog.axlight.com](https://blog.axlight.com/posts/learning-react-state-manager-jotai-with-7guis-tasks/) on September 13, 2021.