add creation time to reviews

radekm2000 · Mar 18, 2024 · 3532656 · 3532656
1 parent 5441af5
commit 3532656
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 29 deletions.
diff --git a/client/ecommerce/package-lock.json b/client/ecommerce/package-lock.json
diff --git a/client/ecommerce/package.json b/client/ecommerce/package.json
@@ -20,6 +20,7 @@
     "@stripe/stripe-js": "^2.4.0",
     "@tanstack/react-query": "^5.14.2",
     "axios": "^1.6.2",
+    "date-fns": "^3.6.0",
     "lodash": "^4.17.21",
     "material-ui-popup-state": "^5.0.10",
     "react": "^18.2.0",

diff --git a/client/ecommerce/src/components/TabPanel.tsx b/client/ecommerce/src/components/TabPanel.tsx
@@ -124,8 +124,9 @@ function CustomTabPanel(props: TabPanelProps) {
             justifyContent: "center",
           }}
         >
-          {props.reviews?.map((review) => (
+          {props.reviews?.map((review, index) => (
             <Box
+              key={index}
               sx={{
                 gap: "5px",
                 width: "100%",
@@ -134,33 +135,40 @@ function CustomTabPanel(props: TabPanelProps) {
                 marginTop: "10px",
               }}
             >
-              {review.reviewCreator.avatar ? (
-                <Avatar
-                  src={review.reviewCreator.avatar}
-                  sx={{ width: "48px", height: "48px" }}
-                />
-              ) : (
-                <AccountCircle
-                  sx={{ width: "48px", height: "48px", color: "grey" }}
-                />
-              )}
-              <Box sx={{ display: "flex", flexDirection: "column" }}>
-                <Link href={`/members/${review.reviewCreator.id}`}>
-                  <Typography
-                    sx={{
-                      color: "#007782",
-                      fontSize: "16px",
-                      cursor: "pointer",
-                    }}
-                  >
-                    {review.reviewCreator.username}
+              <Box sx={{ display: "flex" }}>
+                {review.reviewCreator.avatar ? (
+                  <Avatar
+                    src={review.reviewCreator.avatar}
+                    sx={{ width: "48px", height: "48px" }}
+                  />
+                ) : (
+                  <AccountCircle
+                    sx={{ width: "48px", height: "48px", color: "grey" }}
+                  />
+                )}
+                <Box sx={{ display: "flex", flexDirection: "column" }}>
+                  <Link href={`/members/${review.reviewCreator.id}`}>
+                    <Typography
+                      sx={{
+                        color: "#007782",
+                        fontSize: "16px",
+                        cursor: "pointer",
+                      }}
+                    >
+                      {review.reviewCreator.username}
+                    </Typography>
+                  </Link>
+                  <Rating value={review.rating} size="small" readOnly />
+                  <Typography sx={{ color: "#4D4D4D", fontSize: "16px" }}>
+                    {review.comment}
                   </Typography>
-                </Link>
-                <Rating value={review.rating} size="small" readOnly />
-                <Typography sx={{ color: "#4D4D4D", fontSize: "16px" }}>
-                  {review.comment}
+                  <Divider sx={{ my: 2, borderColor: "white" }} />
+                </Box>
+              </Box>
+              <Box sx={{ marginLeft: "auto" }}>
+                <Typography sx={{ color: "#1212125A", fontSize: "14px" }}>
+                  {review.createdAt}
                 </Typography>
-                <Divider sx={{ my: 2, borderColor: "white" }} />
               </Box>
             </Box>
           ))}

diff --git a/client/ecommerce/src/components/pages/Member.tsx b/client/ecommerce/src/components/pages/Member.tsx
@@ -6,6 +6,14 @@ import { useMediaQuery } from "../../hooks/useMediaQuery";
 import { useUserInfo } from "../../hooks/useUserInfo";
 import BasicTabs from "../TabPanel";
 import { useEffect, useState } from "react";
+import {
+  compareAsc,
+  compareDesc,
+  format,
+  formatDistanceToNowStrict,
+  parseISO,
+} from "date-fns";
+import { string } from "zod";
 
 export const Member = () => {
   const [tab, setTab] = useState("");
@@ -48,7 +56,22 @@ export const Member = () => {
   if (!products) {
     return "No products to display";
   }
-  const reviews = user.reviews
+  const reviews = user.reviews;
+
+  const sortedReviewsByCreateTime = reviews.sort((a, b) =>
+    compareDesc(a.createdAt, b.createdAt)
+  );
+
+  const timeFormattedReviews = sortedReviewsByCreateTime.map((review) => {
+    const formattedDistance = formatDistanceToNowStrict(review.createdAt, {
+      addSuffix: true,
+    });
+    return {
+      ...review,
+      createdAt: formattedDistance,
+    };
+  });
+
   return (
     <Box
       sx={{
@@ -64,14 +87,17 @@ export const Member = () => {
       <ProfileInfo user={user} />
       <Box
         sx={{
-
           maxWidth: "1260px",
           width: "100%",
           display: "column",
           padding: "20x",
         }}
       >
-        <BasicTabs reviews={reviews} setTab={setTab} memberproducts={memberProducts} />
+        <BasicTabs
+          reviews={timeFormattedReviews}
+          setTab={setTab}
+          memberproducts={memberProducts}
+        />
 
         {/* <Typography
           sx={{ fontSize: "16px", color: "#171717", padding: "16px" }}

diff --git a/client/ecommerce/src/types/types.ts b/client/ecommerce/src/types/types.ts
@@ -87,6 +87,7 @@ export type Review = {
   comment: string;
   rating: number;
   reviewCreator: User;
+  createdAt: string
 };
 
 export type ExtendedUserWithProfileAndReviews = UserWithFollows & {

diff --git a/server/ecommerce/src/utils/entities/review.entity.ts b/server/ecommerce/src/utils/entities/review.entity.ts
@@ -4,6 +4,7 @@ import {
   JoinColumn,
   ManyToOne,
   PrimaryGeneratedColumn,
+  UpdateDateColumn,
 } from 'typeorm';
 import { User } from './user.entity';
 
@@ -24,4 +25,7 @@ export class Review {
   @ManyToOne(() => User)
   @JoinColumn()
   reviewCreator: User;
+
+  @UpdateDateColumn()
+  createdAt: Date;
 }