From 618d48bc0f02358bf472047dba8a7af31a2a06da Mon Sep 17 00:00:00 2001
From: Telkens <stivenmg77@gmail.com>
Date: Fri, 23 Aug 2024 11:42:39 -0500
Subject: [PATCH] Add an active review switch at the ReviewsTable and improve
 code

---
 package-lock.json                             | 177 ++++++++++++++++++
 package.json                                  |   1 +
 src/actions/reviews.ts                        |   4 +-
 .../atc24$rw/admin/components/ReviewForm.tsx  |  44 +++--
 .../admin/components/ReviewsTable.tsx         |  79 +++++++-
 src/app/(admin)/atc24$rw/admin/schema.ts      |   3 +-
 src/components/Reviews/index.tsx              |   3 +-
 src/components/ui/switch.tsx                  |  29 +++
 src/lib/utils.ts                              |   9 +
 src/types.d.ts                                |   3 +-
 10 files changed, 318 insertions(+), 34 deletions(-)
 create mode 100644 src/components/ui/switch.tsx

diff --git a/package-lock.json b/package-lock.json
index d25ae6e..c970faa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-switch": "^1.1.0",
         "@types/react-star-ratings": "^2.3.3",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
@@ -793,6 +794,182 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.0.tgz",
+      "integrity": "sha512-OBzy5WAj641k0AOSpKQtreDMe+isX0MQJ1IVyF03ucdF3DunOnROVrjWs8zsXUxC3zfZ6JL9HFVCUlMghz9dJw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+      "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
diff --git a/package.json b/package.json
index 149e078..f566d95 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.1.0",
     "@types/react-star-ratings": "^2.3.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
diff --git a/src/actions/reviews.ts b/src/actions/reviews.ts
index 018a5a7..68768d0 100644
--- a/src/actions/reviews.ts
+++ b/src/actions/reviews.ts
@@ -8,7 +8,9 @@ import { Review } from "@/types";
 
 export const getReviews = async (): Promise<Review[]> => {
   try {
-    const response = await fetch(`${REVIEWS_API}/reviews`);
+    const response = await fetch(`${REVIEWS_API}/reviews`, {
+      cache: "no-store"
+    });
     const { data } = await response.json();
     return data ?? [];
   } catch (_) {
diff --git a/src/app/(admin)/atc24$rw/admin/components/ReviewForm.tsx b/src/app/(admin)/atc24$rw/admin/components/ReviewForm.tsx
index 70cf3fd..9f46201 100644
--- a/src/app/(admin)/atc24$rw/admin/components/ReviewForm.tsx
+++ b/src/app/(admin)/atc24$rw/admin/components/ReviewForm.tsx
@@ -25,6 +25,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { useDropzone } from "react-dropzone";
 import Image from "next/image";
 import { REVIEWS_API } from "@/lib/constants";
+import { createFormData } from "@/lib/utils";
 
 interface ReviewFormProps {
   review?: Review;
@@ -52,6 +53,7 @@ export const ReviewForm = ({ review }: ReviewFormProps) => {
       rating: review?.rating || "5",
       user: review?.user || "",
       active: review?.active || "false",
+      date: review?.date || new Date().toISOString(),
     },
   });
 
@@ -59,14 +61,10 @@ export const ReviewForm = ({ review }: ReviewFormProps) => {
     values: z.infer<typeof reviewSchema>,
     token: string
   ) => {
-    const formData = new FormData();
-    formData.append("review", values.review);
-    formData.append("rating", String(values.rating));
-    formData.append("user", values.user);
-    formData.append("date", new Date().toISOString());
-    formData.append("file", acceptedFiles[0]);
-    formData.append("active", JSON.parse(values.active || "false") ? "true" : "false");
-    
+    const formData: FormData = createFormData({
+      ...values,
+      file: acceptedFiles[0],
+    });
     startTransition(() => {
       createReview(formData, token)
         .then((data) => {
@@ -84,16 +82,12 @@ export const ReviewForm = ({ review }: ReviewFormProps) => {
   };
 
   const handleUpdate = (review: Review, token: string) => {
-    const formData = new FormData();
-    formData.append("id", review.id);
-    formData.append("review", review.review);
-    formData.append("rating", String(review.rating));
-    formData.append("user", review.user);
-    formData.append("date", new Date().toISOString());
-    formData.append("file", acceptedFiles[0] || new File([], "null", {
-      type: "image/png",
-    }));
-    formData.append("active", review.active ? "true" : "false");
+    const formData: FormData = createFormData({
+      ...review,
+      file: acceptedFiles[0] || new File([], "null", {
+        type: "image/png",
+      })
+    });
     startTransition(() => {
       updateReview(formData, token)
         .then((data) => {
@@ -142,6 +136,7 @@ export const ReviewForm = ({ review }: ReviewFormProps) => {
                   {...field}
                   placeholder="Texto de la reseña"
                   className="max-w-full h-[150px] resize-none"
+                  maxLength={600}
                 />
               </FormControl>
               <FormMessage />
@@ -218,7 +213,7 @@ export const ReviewForm = ({ review }: ReviewFormProps) => {
                     type="checkbox"
                     id="show"
                     className="w-5 h-5"
-                    checked={JSON.parse(field.value || 'false') ? true : false}
+                    checked={JSON.parse(field.value)}
                   />
                   <label
                     htmlFor="show"
@@ -231,6 +226,17 @@ export const ReviewForm = ({ review }: ReviewFormProps) => {
             </FormItem>
           )}
         />
+        <FormField
+          control={form.control}
+          name="date"
+          render={({ field }) => (
+            <FormItem className="hidden">
+              <FormControl>
+                <Input type="hidden" {...field} />
+              </FormControl>
+            </FormItem>
+          )}
+        />
         <Button
           className="w-full bg-primary-lm hover:bg-red-600 dark:text-white"
           disabled={isPending}
diff --git a/src/app/(admin)/atc24$rw/admin/components/ReviewsTable.tsx b/src/app/(admin)/atc24$rw/admin/components/ReviewsTable.tsx
index b43e51f..d48b7b6 100644
--- a/src/app/(admin)/atc24$rw/admin/components/ReviewsTable.tsx
+++ b/src/app/(admin)/atc24$rw/admin/components/ReviewsTable.tsx
@@ -8,16 +8,18 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { Switch } from "@/components/ui/switch";
 import Image from "next/image";
 import { Review } from "@/types";
 import { CiEdit, CiTrash } from "react-icons/ci";
 import { useReviewFormModal } from "@/store/useReviewFormModal";
-import { deleteReview } from "@/actions/reviews";
+import { deleteReview, updateReview } from "@/actions/reviews";
 import { DeleteAlert } from "./DeleteAlert";
 import { toast } from "sonner";
-import { useTransition } from "react";
+import { FormEvent, useTransition } from "react";
 import { useRouter } from "next/navigation";
 import { REVIEWS_API } from "@/lib/constants";
+import { cn, createFormData } from "@/lib/utils";
 
 interface ReviewsTableProps {
   reviews: Review[];
@@ -48,16 +50,44 @@ export const ReviewsTable = ({ reviews }: ReviewsTableProps) => {
         .catch(() => toast.error("Ocurrió un error al eliminar la reseña"));
     });
   };
+  const handleSwitchChange = (value: boolean, review: Review) => {
+    const activeReviews = reviews.filter((review) => JSON.parse(review.active));
+    if (activeReviews.length === 5 && !value) {
+      return toast.error("El número mínimo de reseñas activadas es 5");
+    };
+
+    if (isPending) return;
+    const token = sessionStorage.getItem("token") || "";
+    const formData: FormData = createFormData({
+      ...review,
+      active: String(value),
+      file: new File([], "null", {
+        type: "image/png",
+      }),
+    });
+    startTransition(() => {
+      updateReview(formData, token)
+        .then((data) => {
+          if (data.success) {
+            toast.success(data.success);
+          }
+          if (data.error) {
+            toast.error(data.error);
+          }
+        })
+        .catch(() => toast.error("Ocurrió un error al eliminar la reseña"));
+    });
+  };
 
   return (
     <>
       <Table>
         <TableHeader>
           <TableRow>
-            <TableHead>Imagen del usuario</TableHead>
+            <TableHead>Usuario</TableHead>
             <TableHead>Texto</TableHead>
             <TableHead>Calificación</TableHead>
-            <TableHead>Usuario</TableHead>
+            <TableHead>Visibilidad</TableHead>
             <TableHead>Editar</TableHead>
             <TableHead className="flex items-center justify-end">
               Eliminar
@@ -66,13 +96,37 @@ export const ReviewsTable = ({ reviews }: ReviewsTableProps) => {
         </TableHeader>
         <TableBody>
           {reviews.map((review) => (
-            <TableRow key={review.id}>
+            <TableRow key={review.id} className={cn(
+              JSON.parse(review.active) == false ? "opacity-50" : ""
+            )}>
               <TableCell>
-                <Image src={`${REVIEWS_API}/images/reviews/${review.image}`} className="rounded-full aspect-square object-cover" width={100} height={100} alt="Imagen del usuario" />
+                <div className="flex items-center gap-x-3">
+                  <Image
+                    src={`${REVIEWS_API}/images/reviews/${review.image}`}
+                    className="rounded-full aspect-square object-cover"
+                    width={70}
+                    height={70}
+                    alt="Imagen del usuario"
+                  />
+                  <span className="font-bold">{review.user}</span>
+                </div>
+              </TableCell>
+              <TableCell className="max-w-[15rem] pr-6">
+                {review.review}
               </TableCell>
-              <TableCell className="max-w-[15rem] pr-6">{review.review}</TableCell>
               <TableCell>{review.rating}</TableCell>
-              <TableCell>{review.user}</TableCell>
+              <TableCell>
+                <Switch
+                  defaultChecked={
+                    JSON.parse(review.active || "false") ? true : false
+                  }
+                  checked={JSON.parse(review.active)}
+                  onCheckedChange={(event) =>
+                    handleSwitchChange(event.valueOf(), review)
+                  }
+                  disabled={isPending}
+                />
+              </TableCell>
               <TableCell>
                 <CiEdit
                   size={25}
@@ -82,14 +136,19 @@ export const ReviewsTable = ({ reviews }: ReviewsTableProps) => {
               </TableCell>
               <TableCell>
                 <DeleteAlert onDelete={() => handleDelele(review.id)}>
-                  <CiTrash size={25} className="cursor-pointer hover:text-red-500" />
+                  <CiTrash
+                    size={25}
+                    className="cursor-pointer hover:text-red-500"
+                  />
                 </DeleteAlert>
               </TableCell>
             </TableRow>
           ))}
         </TableBody>
       </Table>
-      <Button onClick={() => onOpen()} className="my-6">Crear reseña</Button>
+      <Button onClick={() => onOpen()} className="my-6">
+        Crear reseña
+      </Button>
     </>
   );
 };
diff --git a/src/app/(admin)/atc24$rw/admin/schema.ts b/src/app/(admin)/atc24$rw/admin/schema.ts
index 6659218..3b98712 100644
--- a/src/app/(admin)/atc24$rw/admin/schema.ts
+++ b/src/app/(admin)/atc24$rw/admin/schema.ts
@@ -4,5 +4,6 @@ export const reviewSchema = z.object({
   review: z.string().min(10, { message: "La reseña es muy corta" }),
   rating: z.string().min(1),
   user: z.string().min(3, { message: "El nombre es inválido" }),
-  active: z.boolean().or(z.string()).transform((val) => val.toString()).optional()
+  active: z.boolean().or(z.string()).transform((val) => val.toString()),
+  date: z.string(),
 });
diff --git a/src/components/Reviews/index.tsx b/src/components/Reviews/index.tsx
index abd75b1..9d77144 100644
--- a/src/components/Reviews/index.tsx
+++ b/src/components/Reviews/index.tsx
@@ -3,8 +3,7 @@ import { ReviewsMarquee } from "./ReviewsMarquee";
 import { getReviews } from "@/actions/reviews";
 
 export const Reviews = async () => {
-  const reviews: Review[] = await getReviews();
-
+  const reviews: Review[] = (await getReviews()).filter((review) => review.active);
   if(!reviews.length) return null
 
   return (
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
new file mode 100644
index 0000000..5f4117f
--- /dev/null
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index d084cca..1983852 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -4,3 +4,12 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+export function createFormData(data: Record<string, string | File>): FormData {
+  const formData = new FormData();
+  for (const key in data) {
+    if (key !== 'image') {
+      formData.append(key, data[key]);
+    }
+  };
+  return formData;
+}
\ No newline at end of file
diff --git a/src/types.d.ts b/src/types.d.ts
index 62e0862..27a0554 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -8,5 +8,6 @@ export interface Review {
   rating: string;
   user: string;
   image: File | string,
-  active?: string;
+  date: string;
+  active: string;
 }