How to use generateId in syncedCrud?

[igor-zmitrovich]

Hello!

I want to be able to add the elements to the observable, which will be persisted locally and synchronized with the backend.

I want to add the new element without ID, and let the generateId handle the rest, however I don't know how to do that and I was not able to find anything in Docs

I am using syncedCrud as follows:

// src/context/AppDataContext.tsx
...
export type Todo= z.infer<typeof TodoSchema>;

const todos$ = observable(
  syncedCrud<Todo>({
    list: async () => {
       ...
       // Calling my REST CRUD API
    },
    create: async (input) => {
       ...
    },
    update: async (input) => {
       ...
    },
    delete: async (input) => {
       ...
    },
    as: 'object',
    persist: {
      plugin: ObservablePersistLocalStorage,
      name: 'todos',
      retrySync: true,
    },
    retry: { infinite: true },
    changesSince: 'last-sync',
    fieldUpdatedAt: 'updatedAt',
  }),
);

interface AppDataContextType {
  todos$: Observable<Record<string, Todo>>;
}

const AppDataContext = createContext<AppDataContextType>({ todos$ });

export const useTodos = () => {
  return useContext(AppDataContext).todos$;
};

export const AppDataProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  useEffect(() => {
    syncObservable(todos$, {
      persist: {
        name: 'todos',
        plugin: ObservablePersistLocalStorage,
      },
    });
  }, []);

  return (
    <AppDataContext.Provider value={{ todos$ }}>
      {children}
    </AppDataContext.Provider>
  );
};

Documentation says there is an option - generateId.

However I am not sure how to add the objects without IDs? There is no example in the documentation, and the only way I was able to add the element is like this:

// src/app/page.tsx 
...
const TodoList = observer(() => {
  const todos$ = useTodos()
  const isLoaded = useIsDataLoaded()
  const [newTodo, setNewTodo] = useState({ text: '' })

  if (!todos$.get()) {
    return <div>Loading...</div>
  }

  const handleAddTodo = () => {
    if (newTodo.text) {
      const newTodoItem = {
        id: uuid(),
        text: newTodo.text,
        updatedAt: null,
        createdAt: null,
      }
      todos$.set({
        ...todos$.get(),
        [newTodoItem.id]: newTodoItem ,  // Is this correct? Maybe there is a better way?
      })
      setNewTodo({ text: '' })
    }
  }

  const handleDeleteTodo = (id: string) => {
    todos$[id].delete()
  }

  return (
    <div>
      <h1>Todos</h1>
      <div>
        <input
          type="text"
          value={newTodo.text}
          onChange={(e) => setNewTodo({ text: e.target.value })}
          placeholder="Add new todo"
          className=""
        />
        <button onClick={handleAddTodo }>
          Add Todo
        </button>
      </div>

      {Object.values(todos$.get()).map((todo: Todo) => {
        return (
          <div key={todo.id}>
            <span>{todo.text}</span>
            <button
              onClick={() => handleDeleteTodo(todo.id)}
            >
              Delete
            </button>
          </div>
        )
      })}
    </div>
  )
})

const TodoPage = () => {
  return (
    <AppDataProvider>
        <TodoList />
    </AppDataProvider>
  )
}

export default TodoPage 

But to add to the <Record<str, {...}> i need to have ID 🤷

Maybe I am doing something it wrong?