From 1b9fbb41207bd903eb418a82bb452fe7dce66afb Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Sun, 4 Feb 2024 17:38:03 +0100
Subject: [PATCH] chore: use typedef instead of inline type

---
 apps/expo/src/app/(tabs)/search/_layout.tsx | 24 ++++++---------------
 apps/expo/src/app/components/item/item.tsx  | 14 +++++++-----
 2 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/apps/expo/src/app/(tabs)/search/_layout.tsx b/apps/expo/src/app/(tabs)/search/_layout.tsx
index 166732e..46d401c 100644
--- a/apps/expo/src/app/(tabs)/search/_layout.tsx
+++ b/apps/expo/src/app/(tabs)/search/_layout.tsx
@@ -3,15 +3,14 @@ import { ScrollView, View } from "react-native";
 
 import { getMediaPoster, searchTitle } from "@movie-web/tmdb";
 
+import type { ItemData } from "~/components/item/item";
 import Item from "~/components/item/item";
 import ScreenLayout from "~/components/layout/ScreenLayout";
 import { Text } from "~/components/ui/Text";
 import Searchbar from "./Searchbar";
 
 export default function SearchScreen() {
-  const [searchResults, setSearchResults] = useState<
-    { title: string; posterUrl: string; year: number; type: "movie" | "tv" }[]
-  >([]);
+  const [searchResults, setSearchResults] = useState<ItemData[]>([]);
 
   const handleSearchChange = async (query: string) => {
     if (query.length > 0) {
@@ -45,11 +44,7 @@ export default function SearchScreen() {
   );
 }
 
-async function fetchSearchResults(
-  query: string,
-): Promise<
-  { title: string; posterUrl: string; year: number; type: "movie" | "tv" }[]
-> {
+async function fetchSearchResults(query: string): Promise<ItemData[]> {
   const results = await searchTitle(query);
 
   return results
@@ -57,6 +52,7 @@ async function fetchSearchResults(
       switch (result.media_type) {
         case "movie":
           return {
+            id: result.id.toString(),
             title: result.title,
             posterUrl: getMediaPoster(result.poster_path),
             year: new Date(result.release_date).getFullYear(),
@@ -64,6 +60,7 @@ async function fetchSearchResults(
           };
         case "tv":
           return {
+            id: result.id.toString(),
             title: result.name,
             posterUrl: getMediaPoster(result.poster_path),
             year: new Date(result.first_air_date).getFullYear(),
@@ -73,14 +70,5 @@ async function fetchSearchResults(
           return undefined;
       }
     })
-    .filter(
-      (
-        item,
-      ): item is {
-        title: string;
-        posterUrl: string;
-        year: number;
-        type: "movie" | "tv";
-      } => item !== undefined,
-    );
+    .filter((item): item is ItemData => item !== undefined);
 }
diff --git a/apps/expo/src/app/components/item/item.tsx b/apps/expo/src/app/components/item/item.tsx
index f3bc637..e2bb3c2 100644
--- a/apps/expo/src/app/components/item/item.tsx
+++ b/apps/expo/src/app/components/item/item.tsx
@@ -2,11 +2,15 @@ import { Image, View } from "react-native";
 
 import { Text } from "~/components/ui/Text";
 
-export default function Item({
-  data,
-}: {
-  data: { title: string; type: string; year: number; posterUrl: string };
-}) {
+export interface ItemData {
+  id: string;
+  title: string;
+  type: "movie" | "tv";
+  year: number;
+  posterUrl: string;
+}
+
+export default function Item({ data }: { data: ItemData }) {
   const { title, type, year, posterUrl } = data;
 
   return (