feat: create show page (#27)

* Remove FluidPageWrapper.tsx and Wide cards

package.json

@@ -34,6 +34,7 @@
     "react-hook-form": "^7.28.1",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
+    "slugify": "^1.6.5",
     "typescript": "^4.6.2",
     "yup": "^0.32.11"
   },

schema.graphql

@@ -20,11 +20,34 @@ type Episode {
   wideImage: String
 }
 
+type FullShow {
+  description: String!
+  details: ShowDetails!
+  externalId: Int!
+  firstAirDate: DateTime!
+  genres: [Genre!]!
+  name: String!
+  originCountry: String!
+  rating: Int!
+  status: Status!
+  tallImage: String!
+  wideImage: String!
+}
+
+input FullShowInput {
+  externalId: Int!
+}
+
 type Genre {
   externalId: Int!
   name: String!
 }
 
+input GetSeasonEpisodesInput {
+  seasonNumber: Int!
+  showId: Int!
+}
+
 input JoinWithGoogleInput {
   token: String!
 }
@@ -41,8 +64,11 @@ type Mutation {
 type PartialShow {
   description: String!
   externalId: Int!
+  firstAirDate: DateTime!
   genres: [Genre!]!
   name: String!
+  originCountry: String!
+  rating: Int!
   status: Status!
   tallImage: String!
   wideImage: String!
@@ -55,7 +81,9 @@ type Preference {
 type Query {
   allUsers: User!
   discoverShows(input: DiscoverShowsInput!): [PartialShow!]!
+  fullShow(input: FullShowInput!): FullShow!
   getPreferences: Preference
+  getSeasonEpisodes(input: GetSeasonEpisodesInput!): [Episode!]!
   getWatchlist: [Watchlist!]!
   listGenres: [Genre!]
   listUpNext: [Episode!]!
@@ -64,12 +92,21 @@ type Query {
 }
 
 type Season {
+  airDate: DateTime!
   description: String
+  episodeCount: String!
   name: String!
   number: Int!
   tallImage: String!
 }
 
+type ShowDetails {
+  episodeRuntime: Int!
+  isInProduction: Boolean!
+  seasons: [Season!]!
+  tagline: String
+}
+
 enum Status {
   InWatchlist
   None

src/components/Section.tsx

@@ -0,0 +1,42 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { Box, Divider, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+const StyledWrapper = styled(Box)`
+  width: 100%;
+  margin-block: ${({ theme }) => theme.spacing(2)};
+`;
+
+interface Props {
+  title: ReactNode;
+  icon?: ReactNode;
+  divider?: boolean;
+}
+
+const Section = ({
+  title,
+  icon,
+  divider,
+  children,
+}: PropsWithChildren<Props>) => (
+  <StyledWrapper>
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      {icon && (
+        <Box
+          sx={{
+            display: 'flex',
+            mr: 0.5,
+            color: ({ palette }) => palette.primary.main,
+          }}
+        >
+          {icon}
+        </Box>
+      )}
+      <Typography variant="h5">{title}</Typography>
+    </Box>
+    {divider && <Divider sx={{ my: 1 }} />}
+    {children}
+  </StyledWrapper>
+);
+
+export default Section;

src/features/home/components/LoginAlert.tsx

@@ -1,12 +1,12 @@
 import { Alert, Link, Typography } from '@mui/material';
-import { RoutePath } from '../../router/constants';
+import { StaticRoute } from '../../router/constants';
 
 const LoginAlert = () => (
   <Alert icon={false} severity="warning">
-    <Typography variant="body1" sx={{ display: 'inline-block' }}>
+    <Typography variant="body1">
       You're browsing anonyomously. You can{' '}
-      <Link href={RoutePath.Login}>login</Link> or{' '}
-      <Link href={RoutePath.Register}>register</Link> to for the full
+      <Link href={StaticRoute.Login}>login</Link> or{' '}
+      <Link href={StaticRoute.Register}>register</Link> to for the full
       experience.
     </Typography>
   </Alert>

src/features/home/features/upcoming/components/UpcomingEpisodesCollection.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Box, Typography } from '@mui/material';
 import { DateTime } from 'luxon';
-import TallCardCollection from '../../../../shows/components/base/TallCardCollection';
+import TallCardCollection from '../../../../shows/components/card/TallCardCollection';
 import TallEpisodeCardPlaceholder from '../../../../shows/features/episode/components/TallEpisodeCardPlaceholder';
 import TallEpisodeCard from '../../../../shows/features/episode/components/TallEpisodeCard';
-import { EpisodeType } from '../../../../shows/features/episode/types';
+import { EpisodeWithShowType } from '../../../../shows/features/episode/types';
 
 interface Props {
   loading: boolean;
-  episodes: Array<EpisodeType>;
+  episodes: Array<EpisodeWithShowType>;
 }
 
 const UpcomingEpisodesCollection = ({ episodes, loading }: Props) => (

src/features/home/features/upcoming/components/UpcomingSection.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
-import Section from '../../../components/Section';
+import Section from '../../../../../components/Section';
 import { UpcomingContext } from '../contexts/UpcomingContext';
 import UpcomingEpisodesCollection from './UpcomingEpisodesCollection';
 

src/features/home/features/upcoming/contexts/UpcomingContext.tsx

@@ -8,10 +8,10 @@ import React, {
 import { useListUpcomingLazyQuery } from '../../../../../generated/graphql';
 import { UserContext } from '../../../../user/contexts/UserContext';
 import { UserState } from '../../../../user/constants';
-import { EpisodeType } from '../../../../shows/features/episode/types';
+import { EpisodeWithShowType } from '../../../../shows/features/episode/types';
 
 interface ContextType {
-  episodes: EpisodeType[];
+  episodes: EpisodeWithShowType[];
   loading: boolean;
 }
 
@@ -26,7 +26,7 @@ const UpcomingContext = createContext<ContextType>({
 const UpcomingProvider = ({ children }: Props) => {
   const { userState } = useContext(UserContext);
   const [fetchUpcomingEpisodes, { loading }] = useListUpcomingLazyQuery();
-  const [episodes, setEpisodes] = useState<EpisodeType[]>([]);
+  const [episodes, setEpisodes] = useState<EpisodeWithShowType[]>([]);
 
   useEffect(() => {
     if (userState !== UserState.LoggedIn) {

src/features/home/features/upcoming/queries.ts

@@ -3,7 +3,7 @@ import { gql } from '@apollo/client';
 export const QUERY_LIST_UPCOMING_NEXT = gql`
   query ListUpcoming {
     listUpcoming {
-      ...Episode
+      ...EpisodeWithShow
     }
   }
 `;

src/features/home/features/upnext/components/UpNextSection.tsx

@@ -3,8 +3,8 @@ import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import { Alert, AlertTitle } from '@mui/material';
 import TallEpisodeCollection from '../../../../shows/features/episode/components/TallEpisodeCollection';
 import { UpNextContext } from '../contexts/UpNextContext';
-import UpsertEpisodeAction from '../../../../shows/features/episode/components/UpsertEpisodeAction';
-import Section from '../../../components/Section';
+import Section from '../../../../../components/Section';
+import UpsertUpNextEpisodeAction from './UpsertUpNextEpisodeAction';
 
 const UpNextSection = () => {
   const { episodes, loading } = useContext(UpNextContext);
@@ -15,7 +15,7 @@ const UpNextSection = () => {
         <TallEpisodeCollection
           episodes={episodes}
           loading={loading}
-          actions={[UpsertEpisodeAction]}
+          actions={[UpsertUpNextEpisodeAction]}
         />
       ) : (
         <Alert severity="info" icon={false} sx={{ mt: 1 }}>

src/features/home/features/upnext/components/UpsertUpNextEpisodeAction.tsx

@@ -0,0 +1,18 @@
+import { useCallback, useContext } from 'react';
+import { UpNextContext } from '../contexts/UpNextContext';
+import UpsertEpisodeAction from '../../../../shows/features/episode/components/UpsertEpisodeAction';
+import { EpisodeActionProps } from '../../../../shows/features/episode/types';
+
+const UpsertUpNextEpisodeAction = ({
+  episodeId,
+  isWatched,
+}: EpisodeActionProps) => {
+  const { watchEpisode } = useContext(UpNextContext);
+  const onWatchEpisode = useCallback(() => {
+    watchEpisode(episodeId);
+  }, [episodeId, watchEpisode]);
+
+  return <UpsertEpisodeAction isWatched={isWatched} onClick={onWatchEpisode} />;
+};
+
+export default UpsertUpNextEpisodeAction;

src/features/home/features/upnext/contexts/UpNextContext.tsx

@@ -14,10 +14,10 @@ import {
 } from '../../../../../generated/graphql';
 import { UserContext } from '../../../../user/contexts/UserContext';
 import { UserState } from '../../../../user/constants';
-import { EpisodeType } from '../../../../shows/features/episode/types';
+import { EpisodeWithShowType } from '../../../../shows/features/episode/types';
 
 interface ContextType {
-  episodes: EpisodeType[];
+  episodes: EpisodeWithShowType[];
   watchEpisode: (episodeId: number) => void;
   loading: boolean;
 }
@@ -39,7 +39,7 @@ const UpNextProvider = ({ children }: Props) => {
   const { userState } = useContext(UserContext);
   const [fetchUpNextEpisodes, { loading }] = useListUpNextLazyQuery();
   const [upsertEpisode] = useUpsertEpisodeMutation();
-  const [episodes, setEpisodes] = useState<EpisodeType[]>([]);
+  const [episodes, setEpisodes] = useState<EpisodeWithShowType[]>([]);
 
   const watchEpisode = useCallback(
     async (episodeId: number) => {

src/features/home/features/upnext/queries.ts

@@ -3,7 +3,7 @@ import { gql } from '@apollo/client';
 export const QUERY_LIST_UP_NEXT = gql`
   query ListUpNext {
     listUpNext {
-      ...Episode
+      ...EpisodeWithShow
     }
   }
 `;

src/features/join/components/LoginForm.tsx

@@ -10,7 +10,7 @@ import {
 import { useForm } from 'react-hook-form';
 import * as yup from 'yup';
 import useYupValidationResolver from '../hooks/useYupValidationResolver';
-import { RoutePath } from '../../router/constants';
+import { StaticRoute } from '../../router/constants';
 
 type LoginFormInput = {
   email: string;
@@ -81,7 +81,7 @@ const LoginForm = () => {
           sx={{ color: (theme) => theme.palette.text.secondary }}
         >
           Don't have an account{' '}
-          <Link color="primary" href={RoutePath.Register}>
+          <Link color="primary" href={StaticRoute.Register}>
             Create an account
           </Link>
         </Typography>

src/features/join/components/RegisterForm.tsx

@@ -3,7 +3,7 @@ import { useForm } from 'react-hook-form';
 import * as yup from 'yup';
 import useYupValidationResolver from '../hooks/useYupValidationResolver';
 import FormRow from '../../forms/components/FormRow';
-import { RoutePath } from '../../router/constants';
+import { StaticRoute } from '../../router/constants';
 
 type LoginFormInput = {
   name: string;
@@ -80,7 +80,7 @@ const RegisterForm = () => {
           sx={{ color: (theme) => theme.palette.text.secondary }}
         >
           Already have an account?{' '}
-          <Link color="primary" href={RoutePath.Login}>
+          <Link color="primary" href={StaticRoute.Login}>
             Log in
           </Link>
         </Typography>

src/features/join/hooks/useHandleLoggedInUsers.ts

@@ -2,7 +2,7 @@ import { useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { UserContext } from '../../user/contexts/UserContext';
 import { UserState } from '../../user/constants';
-import { RoutePath } from '../../router/constants';
+import { StaticRoute } from '../../router/constants';
 
 const useHandleLoggedInUsers = () => {
   const { userState } = useContext(UserContext);
@@ -13,7 +13,7 @@ const useHandleLoggedInUsers = () => {
       return;
     }
 
-    navigate(RoutePath.Home);
+    navigate(StaticRoute.Home);
   }, [navigate, userState]);
 };