From 90ed15a06620342ece9d0dde4ff875b518c39fc2 Mon Sep 17 00:00:00 2001
From: iqbalpa <iqbalpahlevi16@gmail.com>
Date: Thu, 11 Jul 2024 08:02:17 +0700
Subject: [PATCH] refactor(detail): create smaller components

---
 src/components/backButton/backButton.tsx   | 22 ++++++++
 src/components/genres/genres.tsx           | 23 +++++++++
 src/components/rating/rating.tsx           | 18 +++++++
 src/components/yearRuntime/yearRuntime.tsx | 20 ++++++++
 src/constant/detailMovie.ts                |  2 +-
 src/modules/detailMovie/detailMovie.tsx    | 58 ++++++----------------
 6 files changed, 98 insertions(+), 45 deletions(-)
 create mode 100644 src/components/backButton/backButton.tsx
 create mode 100644 src/components/genres/genres.tsx
 create mode 100644 src/components/rating/rating.tsx
 create mode 100644 src/components/yearRuntime/yearRuntime.tsx

diff --git a/src/components/backButton/backButton.tsx b/src/components/backButton/backButton.tsx
new file mode 100644
index 0000000..5f33ddf
--- /dev/null
+++ b/src/components/backButton/backButton.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { CircleArrowLeft } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+const BackButton: React.FC = () => {
+  const router = useRouter();
+  const handleBack = () => router.push('/');
+
+  return (
+    <button
+      onClick={handleBack}
+      className="absolute left-5 top-20 z-50 flex flex-row gap-2 rounded-full bg-slate-600 bg-opacity-80 px-5 py-3 text-white duration-100 hover:scale-105 hover:cursor-pointer hover:bg-slate-800 hover:bg-opacity-95"
+    >
+      <CircleArrowLeft />
+      <p>Back</p>
+    </button>
+  );
+};
+
+export default BackButton;
diff --git a/src/components/genres/genres.tsx b/src/components/genres/genres.tsx
new file mode 100644
index 0000000..2d86bc7
--- /dev/null
+++ b/src/components/genres/genres.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Genre } from '@/constant/detailMovie';
+
+interface IGenres {
+  genres: Genre[];
+}
+
+const Genres: React.FC<IGenres> = ({ genres }) => {
+  return (
+    <div className="flex flex-row gap-2">
+      {genres.map((genre) => (
+        <div
+          key={genre.id}
+          className="rounded-full bg-slate-700 bg-opacity-80 px-4 py-2"
+        >
+          <p>{genre.name}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Genres;
diff --git a/src/components/rating/rating.tsx b/src/components/rating/rating.tsx
new file mode 100644
index 0000000..869b250
--- /dev/null
+++ b/src/components/rating/rating.tsx
@@ -0,0 +1,18 @@
+import { Star } from 'lucide-react';
+import React from 'react';
+
+const Rating: React.FC<{ rating: number }> = ({ rating }) => {
+  return (
+    <div className="ml-1 flex flex-row items-center gap-2">
+      <Star className="text-yellow-300" fill="yellow" />
+      <p className="text-sm text-slate-400">
+        <span className="text-lg font-bold text-white">
+          {rating.toFixed(1)}
+        </span>
+        /10
+      </p>
+    </div>
+  );
+};
+
+export default Rating;
diff --git a/src/components/yearRuntime/yearRuntime.tsx b/src/components/yearRuntime/yearRuntime.tsx
new file mode 100644
index 0000000..e667bd4
--- /dev/null
+++ b/src/components/yearRuntime/yearRuntime.tsx
@@ -0,0 +1,20 @@
+import { convertRuntime } from '@/utils/convertRuntime';
+import { Dot } from 'lucide-react';
+import React from 'react';
+
+interface IYearRuntime {
+  release_date: string;
+  runtime: number;
+}
+
+const YearRuntime: React.FC<IYearRuntime> = ({ release_date, runtime }) => {
+  return (
+    <div className="flex flex-row items-center gap-1">
+      <p className="ml-2 text-xl font-bold">{release_date.split('-')[0]}</p>
+      <Dot />
+      <p>{convertRuntime(runtime)}</p>
+    </div>
+  );
+};
+
+export default YearRuntime;
diff --git a/src/constant/detailMovie.ts b/src/constant/detailMovie.ts
index 2468a03..8ec543c 100644
--- a/src/constant/detailMovie.ts
+++ b/src/constant/detailMovie.ts
@@ -5,7 +5,7 @@ interface Collection {
   backdrop_path: string;
 }
 
-interface Genre {
+export interface Genre {
   id: number;
   name: string;
 }
diff --git a/src/modules/detailMovie/detailMovie.tsx b/src/modules/detailMovie/detailMovie.tsx
index b8c09fd..dc09c3d 100644
--- a/src/modules/detailMovie/detailMovie.tsx
+++ b/src/modules/detailMovie/detailMovie.tsx
@@ -6,15 +6,17 @@ import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { Skeleton } from '@/components/ui/skeleton';
 import { CircleArrowLeft, Dot, Star } from 'lucide-react';
-import { useRouter } from 'next/navigation';
 import { convertRuntime } from '@/utils/convertRuntime';
+import BackButton from '@/components/backButton/backButton';
+import Rating from '@/components/rating/rating';
+import Genres from '@/components/genres/genres';
+import YearRuntime from '@/components/yearRuntime/yearRuntime';
 
 interface IDetailMovieModule {
   id: string;
 }
 
 const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
-  const router = useRouter();
   const [movie, setMovie] = useState<DetailMovie>();
   const [isLoading, setIsLoading] = useState(true);
 
@@ -31,24 +33,16 @@ const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
     fetchMovie();
   }, [id]);
 
-  const handleBack = () => router.push('/');
-
   return (
     <div className="">
       <div className="relative h-[36rem] w-full">
-        <button
-          onClick={handleBack}
-          className="absolute left-5 top-20 z-50 flex flex-row gap-2 rounded-full bg-slate-600 bg-opacity-80 px-5 py-3 text-white duration-100 hover:scale-105 hover:cursor-pointer hover:bg-slate-800 hover:bg-opacity-95"
-        >
-          <CircleArrowLeft />
-          <p>Back</p>
-        </button>
+        <BackButton />
+
+        {/* backdrop */}
         <div className="absolute inset-0 z-20 bg-gradient-to-b from-transparent to-black"></div>
         {isLoading && (
           <Skeleton className="absolute inset-0 z-30 h-full w-full" />
         )}
-
-        {/* backdrop */}
         <Image
           src={`https://image.tmdb.org/t/p/original${movie?.backdrop_path}`}
           alt="backdrop-image"
@@ -57,6 +51,7 @@ const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
           className={`z-10 transition-opacity duration-500 ${isLoading ? 'opacity-0' : 'opacity-100'}`}
           onLoad={() => setIsLoading(false)}
         />
+
         {movie && (
           <div className="absolute bottom-0 left-32 right-52 z-30 flex flex-row rounded-lg pb-8">
             {/* poster */}
@@ -69,39 +64,14 @@ const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
             />
 
             <div className="ml-5 mt-3 flex max-h-[24rem] flex-col gap-3 overflow-hidden text-white">
-              {/* year and runtime */}
-              <div className="flex flex-row items-center gap-1">
-                <p className="ml-2 text-xl font-bold">
-                  {movie.release_date.split('-')[0]}
-                </p>
-                <Dot />
-                <p>{convertRuntime(movie.runtime)}</p>
-              </div>
-
-              {/* title, overview, genres */}
+              <YearRuntime
+                release_date={movie.release_date}
+                runtime={movie.runtime}
+              />
               <h1 className="text-3xl font-bold">{movie.title}</h1>
               <p className="overflow-y-auto">{movie.overview}</p>
-              <div className="flex flex-row gap-2">
-                {movie.genres.map((genre) => (
-                  <div
-                    key={genre.id}
-                    className="rounded-full bg-slate-700 bg-opacity-80 px-4 py-2"
-                  >
-                    <p>{genre.name}</p>
-                  </div>
-                ))}
-              </div>
-
-              {/* stars */}
-              <div className="ml-1 flex flex-row items-center gap-2">
-                <Star className="text-yellow-300" fill="yellow" />
-                <p className="text-sm text-slate-400">
-                  <span className="text-lg font-bold text-white">
-                    {movie.vote_average.toFixed(1)}
-                  </span>
-                  /10
-                </p>
-              </div>
+              <Genres genres={movie.genres} />
+              <Rating rating={movie.vote_average} />
             </div>
           </div>
         )}