feat: use zustand

app/layout.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from '@/components/theme-provider';
 import { Toaster } from '@/components/ui/toaster';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
+import StoreProvider from '@/stores/store-provider';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -29,9 +30,11 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <Background />
-          <Toaster />
-          <TooltipProvider>{children}</TooltipProvider>
+          <StoreProvider>
+            <Background />
+            <Toaster />
+            <TooltipProvider>{children}</TooltipProvider>
+          </StoreProvider>
         </ThemeProvider>
       </body>
     </html>

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>

components/poll-app-core.tsx

@@ -0,0 +1,100 @@
+import { useCallback, useState } from 'react';
+import { vidParser } from '@/lib/vid-parser';
+import { useLiveChat } from '@/hooks/use-livechat';
+import { useToast } from '@/components/ui/use-toast';
+import LiveStreamMetadataCard from '@/components/livestream-metadata-card';
+import UrlInput from '@/components/url-input';
+import { usePollAppStore } from '@/stores/store';
+import PrepareSection from '@/components/prepare-section';
+import PollProcessResultSection from '@/components/poll-process-result-section';
+
+const PollAppCore = () => {
+  const { toast } = useToast();
+  const {
+    isLoading,
+    setIsLoading,
+    isReady,
+    setIsReady,
+    setLiveChatId,
+    setLiveMetaData,
+    changePollAppState,
+    currentPassphrase,
+  } = usePollAppStore();
+
+  const [urlInputValue, setUrlInputValue] = useState('');
+
+  const { fetchLiveStreamingDetails } = useLiveChat(currentPassphrase);
+
+  const handleTerminateProcess = useCallback(async () => {
+    setIsReady(false);
+    changePollAppState('prepare');
+  }, [changePollAppState, setIsReady]);
+
+  const handleUrlSubmit = useCallback(async () => {
+    // start / stop
+    if (isReady) {
+      await handleTerminateProcess();
+      return;
+    }
+    setIsLoading(true);
+    // check live url vid
+    const vid = vidParser(urlInputValue);
+    if (vid == null || vid.length === 0) {
+      toast({
+        title: '🚨 Oops...',
+        description: 'Invalid youtube live url format',
+      });
+      setIsLoading(false);
+      return;
+    }
+
+    // check vid is correct
+    const result = await fetchLiveStreamingDetails(vid);
+    if (!result.success) {
+      setIsLoading(false);
+      toast({ title: '🚨 Oops...', description: result.message });
+      return;
+    }
+
+    setLiveChatId(result.activeLiveChatId);
+    setLiveMetaData({ title: result.title, thumbnail: result.thumbnail });
+
+    // all green, reset any error flag
+    setIsReady(true);
+    setIsLoading(false);
+  }, [
+    fetchLiveStreamingDetails,
+    handleTerminateProcess,
+    isReady,
+    setIsLoading,
+    setIsReady,
+    setLiveChatId,
+    setLiveMetaData,
+    toast,
+    urlInputValue,
+  ]);
+
+  return (
+    <div className='flex w-dvw flex-col gap-2 p-20'>
+      <UrlInput
+        isLoading={isLoading}
+        isReady={isReady}
+        handleUrlSubmit={handleUrlSubmit}
+        onChange={(event) => {
+          setUrlInputValue(event.target.value);
+        }}
+      />
+      {isReady && (
+        <>
+          <div className='flex flex-row space-x-2'>
+            <LiveStreamMetadataCard />
+            <PrepareSection />
+          </div>
+          <PollProcessResultSection />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default PollAppCore;

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 PollAppCore from './poll-app-core';
+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} /> : <PollAppCore />}
     </div>
   );
 };