Adding navbar component (#53)

* basic table and filter created w/ chakra Co-authored-by: Jordan Kok Ee Hsin <[email protected]> * expose local web server using ngrok (#43) (#45) * Integrated Ngrok Adjusted docker-compose.yml to run ngrok using my personal authentication token * add environment variable for ngrok authtoken * Add ngrok set-up instructions in README.md * updating ngrok authtoken as variable / exposing port 5001 for backend * environment variable for ngrok authtoken instead of hardcoding * typo * update readme * delete ngrok container * Delete .DS_Store * run linter --------- * basic table and filter created w/ chakra Co-authored-by: Jordan Kok Ee Hsin <[email protected]> * basic table and filter created w/ chakra Co-authored-by: Jordan Kok Ee Hsin <[email protected]> * created table and filtering using chakra * adding navbar template * installing Tailwind + updating Navbar template to be closer to Figma design + routing for Navbar (temp) * uncommenting subLabel - please note .eslintrc.js rules ignoring require-default-props, no-unused-prop-types, and react-in-jsx-scope * center navbar components + improve spacing + rename template names to don efficace specific fields * Navbar linking/routing + Updating navbar to be like Figma design * fixed navbar spacing and link color - reorganized/simplified dashboard/donations/account stack * adding comments + changing Don Efficace. text to a link to homepage * bottom border early * adding tab indicator, reformatted dashboard/donations/acc-mgmt into tabs instead of boxes * making tab indicator responsive + adding rules back to eslintr (reverting previous changes) + small touch ups to navbar + deleting tailwind config as it is unused * adding browserrouter to layout.tsx * touch up * adding linter changes * fixing merge conflicts with main based on pr comments from Matt * merge conflict changes * fixing merge conflicts * fix app.tsx routes * fix merge conflicts --------- Co-authored-by: pahu2353 <[email protected]> Co-authored-by: Jordan Kok Ee Hsin <[email protected]>
uwblueprint · Jul 9, 2024 · 7d69e31 · 7d69e31
1 parent 408d7a9
commit 7d69e31
Show file tree

Hide file tree

Showing 12 changed files with 40,892 additions and 2 deletions.
diff --git a/backend/typescript/yarn.lock b/backend/typescript/yarn.lock
@@ -9272,4 +9272,4 @@ zen-observable-ts@^0.8.21:
 zen-observable@^0.8.0:
   version "0.8.15"
   resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
-  integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==
+  integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -26,6 +26,8 @@ import SampleContextDispatcherContext from "./contexts/SampleContextDispatcherCo
 import EditTeamInfoPage from "./components/pages/EditTeamPage";
 import HooksDemo from "./components/pages/HooksDemo";
 import { AuthenticatedUser } from "./types/AuthTypes";
+import Layout from "./components/common/Layout"; // Temp for Navbar
+import Donate from "./components/temp_navbar/Donate"; // Temp for Navbar
 
 
 const App = (): React.ReactElement => {
@@ -60,6 +62,9 @@ const App = (): React.ReactElement => {
                 <Route exact path={Routes.SIGNUP_PAGE} component={Signup} />
                 {/* TODO: Move to private route eventually */}
                 <Route exact path={Routes.DASHBOARD_PAGE} component ={DashboardPage} />
+                <Route path={Routes.LAYOUT} component={Layout} />
+                <Route path={Routes.DONATE} component={Donate} />
+                {/* Temp for Navbar */}
                 <PrivateRoute exact path={Routes.HOME_PAGE} component={Default} />
                 <PrivateRoute
                   exact

diff --git a/frontend/src/components/auth/Login.tsx b/frontend/src/components/auth/Login.tsx
@@ -10,6 +10,7 @@ import authAPIClient from "../../APIClients/AuthAPIClient";
 import { HOME_PAGE, SIGNUP_PAGE } from "../../constants/Routes";
 import AuthContext from "../../contexts/AuthContext";
 import { AuthenticatedUser } from "../../types/AuthTypes";
+import donationsData from "../../constants/donationsDataSample"; // For testing purposes
 
 type GoogleResponse = GoogleLoginResponse | GoogleLoginResponseOffline;
 

diff --git a/frontend/src/components/common/Layout.tsx b/frontend/src/components/common/Layout.tsx
@@ -0,0 +1,36 @@
+// Template for Navbar - To-Do (Reroute this to the Dashboard component)
+// Ensure that whatever link paths to dashboard links to layout/dashboard
+// For testing (to view the navbar), navigate to localhost:3000/layout
+
+import React from "react";
+import { Box } from "@chakra-ui/react";
+import { Route, Switch } from "react-router-dom";
+import Navbar from "./NavBar";
+import Dashboard from "../temp_navbar/Dashboard";
+import AccountManagement from "../temp_navbar/AccountManagement";
+import DonationHistory from "../temp_navbar/DonationHistory";
+
+const Layout = () => {
+  return (
+    <Box>
+      <Navbar />
+      <Box as="main" p={4}>
+        <Switch>
+          <Route path="/layout/dashboard" exact component={Dashboard} />
+          <Route
+            path="/layout/donation-history"
+            exact
+            component={DonationHistory}
+          />
+          <Route
+            path="/layout/account-management"
+            exact
+            component={AccountManagement}
+          />
+        </Switch>
+      </Box>
+    </Box>
+  );
+};
+
+export default Layout;
diff --git a/frontend/src/components/common/NavBar.tsx b/frontend/src/components/common/NavBar.tsx
@@ -0,0 +1,145 @@
+import React from "react";
+import {
+  Box,
+  Flex,
+  Text,
+  Button,
+  Link,
+  useColorModeValue,
+  Tabs,
+  TabList,
+  TabIndicator,
+  Tab,
+} from "@chakra-ui/react";
+import { NavLink, Link as RouterLink } from "react-router-dom";
+
+interface NavItem {
+  label: string;
+  subLabel?: string;
+  children?: Array<NavItem>;
+  href: string;
+  width: string;
+}
+
+const NAV_ITEMS: Array<NavItem> = [
+  {
+    label: "Dashboard",
+    href: "/layout/dashboard",
+    width: "140px",
+  },
+  {
+    label: "Donation History",
+    href: "/layout/donation-history",
+    width: "190px",
+  },
+  {
+    label: "Account Management",
+    href: "/layout/account-management",
+    width: "240px",
+  },
+];
+
+export default function Navbar() {
+  return (
+    <Box mb="0">
+      <Flex
+        bg={useColorModeValue("white", "gray.800")}
+        color={useColorModeValue("gray.600", "white")}
+        minH="104px"
+        minW="1100px"
+        gap="16px"
+        mb="0"
+        justify={{ base: "center" }}
+        py={{ base: 2 }}
+        px={{ base: 4 }}
+        borderBottomWidth="1px"
+        justifyContent="space-between"
+        borderStyle="solid"
+        boxShadow="sm"
+        borderColor={useColorModeValue("gray.200", "gray.900")}
+        align="flex-end"
+        alignItems="center"
+      >
+        <Text
+          align="center"
+          mb="4px"
+          ml="20px"
+          alignItems="center"
+          pl="20px"
+          minW="230px"
+        >
+          <Link
+            as={RouterLink}
+            to="/"
+            _hover={{ textDecoration: "none" }}
+            _focus={{ outline: "none" }}
+            _active={{ outline: "none" }}
+          >
+            <Text as="span" color="#000000" fontWeight="bold" fontSize="30px">
+              Don{" "}
+            </Text>
+            <Text as="span" color="#A5154C" fontWeight="bold" fontSize="30px">
+              Efficace.
+            </Text>
+          </Link>
+        </Text>
+        <Tabs position="relative" variant="unstyled">
+          <TabList justifyContent="space-between">
+            {NAV_ITEMS.map((navItem) => (
+              <Tab
+                key={navItem.label}
+                minW={navItem.width}
+                borderStyle="solid"
+                alignItems="center"
+                as={RouterLink}
+                to={navItem.href}
+                fontSize="20px"
+                color="#000000"
+                mx="50px"
+                _hover={{
+                  textDecoration: "none",
+                  color: "#000000",
+                  cursor: "pointer",
+                }}
+                _focus={{ outline: "none" }}
+                _active={{ outline: "none" }}
+              >
+                {navItem.label}
+              </Tab>
+            ))}
+          </TabList>
+          <TabIndicator
+            position="absolute"
+            mt="26px"
+            height="4px"
+            bg="#A5154C"
+            borderRadius="1px"
+          />
+        </Tabs>
+        <Text align="center" minW="150px" alignItems="center" pr="30px">
+          <RouterLink to="/donate">
+            <Button
+              as="a"
+              width="153px"
+              height="50px"
+              display={{ base: "center" }}
+              fontSize="20px"
+              ml="20px"
+              mr="30px"
+              fontWeight={600}
+              color="#FFFFFF"
+              bg="#A5154C"
+              _hover={{
+                bg: "#A5154C",
+                color: "#FFFFFF",
+                cursor: "pointer",
+              }}
+            >
+              Donate Now
+            </Button>
+          </RouterLink>
+        </Text>
+      </Flex>
+    </Box>
+  );
+}
diff --git a/frontend/src/components/temp_navbar/AccountManagement.tsx b/frontend/src/components/temp_navbar/AccountManagement.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const AccountManagement: React.FC = () => {
+  return <div>Welcome to Account Management</div>;
+};
+
+export default AccountManagement;
diff --git a/frontend/src/components/temp_navbar/Dashboard.tsx b/frontend/src/components/temp_navbar/Dashboard.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Dashboard: React.FC = () => {
+  return <div>Welcome to the Dashboard</div>;
+};
+
+export default Dashboard;
diff --git a/frontend/src/components/temp_navbar/Donate.tsx b/frontend/src/components/temp_navbar/Donate.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Donate: React.FC = () => {
+  return <div>Donate Now!!!</div>;
+};
+
+export default Donate;
diff --git a/frontend/src/components/temp_navbar/DonationHistory.tsx b/frontend/src/components/temp_navbar/DonationHistory.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const DonationHistory: React.FC = () => {
+  return <div>Welcome to the Donation History</div>;
+};
+
+export default DonationHistory;
diff --git a/frontend/src/constants/Routes.ts b/frontend/src/constants/Routes.ts
@@ -2,6 +2,10 @@ export const HOME_PAGE = "/";
 
 export const LOGIN_PAGE = "/login";
 
+export const LAYOUT = "/layout"; // TEMP FOR NAVBAR
+
+export const DONATE = "/donate"; // TEMP FOR NAVBAR
+
 export const SIGNUP_PAGE = "/signup";
 
 export const EDIT_TEAM_PAGE = "/edit-team";

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -14265,4 +14265,4 @@ zen-observable-ts@^1.1.0:
 [email protected], zen-observable@^0.8.14:
   version "0.8.15"
   resolved "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz"
-  integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==
+  integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==