Merge pull request #137 from SHni99/develop-cz

Squashed Bugs + Added Sort/Filter for Listings
SHni99 · Jul 17, 2022 · 0fddf0d · 0fddf0d
2 parents b4ce348 + 3311b4a
commit 0fddf0d
Show file tree

Hide file tree

Showing 11 changed files with 590 additions and 136 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "bootstrap": "^5.2.0-beta1",
     "bootstrap-icons": "^1.8.3",
     "bootstrap-switch-button-react": "^1.2.0",
+    "fast-fuzzy": "^1.11.2",
     "lodash": "^4.17.21",
     "moment": "^2.29.3",
     "msw": "^0.43.1",

diff --git a/src/Routes.js b/src/Routes.js
@@ -42,35 +42,36 @@ const ProjectRoutes = ({ setToastOptions }) => {
     <LoadingOverlay
       active={authLoading}
       spinner={<HashLoader color="silver" size="30vw" />}
+      styles={{
+        overlay: (base) => ({
+          ...base,
+          background: "gray",
+        }),
+        content: (base) => ({
+          ...base,
+          position: "fixed",
+          left: "50%",
+          top: "50%",
+          transform: "translate(-50%, -50%)",
+        }),
+      }}
     >
       <Router>
-        {authLoading ? (
-          <div style={{ width: "100vw", height: "100vh" }}></div>
-        ) : (
-          <AnimatedRoutes
-            isBanned={isBanned}
-            showSimpleToast={showSimpleToast}
-            setToastOptions={setToastOptions}
-            authLoading={authLoading}
-          />
-        )}
+        <AnimatedRoutes
+          isBanned={isBanned}
+          showSimpleToast={showSimpleToast}
+          setToastOptions={setToastOptions}
+        />
       </Router>
     </LoadingOverlay>
   );
 };
 
 export default ProjectRoutes;
 
-const AnimatedRoutes = ({
-  isBanned,
-  showSimpleToast,
-  setToastOptions,
-  authLoading,
-}) => {
+const AnimatedRoutes = ({ isBanned, showSimpleToast, setToastOptions }) => {
   // Add TransitionGroup and CSSTransition for animations
-  return authLoading ? (
-    <div style={{ width: "100vw", height: "100vh" }}></div>
-  ) : !isBanned ? (
+  return !isBanned ? (
     <Routes>
       <Route path="/" element={<LandingPage />} />
       <Route path="*" element={<NotFound />} />
@@ -85,13 +86,13 @@ const AnimatedRoutes = ({
       <Route path="/create-listing" element={<CreateListingPage />} />
       <Route path="/passwordpage" element={<PasswordPage />} />
       <Route path="/resetpage" element={<ResetPage />} />
-      <Route path="/loginmainpage" element={<LoginMainPage showSimpleToast={showSimpleToast}/>} />
-      <Route path="/formpage" element={<ReviewForm />} />
       <Route
-        path="/profile"
-        element={<ProfilePage />}
+        path="/loginmainpage"
+        element={<LoginMainPage showSimpleToast={showSimpleToast} />}
       />
-
+      <Route path="/formpage" element={<ReviewForm />} />
+      <Route path="/profile" element={<ProfilePage />} />
+
       <Route path="/chats" element={<ChatPage />} />
       <Route
         path="/reports"

diff --git a/src/components/ListingCard/listingCard.js b/src/components/ListingCard/listingCard.js
@@ -14,6 +14,7 @@ const ListingCard = ({
   setModalState,
   creator_id,
   listing_id,
+  avg_rating,
 }) => {
   const levelParams = {
     primary: "Primary",
@@ -34,6 +35,7 @@ const ListingCard = ({
       fields,
       creator_id,
       listing_id,
+      avg_rating,
     });
   };
   return (

diff --git a/src/components/ListingModal/listingModal.js b/src/components/ListingModal/listingModal.js
@@ -10,6 +10,7 @@ import FieldTag from "components/FieldTag/fieldTag";
 import { supabaseClient as supabase } from "config/supabase-client";
 import { useNavigate } from "react-router-dom";
 import Spinner from "react-bootstrap/Spinner";
+import Rating from "components/Rating/Rating";
 
 const ListingModal = (props) => {
   const [deleteState, setDeleteState] = useState(0);
@@ -23,6 +24,7 @@ const ListingModal = (props) => {
     fields,
     creator_id,
     listing_id,
+    avg_rating,
   } = data;
   const isOwnListing = supabase.auth.user()
     ? creator_id === supabase.auth.user().id
@@ -126,22 +128,24 @@ const ListingModal = (props) => {
             >
               View Profile
             </Button>
-            <Button
-              className="px-5"
-              onClick={() =>
-                navigate("/chats", {
-                  state: {
-                    startChatData: {
-                      user_id: creator_id,
-                      name: username,
-                      src: avatarUrl,
+            {supabase.auth.user() && (
+              <Button
+                className="px-5"
+                onClick={() =>
+                  navigate("/chats", {
+                    state: {
+                      startChatData: {
+                        user_id: creator_id,
+                        name: username,
+                        src: avatarUrl,
+                      },
                     },
-                  },
-                })
-              }
-            >
-              Chat
-            </Button>
+                  })
+                }
+              >
+                Chat
+              </Button>
+            )}
           </>
         )}
       </Modal.Footer>
@@ -156,10 +160,19 @@ const ListingModal = (props) => {
           alt="Avatar"
           className={listingModalStyles.avatar}
         />
-        <Link to="/profile" state={{ creator_id }} className="nunito-sans">
-          {username}
-        </Link>
-        {/* Add rating here! (stars) */}
+        <div>
+          <Link to="/profile" state={{ creator_id }} className="nunito-sans">
+            {username}
+          </Link>
+          <div className="d-flex flex-row align-items-center">
+            <Rating index={avg_rating} size={12} />
+            <p className="p-0 m-0 px-1" style={{ fontSize: 10 }}>
+              {avg_rating
+                ? `${avg_rating?.toFixed(1)} / 5.0`
+                : "No ratings yet!"}
+            </p>
+          </div>
+        </div>
       </Modal.Header>
       <Modal.Body>
         <Row className={`${listingModalStyles["image-section"]} pb-4`}>

diff --git a/src/components/Rating/Rating.js b/src/components/Rating/Rating.js
@@ -7,8 +7,14 @@ const colors = {
   grey: "#a9a9a9",
 };
 
-const Rating = ({ setReviews, ratingHover, index: index1, className }) => {
-  const [currentValue, setCurrentValue] = setReviews;
+const Rating = ({
+  setReviews,
+  ratingHover,
+  index: index1,
+  className,
+  size,
+}) => {
+  const [currentValue, setCurrentValue] = setReviews || [];
   const [hoverValue, setHoverValue] = useState(0);
   const handleClick = (value) => {
     setCurrentValue(value);
@@ -29,7 +35,7 @@ const Rating = ({ setReviews, ratingHover, index: index1, className }) => {
           return (
             <FaStar
               key={index}
-              size={24}
+              size={size || 24}
               onClick={() => handleClick(index + 1)}
               onMouseOver={() => handleMouseOver(index + 1)}
               onMouseLeave={handleMouseLeave}
@@ -47,8 +53,8 @@ const Rating = ({ setReviews, ratingHover, index: index1, className }) => {
           return (
             <FaStar
               key={index}
-              size={24}
-              color={index1 > index ? colors.orange : colors.grey}
+              size={size || 24}
+              color={Math.round(index1) > index ? colors.orange : colors.grey}
             />
           );
         }