<DxD/> Posts - Answer Overflow

<DxD/>

Explore posts from servers

•Created by <DxD/> on 10/6/2024 in #questions

Zustand question in next js

i have this code

export const useTaskStore = create<State & Actions>()(
  persist(
    set => ({
      tasks: [],
      draggedTask: null,
      addTask: (title: string, description?: string) =>
        set(state => ({
          tasks: [
            ...state.tasks,
            { id: uuid(), title, description, status: 'TODO' }
          ]
        })),
      dragTask: (id: string | null) => set({ draggedTask: id }),
    }),
    { name: 'task-store', skipHydration: true }
  )
)

export const useTaskStore = create<State & Actions>()(
  persist(
    set => ({
      tasks: [],
      draggedTask: null,
      addTask: (title: string, description?: string) =>
        set(state => ({
          tasks: [
            ...state.tasks,
            { id: uuid(), title, description, status: 'TODO' }
          ]
        })),
      dragTask: (id: string | null) => set({ draggedTask: id }),
    }),
    { name: 'task-store', skipHydration: true }
  )
)

and

export default function Column({
  title,
  status
}: {
  title: string
  status: Status
}) {
  const tasks = useTaskStore(state => state.tasks)
  const filteredTasks = useMemo(
    () => tasks.filter(task => task.status === status),
    [tasks, status]
  )
  const updateTask = useTaskStore(state => state.updateTask)
  const dragTask = useTaskStore(state => state.dragTask)
  const draggedTask = useTaskStore(state => state.draggedTask)
  useEffect(() => {
    useTaskStore.persist.rehydrate()
  }, [])

  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    if (!draggedTask) return
    updateTask(draggedTask, status)
    dragTask(null)
  }
  return (
    <section className='h-[600px] flex-1'>
      <div
        className='mt-3.5 h-full w-full rounded-xl bg-gray-700/50 p-4'
        onDrop={handleDrop}
        onDragOver={e => e.preventDefault()}
      >
        <div className='flex flex-col gap-4'>
          {filteredTasks.map(task => (
            <Task key={task.id} {...task} />
          ))}

          {filteredTasks.length === 0 && status === 'TODO' && (
            <div className='mt-8 text-center text-sm text-gray-500'>
              <p>Create a new task</p>
            </div>
          )}
        </div>
      </div>
    </section>
  )
}

export default function Column({
  title,
  status
}: {
  title: string
  status: Status
}) {
  const tasks = useTaskStore(state => state.tasks)
  const filteredTasks = useMemo(
    () => tasks.filter(task => task.status === status),
    [tasks, status]
  )
  const updateTask = useTaskStore(state => state.updateTask)
  const dragTask = useTaskStore(state => state.dragTask)
  const draggedTask = useTaskStore(state => state.draggedTask)
  useEffect(() => {
    useTaskStore.persist.rehydrate()
  }, [])

  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    if (!draggedTask) return
    updateTask(draggedTask, status)
    dragTask(null)
  }
  return (
    <section className='h-[600px] flex-1'>
      <div
        className='mt-3.5 h-full w-full rounded-xl bg-gray-700/50 p-4'
        onDrop={handleDrop}
        onDragOver={e => e.preventDefault()}
      >
        <div className='flex flex-col gap-4'>
          {filteredTasks.map(task => (
            <Task key={task.id} {...task} />
          ))}

          {filteredTasks.length === 0 && status === 'TODO' && (
            <div className='mt-8 text-center text-sm text-gray-500'>
              <p>Create a new task</p>
            </div>
          )}
        </div>
      </div>
    </section>
  )
}

so, here i can add task and drag and drop, but if i delete

  useEffect(() => {
    useTaskStore.persist.rehydrate()
  }, [])

  useEffect(() => {
    useTaskStore.persist.rehydrate()
  }, [])

and

 skipHydration: true

 skipHydration: true

still works the same, why ?

6 replies

TTCTheo's Typesafe Cult

•Created by <DxD/> on 9/16/2024 in #questions

based on this video https://www.youtube.com/watch?v=14B85quRQhw at min 26:02

if you return from your context :

const authProviderValue = {
    sessionExpired,
    authenticated,
    user,
    token,
    initiateLogin,
    handleAuthentication: handleIncomingPayload,
    logout,
  };
  return <AuthProvider value={authProviderValue}>{children}</AuthProvider>;

const authProviderValue = {
    sessionExpired,
    authenticated,
    user,
    token,
    initiateLogin,
    handleAuthentication: handleIncomingPayload,
    logout,
  };
  return <AuthProvider value={authProviderValue}>{children}</AuthProvider>;

and from this context i use just what ii need... is a good Approach ? yes, i have like :

export default () => {
  const context = React.useContext(authContext);

  if (context === undefined) {
    throw new Error('authContext is undefined');
  }
  return context;
};

export default () => {
  const context = React.useContext(authContext);

  if (context === undefined) {
    throw new Error('authContext is undefined');
  }
  return context;
};

Still does to many re-renders or solve the problem that is in video ?

2 replies

Gaming

Programming