feat(app): use zustand

sawaYch · Mar 5, 2024 · d59152f · d59152f
1 parent ca762fa
commit d59152f
Show file tree

Hide file tree

Showing 13 changed files with 665 additions and 585 deletions.
diff --git a/components/livestream-metadata-card.tsx b/components/livestream-metadata-card.tsx
@@ -1,27 +1,21 @@
 import { Card, CardContent } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
-import { LiveMetadata } from '@/types/liveChat';
-
+import { usePollAppStore } from '@/stores/store';
 import Image from 'next/image';
 
-interface LiveStreamMetadataCardProps {
-  liveStreamMetaData: LiveMetadata;
-}
-
-const LiveStreamMetadataCard = ({
-  liveStreamMetaData,
-}: LiveStreamMetadataCardProps) => {
+const LiveStreamMetadataCard = () => {
+  const { liveMetadata } = usePollAppStore();
   return (
     <Card className='flex flex-col items-center justify-center'>
       <CardContent className='flex flex-col items-center justify-center gap-8'>
         <Image
-          src={liveStreamMetaData.thumbnail}
+          src={liveMetadata?.thumbnail ?? ''}
           alt='metadata-yt-thumbnail'
           width={320}
           height={180}
         />
         <Label className='px-10'>
-          {liveStreamMetaData.title ?? 'Live stream title not found.'}
+          {liveMetadata?.title ?? 'Live stream title not found.'}
         </Label>
       </CardContent>
     </Card>

diff --git a/components/poll-app.tsx b/components/poll-app.tsx
@@ -1,14 +1,15 @@
 'use client';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useToast } from '@/components/ui/use-toast';
 
 import { AuthForm } from './auth-form';
 import PollCardGroup from './poll-cardgroup';
+import { usePollAppStore } from '@/stores/store';
 
 const PollApp = () => {
   const [isAuth, setIsAuth] = useState(false);
   const { toast } = useToast();
-  const [currentPassphrase, setCurrentPassphrase] = useState<string>('');
+  const { setCurrentPassphrase } = usePollAppStore();
   const handleAuth = useCallback(
     async (passphrase: string) => {
       const result = await fetch('/api/auth', {
@@ -24,16 +25,12 @@ const PollApp = () => {
         setIsAuth(false);
       }
     },
-    [toast]
+    [setCurrentPassphrase, toast]
   );
 
   return (
     <div className='z-40 flex min-h-[calc(100dvh-10rem)] flex-col items-center justify-center'>
-      {!isAuth ? (
-        <AuthForm onSubmit={handleAuth} />
-      ) : (
-        <PollCardGroup currentPassphrase={currentPassphrase} />
-      )}
+      {!isAuth ? <AuthForm onSubmit={handleAuth} /> : <PollCardGroup />}
     </div>
   );
 };