detail page design update

HeesuKim0203 · Dec 20, 2023 · d83701f · d83701f
1 parent 098f29d
commit d83701f
Show file tree

Hide file tree

Showing 9 changed files with 175 additions and 165 deletions.
diff --git a/src/Components/Loader.tsx b/src/Components/Loader.tsx
@@ -5,11 +5,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' ;
 import { faSpinner } from '@fortawesome/free-solid-svg-icons' ;
 
 const Container = styled.div`
-    height : 100vh ;
-    width : 100vw ;
+    height : 95vh ;
+    width : 95vw ;
     display : flex ;
     justify-content : center ;
-    margin-top : 40px ;
+    padding-top : 50px ;
 `;
 
 export default () => (

diff --git a/src/Components/Poster.tsx b/src/Components/Poster.tsx
@@ -64,27 +64,21 @@ type PosterProps = {
     rating : number
     year : string
     isMovie? : boolean
-    idList : any
+    idList : number[]
 }
 
 const Poster = ({ id, imageUrl, title, rating, year, isMovie = false, idList } : PosterProps) => {
-
-    const linkTo = {
-        pathname : isMovie ? `/movie/${id}` : `/show/${id}`,
-        state : { idList }
-    } ;
-
-    console.log(linkTo)
-
     return (
-        <Link to = { linkTo } >
+        <Link to = {{
+            pathname : isMovie ? `/movie/${id}` : `/show/${id}`
+        }} state = { idList } >
             <Container>
                 <ImageContainer>
                     <Image bgUrl={imageUrl ? 
                         `https://image.tmdb.org/t/p/w300${imageUrl}` : require("../assets/noPoster.jpg")}/>
                     <Rating>
                         <FontAwesomeIcon icon={faStar} color="#ffee58" />
-                        &nbsp; {rating} / 10
+                        &nbsp; { `${rating.toFixed(1)} / 10` }
                     </Rating>
                 </ImageContainer>
                 <Title>{title.length > 18 ? `${title.substring(0, 18)}...` : title}</Title>

diff --git a/src/Routes/Detail/DetailContainer.tsx b/src/Routes/Detail/DetailContainer.tsx
@@ -1,36 +1,29 @@
 import React, { Component, memo } from 'react' ;
 import DetailPresenter from './DetailPresenter' ;
-import { MoviesApi, TVApi } from '../../api';
-import { useLocation } from 'react-router';
+import { MoviesApi, TVApi } from '../../api' ;
+import { NavigateFunction, useLocation, useNavigate } from 'react-router' ;
 
 type DetailContaninerProps = {
     location : {
         pathname : string
-        state : {
-            idList : number[]
-        }
+        state : number[]
     }
+    navigate : NavigateFunction
 }
 
 type State = {
     loading : boolean
-    error : string | null
+    error : string
     isMovie : boolean
     slideLoadData : any
 }
 
 export default memo(() => {
 
-    const locationData = useLocation() ;
-
-    console.log(locationData) ;
-
-    const location = {
-        pathname : locationData.pathname,
-        state : locationData.state
-    } ;
+    const location = useLocation() ;
+    const navigate = useNavigate() ;
 
-    return <DetailContaniner location = { location } />
+    return <DetailContaniner location = { location } navigate = { navigate } />
 })
 
 
@@ -44,15 +37,15 @@ class DetailContaniner extends Component<DetailContaninerProps, {}>  {
         const {
             location : { 
                 pathname,  
-                state : { idList }
+                state : idList
             },
         } = props ;
 
         this.idList = idList ;
 
         this.state = {
             loading : true,
-            error : null, 
+            error : '', 
             isMovie : pathname.includes('/movie/'),
             slideLoadData : [],
         } ;
@@ -106,24 +99,24 @@ class DetailContaniner extends Component<DetailContaninerProps, {}>  {
         const { isMovie, slideLoadData } = this.state ;
         const { idList } = this ;
         const { 
-            match : {
-                params : { id }
+            location : {
+                pathname
             },
-            history : { push }
-        } = this.props as any ;
+            navigate
+        } = this.props ;
 
+        const parseId = parseInt(pathname.split("/")[2]) ;
 
-        const parseId = parseInt(id) ;
-        if(isNaN(parseId))
-            return push("/") ;
+        if(isNaN(parseId)) return navigate("/") ;
 
         try {
+
             if(isMovie) {
 
                 const {
                     data 
                 } = await MoviesApi.movieDetail(parseId) ;
-                
+
                 const { 
                     data : { 
                         results
@@ -134,18 +127,17 @@ class DetailContaniner extends Component<DetailContaninerProps, {}>  {
                     result : data,
                     resultRent : results
                 }
-
-                this.setState({
-                    slideLoadData : [ ...slideLoadData, dataObj ],
-                }) ;
 
                 const indexId = idList.findIndex((idData : number) => idData === Number(parseId))
                 idList.splice(indexId, 1) ;
 
                 for(let i = 0 ; i < idList.length ; i++) {
                     this.getDataNotAsyncMovie(idList[i]) ;
                 }
-
+
+                this.setState({
+                    slideLoadData : [ ...slideLoadData, dataObj ],
+                }) ;
 
             }else {
 
@@ -163,20 +155,20 @@ class DetailContaniner extends Component<DetailContaninerProps, {}>  {
                     result : data,
                     resultRent : results
                 }
-
-                this.setState({
-                    slideLoadData : [ ...slideLoadData, dataObj ],
-                }) ;
 
                 const indexId = idList.findIndex(idData => idData === Number(parseId))
                 idList.splice(indexId, 1) ;
 
                 for(let i = 0 ; i < idList.length ; i++) {
-                     this.getDataNotAsyncTV(idList[i]) ;
+                    this.getDataNotAsyncTV(idList[i]) ;
                 }
+
+                this.setState({
+                    slideLoadData : [ ...slideLoadData, dataObj ],
+                }) ;
             }
 
-        }catch {
+        }catch(err) {
             this.setState({
                 error : "Can't find anything.",
             }) ;
@@ -199,7 +191,6 @@ class DetailContaniner extends Component<DetailContaninerProps, {}>  {
 
     render() {
         const { loading, error } = this.state ;
-        const { idList } = this ;
 
         return (
             <DetailPresenter