update components

thezeeshann · Sep 18, 2024 · 7c60965 · 7c60965
1 parent 6c68498
commit 7c60965
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 47 deletions.
diff --git a/src/components/dashboard/_components/testimonial-card.tsx b/src/components/dashboard/_components/testimonial-card.tsx
@@ -9,8 +9,6 @@ import { toast } from "sonner";
 import { useEffect } from "react";
 import { Testimonial } from "@/types";
 
-
-
 type TestimonialData = {
   data?: Testimonial[];
 };
@@ -31,11 +29,18 @@ const TestimonialCard = ({
   setDeleteId,
 }: TestimonialCardProps) => {
   useEffect(() => {
-    const storedLike = localStorage.getItem("like");
-    if (storedLike === "true") {
-      setIsLiked(true);
-    }
-  }, [setIsLiked]);
+    const storedLikes = JSON.parse(localStorage.getItem("likes")) || {};
+    setIsLiked(storedLikes);
+  }, []);
+
+  // Function to handle like/unlike actions
+  const handleLikeClick = (id) => {
+    setIsLiked((prevLikes) => {
+      const updatedLikes = { ...prevLikes, [id]: !prevLikes[id] };
+      localStorage.setItem("likes", JSON.stringify(updatedLikes)); // Save to localStorage
+      return updatedLikes;
+    });
+  };
 
   return (
     <>
@@ -53,13 +58,12 @@ const TestimonialCard = ({
                   </span>
                 </div>
 
-                {isLiked === true ? (
+                {isLiked[testimonial.id] ? (
                   <FaHeart
                     className="cursor-pointer"
                     onClick={() => {
-                      setIsLiked(false);
-                      localStorage.removeItem("like");
-                      toast.success("Remove from wall of the love ");
+                      handleLikeClick(testimonial.id);
+                      toast.success("Removed from wall of love");
                     }}
                     color="#ef4444"
                     size={25}
@@ -68,8 +72,7 @@ const TestimonialCard = ({
                   <Heart
                     className="cursor-pointer"
                     onClick={() => {
-                      setIsLiked(true);
-                      localStorage.setItem("like", "true");
+                      handleLikeClick(testimonial.id);
                       toast.success("Added to the wall of love");
                     }}
                     size={25}
@@ -79,6 +82,7 @@ const TestimonialCard = ({
               </div>
               <div className="flex flex-col gap-y-3">
                 <ReactStars
+                  edit={false}
                   size={24}
                   value={testimonial.rating}
                   activeColor="#ffd700"

diff --git a/src/components/dashboard/dashboard-settings.tsx b/src/components/dashboard/dashboard-settings.tsx
@@ -93,7 +93,7 @@ const DashboardSettings = ({ user }: Session) => {
                   </FormLabel>
 
                   {!form.getValues("image") && (
-                    <div className="font-bold text-neutral-200 text-3xl border-2 p-2 w-[40px] text-start rounded-full">
+                    <div className="font-bold text-neutral-200 text-3xl border-2 p-2 w-[50px] text-start rounded-full">
                       {user?.name?.charAt(0).toUpperCase()}
                     </div>
                   )}

diff --git a/src/components/dashboard/product-review.tsx b/src/components/dashboard/product-review.tsx
@@ -31,6 +31,7 @@ import SingleTestimonialModal from "../modals/single-testimonial";
 import ReviewSidebar from "./_components/review-sidebar";
 import TestimonialCard from "./_components/testimonial-card";
 import UpdateSpaceModal from "../modals/update-space";
+import CollectingWidgetModal from "../modals/collecting-widget";
 
 type SingleReviewProp = {
   slug: string;
@@ -39,18 +40,21 @@ type SingleReviewProp = {
 const SingleReview = ({ slug }: SingleReviewProp) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isWallOpen, setIsWallOpen] = useState(false);
+  console.log("wall", isWallOpen);
   const [isCardOpen, setIsCardOpen] = useState(false);
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const [isEditOpen, setIsEditOpen] = useState(false);
   const [isSingleTestimonialOpen, setIsSingleTestimonialOpen] = useState(false);
   const [deleteId, setDeleteId] = useState("");
-  const [isLiked, setIsLiked] = useState(false);
+  const [isLiked, setIsLiked] = useState({});
   const [steps, setSteps] = useState(false);
   const { data, isLoading } = useGetTestimonials();
   const { data: singleSpace, refetch } = useGetSingleReview(slug);
   const [isTestimonialCradOpen, setIsTestimonialCradOpen] = useState(false);
 
-  console.log(data);
+  const hasLikedTestimonials = Object.values(isLiked).some(
+    (like) => like === true
+  );
 
   const handleDeleteTestimonial = async (testimonialId: string) => {
     const response = await deleteTestimonials(testimonialId);
@@ -122,7 +126,7 @@ const SingleReview = ({ slug }: SingleReviewProp) => {
             setIsEditOpen={setIsEditOpen}
           />
           <div className="flex flex-col w-[70%] gap-y-6 ">
-            {isTestimonialCradOpen === true && isLiked === false ? (
+            {isTestimonialCradOpen === true && !hasLikedTestimonials ? (
               <>
                 <div className="flex flex-col items-center gap-y-5  ">
                   <Image
@@ -139,7 +143,7 @@ const SingleReview = ({ slug }: SingleReviewProp) => {
             ) : (
               <>
                 <TestimonialCard
-                  data={data}
+                  data={data || undefined} // Providing a default value when data is undefined
                   isLiked={isLiked}
                   setIsLiked={setIsLiked}
                   setIsDeleteOpen={setIsDeleteOpen}
@@ -366,35 +370,11 @@ const SingleReview = ({ slug }: SingleReviewProp) => {
         </DialogContent>
       </Dialog>
 
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent className="max-w-[65%] h-[90%] overflow-y-scroll">
-          <DialogHeader>
-            <DialogTitle className="text-center text-3xl font-bold">
-              Add collecting widget to your own website
-            </DialogTitle>
-            <DialogDescription></DialogDescription>
-          </DialogHeader>
-          <div>
-            <TestimonialReview slug={slug} />
-          </div>
-          <DialogFooter className="">
-            <div className="flex flex-row items-center justify-between">
-              <Button className="w-[50%]" variant={"secondary"}>
-                Close
-              </Button>
-              <Button
-                type="submit"
-                className="flex flex-row w-[50% items-center gap-x-1"
-              >
-                <span>
-                  <Copy size={16} />
-                </span>
-                <span>Copy Code</span>
-              </Button>
-            </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      <CollectingWidgetModal
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        slug={slug}
+      />
 
       <SingleTestimonialModal
         isSingleTestimonialOpen={isSingleTestimonialOpen}