Add navigation via recommendations

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

src/components/Card.tsx

@@ -41,6 +41,7 @@ const Card = ({
           src={getTwicpicsUrl('tmdb', poster_path)}
           ratio={MOVIE_POSTER_ASPECT_RATIO}
           className="w-full h-full object-cover"
+          alt={title}
         />
       </div>
       <Title variant="cardTitle" className="text-wrap">

src/components/Dialog/DialogContent.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import styled, { css } from 'styled-components'
 import { Dialog as ReakitDialog } from 'reakit/Dialog'
 import get from 'utils/get'
@@ -34,6 +35,10 @@ const Dialog = styled(ReakitDialog)`
   }
 `
 
-const DialogContent = props => <Dialog $animated={props.animated} {...props} />
+const DialogContent = React.forwardRef((props, ref) => (
+  <Dialog $animated={props.animated} ref={ref} {...props} />
+))
+
+DialogContent.displayName = 'DialogContent'
 
 export default DialogContent

src/components/MovieContent/Desktop/DesktopMovieInfos.js

@@ -1,12 +1,14 @@
 import React from 'react'
 import styled from 'styled-components'
+import { TwicImg } from '@twicpics/components/react'
 import Typography from 'components/Typography'
 import Rating from 'components/Rating'
-import Poster from 'components/Poster'
 import Crews from '../Crews'
 import Socials from '../Socials'
 import BackdropImage from '../BackdropImage'
 import Tags from '../Tags'
+import { getTwicpicsUrl } from '~/utils'
+import { MOVIE_POSTER_ASPECT_RATIO } from '~/lib/constants'
 
 const Descriptions = styled.div`
   margin-left: 40px;
@@ -54,10 +56,11 @@ const DesktopMovieInfos = ({ movie }) => {
       imageUrl={`https://image.tmdb.org/t/p/original/${movie.backdrop_path}`}
     >
       <Infos>
-        <Poster
-          src={poster_path}
+        <TwicImg
+          src={getTwicpicsUrl('tmdb', poster_path)}
           alt={movie.title}
-          style={{ height: 360, flexShrink: 0 }}
+          ratio={MOVIE_POSTER_ASPECT_RATIO}
+          className="object-cover w-[240px] h-[360px] shrink-0 rounded-lg"
         />
         <Descriptions>
           <Typography variant="h1" style={{ textTransform: 'uppercase' }}>

src/components/MovieContent/Mobile/MobileLayout.tsx

@@ -1,17 +1,19 @@
 import React, { useMemo } from 'react'
 import { useTranslation } from 'next-i18next'
 import styled from 'styled-components'
+import { TwicImg } from '@twicpics/components/react'
 import { useTabState } from 'reakit/Tab'
 import { Tab, TabList, TabPanel } from 'components/Tab'
 import Typography from 'components/Typography'
 import Providers from '../Providers'
 import MobileMovieInfos from './MobileMovieInfos'
 import Cast from '../Cast'
 import BackdropImage from '../BackdropImage'
-import Poster from 'components/Poster'
 import SectionHeading from './SectionHeading'
 import Recommendations from '../Recommendations'
 import { useSimilarMovies } from '~/hooks/useSimilarMovies'
+import { getTwicpicsUrl } from '~/utils'
+import { MOVIE_POSTER_ASPECT_RATIO } from '~/lib/constants'
 
 const StyledTabList = styled(TabList)`
   display: flex;
@@ -27,10 +29,11 @@ const Head = ({ tab, movie }) => {
     <BackdropImage
       imageUrl={`https://image.tmdb.org/t/p/w780/${backdrop_path}`}
     >
-      <Poster
-        src={poster_path}
+      <TwicImg
+        src={getTwicpicsUrl('tmdb', poster_path)}
         alt={movie.title}
-        style={{ height: 360, flexShrink: 0, marginTop: 120 }}
+        ratio={MOVIE_POSTER_ASPECT_RATIO}
+        className="object-cover w-[240px] h-[360px] shrink-0 rounded-lg mt-32"
       />
       <StyledTabList {...tab} aria-label="movie tabs">
         <Tab {...tab} id="overview">

src/components/MovieContent/Recommendations.tsx

@@ -1,5 +1,7 @@
 import clsx from 'clsx'
+import React from 'react'
 import Card from '~/components/Card'
+import { MovieContext } from '~/context/MovieContext'
 import type { MovieData } from '~/types'
 
 interface RecommendationsProps {
@@ -11,6 +13,7 @@ export default function Recommendations({
   movies,
   className,
 }: RecommendationsProps) {
+  const { setCurrentMovie } = React.useContext(MovieContext)
   return (
     <div className={clsx('', className)}>
       {movies.length === 0 ? (
@@ -20,15 +23,20 @@ export default function Recommendations({
       ) : (
         <div className="flex flex-wrap gap-4">
           {movies.map(movie => (
-            <Card
+            <button
               key={movie.id}
-              id={movie.id}
-              title={movie.title}
-              poster_path={movie.poster_path}
-              release_date={movie.release_date}
-              vote_average={movie.vote_average}
-              className="w-32"
-            />
+              onClick={() => setCurrentMovie(movie)}
+              className="text-left"
+            >
+              <Card
+                id={movie.id}
+                title={movie.title}
+                poster_path={movie.poster_path}
+                release_date={movie.release_date}
+                vote_average={movie.vote_average}
+                className="w-32"
+              />
+            </button>
           ))}
         </div>
       )}

src/components/MoviesList/MovieModalContent.js

@@ -1,10 +1,11 @@
-import React from 'react'
+import React, { useEffect, useContext, useRef } from 'react'
 import styled from 'styled-components'
 import { DialogBackdrop, DialogContent } from 'components/Dialog'
 import { Cross } from 'components/icons'
 import IconButton from 'components/IconButton'
 import MovieContent from 'components/MovieContent'
 import get from 'utils/get'
+import { MovieContext } from '~/context/MovieContext'
 
 const Close = styled(IconButton)`
   position: absolute;
@@ -18,13 +19,23 @@ const Close = styled(IconButton)`
 `
 
 const MovieModalContent = ({ dialog, hit }) => {
+  const { currentMovie } = useContext(MovieContext)
+  const contentRef = useRef(null)
+
+  useEffect(() => {
+    if (currentMovie && contentRef.current) {
+      contentRef.current.scrollTo({ top: 0, behavior: 'smooth' })
+    }
+  }, [currentMovie])
+
   return (
     <DialogBackdrop {...dialog}>
       <Close rounded onClick={() => dialog.hide()}>
         <Cross width={15} />
       </Close>
       <DialogContent
         {...dialog}
+        ref={contentRef}
         tabIndex={0}
         aria-label={hit?.title || 'Movie infos'}
         data-cy="movie-detail"

src/components/MoviesList/index.js

@@ -10,6 +10,7 @@ import { useDialogState } from 'reakit/Dialog'
 import MovieModalContent from './MovieModalContent'
 import Card from 'components/Card'
 import { DialogDisclosure } from 'components/Dialog'
+import { MovieContext, MovieContextProvider } from '~/context/MovieContext'
 
 const Hits = styled(ISHits)`
   ol {
@@ -51,7 +52,8 @@ const Disclosure = styled(DialogDisclosure)`
 
 const MoviesList = () => {
   const { t } = useTranslation('common')
-  const [currentMovie, setCurrentMovie] = React.useState()
+  const [movie, setMovie] = React.useState(null)
+  const { currentMovie } = React.useContext(MovieContext)
   const dialog = useDialogState()
   const cardsRef = React.useRef([])
 
@@ -65,23 +67,27 @@ const MoviesList = () => {
   }, [dialog.visible])
 
   return (
-    <Wrapper as="section">
-      <Infos title={t('movies')} />
-      <Hits
-        hitComponent={({ hit }) => (
-          <Disclosure
-            ref={ref => (cardsRef.current[hit.objectID] = ref)}
-            {...dialog}
-            onClick={() => {
-              setCurrentMovie(hit)
-            }}
-          >
-            <Card {...hit} />
-          </Disclosure>
-        )}
-      />
-      <MovieModalContent hit={currentMovie} dialog={dialog} />
-    </Wrapper>
+    <MovieContextProvider
+      value={{ currentMovie: movie, setCurrentMovie: setMovie }}
+    >
+      <Wrapper as="section">
+        <Infos title={t('movies')} />
+        <Hits
+          hitComponent={({ hit }) => (
+            <Disclosure
+              ref={ref => (cardsRef.current[hit.objectID] = ref)}
+              {...dialog}
+              onClick={() => {
+                setMovie(hit)
+              }}
+            >
+              <Card {...hit} />
+            </Disclosure>
+          )}
+        />
+        <MovieModalContent hit={movie} dialog={dialog} />
+      </Wrapper>
+    </MovieContextProvider>
   )
 }
 

src/context/MovieContext.ts

@@ -0,0 +1,18 @@
+import { createContext, Dispatch, SetStateAction } from 'react'
+import { MovieData as Movie } from '~/types'
+
+export interface MovieContextProps {
+  currentMovie: Movie | null
+  setCurrentMovie: Dispatch<SetStateAction<Movie | null>>
+}
+
+export const movieContextDefaultValue: MovieContextProps = {
+  currentMovie: null,
+  setCurrentMovie: () => {},
+}
+
+export const MovieContext = createContext<MovieContextProps>(
+  movieContextDefaultValue
+)
+
+export const MovieContextProvider = MovieContext.Provider