jotaijs / jotai-tutorial Goto Github PK

Describe the bug
It is very difficult to tell what code/text is being selected in dark mode. This can be problematic when working in the sandbox.

To Reproduce
Steps to reproduce the behavior:

1. Go to "https://jotai-tutorial.netlify.app/quick-start/intro"
2. Click on the moon icon in the top right corner of the window
3. Select any text on the page

Expected behavior
The selection should be easy to see. It should match how the main website selection looks like in dark mode.

Example:

Desktop (please complete the following information):

• OS: MacOS
• Browser Firefox
• Version: 111.0b2

See: pmndrs/jotai#2461 (comment)

@vasucp1207 Can you update dependencies in example?

Describe the bug

Can't see example.
iframe show error: 'react-dom.development.js:798 Error: attribute viewBox: Expected number, "0 0 100'

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://tutorial.jotai.org/quick-start/write-only-atoms'
2. See error

Screenshots

Desktop (please complete the following information):

• OS: [mac OS Ventura M1 Pro ]
• Browser [chrome]
• Version [124.0.6367.156 (Official Build) (arm64)]

I am trying to create atoms from an array using split atom, but I get typescript and TypeError: todoAtoms.map is not a function.

Below is the code that I used :

In file appStateAtom.ts, I have a declared atoms

// In response from server I get the below todo object. Here, I am using it directly(mocked) for simplicity
export const todo = [
    {
        task: 'help the town',
        done: false,
    },
    {
        task: 'feed the dragon',
        done: false,
    },
]

export const todoStateAtom = atom([] as typeof todo)
export const todoAtomsAtom = atom([])

In file appDispatcher.ts, I set this atom

 const fetchTodoAtom = atom(null, async (_get, set) => {
     try {
         const fetchTodoRes = await fetchTodo() // here I make api call

        // items are first populated from a server request
         set(
             todoStateAtom,
             fetchTodoRes.data
         )
      } catch (error) {
          console.log(error)
     }
  )


 const setupTodoAtom = atom(
        (get) => get(todoTableDataAtom),
        async (_get, set) => {
            try {
                await set(fetchTodoAtom)
                set(todoAtomsAtom, splitAtom(todoStateAtom))  // I get typescript error here
            } catch (error) {
                console.log(error)
            }
        },
    )

Then I want to use todoAtomsAtom in my component

import React, { useCallback, useEffect, useState } from 'react'

import { dispatcherStateAtom } from '@/jotai_model'
import { useAtom, useAtomValue, useSetAtom } from 'jotai'
import { todoAtomsAtom } from '@/jotai_model/atoms/todoState'
import { Todo } from '@/modules/todo/Todo'

export const TodoContainer = () => {
    const { setupTodoAtom } = useAtomValue(dispatcherStateAtom)
    const setupTodo = useSetAtom(setupTodoAtom)

    const [todoAtoms, dispatch] = useAtom(todoAtomsAtom)

    useEffect(() => {
        async function fetchSetupData() {
            await setupTodo()
        }
        fetchSetupData()
    }, [])

    return (
        <div>
            {todoAtoms.map((todoAtom, idx) => (
                <Todo
                    key={idx}
                    todoAtom={todoAtom}
                />
            ))}
        </div>
    )
}

Where I do set(todoAtomsAtom, splitAtom(todoStateAtom)), I get error

Argument of type 'WritableAtom<PrimitiveAtom<{ task: string; done: boolean; }>[], [SplitAtomAction<{ task: string; done: boolean; }>], void>' is not assignable to parameter of type 'SetStateAction<never[]>'.
  Type 'WritableAtom<PrimitiveAtom<{ task: string; done: boolean; }>[], [SplitAtomAction<{ task: string; done: boolean; }>], void>' is missing the following properties from type 'never[]': length, pop, push, concat, and 29 more.ts(2345)

And Inside my component I get error

TypeError: todoAtoms.map is not a function

Where am I going wrong?

Add lessons under Quick start which gives a brief intro to jotai.

• Intro.
• Theme Switcher with jotai atoms.
• Persisting state with atomStorage.

(Note that this is just an idea. Feedback is welcome.)

• Lesson 1: Basic atoms
  • 1-1: atoms with simple values: atom(0), atom('hello'), atom(true)
  • 1-2: atoms with object and array: atom({ a: 1 }), atom([1,2]), atom({ nested: { c: 3 } })
    • Tips for experts: function has to be wrapped: atom({ fn: () => 'hi' })
  • 1-3: read-only derived atoms: atom((get) => get(textAtom).toUpperCase())
  • 1-4: complex ones: atom((get) => get(a) + get(b)), atom((get) => get(a) ? get(b) : get(c)), atom((get) => [a, b, c].map(get).reduce((acc, x) => acc + x)) IS THE LAST ONE TOO ADVANCED?
  • 1-5: write-only atoms
  • 1-6: writable derived atoms
• Lesson 2: Atom creators
  • 2-1: customize initial value: function atomWithRandom() { return atom(Math.random()) } WE NEED REALISTIC EXAMPLE
  • 2-2: derive atom util: function withLog(baseAtom) { return atom((get) => get(baseAtom), (get, set, arg) => { set(baseAtom, arg); console.log('after set', get(baseAtom)) }) }
  • 2-3: SOME MORE?
• Lesson 3: Async support
  • 3-1: async read
  • 3-2: async write
  • 3-3: promise as a value
• Lesson 4: Official Utils and Integrations
  • 4-1: atomWithStorage
  • 4-2: atomWithDefault
  • 4-3: loadable
  • 4-4: read docs for more utils
  • 4-5: integrations
• Lesson 5: atoms-in-atom?