fix(ui): table format issue

sawaYch · Mar 12, 2024 · 32a8d3e · 32a8d3e
1 parent f5faf36
commit 32a8d3e
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 25 deletions.
diff --git a/components/poll-process-result-section.tsx b/components/poll-process-result-section.tsx
@@ -107,7 +107,7 @@ const PollProcessResultSection = () => {
         <CardContent className='flex flex-col gap-2'>
           <BrowserView>
             <div className='flex gap-8'>
-              <PollSummarySubCard pollSummary={pollResultSummary} />
+              <PollSummarySubCard />
               <div className={cn('w-full h-full mt-4')}>
                 <Bar
                   ref={barChartRef}

diff --git a/components/poll-summary-subcard.tsx b/components/poll-summary-subcard.tsx
@@ -12,15 +12,11 @@ import { usePollAppStore } from '@/stores/store';
 import { useEffect, useMemo, useRef } from 'react';
 import { isMobile } from 'react-device-detect';
 
-interface PollSummarySubCardProps {
-  pollSummary: number[];
-}
-
-const PollSummarySubCard = ({ pollSummary }: PollSummarySubCardProps) => {
-  const { pollAppState } = usePollAppStore();
+const PollSummarySubCard = () => {
+  const { pollAppState, numOfOptions, pollResultSummary } = usePollAppStore();
   const pollSummaryTop = useMemo(() => {
-    return pollSummary.indexOf(Math.max(...pollSummary));
-  }, [pollSummary]);
+    return pollResultSummary.indexOf(Math.max(...pollResultSummary));
+  }, [pollResultSummary]);
 
   const cardRef = useRef<HTMLDivElement>(null);
 
@@ -50,21 +46,41 @@ const PollSummarySubCard = ({ pollSummary }: PollSummarySubCardProps) => {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {pollSummary.map((value, index) => {
-              return (
-                <TableRow key={index + 1}>
-                  <TableCell className='p-0 m-0 text-center'>
-                    {pollSummaryTop === index && pollAppState === 'stop'
-                      ? '👑'
-                      : ' '}
-                  </TableCell>
-                  <TableCell className='p-0 text-center'>{index + 1}</TableCell>
-                  <TableCell className='p-0  text-center'>
-                    {value ?? 0}
-                  </TableCell>
-                </TableRow>
-              );
-            })}
+            {pollResultSummary.length === 0
+              ? new Array(numOfOptions).fill(0).map((value, index) => {
+                  return (
+                    <TableRow key={index + 1}>
+                      <TableCell className='p-0 m-0 text-center'>
+                        {pollSummaryTop === index && pollAppState === 'stop'
+                          ? '👑'
+                          : ' '}
+                      </TableCell>
+                      <TableCell className='p-0 text-center'>
+                        {index + 1}
+                      </TableCell>
+                      <TableCell className='p-0  text-center'>
+                        {value ?? 0}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })
+              : pollResultSummary.map((value, index) => {
+                  return (
+                    <TableRow key={index + 1}>
+                      <TableCell className='p-0 m-0 text-center'>
+                        {pollSummaryTop === index && pollAppState === 'stop'
+                          ? '👑'
+                          : ' '}
+                      </TableCell>
+                      <TableCell className='p-0 text-center'>
+                        {index + 1}
+                      </TableCell>
+                      <TableCell className='p-0  text-center'>
+                        {value ?? 0}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
           </TableBody>
         </Table>
       </ScrollArea>

diff --git a/components/ui/table.tsx b/components/ui/table.tsx
@@ -58,7 +58,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+      '!border-[#e11d48]/40 !border-b-[1px] !filter-none transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
       className
     )}
     {...props}