pyros2097 ( Peter John )

Thanks it works now. I had built a simple use-promise library to work with react suspense. https://github.com/pyros2097/use-promise/blob/master/index.js using the same concept i just ported useAtom to handle suspense for now to test out whether it will work and it does. So i guess its not that complex as i thought.

import React from 'react'
import { ReadOnlyAtom } from './types'
const promiseCache = new Map<any, any>()

export const useAtom = <T>(atom: ReadOnlyAtom<T>) => {
  const [cache, setCache] = React.useState(atom.getValue())
  React.useEffect(() => {
    const unsub = atom.subscribe(value => {
      promiseCache.delete(cache);
      setCache(value)
    })
    return unsub
  }, [atom, cache])
  if (cache instanceof Promise) {
    const v = promiseCache.get(cache)
    if (v) {
      if (v instanceof Error) {
        throw v
      } else {
        return promiseCache.get(cache)
      }
    }
    cache
      .then((res) => {
        promiseCache.set(cache, res)
      })
      .catch((err) => {
        promiseCache.set(cache, err)
      });
    throw cache
  }
  return cache
}```

```js
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import { atom } from 'klyva'
import { useAtom } from './utils';

const atomOne = atom(1)
const atomTwo = atom(10)
const sumAtom = atom((get) => get(atomOne) + get(atomTwo))

type Todo = {
  complete: Boolean
  title: String
}

const ggAtom = atom<Promise<Todo>>(async (get) => {
  const one = get(atomOne)
  const res = await fetch("https://jsonplaceholder.typicode.com/todos/" + one);
  return await res.json()
})

function App() {
  const a = useAtom(atomOne)
  const sum = useAtom(sumAtom)
  const aa = useAtom(ggAtom)
  return (

    <div className="App" onClick={() => atomOne.update((v) => v + 1)}>
      {a}
      {'-'}
      {sum}
      {'-'}
      {aa.title}
    </div>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <Suspense fallback={<div>loading...</div>}>
      <App />
    </Suspense>
  </React.StrictMode>,
  document.getElementById('root')
);

pyros2097

comment created time in 11 days

startedmerisbahti/klyva

started time in 11 days

issue commentmerisbahti/klyva

Does this allow async computed atoms like jotai does?

Hi Meris,

Thanks for the quick reply. The union value makes sense. I was trying to figure out a way to do that (was thinking of finding if it was a function and throwing the promise). The idea that the atom can be updated outside the react ecosystem is actually a very common use case in UI. I tried to use derived atoms and ran into this typescript error,

const atomOne = atom(10)
const atomTwo = atom(20)
const sumAtom = atom((get) => get(atomOne) + get(atomTwo))

function App() {
  const d = useAtom(atomOne)
  const g = useAtom(sumAtom)
  return (
    <div className="App">
      {d}
      {'-'}
      {g}
    </div>
  );
}

Error:

Argument of type 'ReadOnlyAtom<number>' is not assignable to parameter of type 'Atom<number>'.
  Property 'update' is missing in type 'ReadOnlyAtom<number>' but required in type 'Atom<number>'.  TS2345

pyros2097

comment created time in 11 days

issue openedmerisbahti/klyva

Does this allow async computed atoms like jotai does?

I would like to try doing something like this,

const sumAtom = atom(async get => {
  get(atomOne)
  return await fetch("/api");
})

created time in 11 days

issue commentpmndrs/jotai

Imperatively refresh atomFamily

@fkocovski why don't you just do something like this,

export const refreshAtom = atom(false);
const fetchData = atom(async (get) => {
  get(refreshAtom);
  const data = await fetch("https://jsonplaceholder.typicode.com/posts");
  return await data.json();
});

export default function App() {
  const [refresh, setRefresh] = useAtom(refreshAtom);
  const [data] = useAtom(fetchData);

  const newPost = async () => {
    await fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      body: JSON.stringify({
        title: "foo",
        body: "bar",
        userId: 1
      }),
      headers: {
        "Content-type": "application/json; charset=UTF-8"
      }
    });
    setRefresh(!refresh);
  };

  return (
    <>
      <div>
        <button onClick={newPost}>new</button>
      </div>
      <div>
        <ol>
          {data.map((x) => (
            <li key={x.id}>{x.title}</li>
          ))}
        </ol>
      </div>
    </>
  );
}

fkocovski

comment created time in 12 days

startedpmndrs/jotai

started time in 14 days

startedpmndrs/zustand

started time in 14 days

startedShopify/restyle

started time in 15 days

starteddabit3/dynamodb-documentclient-cheat-sheet

started time in 16 days

startedjamesisaac/react-native-background-task

started time in 16 days

startedWrathChaos/react-native-header-view

started time in 17 days

startedtpope/vim-vinegar

started time in 17 days

startedseebye/ueberzug

started time in 17 days

startedgen2brain/raylib-go

started time in 17 days

push eventpyros2097/pyros2097.dev

pyros2097

commit sha 290419511bce1d03381ab83c0d2b2c3b273f471d

audit

view details

push time in 21 days

startedsacmii/rn-vertical-slider

started time in a month

startedderoproject/graviton

started time in a month

startedpeterbrittain/asciimatics

started time in 2 months

startedh2non/bimg

started time in 2 months

startedgosukiwi/Pasukon

started time in 2 months

issue commentpyros2097/rust-embed

Unable to Compile relatively large directory on 32bit

Seems like a memory issue for 32bit for large directories. https://github.com/rust-lang/rust/issues/72084#issuecomment-626406567. Don't know if its possible to batch the writes.

Billy-Sheppard