Challenge yourself with the tasks

Introduction

I stumbled upon 7GUIS tasks while reading XState Tutorials. This motivated me to challenge those 7 tasks with 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

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

Check the codesandbox link in the following tweet.

While I was learning xstate tutorials, I found the 7GUIs tasks very interesting. So, I will try the same with jotai https://t.co/xpbgHr1XM0.

Task 1: Counterhttps://t.co/U9ye25rxA8
Usually I define atoms and components in one file, but for this one, atoms.ts is a separate file. pic.twitter.com/k8nlw4YBZl

— Daishi Kato (@dai_shi) August 30, 2021

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

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.

Task 2: Temperature Converterhttps://t.co/7lvlG9tPsP
We need to keep stale value for non-numeric value. The implementation is fairly close to that with xstate.https://t.co/xpbgHr1XM0 👻 https://t.co/B9DslJzC2G pic.twitter.com/F2lG0yA483

— Daishi Kato (@dai_shi) August 30, 2021

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

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.

7GUIs challenge for jotai https://t.co/xpbgHr1XM0 👻

Task 3: Flight Bookerhttps://t.co/89RSj7nEwS
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. https://t.co/B9DslJzC2G pic.twitter.com/sY3RVjP2W3

— Daishi Kato (@dai_shi) August 30, 2021

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

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.

7GUIs challenge https://t.co/w9yhyIeVHp for jotai https://t.co/xpbgHqKmUs.

Task 4: Timerhttps://t.co/vjLtFtiRuO
I tried it without using useEffect, so it might look complicated/advanced. If someone is interested, please try and we can compare differences. pic.twitter.com/aJC8CWaezl

— Daishi Kato (@dai_shi) August 31, 2021

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

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.

7GUIs challenge https://t.co/w9yhyIwwyX for jotai https://t.co/xpbgHr1XM0.

Task 5: CRUDhttps://t.co/nHXkonPJMf
Is there a better select component? I'm really bad at styling. Don't look at the code around styling. 🙈 pic.twitter.com/gh5EOkxogE

— Daishi Kato (@dai_shi) September 1, 2021

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

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.

7GUIs challenge https://t.co/w9yhyIwwyX for jotai https://t.co/xpbgHr1XM0.

Task 6: Circle Drawerhttps://t.co/cAcTf2iLSN
I used SVG to draw circles. I didn't know about draggable modal dialog libraries, so it's homegrown. pic.twitter.com/wrSi4UVZMw

— Daishi Kato (@dai_shi) September 2, 2021

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

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.

Finally all done! 🥳

7GUIs challenge https://t.co/w9yhyIwwyX for jotai https://t.co/xpbgHr1XM0.

Task 7: Cellshttps://t.co/u7bRzOIV80
Wow, this is so easy with jotai. Certainly, more refinements are necessary for real use cases, but it shows the power of derived atoms. pic.twitter.com/kaJP0n2VaA

— Daishi Kato (@dai_shi) September 3, 2021

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 on September 13, 2021.