[#48] removing border, adding bug fix for disabling serch button, add…

…ing navigate
drkchn · Jun 30, 2023 · feeeeb3 · feeeeb3
1 parent d3ea7aa
commit feeeeb3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -15,7 +15,7 @@ function App() {
       <Box
         sx={{
           backgroundColor: "background.default",
-          padding: { xs: "0rem", sm: "2rem" },
+          padding: "0rem",
         }}
       >
         <Navbar />

diff --git a/src/components/homepageSearchBar/HomepageSearchBar.tsx b/src/components/homepageSearchBar/HomepageSearchBar.tsx
@@ -15,6 +15,7 @@ import {
   useRepresentativeDataResponse,
   useSetRepresentativeDataResponse,
 } from "../../context/customHooks.ts";
+import { useNavigate } from "react-router-dom";
 
 const placeholders = [
   "740 S. Magnolia Rd, Gastonia, NC 28052",
@@ -43,7 +44,12 @@ export const HomePageSearchBar: React.FC = () => {
 
   // =================== React Hooks ===================
 
+  useEffect(() => {
+    console.log(searchBarValue);
+  }, [searchBarValue]);
+
   const representativeDataResponse = useRepresentativeDataResponse();
+  const navigate = useNavigate();
 
   // TODO - figure out what type this should be
   const setRepresentativeDataResponse: any = useSetRepresentativeDataResponse();
@@ -91,6 +97,7 @@ export const HomePageSearchBar: React.FC = () => {
       .then((res) => {
         console.log(res);
         setRepresentativeDataResponse(res.data);
+        navigate("/example");
       })
       .catch((err) => {
         console.log(err);
@@ -140,7 +147,7 @@ export const HomePageSearchBar: React.FC = () => {
           color="primary"
           startIcon={<HowToVoteIcon />}
           onClick={handleClick}
-          disabled={buttonIsDisabled || searchBarValue.length === 0}
+          disabled={buttonIsDisabled || searchBarValue.trim().length === 0}
         >
           Find my elections info!
         </Button>

diff --git a/src/context/customHooks.ts b/src/context/customHooks.ts
@@ -5,6 +5,8 @@ import {
   SetRepresentativeDataResponseContext,
 } from "./RepresentativeDataContext.tsx";
 
+// This is a utility file for custom hooks
+
 // ==================== Custom React Hooks ====================
 // 1 custom hook per context in order to expose it to consumer component
 export const useColorMode = () => {