Add tabs to following page (#132)

trybick · Jun 5, 2023 · c5522a7 · c5522a7
1 parent 0fe1ea8
commit c5522a7
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 59 deletions.
diff --git a/front/src/components/following/FollowingList.tsx b/front/src/components/following/FollowingList.tsx
@@ -1,73 +1,53 @@
 import { useSelector } from 'react-redux';
-import { Flex, Grid, Heading } from '@chakra-ui/react';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
+import { useIsMobile } from 'hooks/useIsMobile';
 import {
   selectActiveSeasonShows,
+  selectBasicShowInfoForFollowedShows,
   selectEndedShows,
   selectInProductionShows,
 } from 'store/tv/selectors';
-import Show from './Show';
+import SubSectionOfShows from './SubSectionOfShows';
 
 const FollowingList = () => {
+  const isMobile = useIsMobile();
+  const allFollowedShows = useSelector(selectBasicShowInfoForFollowedShows);
   const activeSeasonShows = useSelector(selectActiveSeasonShows);
   const inProductionShows = useSelector(selectInProductionShows);
   const endedShows = useSelector(selectEndedShows);
 
   return (
-    <Flex direction="column" mt="28px">
-      {activeSeasonShows?.length ? (
-        <>
-          <Heading as="h4" fontSize="23px" mb="20px" textAlign="center">
-            Currently Airing
-          </Heading>
-          <Grid
-            gap="30px 22px"
-            gridTemplateColumns="repeat(auto-fit, 155px)"
-            justifyContent="center"
-            mb="38px"
-          >
-            {activeSeasonShows.map(show => (
-              <Show key={show.id} show={show} />
-            ))}
-          </Grid>
-        </>
-      ) : null}
-
-      {inProductionShows?.length ? (
-        <>
-          <Heading as="h4" fontSize="23px" mb="20px" textAlign="center">
-            In Production
-          </Heading>
-          <Grid
-            gap="30px 22px"
-            gridTemplateColumns="repeat(auto-fit, 155px)"
-            justifyContent="center"
-            mb="38px"
-          >
-            {inProductionShows.map(show => (
-              <Show key={show.id} show={show} />
-            ))}
-          </Grid>
-        </>
-      ) : null}
-
-      {endedShows?.length ? (
-        <>
-          <Heading as="h4" fontSize="23px" mb="20px" textAlign="center">
-            Ended
-          </Heading>
-          <Grid
-            gap="30px 22px"
-            gridTemplateColumns="repeat(auto-fit, 155px)"
-            justifyContent="center"
-            mb="38px"
-          >
-            {endedShows.map(show => (
-              <Show key={show.id} show={show} />
-            ))}
-          </Grid>
-        </>
-      ) : null}
-    </Flex>
+    <Tabs
+      align="center"
+      mt={isMobile ? '20px' : '32px'}
+      px={isMobile ? '10px' : 'unset'}
+      variant={isMobile ? 'enclosed' : 'solid-rounded'}
+    >
+      <TabList mb="18px">
+        <Tab mr="4px">All Shows</Tab>
+        <Tab isDisabled={!activeSeasonShows.length} mr="4px">
+          Airing Now
+        </Tab>
+        <Tab isDisabled={!inProductionShows.length} mr="4px">
+          In Production
+        </Tab>
+        <Tab isDisabled={!endedShows.length}>Ended</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          <SubSectionOfShows isMobile={isMobile} shows={allFollowedShows} />
+        </TabPanel>
+        <TabPanel>
+          <SubSectionOfShows isMobile={isMobile} shows={activeSeasonShows} />
+        </TabPanel>
+        <TabPanel>
+          <SubSectionOfShows isMobile={isMobile} shows={inProductionShows} />
+        </TabPanel>
+        <TabPanel>
+          <SubSectionOfShows isMobile={isMobile} shows={endedShows} />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
   );
 };
 

diff --git a/front/src/components/following/Show.tsx b/front/src/components/following/Show.tsx
@@ -32,7 +32,7 @@ const Show = (props: Props) => {
         />
       </Link>
       <Flex direction="column" p="10px">
-        <Text fontSize="15px" fontWeight="700" noOfLines={1} textAlign="center">
+        <Text fontSize="16px" fontWeight="500" noOfLines={1}>
           <Link as={RouterLink} to={`${ROUTES.SHOW}/${id}`}>
             {name}
           </Link>

diff --git a/front/src/components/following/SubSectionOfShows.tsx b/front/src/components/following/SubSectionOfShows.tsx
@@ -0,0 +1,26 @@
+import { Grid } from '@chakra-ui/react';
+import { BasicShowInfo } from 'types/external';
+import Show from './Show';
+
+type Props = {
+  shows: BasicShowInfo[];
+  isMobile: boolean;
+};
+
+const SubSectionOfShows = (props: Props) => {
+  const { shows, isMobile } = props;
+
+  return (
+    <Grid
+      gap={isMobile ? '20px' : '40px 44px'}
+      gridTemplateColumns="repeat(auto-fill, minmax(150px, 1fr))"
+      justifyContent="center"
+    >
+      {shows.map(show => (
+        <Show key={show.id} show={show} />
+      ))}
+    </Grid>
+  );
+};
+
+export default SubSectionOfShows;
diff --git a/front/src/pages/FollowingPage.tsx b/front/src/pages/FollowingPage.tsx
@@ -5,10 +5,12 @@ import { Box } from '@chakra-ui/react';
 import { useAppDispatch } from 'store';
 import { getBasicShowInfoForFollowedShows } from 'store/tv/actions';
 import { selectFollowedShows } from 'store/user/selectors';
+import { useIsMobile } from 'hooks/useIsMobile';
 import FollowingList from 'components/following/FollowingList';
 import NoFollowedShowsMessage from 'components/following/NoFollowedShowsMessage';
 
 const FollowingPage = () => {
+  const isMobile = useIsMobile();
   const dispatch = useAppDispatch();
   const followedShows = useSelector(selectFollowedShows);
 
@@ -17,7 +19,7 @@ const FollowingPage = () => {
   }, [dispatch, followedShows]);
 
   return (
-    <Box m="0 auto 30px" maxW="1170px" w="90%">
+    <Box m="0 auto 30px" maxW="1170px" w={isMobile ? 'unset' : '90%'}>
       <Helmet title="Following | TV Minder" />
       {followedShows.length ? <FollowingList /> : <NoFollowedShowsMessage />}
     </Box>