add feat review and update feat gitcard

phamhuutinh0605 · Jun 9, 2023 · b7d0153 · b7d0153
1 parent 99df15b
commit b7d0153
Show file tree

Hide file tree

Showing 18 changed files with 583 additions and 409 deletions.
diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" href="/img/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link
       href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"

diff --git a/package.json b/package.json
@@ -9,10 +9,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^4.29.12",
     "axios": "^1.4.0",
     "infinite-react-carousel": "^1.2.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-query": "^3.39.3",
     "react-router-dom": "^6.8.0",
     "sass": "^1.58.0"
   },

diff --git a/public/img/logo.png b/public/img/logo.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -13,14 +13,18 @@ import Orders from "./pages/orders/Orders";
 import Messages from "./pages/messages/Messages";
 import Message from "./pages/message/Message";
 import MyGigs from "./pages/myGigs/MyGigs";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
+const queryClient = new QueryClient();
 function App() {
   const Layout = () => {
     return (
       <div className="app">
-        <Navbar />
-        <Outlet />
-        <Footer />
+        <QueryClientProvider client={queryClient}>
+          <Navbar />
+          <Outlet />
+          <Footer />
+        </QueryClientProvider>
       </div>
     );
   };

diff --git a/src/components/catCard/CatCard.jsx b/src/components/catCard/CatCard.jsx
@@ -4,7 +4,7 @@ import "./CatCard.scss";
 
 function CatCard({ card }) {
   return (
-    <Link to="/gigs?cat=design">
+    <Link to={`/gigs?cat=${card.title}`}>
       <div className="catCard">
         <img src={card.img} alt="" />
         <span className="desc">{card.desc}</span>

diff --git a/src/components/featured/Featured.jsx b/src/components/featured/Featured.jsx
@@ -7,7 +7,7 @@ function Featured() {
       <div className="container">
         <div className="left">
           <h1>
-            Công <span>VIỆT</span> - Việc làm cho người <span>VIỆT</span>
+            Công<span>VIỆT</span> - Việc làm cho người <span>VIỆT</span>
           </h1>
           <div className="search">
             <div className="searchInput">

diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
@@ -69,7 +69,7 @@ function Footer() {
         <div className="bottom">
           <div className="left">
             <h2>
-              Công <span>VIỆT</span>
+              Công<span>VIỆT</span>
             </h2>
             <span>© CôngVIỆT International Ltd. 2023</span>
           </div>

diff --git a/src/components/gigCard/GigCard.jsx b/src/components/gigCard/GigCard.jsx
@@ -1,30 +1,48 @@
-import React from "react";
+import React, { useEffect } from "react";
 import "./GigCard.scss";
 import { Link } from "react-router-dom";
+import { formatPrice } from "../../utils/formatPrice";
+import { useQuery } from "@tanstack/react-query";
+import newRequest from "../../utils/newRequest";
 
 const GigCard = ({ item }) => {
+  const { data, isLoading, error } = useQuery({
+    queryKey: [item.userId],
+    queryFn: async () => {
+      return newRequest.get(`/users/${item.userId}`).then((res) => res.data);
+    },
+  });
   return (
-    <Link to="/gig/123" className="link">
+    <Link to={`/gig/${item._id}`} className="link">
       <div className="gigCard">
         <img src={item.img} alt="" />
         <div className="info">
-          <div className="user">
-            <img src={item.pp} alt="" />
-            <span>{item.username}</span>
-          </div>
-          <p>{item.desc}</p>
+          {isLoading ? (
+            "Loading..."
+          ) : error ? (
+            "Something went wrong!"
+          ) : (
+            <div className="user">
+              <img src={data.img || "/img/noavatar.jpg"} alt="" />
+              <span>{data.username}</span>
+            </div>
+          )}
+          <p>
+            {item.desc.slice(0, 55)} <i>...xem thêm</i>
+          </p>
           <div className="star">
             <img src="./img/star.png" alt="" />
-            <span>{item.star}</span>
+            <span>
+              {!isNaN(item.totalStars / item.starNumber) &&
+                Math.round(data?.totalStar / data?.starNumber)}
+            </span>
           </div>
         </div>
         <hr />
         <div className="detail">
           <img src="./img/heart.png" alt="" />
           <div className="price">
-            <h2>
-              {item.price} VNĐ
-            </h2>
+            <h2>{formatPrice(item.price)}</h2>
           </div>
         </div>
       </div>

diff --git a/src/components/review/Review.jsx b/src/components/review/Review.jsx
@@ -0,0 +1,54 @@
+import { useQuery } from "@tanstack/react-query";
+import React from "react";
+import newRequest from "../../utils/newRequest";
+import "./Review.scss";
+const Review = ({ review }) => {
+  const { isLoading, error, data } = useQuery(
+    {
+      queryKey: [review.userId],
+      queryFn: () =>
+        newRequest.get(`/users/${review.userId}`).then((res) => {
+          return res.data;
+        }),
+    },
+  );
+
+
+  return (
+    <div className="review">
+      {isLoading ? (
+        "loading"
+      ) : error ? (
+        "error"
+      ) : (
+        <div className="user">
+          <img className="pp" src={data.img || "/img/noavatar.jpg"} alt="" />
+          <div className="info">
+            <span>{data.username}</span>
+            <div className="country">
+              <span>{data.country}</span>
+            </div>
+          </div>
+        </div>
+      )}
+      <div className="stars">
+        {Array(review.star)
+          .fill()
+          .map((item, i) => (
+            <img src="/img/star.png" alt="" key={i} />
+          ))}
+        <span>{review.star}</span>
+      </div>
+      <p>{review.desc}</p>
+      <div className="helpful">
+        <span>Helpful?</span>
+        <img src="/img/like.png" alt="" />
+        <span>Yes</span>
+        <img src="/img/dislike.png" alt="" />
+        <span>No</span>
+      </div>
+    </div>
+  );
+};
+
+export default Review;
diff --git a/src/components/review/Review.scss b/src/components/review/Review.scss
@@ -0,0 +1,52 @@
+.review {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin: 20px 0px;
+  .user {
+    display: flex;
+    align-items: center;
+    .pp {
+      height: 50px;
+      width: 50px;
+      border-radius: 50%;
+    }
+
+    .country {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      color: gray;
+
+      img {
+        width: 20px;
+      }
+    }
+  }
+
+  .stars {
+    display: flex;
+    gap: 5px;
+
+    img {
+      height: 14px;
+      width: 14px;
+    }
+
+    span {
+      font-size: 14px;
+      font-weight: bold;
+      color: #ffc108;
+    }
+  }
+
+  .helpful {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    img {
+      width: 14px;
+    }
+  }
+}
diff --git a/src/components/reviews/Reviews.jsx b/src/components/reviews/Reviews.jsx
@@ -0,0 +1,58 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import React from "react";
+import newRequest from "../../utils/newRequest";
+import Review from "../review/Review";
+import "./Reviews.scss";
+const Reviews = ({ gigId }) => {
+  const queryClient = useQueryClient();
+  const { isLoading, error, data } = useQuery({
+    queryKey: ["reviews"],
+    queryFn: () =>
+      newRequest.get(`/reviews/${gigId}`).then((res) => {
+        return res.data;
+      }),
+  });
+
+  const mutation = useMutation({
+    mutationFn: (review) => {
+      return newRequest.post("/reviews", review);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries(["reviews"]);
+    },
+  });
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const desc = e.target[0].value;
+    const star = e.target[1].value;
+    mutation.mutate({ gigId, desc, star });
+  };
+
+  return (
+    <div className="reviews">
+      <h2>Đánh Giá</h2>
+      {isLoading
+        ? "loading"
+        : error
+        ? "Something went wrong!"
+        : data.map((review) => <Review key={review._id} review={review} />)}
+      <div className="add">
+        <h3>Thêm đánh giá về người này</h3>
+        <form action="" className="addForm" onSubmit={handleSubmit}>
+          <input type="text" placeholder="write your opinion" />
+          <select name="" id="">
+            <option value={1}>1</option>
+            <option value={2}>2</option>
+            <option value={3}>3</option>
+            <option value={4}>4</option>
+            <option value={5}>5</option>
+          </select>
+          <button>Gửi</button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Reviews;
diff --git a/src/components/reviews/Reviews.scss b/src/components/reviews/Reviews.scss
@@ -0,0 +1,41 @@
+.reviews {
+  margin-top: 50px;
+
+  .add {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    .addForm {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+
+      input {
+        padding: 20px;
+      }
+
+      select {
+        width: 200px;
+        padding: 20px;
+        align-self: flex-end;
+      }
+      button {
+        align-self: flex-end;
+        width: 100px;
+        border: none;
+        padding: 10px;
+        color: white;
+        background-color: #1dbf73;
+        cursor: pointer;
+      }
+    }
+  }
+
+  hr {
+    height: 0;
+    border: 0.5px solid lightgray;
+    margin: 50px 0px;
+  }
+}