Add Room Detail logic

backend/users/migrations/0004_alter_user_avatar.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.15 on 2024-08-22 12:27
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('users', '0003_alter_user_avatar'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='user',
+            name='avatar',
+            field=models.URLField(blank=True, max_length=300),
+        ),
+    ]

backend/users/models.py

@@ -18,7 +18,7 @@ class CurrencyChoices(models.TextChoices):
         max_length=150,
         editable=False,
     )
-    avatar = models.URLField(blank=True)
+    avatar = models.URLField(blank=True, max_length=300)
     name = models.CharField(
         max_length=150,
         default="",

frontend/src/api.ts

@@ -52,3 +52,10 @@ export const getRoom = async ({ queryKey }: QueryFunctionContext) => {
     throw error;
   }
 };
+
+export const getRoomReviews = ({ queryKey }: QueryFunctionContext) => {
+  const [_, roomPk] = queryKey;
+  return instance
+    .get(`rooms/${roomPk}/reviews`)
+    .then((response) => response.data);
+};

frontend/src/routes/Home.tsx

@@ -3,26 +3,10 @@ import { useQuery } from "@tanstack/react-query";
 import { getRooms } from "../api";
 import RoomSkeleton from "../components/RoomSkeleton";
 import Room from "../components/Room";
-
-interface IPhoto {
-  pk: string;
-  file: string;
-  description: string;
-}
-
-interface IRoom {
-  pk: number;
-  name: string;
-  country: string;
-  city: string;
-  price: number;
-  rating: number;
-  is_owner: boolean;
-  photos: IPhoto[];
-}
+import { IRoomList } from "../types";
 
 export default function Home() {
-  const { isLoading, data } = useQuery<IRoom[]>({
+  const { isLoading, data } = useQuery<IRoomList[]>({
     queryKey: ["rooms"],
     queryFn: getRooms,
   });

frontend/src/routes/RoomDetail.tsx

@@ -1,13 +1,125 @@
+import {
+  Box,
+  Grid,
+  GridItem,
+  Heading,
+  HStack,
+  Image,
+  Skeleton,
+  VStack,
+  Text,
+  Avatar,
+  Container,
+} from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
 import { useParams } from "react-router-dom";
-import { getRoom } from "../api";
+import { getRoom, getRoomReviews } from "../api";
+import { IReview, IRoomDetail } from "../types";
+import { FaStar } from "react-icons/fa";
 
 export default function RoomDetail() {
   const { roomPk } = useParams();
-  const { isLoading, data } = useQuery({
-    queryKey: ["rooms", roomPk],
+  const { isLoading, data } = useQuery<IRoomDetail>({
+    queryKey: [`rooms`, roomPk],
     queryFn: getRoom,
   });
-  console.log(data);
-  return <h1>hello</h1>;
+
+  const { data: reviewsData, isLoading: isReviewsLoading } = useQuery<
+    IReview[]
+  >({ queryKey: [`rooms`, roomPk, `reviews`], queryFn: getRoomReviews });
+  return (
+    <Box
+      mt={10}
+      px={{
+        base: 10,
+        lg: 40,
+      }}
+    >
+      <Skeleton height={"43px"} width="25%" isLoaded={!isLoading}>
+        <Heading>{data?.name}</Heading>
+      </Skeleton>
+      <Grid
+        mt={8}
+        rounded="xl"
+        overflow={"hidden"}
+        gap={2}
+        height="60vh"
+        templateRows={"1fr 1fr"}
+        templateColumns={"repeat(4, 1fr)"}
+      >
+        {[0, 1, 2, 3, 4].map((index) => (
+          <GridItem
+            colSpan={index === 0 ? 2 : 1}
+            rowSpan={index === 0 ? 2 : 1}
+            overflow={"hidden"}
+            key={index}
+          >
+            <Skeleton isLoaded={!isLoading} h="100%" w="100%">
+              <Image
+                objectFit={"cover"}
+                w="100%"
+                h="100%"
+                src={data?.photos[index].file}
+              />
+            </Skeleton>
+          </GridItem>
+        ))}
+      </Grid>
+      <HStack width={"40%"} justifyContent={"space-between"} mt={10}>
+        <VStack alignItems={"flex-start"}>
+          <Skeleton isLoaded={!isLoading} height={"30px"}>
+            <Heading fontSize={"2xl"}>
+              House hosted by {data?.owner.name}
+            </Heading>
+          </Skeleton>
+          <Skeleton isLoaded={!isLoading} height={"30px"}>
+            <HStack justifyContent={"flex-start"} w="100%">
+              <Text>
+                {data?.toilets} toliet{data?.toilets === 1 ? "" : "s"}
+              </Text>
+              <Text>∙</Text>
+              <Text>
+                {data?.rooms} room{data?.rooms === 1 ? "" : "s"}
+              </Text>
+            </HStack>
+          </Skeleton>
+        </VStack>
+        <Avatar name={data?.owner.name} size={"xl"} src={data?.owner.avatar} />
+      </HStack>
+      <Box mt={10}>
+        <Heading mb={5} fontSize={"2xl"}>
+          <HStack>
+            <FaStar /> <Text>{data?.rating}</Text>
+            <Text>∙</Text>
+            <Text>
+              {reviewsData?.length} review{reviewsData?.length === 1 ? "" : "s"}
+            </Text>
+          </HStack>
+        </Heading>
+        <Container mt={16} maxW="container.lg" marginX="none">
+          <Grid gap={10} templateColumns={"1fr 1fr"}>
+            {reviewsData?.map((review, index) => (
+              <VStack alignItems={"flex-start"} key={index}>
+                <HStack>
+                  <Avatar
+                    name={review.user.name}
+                    src={review.user.avatar}
+                    size="md"
+                  />
+                  <VStack spacing={0} alignItems={"flex-start"}>
+                    <Heading fontSize={"md"}>{review.user.name}</Heading>
+                    <HStack spacing={1}>
+                      <FaStar size="12px" />
+                      <Text>{review.rating}</Text>
+                    </HStack>
+                  </VStack>
+                </HStack>
+                <Text>{review.payload}</Text>
+              </VStack>
+            ))}
+          </Grid>
+        </Container>
+      </Box>
+    </Box>
+  );
 }

frontend/src/types.ts

@@ -0,0 +1,52 @@
+export interface IRoomPhotoPhoto {
+  pk: string;
+  file: string;
+  description: string;
+}
+
+export interface IRoomList {
+  pk: number;
+  name: string;
+  country: string;
+  city: string;
+  price: number;
+  rating: number;
+  is_owner: boolean;
+  photos: IRoomPhotoPhoto[];
+}
+
+export interface IRoomOwner {
+  name: string;
+  avatar: string;
+  username: string;
+}
+
+export interface IAmenity {
+  name: string;
+  description: string;
+}
+
+export interface IRoomDetail extends IRoomList {
+  created_at: string;
+  updated_at: string;
+  rooms: number;
+  toilets: number;
+  description: string;
+  address: string;
+  pet_friendly: true;
+  kind: string;
+  is_owner: boolean;
+  is_liked: boolean;
+  category: {
+    name: string;
+    kind: string;
+  };
+  owner: IRoomOwner;
+  amenities: IAmenity[];
+}
+
+export interface IReview {
+  payload: string;
+  rating: number;
+  user: IRoomOwner;
+}