refactor: migrate from drizzle to PocketBase

src/components/organisms/Hero/index.tsx

@@ -1,17 +1,16 @@
-"use client";
-import { FC, useState, useEffect, useCallback } from "react";
-import { Movie } from "@/types/global";
+'use client';
+import { FC, useState, useEffect, useCallback } from 'react';
 import {
   FaPlus,
   FaFire,
   FaChevronLeft,
   FaChevronRight,
   FaMinus,
-} from "react-icons/fa";
-import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
-import { useGlobalStore } from "@/app/store/globalStore";
-import Link from "next/link";
-import { Button } from "@/components/atoms/Button";
+} from 'react-icons/fa';
+import { RiCalendarCheckLine, RiCalendarScheduleLine } from 'react-icons/ri';
+import { useGlobalStore } from '@/app/store/globalStore';
+import Link from 'next/link';
+import { Button } from '@/components/atoms/Button';
 
 type Props = {
   movies: Movie[];
@@ -50,7 +49,7 @@ export const Hero: FC<Props> = ({
     vote_average,
   } = currentMovie;
 
-  const alreadyInStore = storedMovies.find((m) => m.id === id);
+  const alreadyInStore = storedMovies.find(m => m.id === id);
   const isReleased = new Date(release_date) < new Date();
   const releaseDate = new Date(release_date);
 
@@ -58,7 +57,7 @@ export const Hero: FC<Props> = ({
     if (isTransitioning) return;
     setIsTransitioning(true);
     setTimeout(() => {
-      setCurrentIndex((prev) => (prev + 1) % movies.length);
+      setCurrentIndex(prev => (prev + 1) % movies.length);
       setIsTransitioning(false);
     }, 500);
   }, [movies.length, isTransitioning]);
@@ -67,7 +66,7 @@ export const Hero: FC<Props> = ({
     if (isTransitioning) return;
     setIsTransitioning(true);
     setTimeout(() => {
-      setCurrentIndex((prev) => (prev - 1 + movies.length) % movies.length);
+      setCurrentIndex(prev => (prev - 1 + movies.length) % movies.length);
       setIsTransitioning(false);
     }, 500);
   }, [movies.length, isTransitioning]);
@@ -108,7 +107,7 @@ export const Hero: FC<Props> = ({
           <div
             key={movie.id}
             className={`absolute inset-0 transition-opacity duration-500 ${
-              index === currentIndex ? "opacity-100" : "opacity-0"
+              index === currentIndex ? 'opacity-100' : 'opacity-0'
             }`}
           >
             <img
@@ -146,7 +145,7 @@ export const Hero: FC<Props> = ({
       <div className="container relative z-10">
         <div
           className={`flex flex-col lg:flex-row items-center gap-8 lg:gap-12 transition-opacity duration-500 ${
-            isTransitioning ? "opacity-0" : "opacity-100"
+            isTransitioning ? 'opacity-0' : 'opacity-100'
           }`}
         >
           {/* Poster */}
@@ -176,7 +175,7 @@ export const Hero: FC<Props> = ({
               <div className="flex items-center gap-2">
                 <span
                   className={`flex items-center gap-1 text-sm ${
-                    isReleased ? "text-green-400" : "text-yellow-400"
+                    isReleased ? 'text-green-400' : 'text-yellow-400'
                   }`}
                 >
                   {isReleased ? (
@@ -184,10 +183,10 @@ export const Hero: FC<Props> = ({
                   ) : (
                     <RiCalendarScheduleLine />
                   )}
-                  {releaseDate.toLocaleDateString("pl-PL", {
-                    day: "numeric",
-                    month: "long",
-                    year: "numeric",
+                  {releaseDate.toLocaleDateString('pl-PL', {
+                    day: 'numeric',
+                    month: 'long',
+                    year: 'numeric',
                   })}
                 </span>
               </div>
@@ -211,12 +210,12 @@ export const Hero: FC<Props> = ({
             {/* Action buttons */}
             <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
               <Button
-                theme={alreadyInStore ? "primary" : "secondary"}
+                theme={alreadyInStore ? 'primary' : 'secondary'}
                 onClick={alreadyInStore ? handleRemove : handleAdd}
               >
                 {alreadyInStore ? <FaMinus /> : <FaPlus />}
                 <span>
-                  {alreadyInStore ? "Usuń z listy" : "Dodaj do listy"}
+                  {alreadyInStore ? 'Usuń z listy' : 'Dodaj do listy'}
                 </span>
               </Button>
             </div>
@@ -234,8 +233,8 @@ export const Hero: FC<Props> = ({
               disabled={isTransitioning}
               className={`w-3 h-3 rounded-full transition-all duration-300 disabled:cursor-not-allowed cursor-pointer ${
                 index === currentIndex
-                  ? "bg-secondary scale-125"
-                  : "bg-white/50 hover:bg-secondary/70"
+                  ? 'bg-secondary scale-125'
+                  : 'bg-white/50 hover:bg-secondary/70'
               }`}
             />
           ))}