Merge branch 'develop-cz' of https://github.com/SHni99/Minerva into d…

…evelop-cz
SHni99 · Jul 16, 2022 · e2c4b5f · e2c4b5f
2 parents 94b1417 + 0a3074d
commit e2c4b5f
Show file tree

Hide file tree

Showing 11 changed files with 586 additions and 128 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "@testing-library/user-event": "^12.8.3",
     "bootstrap": "^5.2.0-beta1",
     "bootstrap-icons": "^1.8.3",
+    "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
@@ -43,20 +43,28 @@ const ProjectRoutes = ({ setToastOptions, option, setOption }) => {
     <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}
-            option={option}
-            setOption={setOption}
-          />
-        )}
+        <AnimatedRoutes
+          isBanned={isBanned}
+          showSimpleToast={showSimpleToast}
+          setToastOptions={setToastOptions}
+          option={option}
+          setOption={setOption}
+        />
       </Router>
     </LoadingOverlay>
   );
@@ -68,14 +76,11 @@ const AnimatedRoutes = ({
   isBanned,
   showSimpleToast,
   setToastOptions,
-  authLoading,
   option,
   setOption,
 }) => {
   // 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 />} />

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}
             />
           );
         }

diff --git a/src/pages/ChatPage/chatPage.js b/src/pages/ChatPage/chatPage.js
@@ -74,7 +74,7 @@ const ChatPageBody = ({
   startChatData,
   setModalState,
   unusedModalState,
-  blockedArray
+  blockedArray,
 }) => {
   // Whether to show the Sidebar or not. Applicable when window width is under 768px.
   const [showSidebar, setShowSidebar] = useState(window.innerWidth < 768);
@@ -119,7 +119,7 @@ const ChatPageBody = ({
   const [searchQuery, setSearchQuery] = useState("");
 
   const navigate = useNavigate();
-  const uid = supabase.auth.user().id;
+  const uid = supabase.auth.user()?.id;
 
   // Helper functions to add/remove classes from elements
   const removeClass = (elem, name) => {
@@ -800,6 +800,9 @@ const ChatPageBody = ({
   // Run only once, at the start.
   // Currently only supports direct messages. Group chats might be added (TBC)
   useEffect(() => {
+    // First check if user is signed in! Guests should not be able to see this page.
+    if (!uid) navigate("/loginpage");
+
     const fetchConvos = async () => {
       try {
         setLoadingConvos(true);