273 dev frontend cleanup simple code fixes

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 /**
  * App.tsx
- * Renders with <AnimatedRoutes />.
+ * Renders with <AppRoutes />.
  */
 import "./styles/App.css";
 import { ChakraProvider, defaultSystem } from "@chakra-ui/react";
@@ -9,19 +9,19 @@ import { observer } from "mobx-react-lite";
 
 // Register store and mutators
 import "./external/bcanSatchel/mutators";
-import AnimatedRoutes from "./animations/AnimatedRoutes";
+import AppRoutes from "./routes/AppRoutes";
 import Footer from "./main-page/Footer";
 
 /**
- * Main app component that renders animated routes
+ * Main app component that renders routes
  */
 const App = observer(() => {
   return (
     <Router>
       <ChakraProvider value={defaultSystem}>
         <div className="app-wide">
         <div className="app-container">
-          <AnimatedRoutes />
+          <AppRoutes />
         </div>
         <Footer/>
         </div>

frontend/src/Login.tsx

@@ -53,7 +53,7 @@ const Login = observer(() => {
                   onChange={(e) => setUsername(e.target.value)}
                   placeholder="Enter your email"
                   style={styles.inputContainer}
-                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-[#D9D9D9]"
+                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
                 />
               </div>
             </div>
@@ -71,7 +71,7 @@ const Login = observer(() => {
                   onChange={(e) => setPassword(e.target.value)}
                   placeholder="Enter your password"
                   style={styles.inputContainer}
-                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-[#D9D9D9]"
+                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
                 />
               </div>
             </div>

frontend/src/Register.tsx

@@ -112,7 +112,7 @@ const Register = observer(() => {
                   onChange={(e) => setUsername(e.target.value)}
                   placeholder="Enter your username"
                   style={styles.inputContainer}
-                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-[#D9D9D9]"
+                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
                 />
               </div>
             </div>
@@ -134,7 +134,7 @@ const Register = observer(() => {
                       ? styles.errorItem
                       : styles.inputContainer
                   }
-                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-[#D9D9D9]"
+                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
                 />
               </div>
             </div>
@@ -156,7 +156,7 @@ const Register = observer(() => {
                       ? styles.errorItem
                       : styles.inputContainer
                   }
-                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-[#D9D9D9]"
+                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
                 />
               </div>
             </div>
@@ -178,7 +178,7 @@ const Register = observer(() => {
                       ? styles.errorItem
                       : styles.inputContainer
                   }
-                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-[#D9D9D9]"
+                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
                 />
               </div>
             </div>

frontend/src/main-page/Footer.tsx

@@ -1,32 +1,27 @@
-import React from 'react';
-import '../styles/Footer.css'
-import { Group, Text } from '@chakra-ui/react';
-import { FooterText } from '../translations/general';
+import React from "react";
+import "../styles/Footer.css";
+import { Group, Text, Link } from "@chakra-ui/react";
+import { FooterText } from "../translations/general";
+import tailwindConfig from "../../tailwind.config.js";
 
 const Footer: React.FC = () => {
-    return (
-        <div className="footer">
-{
-    /* TODO: Add BCAN Quick Links
-            <div className="bcan-link">
-            <Text>
-                <a href="https://bostonclimateaction.org/">
-                bostonclimateaction website
-                </a>
-            </Text>
-            </div>
-    */
-}
-            <Group className="text-block">
-                <Text>
-                {FooterText.Motto}
-                </Text>
-                <Text className="northeastern-uni-caption">
-                {FooterText.NEU}
-                </Text>
-            </Group>
-            </div>
-    )
-}
+  return (
+    <div className="footer">
+      <Group className="text-block">
+        <Text>
+          {FooterText.C4C_Motto}
+          <Link variant="underline" href={FooterText.C4C_Link}>
+            {FooterText.C4C}
+          </Link>{" "}
+          for{" "}
+          <Link variant="underline" _hover={{color: `${tailwindConfig.theme.colors["dark-orange"]}`}}  href={FooterText.Org_Link}>
+            {FooterText.Org}
+          </Link>
+        </Text>
+        <Text className="northeastern-uni-caption">{FooterText.NEU}</Text>
+      </Group>
+    </div>
+  );
+};
 
-export default Footer;
+export default Footer;

frontend/src/main-page/dashboard/Dashboard.tsx

@@ -10,6 +10,7 @@ import {
   updateFilter,
   updateEndDateFilter,
   updateStartDateFilter,
+  updateSearchQuery,
 } from "../../external/bcanSatchel/actions";
 import { getAppStore } from "../../external/bcanSatchel/store";
 import BarYearGrantStatus from "./Charts/BarYearGrantStatus";
@@ -26,6 +27,7 @@ const Dashboard = observer(() => {
     updateFilter(null);
     updateEndDateFilter(null);
     updateStartDateFilter(null);
+    updateSearchQuery("");
   }, []);
 
   const { yearFilter, allGrants } = getAppStore();

frontend/src/main-page/grants/GrantPage.tsx

@@ -11,6 +11,7 @@ import { useAuthContext } from "../../context/auth/authContext";
 import {
   updateEndDateFilter,
   updateFilter,
+  updateSearchQuery,
   updateStartDateFilter,
   updateYearFilter,
 } from "../../external/bcanSatchel/actions.ts";
@@ -41,6 +42,7 @@ function GrantPage({ showOnlyMyGrants = false }: GrantPageProps) {
     updateFilter(null);
     updateEndDateFilter(null);
     updateStartDateFilter(null);
+    updateSearchQuery("");
   }, []);
 
   useEffect(() => {

frontend/src/main-page/grants/filter-bar/GrantSearch.tsx

@@ -1,43 +1,16 @@
 import { IoIosSearch } from "react-icons/io";
-import { 
-  // useEffect,
-   useState } from "react";
+import { useState } from "react";
 import Fuse from "fuse.js";
-import { updateSearchQuery } from "../../../external/bcanSatchel/actions"; 
+import { updateSearchQuery } from "../../../external/bcanSatchel/actions";
+import { getAppStore } from "../../../external/bcanSatchel/store";
 import { Grant } from "../../../../../middle-layer/types/Grant";
-// import { api } from "../../../api";
 import { Input } from "@chakra-ui/react";
-import "../styles/GrantSearch.css"
-
+import "../styles/GrantSearch.css";
 
 function GrantSearch() {
-  const [userInput, setUserInput] = useState("");
+  const [userInput, setUserInput] = useState(getAppStore().searchQuery || "");
   // @ts-ignore
   const [grants, _setGrants] = useState<Grant[]>([]);
-  // const [showDropdown, setShowDropdown] = useState(false);
-  // const [dropdownGrants, setDropdownGrants] = useState<Grant[]>([]);
-
-  // useEffect(() => {
-  //   fetchGrants();
-  //   document.addEventListener("click", handleClickOutside);
-  //   return () => {
-  //     document.removeEventListener("click", handleClickOutside);
-  //   };
-  // }, []);
-
-  // const fetchGrants = async () => {
-  //   try {
-  //     const response = await api(`/grant`, { method: "GET" });
-  //     const data: Grant[] = await response.json();
-  //     const formattedData: Grant[] = data.map((grant: any) => ({
-  //       ...grant,
-  //       organization_name: grant.organization || "Unknown Organization",
-  //     }));
-  //     setGrants(formattedData);
-  //   } catch (error) {
-  //     console.error("Error fetching grants:", error);
-  //   }
-  // };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setUserInput(e.target.value);
@@ -46,40 +19,18 @@ function GrantSearch() {
 
   const performSearch = (query: string) => {
     if (!query) {
-      // setDropdownGrants([]);
-      // setShowDropdown(false);
       updateSearchQuery("");
       return;
     }
     const fuse = new Fuse<Grant>(grants, {
       keys: ["organization_name"],
       threshold: 0.3,
     });
-    // const results = 
+    // const results =
     fuse.search(query).map((res) => res.item);
     updateSearchQuery(query);
-
-    // setDropdownGrants(results.slice(0, 5));
-    // setShowDropdown(true);
   };
 
-  // const handleSelectGrant = (selectedGrant: Grant) => {
-  //   setUserInput(selectedGrant.organization);
-  //   updateSearchQuery(selectedGrant.organization);
-  //   // setShowDropdown(false);
-  //   onGrantSelect?.(selectedGrant);
-  // };
-
-  // const handleClickOutside = (event: MouseEvent) => {
-  //   const target = event.target as HTMLElement;
-  //   // if (
-  //   //   !target.closest(".search-container") &&
-  //   //   !target.closest(".dropdown-container")
-  //   // ) {
-  //   //   setShowDropdown(false);
-  //   // }
-  // };
-
   return (
     <div className="search-bar-main-container">
       <form className="search-container">
@@ -106,33 +57,13 @@ function GrantSearch() {
             className="search-input"
             onChange={handleInputChange}
             value={userInput}
-            // onFocus={() => setShowDropdown(dropdownGrants.length > 0)}
             style={{ paddingLeft: "2rem" }} // make room for the icon
             onKeyDown={(e) => {
               if (e.key === "Enter") {
                 e.preventDefault();
-                // setShowDropdown(false);
               }
             }}
           />
-
-          {/* {showDropdown && (
-            <div className="dropdown-container">
-              {dropdownGrants.length > 0 ? (
-                dropdownGrants.map((grant, index) => (
-                  <div
-                    key={index}
-                    className="dropdown-item"
-                    onClick={() => handleSelectGrant(grant)}
-                  >
-                    {grant.organization}
-                  </div>
-                ))
-              ) : (
-                <div className="dropdown-item">No results found</div>
-              )}
-            </div>
-          )} */}
         </div>
       </form>
     </div>

frontend/src/animations/AnimatedRoutes.tsx → frontend/src/routes/AppRoutes.tsx

@@ -1,8 +1,4 @@
 import { Routes, Route, useLocation, Navigate } from "react-router-dom";
-// import { TransitionGroup, CSSTransition } from "react-transition-group";
-
-// static transitions sheet
-import "./transitions.css";
 
 import { observer } from "mobx-react-lite";
 import { useAuthContext } from "../context/auth/authContext";
@@ -14,11 +10,10 @@ import { getAppStore } from "../external/bcanSatchel/store"
 import RestrictedPage from "../main-page/restricted/RestrictedPage";
 
 /**
- * AnimatedRoutes:
- * - Wraps routes with CSSTransition + TransitionGroup
- * - Applies .fade-enter / .fade-exit transitions from transitions.css
+ * AppRoutes:
+ * - Handles routing and route protection based on authentication status.
  */
-const AnimatedRoutes = observer(() => {
+const AppRoutes = observer(() => {
   const location = useLocation();
   const { isAuthenticated } = useAuthContext();
   const user = getAppStore().user;
@@ -61,4 +56,4 @@ const AnimatedRoutes = observer(() => {
   );
 });
 
-export default AnimatedRoutes;
+export default AppRoutes;

frontend/src/translations/general.ts

@@ -1,6 +1,10 @@
 export enum FooterText {
-    Motto = "Made with love by Code4Community",
-    NEU = "Northeastern University, Boston, MA"
+    C4C_Motto = "Made with love by ",
+    C4C = "Code4Community",
+    C4C_Link = "https://www.c4cneu.com/",
+    NEU = "Northeastern University, Boston, MA",
+    Org = "Boston Climate Action Network",
+    Org_Link = "https://bostonclimateaction.org/",
 }
 
 // Maps Enum to String Representation for Future Accessibility Work

frontend/tailwind.config.ts

@@ -16,6 +16,7 @@ export default {
       'light-gray': '#F8F8F8',
       'pale-orange':'#FFCEB6',
       'white-orange': '#FFF1EB',
+      'medium-gray': '#D9D9D9',
     },
     fontFamily: {
       sans: ['Montserrat', 'sans-serif'],