Skip to content

Commit

Permalink
Base
Browse files Browse the repository at this point in the history
  • Loading branch information
trybick committed Jun 5, 2023
1 parent 0fe1ea8 commit 877f3c4
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 59 deletions.
94 changes: 37 additions & 57 deletions front/src/components/following/FollowingList.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};

Expand Down
2 changes: 1 addition & 1 deletion front/src/components/following/Show.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
26 changes: 26 additions & 0 deletions front/src/components/following/SubSectionOfShows.tsx
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 3 additions & 1 deletion front/src/pages/FollowingPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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>
Expand Down

0 comments on commit 877f3c4

Please sign in to comment.