Feature - Major update # 5

Author: faaiz99

client/.eslintrc.json

@@ -17,7 +17,28 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": ["@typescript-eslint", "react"],
+  "overrides": [
+    {
+      "files": ["**/*.js", "**/*.ts", "**/*.tsx"],
+      "rules": {
+        "simple-import-sort/imports": [
+          "error",
+          {
+            "groups": [
+              ["^react$", "^next", "^[a-z]"],
+              ["^@"],
+              ["^~"],
+              ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+              ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+              ["^.+\\.s?css$"],
+              ["^\\u0000"]
+            ]
+          }
+        ]
+      }
+    }
+  ],
+  "plugins": ["@typescript-eslint", "react", "simple-import-sort"],
   "rules": {
     "react-refresh/only-export-components": "warn",
     "react-hooks/rules-of-hooks": "error",

client/package-lock.json

@@ -11,13 +11,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.3.4",
     "@tanstack/react-query": "^5.18.0",
+    "@tanstack/react-query-devtools": "^5.18.1",
     "axios": "^1.6.7",
     "flowbite-react": "^0.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.49.3",
+    "react-hook-form": "^7.50.0",
     "react-icons": "^5.0.1",
+    "react-multi-carousel": "^2.8.4",
     "react-router-dom": "^6.21.3",
     "vite-plugin-compression2": "^0.12.0",
     "vite-plugin-image-optimizer": "^1.1.7",
@@ -37,6 +40,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "postcss": "^8.4.33",
     "prettier": "^3.2.4",
     "prettier-plugin-tailwindcss": "^0.5.11",

client/package.json

@@ -2,11 +2,11 @@ import "./App.css";
 import { Flowbite } from "flowbite-react";
 import { Routes, Route } from "react-router-dom";
 import { lazy, Suspense } from "react";
+import { Spinner } from "./components";
 
 const Error = lazy(() =>
   import("./pages/Error").then(({ Error }) => ({ default: Error })),
 );
-
 const Movies = lazy(() =>
   import("./pages/Movies").then(({ Movies }) => ({ default: Movies })),
 );
@@ -27,7 +27,7 @@ const Footer = lazy(() =>
 const Navbar = lazy(() =>
   import("./components").then(({ Navbar }) => ({ default: Navbar })),
 );
-import { Spinner } from "./components";
+
 function App() {
   return (
     <>
@@ -38,7 +38,7 @@ function App() {
             <Route path="/" element={<Movies />} />
             <Route path="/login" element={<Login />} />
             <Route path="/sign-up" element={<Signup />} />
-            <Route path="/movie/:movieTitle" element={<MovieDetails />} />
+            <Route path="/movie/:title" element={<MovieDetails />} />
             <Route path="*" element={<Error />} />
           </Routes>
           <div className="bg-gray-50  pt-5 dark:bg-gray-900 lg:pt-10">

client/src/App.tsx

@@ -1,6 +1,5 @@
 export { Navbar } from "./navbar/Navbar";
 export { Footer } from "./footer/Footer";
-export { Carousel } from "./carousel/Carousel";
 export { Search } from "./movie-search/Search";
 export { Star } from "./dummy-stars/Star";
 export { Spinner } from "./spinner/Spinner";
@@ -11,5 +10,7 @@ export { Rating } from "./rating/Rating";
 export { Button } from "./button/Button";
 export { TrailerEmbed } from "./trailer-embed/TrailerEmbed";
 export { Modal as ErrorModal } from "./modal/Modal";
-export { DeleteConfirmationModal } from "./movie-reviews/DeleteConfirmationModal";
+export { DeleteConfirmationModal } from "./modal/DeleteConfirmationModal";
 export { AddUpdateReviewModal } from "./movie-reviews/AddUpdateReviewModal";
+export { AddUpdateMovieModal } from "./movie-details/AddUpdateMovieModal";
+export { NotAuthenticatedModal } from "./modal/NotAuthenticatedModal";

client/src/components/carousel/Carousel.tsx

@@ -2,41 +2,55 @@ import { Modal } from "flowbite-react";
 import { Button } from "..";
 import { useState } from "react";
 import { HiOutlineExclamationCircle } from "react-icons/hi";
-import { useDeleteReview } from "../../hooks/useReview";
 
 type DeleteConfirmationProps = {
+  type: "review" | "movie";
   show: boolean;
-  reviewId: string;
+  reviewId?: string;
+  movieId?: string;
   handleShowDeleteModal: () => void;
+  handleDeletion: (id: string) => void;
+  message: string;
 };
 
 export const DeleteConfirmationModal = ({
+  type,
   show,
   handleShowDeleteModal,
   reviewId,
+  movieId,
+  message,
+  handleDeletion,
 }: DeleteConfirmationProps) => {
-  const [openModal, setOpenModal] = useState(show);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [openModal] = useState(show);
 
-  const deleteMutation = useDeleteReview();
-  const handleDeleteReview = (id: string) => {
-    deleteMutation.mutate(id);
-  };
   return (
     <>
-      <Modal show={openModal} size="md" onClose={handleShowDeleteModal} popup>
+      <Modal
+        className="backdrop-blur-sm"
+        show={openModal}
+        size="md"
+        onClose={handleShowDeleteModal}
+        popup
+      >
         <Modal.Header />
         <Modal.Body>
           <div className="text-center">
             <HiOutlineExclamationCircle className="mx-auto mb-4 h-14 w-14 text-gray-400 dark:text-gray-200" />
             <h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
-              Are you sure you want to delete this Review?
+              {message}
             </h3>
             <div className="flex justify-center gap-4">
               <Button
                 title={"Yes, I'm sure"}
                 color="failure"
                 onClick={() => {
-                  handleDeleteReview(reviewId);
+                  handleDeletion(
+                    type === "review"
+                      ? (reviewId as string)
+                      : (movieId as string),
+                  );
                   handleShowDeleteModal();
                 }}
               ></Button>

client/src/components/index.tsx

@@ -1,7 +1,7 @@
 import { Modal as Component } from "flowbite-react";
 import { useState, useEffect } from "react";
 import { HiOutlineExclamationCircle } from "react-icons/hi";
-import { useNavigate } from "react-router-dom";
+// import { useNavigate } from "react-router-dom";
 
 type ModalProps = {
   show: boolean;
@@ -10,7 +10,7 @@ type ModalProps = {
 
 export const Modal = ({ show, message }: ModalProps) => {
   const [openModal, setOpenModal] = useState(show);
-  const navigate = useNavigate();
+  //const navigate = useNavigate();
   useEffect(() => {
     if (openModal) {
       const timer = setTimeout(() => {