Multiuser support (#60)

components/ClientWrapper.tsx

@@ -1,12 +1,24 @@
 'use client'
 
-import { ReactNode } from 'react'
+import { ReactNode, useEffect } from 'react'
 import { useAtom } from 'jotai'
-import { pomodoroAtom } from '@/lib/atoms'
+import { pomodoroAtom, userSelectAtom } from '@/lib/atoms'
 import PomodoroTimer from './PomodoroTimer'
+import UserSelectModal from './UserSelectModal'
+import { useSession } from 'next-auth/react'
 
 export default function ClientWrapper({ children }: { children: ReactNode }) {
   const [pomo] = useAtom(pomodoroAtom)
+  const [userSelect, setUserSelect] = useAtom(userSelectAtom)
+  const { data: session, status } = useSession()
+  const currentUserId = session?.user.id
+
+  useEffect(() => {
+    if (status === 'loading') return
+    if (!currentUserId && !userSelect) {
+      setUserSelect(true)
+    }
+  }, [currentUserId, status, userSelect])
 
   return (
     <>
@@ -14,6 +26,9 @@ export default function ClientWrapper({ children }: { children: ReactNode }) {
       {pomo.show && (
         <PomodoroTimer />
       )}
+      {userSelect && (
+        <UserSelectModal onClose={() => setUserSelect(false)}/>
+      )}
     </>
   )
 }