Merge pull request #58 from Redot-Engine/feature/improve-review-system

Dynamic Reviews Implementation

components/landing/ReviewCard.tsx

@@ -1,20 +1,17 @@
 import { cn } from "@/lib/utils";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { InterfaceReview } from "@/sanity/schemaTypes/reviewType";
 
-interface ReviewsProps {
+interface ReviewsProps extends InterfaceReview {
   className?: string;
-  avatar: string;
-  name: string;
-  username: string;
-  body: string;
 }
 
 export const ReviewCard = ({
-  avatar,
+  className,
   name,
   username,
+  imageUrl,
   body,
-  className,
 }: ReviewsProps) => {
   return (
     <div
@@ -26,14 +23,14 @@ export const ReviewCard = ({
       <div className="flex flex-row items-center">
         <div className="flex items-center space-x-2">
           <Avatar>
-            <AvatarImage src={avatar} alt={name} />
+            <AvatarImage src={imageUrl} alt={name} />
             <AvatarFallback>
               {name ? name.charAt(0).toUpperCase() : ""}
             </AvatarFallback>
           </Avatar>
           <div className="flex flex-col space-y-1">
             <p className="text-sm font-medium leading-none">{name}</p>
-            <p className="text-xs text-muted-foreground">{username}</p>
+            <p className="text-xs text-muted-foreground">{username.current}</p>
           </div>
         </div>
       </div>

components/sections/landing/Review.tsx

@@ -4,15 +4,28 @@ import { motion } from "motion/react";
 import { useInView } from "react-intersection-observer";
 import { ReviewCard } from "@/components/landing/ReviewCard";
 import Marquee from "@/components/ui/marquee";
-import { reviews } from "@/constants/reviews";
 import SectionHeader from "@/components/SectionHeader";
+import { useEffect, useState } from "react";
+import { fetchAllReviews } from "@/lib/review";
+import { InterfaceReview } from "@/sanity/schemaTypes/reviewType";
 
 export const Review = () => {
   const { ref, inView } = useInView({
     threshold: 0.1,
     triggerOnce: true,
   });
 
+  const [reviews, setReviews] = useState([]);
+
+  useEffect(() => {
+    const getReviews = async () => {
+      const data = await fetchAllReviews();
+      setReviews(data);
+    };
+
+    getReviews();
+  }, []);
+
   const firstRow = reviews.slice(0, reviews.length / 2);
   const secondRow = reviews.slice(reviews.length / 2);
 
@@ -35,18 +48,18 @@ export const Review = () => {
           <div className="hidden md:block">
             <div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
               <Marquee pauseOnHover className="[--duration:20s]">
-                {firstRow.map((review) => (
+                {firstRow.map((review: InterfaceReview) => (
                   <ReviewCard
-                    key={review.username}
+                    key={review.username.current}
                     className="w-64"
                     {...review}
                   />
                 ))}
               </Marquee>
               <Marquee reverse pauseOnHover className="[--duration:20s]">
-                {secondRow.map((review) => (
+                {secondRow.map((review: InterfaceReview) => (
                   <ReviewCard
-                    key={review.username}
+                    key={review.username.current}
                     className="w-64"
                     {...review}
                   />
@@ -63,9 +76,9 @@ export const Review = () => {
                 vertical
                 className="h-[30rem] w-full [--duration:20s]"
               >
-                {firstRow.map((review) => (
+                {firstRow.map((review: InterfaceReview) => (
                   <ReviewCard
-                    key={review.username}
+                    key={review.username.current}
                     className="w-full"
                     {...review}
                   />

lib/review.ts

@@ -0,0 +1,16 @@
+import { client } from "@/sanity/lib/client";
+
+export async function fetchAllReviews() {
+  const query = `*[_type == "review"] {
+    _id,
+    name,
+    username {
+      current
+    },
+    image,
+    "imageUrl": image.asset->url,
+    body
+  }`;
+
+  return await client.fetch(query);
+}

sanity/schemaTypes/index.ts

@@ -2,7 +2,8 @@ import { type SchemaTypeDefinition } from "sanity";
 import { postType } from "@/sanity/schemaTypes//postType";
 import { tagType } from "@/sanity/schemaTypes/tagType";
 import { authorType } from "@/sanity/schemaTypes/authorType";
+import { reviewType } from "@/sanity/schemaTypes/reviewType";
 
 export const schema: { types: SchemaTypeDefinition[] } = {
-  types: [postType, tagType, authorType],
+  types: [postType, tagType, authorType, reviewType],
 };

sanity/schemaTypes/reviewType.ts

@@ -0,0 +1,49 @@
+import { defineField, defineType } from "sanity";
+
+export interface InterfaceReview {
+  name: string;
+  username: { current: string };
+  image?: any;
+  imageUrl: string;
+  body: string;
+  _id: string;
+}
+
+export const reviewType = defineType({
+  name: "review",
+  title: "Review",
+  type: "document",
+  fields: [
+    defineField({
+      name: "name",
+      title: "Display Name",
+      description: "The name that will be displayed for this review.",
+      type: "string",
+      validation: (rule) => rule.required().max(100),
+    }),
+    defineField({
+      name: "username",
+      title: "Username",
+      type: "slug",
+      options: { source: "name" },
+      validation: (rule) => rule.required(),
+    }),
+    defineField({
+      name: "image",
+      title: "User Avatar",
+      description: "A profile picture or avatar for the reviewer.",
+      type: "image",
+      options: {
+        hotspot: true,
+      },
+      validation: (rule) => rule.required(),
+    }),
+    defineField({
+      name: "body",
+      title: "Review Body",
+      description: "The main text content of the review.",
+      type: "text",
+      validation: (rule) => rule.required().min(10).max(500),
+    }),
+  ],
+});