chore: Apply linting rules and add git hok (#611)

Co-authored-by: Fredrik Burmester <fredrik.burmester@gmail.com>

components/jellyseerr/DetailFacts.tsx

@@ -1,15 +1,15 @@
-import { View, ViewProps } from "react-native";
-import { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
-import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
 import { Text } from "@/components/common/Text";
-import { useMemo } from "react";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
-import { uniqBy } from "lodash";
-import { TmdbRelease } from "@/utils/jellyseerr/server/api/themoviedb/interfaces";
-import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import CountryFlag from "react-native-country-flag";
 import { ANIME_KEYWORD_ID } from "@/utils/jellyseerr/server/api/themoviedb/constants";
+import type { TmdbRelease } from "@/utils/jellyseerr/server/api/themoviedb/interfaces";
+import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
+import type { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { uniqBy } from "lodash";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { View, type ViewProps } from "react-native";
+import CountryFlag from "react-native-country-flag";
 
 interface Release {
   certification: string;
@@ -30,12 +30,12 @@ const Facts: React.FC<
 > = ({ title, facts, ...props }) =>
   facts &&
   facts?.length > 0 && (
-    <View className="flex flex-col justify-between py-2" {...props}>
-      <Text className="font-bold text-start">{title}</Text>
+    <View className='flex flex-col justify-between py-2' {...props}>
+      <Text className='font-bold text-start'>{title}</Text>
 
-      <View className="flex flex-col items-end">
+      <View className='flex flex-col items-end'>
         {facts.map((f, idx) =>
-          typeof f === "string" ? <Text key={idx}>{f}</Text> : f
+          typeof f === "string" ? <Text key={idx}>{f}</Text> : f,
         )}
       </View>
     </View>
@@ -50,15 +50,19 @@ const Fact: React.FC<{ title: string; fact?: string | null } & ViewProps> = ({
 const DetailFacts: React.FC<
   { details?: MovieDetails | TvDetails } & ViewProps
 > = ({ details, className, ...props }) => {
-  const { jellyseerrUser, jellyseerrRegion: region, jellyseerrLocale: locale } = useJellyseerr();
+  const {
+    jellyseerrUser,
+    jellyseerrRegion: region,
+    jellyseerrLocale: locale,
+  } = useJellyseerr();
   const { t } = useTranslation();
 
   const releases = useMemo(
     () =>
       (details as MovieDetails)?.releases?.results.find(
-        (r: TmdbRelease) => r.iso_3166_1 === region
+        (r: TmdbRelease) => r.iso_3166_1 === region,
       )?.release_dates as TmdbRelease["release_dates"],
-    [details]
+    [details],
   );
 
   // Release date types:
@@ -72,9 +76,9 @@ const DetailFacts: React.FC<
     () =>
       uniqBy(
         releases?.filter((r: Release) => r.type > 2 && r.type < 6),
-        "type"
+        "type",
       ),
-    [releases]
+    [releases],
   );
 
   const firstAirDate = useMemo(() => {
@@ -82,7 +86,7 @@ const DetailFacts: React.FC<
     if (firstAirDate) {
       return new Date(firstAirDate).toLocaleDateString(
         `${locale}-${region}`,
-        dateOpts
+        dateOpts,
       );
     }
   }, [details]);
@@ -93,7 +97,7 @@ const DetailFacts: React.FC<
     if (nextAirDate && firstAirDate !== nextAirDate) {
       return new Date(nextAirDate).toLocaleDateString(
         `${locale}-${region}`,
-        dateOpts
+        dateOpts,
       );
     }
   }, [details]);
@@ -102,26 +106,26 @@ const DetailFacts: React.FC<
     () =>
       (details as MovieDetails)?.revenue?.toLocaleString?.(
         `${locale}-${region}`,
-        { style: "currency", currency: "USD" }
+        { style: "currency", currency: "USD" },
       ),
-    [details]
+    [details],
   );
 
   const budget = useMemo(
     () =>
       (details as MovieDetails)?.budget?.toLocaleString?.(
         `${locale}-${region}`,
-        { style: "currency", currency: "USD" }
+        { style: "currency", currency: "USD" },
       ),
-    [details]
+    [details],
   );
 
   const streamingProviders = useMemo(
     () =>
       details?.watchProviders?.find(
-        (provider) => provider.iso_3166_1 === region
+        (provider) => provider.iso_3166_1 === region,
       )?.flatrate,
-    [details]
+    [details],
   );
 
   const networks = useMemo(() => (details as TvDetails)?.networks, [details]);
@@ -129,15 +133,15 @@ const DetailFacts: React.FC<
   const spokenLanguage = useMemo(
     () =>
       details?.spokenLanguages.find(
-        (lng) => lng.iso_639_1 === details.originalLanguage
+        (lng) => lng.iso_639_1 === details.originalLanguage,
       )?.name,
-    [details]
+    [details],
   );
 
   return (
     details && (
-      <View className="p-4">
-        <Text className="text-lg font-bold">{t("jellyseerr.details")}</Text>
+      <View className='p-4'>
+        <Text className='text-lg font-bold'>{t("jellyseerr.details")}</Text>
         <View
           className={`${className} flex flex-col justify-center divide-y-2 divide-neutral-800`}
           {...props}
@@ -148,30 +152,30 @@ const DetailFacts: React.FC<
             fact={(details as TvDetails)?.originalName}
           />
           {details.keywords.some(
-            (keyword) => keyword.id === ANIME_KEYWORD_ID
-          ) && <Fact title={t("jellyseerr.series_type")} fact="Anime" />}
+            (keyword) => keyword.id === ANIME_KEYWORD_ID,
+          ) && <Fact title={t("jellyseerr.series_type")} fact='Anime' />}
           <Facts
             title={t("jellyseerr.release_dates")}
             facts={filteredReleases?.map?.((r: Release, idx) => (
-              <View key={idx} className="flex flex-row space-x-2 items-center">
+              <View key={idx} className='flex flex-row space-x-2 items-center'>
                 {r.type === 3 ? (
                   // Theatrical
-                  <Ionicons name="ticket" size={16} color="white" />
+                  <Ionicons name='ticket' size={16} color='white' />
                 ) : r.type === 4 ? (
                   // Digital
-                  <Ionicons name="cloud" size={16} color="white" />
+                  <Ionicons name='cloud' size={16} color='white' />
                 ) : (
                   // Physical
                   <MaterialCommunityIcons
-                    name="record-circle-outline"
+                    name='record-circle-outline'
                     size={16}
-                    color="white"
+                    color='white'
                   />
                 )}
                 <Text>
                   {new Date(r.release_date).toLocaleDateString(
                     `${locale}-${region}`,
-                    dateOpts
+                    dateOpts,
                   )}
                 </Text>
               </View>
@@ -181,11 +185,14 @@ const DetailFacts: React.FC<
           <Fact title={t("jellyseerr.next_air_date")} fact={nextAirDate} />
           <Fact title={t("jellyseerr.revenue")} fact={revenue} />
           <Fact title={t("jellyseerr.budget")} fact={budget} />
-          <Fact title={t("jellyseerr.original_language")} fact={spokenLanguage} />
+          <Fact
+            title={t("jellyseerr.original_language")}
+            fact={spokenLanguage}
+          />
           <Facts
             title={t("jellyseerr.production_country")}
             facts={details?.productionCountries?.map((n, idx) => (
-              <View key={idx} className="flex flex-row items-center space-x-2">
+              <View key={idx} className='flex flex-row items-center space-x-2'>
                 <CountryFlag isoCode={n.iso_3166_1} size={10} />
                 <Text>{n.name}</Text>
               </View>
@@ -194,10 +201,13 @@ const DetailFacts: React.FC<
           <Facts
             title={t("jellyseerr.studios")}
             facts={uniqBy(details?.productionCompanies, "name")?.map(
-              (n) => n.name
+              (n) => n.name,
             )}
           />
-          <Facts title={t("jellyseerr.network")}facts={networks?.map((n) => n.name)} />
+          <Facts
+            title={t("jellyseerr.network")}
+            facts={networks?.map((n) => n.name)}
+          />
           <Facts
             title={t("jellyseerr.currently_streaming_on")}
             facts={streamingProviders?.map((s) => s.name)}