Migrate sessions to zustand

29ki · Nov 6, 2022 · 952b16c · 952b16c
1 parent 69fd10f
commit 952b16c
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 45 deletions.
diff --git a/client/src/routes/Sessions/Sessions.tsx b/client/src/routes/Sessions/Sessions.tsx
@@ -27,7 +27,7 @@ import Gutters from '../../common/components/Gutters/Gutters';
 import Button from '../../common/components/Buttons/Button';
 import SessionCard from '../../common/components/Cards/SessionCard/SessionCard';
 import {PlusIcon} from '../../common/components/Icons';
-import {isLoadingAtom, sessionsAtom} from './state/state';
+import useSessionsState from './state/state';
 import Screen from '../../common/components/Screen/Screen';
 
 const AddButton = styled(Button)({
@@ -80,8 +80,8 @@ const AddSessionForm = () => {
 
 const Sessions = () => {
   const {fetchSessions} = useSessions();
-  const isLoading = useRecoilValue(isLoadingAtom);
-  const sessions = useRecoilValue(sessionsAtom);
+  const isLoading = useSessionsState(state => state.isLoading);
+  const sessions = useSessionsState(state => state.sessions);
 
   useEffect(() => {
     fetchSessions();

diff --git a/client/src/routes/Sessions/hooks/useSessions.spec.ts b/client/src/routes/Sessions/hooks/useSessions.spec.ts
@@ -1,8 +1,7 @@
 import {act, renderHook} from '@testing-library/react-hooks';
-import {RecoilRoot, useRecoilValue} from 'recoil';
 import useSessions from './useSessions';
 import fetchMock, {enableFetchMocks} from 'jest-fetch-mock';
-import {isLoadingAtom, sessionsAtom} from '../state/state';
+import useSessionsState from '../state/state';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import {SessionType} from '../../../../../shared/src/types/Session';
@@ -20,8 +19,8 @@ describe('useSessions', () => {
   describe('fetchSessions', () => {
     const useTestHook = () => {
       const {fetchSessions} = useSessions();
-      const sessions = useRecoilValue(sessionsAtom);
-      const isLoading = useRecoilValue(isLoadingAtom);
+      const sessions = useSessionsState(state => state.sessions);
+      const isLoading = useSessionsState(state => state.isLoading);
 
       return {fetchSessions, sessions, isLoading};
     };
@@ -31,9 +30,7 @@ describe('useSessions', () => {
         JSON.stringify([{id: 'session-id', url: '/session-url'}]),
         {status: 200},
       );
-      const {result} = renderHook(() => useTestHook(), {
-        wrapper: RecoilRoot,
-      });
+      const {result} = renderHook(() => useTestHook());
 
       await act(async () => {
         await result.current.fetchSessions();
@@ -50,9 +47,7 @@ describe('useSessions', () => {
         JSON.stringify([{id: 'session-id', url: '/session-url'}]),
         {status: 200},
       );
-      const {result} = renderHook(() => useTestHook(), {
-        wrapper: RecoilRoot,
-      });
+      const {result} = renderHook(() => useTestHook());
 
       const fetchPromise = act(async () => {
         await result.current.fetchSessions();
@@ -76,9 +71,7 @@ describe('useSessions', () => {
         }),
         {status: 200},
       );
-      const {result} = renderHook(() => useSessions(), {
-        wrapper: RecoilRoot,
-      });
+      const {result} = renderHook(() => useSessions());
 
       await act(async () => {
         const session = await result.current.addSession({
@@ -123,9 +116,7 @@ describe('useSessions', () => {
   describe('deleteSession', () => {
     it('should delete a session and refetch', async () => {
       fetchMock.mockResponseOnce('Success', {status: 200});
-      const {result} = renderHook(() => useSessions(), {
-        wrapper: RecoilRoot,
-      });
+      const {result} = renderHook(() => useSessions());
 
       await act(async () => {
         await result.current.deleteSession('session-id');

diff --git a/client/src/routes/Sessions/hooks/useSessions.ts b/client/src/routes/Sessions/hooks/useSessions.ts
@@ -1,16 +1,15 @@
 import {useCallback} from 'react';
-import {useSetRecoilState} from 'recoil';
 import dayjs from 'dayjs';
 
 import * as sessionsApi from '../api/sessions';
 import * as sessionApi from '../api/session';
 
-import {isLoadingAtom, sessionsAtom} from '../state/state';
+import useSessionsState from '../state/state';
 import {Session} from '../../../../../shared/src/types/Session';
 
 const useSessions = () => {
-  const setIsLoading = useSetRecoilState(isLoadingAtom);
-  const setSessions = useSetRecoilState(sessionsAtom);
+  const setIsLoading = useSessionsState(state => state.setIsLoading);
+  const setSessions = useSessionsState(state => state.setSessions);
 
   const fetchSessions = useCallback(async () => {
     setIsLoading(true);

diff --git a/client/src/routes/Sessions/state/state.ts b/client/src/routes/Sessions/state/state.ts
@@ -1,27 +1,27 @@
-import {atom, selectorFamily} from 'recoil';
 import {Session} from '../../../../../shared/src/types/Session';
+import create from 'zustand';
 
-const NAMESPACE = 'sessions';
+type State = {
+  isLoading: boolean;
+  sessions: Session[] | null;
+};
 
-export const isLoadingAtom = atom<boolean>({
-  key: `${NAMESPACE}/isLoading`,
-  default: false,
-});
+type Actions = {
+  setIsLoading: (isLoading: State['isLoading']) => void;
+  setSessions: (sessions: State['sessions']) => void;
+  reset: () => void;
+};
 
-export const sessionsAtom = atom<Session[] | null>({
-  key: `${NAMESPACE}/sessions`,
-  default: null,
-});
+const initialState: State = {
+  isLoading: false,
+  sessions: null,
+};
 
-export const sessionByIdSelector = selectorFamily({
-  key: `${NAMESPACE}/sessionById`,
-  get:
-    (sessionId: string) =>
-    ({get}) => {
-      const sessions = get(sessionsAtom);
-      if (sessions === null) {
-        return null;
-      }
-      return sessions.find(t => t.id === sessionId);
-    },
-});
+const useSessionsState = create<State & Actions>()(set => ({
+  ...initialState,
+  setIsLoading: isLoading => set({isLoading}),
+  setSessions: sessions => set({sessions}),
+  reset: () => set(initialState),
+}));
+
+export default useSessionsState;