list reviews

src/actions/place.ts

@@ -5,6 +5,7 @@ import { apiHandler } from "@/lib/apiHandler";
 import { CountResponse, ResponseMeta, SeverActionResponse } from "@/types";
 import { User } from "@/types/auth";
 import { Place, PlaceService } from "@/types/place";
+import { Ratings } from "@/types/ratings";
 import { Query } from "@/types/url";
 import { getErrorMessage } from "@/utils/helpers";
 import { Tags } from "@/utils/tags";
@@ -14,6 +15,10 @@ interface PlacesResponse {
  items: Place[];
  meta: ResponseMeta;
 }
+interface RatingsResponse {
+ items: Ratings[];
+ meta: ResponseMeta;
+}
 
 export async function getPlaces(
  query: Query,
@@ -152,3 +157,20 @@ export async function getPlaceService(
  return { error: getErrorMessage(error) };
  }
 }
+export async function getPlaceRatings(
+ placeId: string,
+ query: Query,
+): Promise<SeverActionResponse<RatingsResponse>> {
+ try {
+ const endpoint = apiConfig.places.ratings(placeId, query);
+ const results = await apiHandler<RatingsResponse>({
+ endpoint,
+ method: "GET",
+ next: { tags: [Tags.reviews] },
+ });
+ return { results };
+ } catch (error) {
+ console.log(error);
+ return { error: getErrorMessage(error) };
+ }
+}

src/actions/ratings.ts

@@ -0,0 +1,21 @@
+"use server";
+
+import { apiConfig } from "@/lib/apiConfig";
+import { apiHandler } from "@/lib/apiHandler";
+import { getErrorMessage } from "@/utils/helpers";
+import { Tags } from "@/utils/tags";
+import { revalidateTag } from "next/cache";
+
+export async function deleteRating(ratingId: string) {
+ try {
+ const endpoint = apiConfig.ratings.get(ratingId);
+ await apiHandler({
+ endpoint,
+ method: "DELETE",
+ });
+ revalidateTag(Tags.reviews);
+ } catch (error) {
+ console.log(error);
+ return { error: getErrorMessage(error) };
+ }
+}

src/app/(dashboard)/places/[placeId]/_sections/placeContent/PlaceBookings.tsx

@@ -29,7 +29,7 @@ export default function PlaceBookings({ place }: Props) {
 
  return (
  <WithServerError error={error?.message}>
- <div className='mt-4'>
+ <div className='mt-4 px-3'>
  <h3 className='font-semibold text-lg mb-2'>List of all bookings </h3>
  <BookingListTable bookings={bookings?.results?.items ?? []} />
  {totalPages > 1 && (

src/app/(dashboard)/places/[placeId]/_sections/placeContent/PlaceReviews.tsx

@@ -0,0 +1,60 @@
+import { getPlaceRatings } from "@/actions/place";
+import WithServerError from "@/components/hoc/WithServerError";
+import EmptyContent from "@/components/shared/EmptyContent";
+import ReviewCard from "@/components/shared/cards/ReviewCard";
+import HStack from "@/components/shared/layout/HStack";
+import { Place } from "@/types/place";
+import { Pagination, Skeleton } from "@nextui-org/react";
+import { useQuery } from "@tanstack/react-query";
+import React, { useState } from "react";
+
+interface Props {
+ place: Place;
+}
+export default function PlaceReviews({ place }: Props) {
+ const [page, setPage] = useState(1);
+
+ const { data, error, isPending } = useQuery({
+ queryKey: ["placeReviews", place?.id, page],
+ queryFn: () => getPlaceRatings(place?.id, { page }),
+ });
+
+ if (isPending) {
+ return (
+ <div className='grid grid-cols-2 xl:grid-cols-3 gap-3'>
+ {Array.from("loadin").map((l) => (
+ <Skeleton className='rounded-lg mb-3' key={l}>
+ <div className='h-40 rounded-lg bg-default-300'></div>
+ </Skeleton>
+ ))}
+ </div>
+ );
+ }
+
+ if (data?.results?.items?.length === 0 && !isPending) {
+ return <EmptyContent title='No reviews yet' />;
+ }
+
+ const totalPages = data?.results?.meta?.totalPages || 1;
+
+ return (
+ <WithServerError error={error?.message}>
+ <div className='grid grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4'>
+ {data?.results?.items?.map((rating) => (
+ <ReviewCard key={rating?.id} rating={rating} />
+ ))}
+ </div>
+ {totalPages > 1 && (
+ <HStack className='justify-center mt-3'>
+ <Pagination
+ total={totalPages}
+ initialPage={1}
+ variant='bordered'
+ showControls
+ onChange={(page) => setPage(page)}
+ />
+ </HStack>
+ )}
+ </WithServerError>
+ );
+}

src/app/(dashboard)/places/[placeId]/_sections/placeContent/PlaceServices.tsx

@@ -58,7 +58,7 @@ export default function PlaceServices({ place }: Props) {
  }
 
  return (
- <div className='mt-6'>
+ <div className='mt-6 px-3'>
  <HStack className='justify-between mb-4'>
  <Controller
  render={({ field }) => (

src/app/(dashboard)/places/[placeId]/_sections/placeContent/ProductCategoriesSection.tsx

@@ -57,7 +57,7 @@ export default function ProductCategoriesSection({
  };
 
  return (
- <div>
+ <div className='p-3'>
  <div className='flex justify-between items-center mb-5'>
  <div>
  <h3 className='text-lg'>Service categories</h3>

src/app/(dashboard)/places/[placeId]/_sections/placeContent/index.tsx

@@ -5,33 +5,35 @@ import React from "react";
 import ProductCategoriesSection from "./ProductCategoriesSection";
 import PlaceServices from "./PlaceServices";
 import PlaceBookings from "./PlaceBookings";
+import PlaceReviews from "./PlaceReviews";
 
 interface Props {
  place: Place;
 }
 export default function PlaceContent({ place }: Props) {
  return (
- <div className='px-4 py-5'>
+ <div className=' pb-5'>
  <div className='w-full'>
  <Tabs
- size={"md"}
+ size={"lg"}
  aria-label='place nav tabs'
- className='w-full min-w-full'
+ className='w-full min-w-full bg-gray-300'
+ variant='underlined'
  >
- <Tab key='productCategory' title='Product Category'>
+ <Tab className='p-4' key='productCategory' title='Product Category'>
  <ProductCategoriesSection
  placeId={place?.id}
  categories={place?.productCategory}
  />
  </Tab>
- <Tab key='products' title='Products (Services/Menu)'>
+ <Tab className='p-4' key='products' title='Products (Services/Menu)'>
  <PlaceServices place={place} />
  </Tab>
- <Tab key='bookings' title='Bookings'>
+ <Tab className='p-4' key='bookings' title='Bookings'>
  <PlaceBookings place={place} />
  </Tab>
- <Tab key='Reviews' title='Reviews'>
- <div>Reviews</div>
+ <Tab className='p-4' key='Reviews' title='Reviews'>
+ <PlaceReviews place={place} />
  </Tab>
  </Tabs>
  </div>

src/app/(dashboard)/places/[placeId]/page.tsx

@@ -17,7 +17,7 @@ export default async function PlaceDetailPage({ params }: PageProps) {
 
  return (
  <WithServerError error={error}>
- <div className='flex gap-3 min-h-screen bg-gray-50'>
+ <div className='flex min-h-screen bg-gray-50'>
  <div className='w-1/4 sticky top-0 min-h-full'>
  <PlaceSidebar place={response?.results!} />
  </div>

src/components/shared/cards/ReviewCard.tsx

@@ -0,0 +1,123 @@
+"use client";
+import React from "react";
+import {
+ Card,
+ CardHeader,
+ CardBody,
+ CardFooter,
+ Avatar,
+ Button,
+ useDisclosure,
+} from "@nextui-org/react";
+import { Ratings } from "@/types/ratings";
+import { getErrorMessage, getInitials, pluralize } from "@/utils/helpers";
+import Modal from "../modal";
+import { useServerAction } from "@/hooks/useServerAction";
+import { deleteRating } from "@/actions/ratings";
+import { toast } from "sonner";
+import { useQueryClient } from "@tanstack/react-query";
+
+interface Props {
+ rating: Ratings;
+}
+export default function ReviewCard({ rating }: Props) {
+ const { isOpen, onOpen, onClose } = useDisclosure();
+
+ const [runDeleteReview, { loading }] = useServerAction<
+ any,
+ typeof deleteRating
+ >(deleteRating);
+
+ const queryClient = useQueryClient();
+
+ const onConfirmDelete = async () => {
+ try {
+ const response = await runDeleteReview(rating?.id);
+ if (response?.error) {
+ toast.error(response.error);
+ return;
+ }
+ toast.success("Review deleted");
+ queryClient.invalidateQueries({
+ queryKey: ["getReviews", rating?.booking?.place?.id],
+ });
+ onClose();
+ } catch (error) {
+ toast.error(getErrorMessage(error));
+ }
+ };
+
+ return (
+ <div>
+ <Card className='max-w-[340px] h-fit' shadow='sm'>
+ <CardHeader className='justify-between'>
+ <div className='flex gap-3'>
+ <Avatar
+ isBordered
+ radius='full'
+ size='sm'
+ fallback={getInitials(rating?.user?.fullName)}
+ />
+ <div className='flex flex-col gap-1 items-start justify-center'>
+ <h4 className='text-small font-semibold line-clamp-1 leading-none text-default-600'>
+ {rating?.user?.fullName}
+ </h4>
+ </div>
+ </div>
+ <Button
+ onClick={onOpen}
+ disableRipple
+ color='primary'
+ radius='full'
+ size='sm'
+ >
+ Delete
+ </Button>
+ </CardHeader>
+ <CardBody className='px-3 py-0 text-small text-default-400'>
+ <p>{rating?.comment}</p>
+ </CardBody>
+ <CardFooter className='gap-3 justify-between'>
+ <div className='flex gap-1'>
+ <p className='font-semibold text-default-400 text-small'>Date:</p>
+ <p className='text-default-400 text-small'>
+ {new Date(rating?.createdAt).toLocaleDateString()}
+ </p>
+ </div>
+ <div className='flex gap-1'>
+ <p className=' text-default-400 text-small'>
+ {rating?.rating} {pluralize("star", rating?.rating)}
+ </p>
+ </div>
+ </CardFooter>
+ </Card>
+ <Modal
+ isOpen={isOpen}
+ onClose={onClose}
+ title='Delete review'
+ description='Are you sure you want to delete this review?'
+ content={
+ <div className='flex flex-col gap-3'>
+ <div className='flex gap-3'>
+ <Button
+ disableRipple
+ color='secondary'
+ onClick={onClose}
+ isDisabled={loading}
+ >
+ Cancel
+ </Button>
+ <Button
+ color='primary'
+ onClick={onConfirmDelete}
+ isLoading={loading}
+ >
+ Continue
+ </Button>
+ </div>
+ </div>
+ }
+ />
+ </div>
+ );
+}

src/lib/apiConfig.ts

@@ -28,6 +28,8 @@ export const apiConfig = {
  products: (placeId: string) => `places/${placeId}/products`,
  new: () => `places/new`,
  popular: () => `places/popular/locations`,
+ ratings: (placeId: string, query: Query) =>
+ `places/${placeId}/ratings${toQuery(query)}`,
  },
  categories: {
  create: () => `categories`,
@@ -73,4 +75,8 @@ export const apiConfig = {
  count: () => `bookings/all/count`,
  sales: (year: string) => `bookings/all/sales${toQuery({ year })}`,
  },
+ ratings: {
+ root: () => `reviews`,
+ get: (ratingId: string) => `reviews/${ratingId}`,
+ },
 };

src/types/ratings.ts

@@ -0,0 +1,14 @@
+import { User } from "./auth";
+import { Booking } from "./booking";
+
+export interface Ratings {
+ id: string;
+ createdAt: string;
+ updatedAt: string;
+ deletedAt: string | null;
+ rating: number;
+ comment: string;
+ date: string;
+ user: User;
+ booking: Booking;
+}

src/utils/tags.ts

@@ -1,6 +1,7 @@
 export enum Tags {
  places = "places",
  place = "place",
+ reviews = "reviews",
  place_service = "place_service",
  categories = "categories",
  users = "users",