Merge branch 'main' into pallavi-18-create-profile-page

Gather307 · May 23, 2024 · dfbdecb · dfbdecb
2 parents 8935b50 + 3770d12
commit dfbdecb
Show file tree

Hide file tree

Showing 25 changed files with 1,026 additions and 8,910 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,8 +17,8 @@
     "@emotion/styled": "^11.11.5",
     "dotenv": "^16.4.5",
     "framer-motion": "^11.1.9",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.0"
   },

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,14 +1,14 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import { ChakraProvider } from "@chakra-ui/react";
+import { Box, ChakraProvider } from "@chakra-ui/react";
 import LoginPage from "./pages/LoginPage";
 import HomePage from "./pages/HomePage";
 import SignupPage from "./pages/SignupPage";
 import ItemsPage from "./pages/ItemsPage";
 import NavbarSignedOut from "./components/NavbarSignedOut";
 import NavbarSignedIn from "./components/NavbarSignedIn";
 import Friends_List from "./components/Friends_List_Component";
-import SearchBar from "./components/SearchBar";
 import ProfilePage from "./pages/ProfilePage";
+import GroupPage from "./pages/MyGroupsPage";
 import { useState } from "react";
 import { IUser } from "./../../backend/models/userSchema";
 
@@ -33,64 +33,54 @@ function App() {
   if (!userId) {
     console.log("User ID is not available");
   }
-
+  
   const avatarColor = getRandomColor();
-
+        
   return (
     <ChakraProvider>
       <Router>
-        {token != "" ? (
-          <NavbarSignedIn
-            stateVariable={{ user, token, avatarColor }}
-            updateState={{ setUser, setToken }}
-          />
-        ) : (
-          <NavbarSignedOut />
-        )}
-        <Routes>
-          <Route path="/" element={<HomePage />} /> {/* this is a dummy page */}
-          <Route path="/items" element={<ItemsPage />} />
-          <Route
-            path="/login"
-            element={<LoginPage updateState={{ setUser, setToken }} />}
-          />
-          <Route
-            path="/FriendsList"
-            element={<Friends_List LoggedInUser={user ? user._id : ""} />}
-          />
-          <Route
-            path="/profile"
-            element={
-              <ProfilePage
-                LoggedInUser={user ? user._id : ""}
-                avatarColor={avatarColor}
-              />
-            }
-          />
-          <Route
-            path="/signup"
-            element={
-              <SignupPage
-                stateVariable={{ user, token }}
-                updateState={{ setUser, setToken }}
-              />
-            }
-          />
-          <Route
-            path="/search"
-            element={
-              <SearchBar
-                width="300px"
-                onSearch={() =>
-                  console.log(
-                    "Wow, you really just submitted information. How dare you.",
-                  )
-                }
-                placeholder="DO NOT USE THIS."
-              />
-            }
-          />
-        </Routes>
+        <Box width="100vw" height="100vh" display="flex" flexDirection="column">
+          {token != "" ? (
+            <NavbarSignedIn
+              stateVariable={{ user, token, avatarColor }}
+              updateState={{ setUser, setToken }}
+            />
+          ) : (
+            <NavbarSignedOut />
+          )}
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            {/* this is a dummy page */}
+            <Route path="/items" element={<ItemsPage />} />
+            <Route
+              path="/login"
+              element={<LoginPage updateState={{ setUser, setToken }} />}
+            />
+            <Route
+              path="/FriendsList"
+              element={<Friends_List LoggedInUser={user ? user._id : ""} />}
+            />
+            <Route
+              path="/profile"
+              element={
+                <ProfilePage
+                  LoggedInUser={user ? user._id : ""}
+                  avatarColor={avatarColor}
+                />
+              }
+            />
+            <Route
+              path="/signup"
+              element={
+                <SignupPage
+                  stateVariable={{ user, token }}
+                  updateState={{ setUser, setToken }}
+                />
+              }
+            />
+            <Route path="/groups" element={<GroupPage />} />
+          </Routes>
+        </Box>
       </Router>
     </ChakraProvider>
   );

diff --git a/frontend/src/components/CompactGroup.tsx b/frontend/src/components/CompactGroup.tsx
@@ -0,0 +1,77 @@
+import { Box, VStack, Text, Avatar, HStack } from "@chakra-ui/react";
+import { Group } from "../pages/MyGroupsPage";
+import "../styles/CompactGroup.css";
+import ConstrainedText from "./ConstrainedText";
+
+interface Props {
+  group: Group;
+  width: string;
+  height: string;
+  corners?: Array<boolean>;
+}
+
+const CompactGroupV1 = ({
+  group,
+  width,
+  height,
+  corners = [false, false, false, false],
+}: Props) => {
+  return (
+    <Box
+      width={width}
+      height={height}
+      borderRadius={`${corners[0] ? "0%" : "20%"} ${
+        corners[1] ? "0%" : "20%"
+      } ${corners[2] ? "0%" : "20%"} ${corners[3] ? "0%" : "20%"}`}
+      padding="15px 20px 15px"
+      className="container"
+    >
+      <VStack justifyContent="space-between" height="100%">
+        <ConstrainedText
+          text={group.groupName}
+          charLimit={14}
+          style={{
+            fontSize: "2rem",
+            fontWeight: "600",
+            textAlign: "center",
+          }}
+          postfix="..."
+        />
+        <ConstrainedText
+          text={group.description}
+          charLimit={150}
+          style={{ fontSize: "1rem", flexGrow: "20" }}
+          postfix="...(see more)"
+        />
+        <HStack justifyContent="space-between" spacing="15px">
+          <Avatar width="75px" height="75px" />
+          <VStack justifyContent="end" spacing="5px">
+            <Text textAlign="center" fontSize="0.8rem">
+              Created {new Date(group.created).toDateString()}
+            </Text>
+            {group.members.length > 1 ? (
+              <HStack spacing="20px">
+                <Avatar size="md" />
+                {group.members.length > 2 ? <Avatar size="md" /> : undefined}
+                {group.members.length > 3 ? (
+                  <Box
+                    width="30px"
+                    height="30px"
+                    borderRadius="15px"
+                    backgroundColor="darkgray"
+                    display="flex"
+                    justifyContent="center"
+                    alignItems="center"
+                  >
+                    +{group.members ? group.members.length - 3 : ""}
+                  </Box>
+                ) : undefined}
+              </HStack>
+            ) : undefined}
+          </VStack>
+        </HStack>
+      </VStack>
+    </Box>
+  );
+};
+export { CompactGroupV1 };
diff --git a/frontend/src/components/ConstrainedText.tsx b/frontend/src/components/ConstrainedText.tsx
@@ -0,0 +1,31 @@
+import { Text } from "@chakra-ui/react";
+import { CSSProperties } from "react";
+
+interface Props {
+  text: string;
+  charLimit: number;
+  style?: CSSProperties;
+  prefix?: string;
+  postfix?: string;
+}
+
+//Displays as much of provided text as it can, up to limit. Can prefix + postfix text.
+const ConstrainedText = ({
+  text,
+  charLimit,
+  prefix = "",
+  postfix = "",
+  style = {},
+}: Props) => {
+  return (
+    <Text style={style}>
+      {prefix}
+      {text.length <= charLimit
+        ? text
+        : text.substring(0, Math.max(charLimit - postfix.length, 0))}
+      <Text as="i">{text.length <= charLimit ? "" : postfix}</Text>
+    </Text>
+  );
+};
+
+export default ConstrainedText;
diff --git a/frontend/src/components/NavbarSignedIn.tsx b/frontend/src/components/NavbarSignedIn.tsx
@@ -41,13 +41,12 @@ const NavLink = ({
   </Link>
 );
 
-const NavbarSignedIn = ({
-  stateVariable,
-  updateState,
-}: {
+interface Props {
   stateVariable: any;
   updateState: any;
-}) => {
+}
+
+const NavbarSignedIn = ({ stateVariable, updateState }: Props) => {
   const navigate = useNavigate();
 
   const handleLogout = () => {
@@ -61,7 +60,7 @@ const NavbarSignedIn = ({
   };
 
   return (
-    <Box bg={"#216869"} px={4}>
+    <Box bg={"#216869"} px={4} width="100vw">
       <Flex
         minH={"60px"}
         alignItems={"center"}
@@ -77,7 +76,7 @@ const NavbarSignedIn = ({
         </Flex>
         <HStack spacing={8} alignItems={"center"}>
           <NavLink href="/items">My Items</NavLink>
-          <NavLink href="#">My Groups</NavLink>
+          <NavLink href="/groups">My Groups</NavLink>
           <Menu>
             <MenuButton
               as={Button}

diff --git a/frontend/src/components/NavbarSignedOut.tsx b/frontend/src/components/NavbarSignedOut.tsx
@@ -4,7 +4,7 @@ import logo from "../../public/target.png";
 
 const NavbarSignedOut = () => {
   return (
-    <Box bg={"#216869"} px={4}>
+    <Box bg={"#216869"} px={4} width="100vw">
       <Flex
         minH={"60px"}
         py={{ base: 2 }}