Merge pull request #167 from Code-4-Community/155-dev---create-sidebar-with-filtering-features

155 dev   create sidebar with filtering features

Author: prooflesben

frontend/src/App.tsx

@@ -2,15 +2,15 @@
  * App.tsx
  * Renders with <AnimatedRoutes />.
  */
-import "./App.css";
+import "./styles/App.css";
 import { ChakraProvider, defaultSystem } from "@chakra-ui/react";
 import { BrowserRouter as Router } from "react-router-dom";
 import { observer } from "mobx-react-lite";
 
 // Register store and mutators
 import "./external/bcanSatchel/mutators";
 import AnimatedRoutes from "./animations/AnimatedRoutes";
-import Footer from "./grant-info/components/Footer";
+import Footer from "./main-page/Footer";
 
 /**
  * Main app component that renders animated routes

frontend/src/Header.tsx

@@ -96,7 +96,7 @@ const Profile = observer(() => {
       <button type="submit" style={styles.button}>
         Save Changes
       </button>
-      <Link to="/grant-info" style={{ textDecoration: "none" }}>
+      <Link to="/main" style={{ textDecoration: "none" }}>
         <button style={styles.button}>Home</button>
       </Link>
       </div>

frontend/src/Profile.tsx

@@ -1,13 +1,13 @@
 import { Routes, Route, useLocation, Navigate } from "react-router-dom";
-import { TransitionGroup, CSSTransition } from "react-transition-group";
+// import { TransitionGroup, CSSTransition } from "react-transition-group";
 
 // static transitions sheet
 import "./transitions.css";
 
 import { observer } from "mobx-react-lite";
 import Account from "../Account";
 import { useAuthContext } from "../context/auth/authContext";
-import GrantPage from "../grant-info/components/GrantPage";
+import MainPage from "../main-page/MainPage";
 import Login from "../Login";
 import Register from "../Register";
 
@@ -21,16 +21,7 @@ const AnimatedRoutes = observer(() => {
   const { isAuthenticated } = useAuthContext();
 
   return (
-    <TransitionGroup component={null}>
-      {/* 
-        key the transition by location.key 
-        so each route triggers an enter/exit animation
-      */}
-      <CSSTransition key={location.key} timeout={800} classNames="fade">
-        {/* 
-          Pass `location` to <Routes> to let RTG track route changes 
-        */}
-        <Routes location={location}>
+    <Routes location={location}>
           <Route
             path="/login"
             element={isAuthenticated ? <Navigate to="/account" /> : <Login />}
@@ -40,21 +31,19 @@ const AnimatedRoutes = observer(() => {
             element={
               isAuthenticated ? <Navigate to="/account" /> : <Register />
             }
-          />
+          /> 
           <Route
             path="/account"
             element={isAuthenticated ? <Account /> : <Navigate to="/login" />}
           />
-          <Route path="/grant-info" element={<GrantPage />} />
+          <Route path="/main/*" element={<MainPage/>} />
           <Route
             path="*"
             element={
               <Navigate to={isAuthenticated ? "/account" : "/login"} />
             }
           />
         </Routes>
-      </CSSTransition>
-    </TransitionGroup>
   );
 });
 

frontend/src/animations/AnimatedRoutes.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import './styles/Footer.css'
+import '../styles/Footer.css'
 import { Group, Text } from '@chakra-ui/react';
-import { FooterText } from '../../translations/general';
+import { FooterText } from '../translations/general';
 
 const Footer: React.FC = () => {
     return (