Fix Sidebar glitch, fix formatting, type errors

hack4impact-upenn · Apr 30, 2024 · eb05132 · eb05132
1 parent 46bea48
commit eb05132
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 41 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -41,9 +41,6 @@ function App() {
               <CssBaseline>
                 <AlertPopup />
                 <Routes>
-                  <Route path="/test-sidebar" element={<Sidebar />} />
-                  <Route path="/new-donation" element={<NewDonationPage />} />
-                  <Route path="/popup" element={<PopupPage />} />
                   {/* Routes accessed only if user is not authenticated */}
                   <Route element={<UnauthenticatedRoutesWrapper />}>
                     <Route path="/login" element={<LoginPage />} />
@@ -61,40 +58,62 @@ function App() {
                       element={<ResetPasswordPage />}
                     />
                   </Route>
-                  <Route
-                    path="/invite/:token"
-                    element={<InviteRegisterPage />}
-                  />
-                  <Route path="/donor-profile" element={<DonorProfilePage />} />
-                  <Route path="/home" element={<HomeDashboardPage />} />
-                  {/* Routes accessed only if user is authenticated */}
-                  <Route element={<ProtectedRoutesWrapper />}>
-                    <Route path="/home" element={<HomePage />} />
-                  </Route>
-                  <Route path="/donationInfo" element={<DonationInfoPage />} />
-                  <Route element={<AdminRoutesWrapper />}>
-                    <Route path="/users" element={<AdminDashboardPage />} />
-                  </Route>
-                  <Route path="/reports" element={<ReportsPage />} />
-                  <Route
-                    path="/communications"
-                    element={<CommunicationsPage />}
-                  />
-                  {/* <Route element={<ReportsPage />}>
+                </Routes>
+                <Sidebar
+                  side={
+                    <Routes>
+                      <Route path="/test-sidebar" element={<Sidebar />} />
+                      <Route
+                        path="/new-donation"
+                        element={<NewDonationPage />}
+                      />
+                      <Route path="/popup" element={<PopupPage />} />
+                      <Route
+                        path="/invite/:token"
+                        element={<InviteRegisterPage />}
+                      />
+                      <Route
+                        path="/donor-profile"
+                        element={<DonorProfilePage />}
+                      />
+                      <Route path="/home" element={<HomeDashboardPage />} />
+
+                      {/* Routes accessed only if user is authenticated */}
+                      <Route element={<ProtectedRoutesWrapper />}>
+                        <Route path="/home" element={<HomePage />} />
+                      </Route>
+                      <Route
+                        path="/donationInfo"
+                        element={<DonationInfoPage />}
+                      />
+                      <Route element={<AdminRoutesWrapper />}>
+                        <Route path="/users" element={<AdminDashboardPage />} />
+                      </Route>
+                      <Route path="/reports" element={<ReportsPage />} />
+                      <Route
+                        path="/communications"
+                        element={<CommunicationsPage />}
+                      />
+                      {/* <Route element={<ReportsPage />}>
                     <Route path="/reports" element={<ReportsPage />} />
                   </Route> */}
 
-                  {/* Route which redirects to a different page depending on if the user is an authenticated or not by utilizing the DynamicRedirect component */}
-                  <Route
-                    path="/"
-                    element={
-                      <DynamicRedirect unAuthPath="/login" authPath="/home" />
-                    }
-                  />
+                      {/* Route which redirects to a different page depending on if the user is an authenticated or not by utilizing the DynamicRedirect component */}
+                      <Route
+                        path="/"
+                        element={
+                          <DynamicRedirect
+                            unAuthPath="/login"
+                            authPath="/home"
+                          />
+                        }
+                      />
 
-                  {/* Route which is accessed if no other route is matched */}
-                  <Route path="*" element={<NotFoundPage />} />
-                </Routes>
+                      {/* Route which is accessed if no other route is matched */}
+                      <Route path="*" element={<NotFoundPage />} />
+                    </Routes>
+                  }
+                />
               </CssBaseline>
             </ThemeProvider>
           </PersistGate>

diff --git a/client/src/Communications/CommunicationsPage.tsx b/client/src/Communications/CommunicationsPage.tsx
@@ -122,8 +122,11 @@ function CommunicationsPage() {
   const [groups, setGroups] = useState<IGroup[]>([]);
 
   // Fetch data using custom hook
-  const allDonors: ResolvedReq<IDonor[]> | null = useData('donor/all');
-  const allGroups: ResolvedReq<IGroup[]> | null = useData('group/all');
+  const allDonors: any | null = useData('donor/all');
+  const allGroups: any | null = useData('group/all');
+
+  // const allDonors: ResolvedReq<IDonor[]> | null = useData('donor/all');
+  // const allGroups: ResolvedReq<IGroup[]> | null = useData('group/all');
 
   useEffect(() => {
     if (allDonors?.data) {

diff --git a/client/src/Sidebar/Sidebar.tsx b/client/src/Sidebar/Sidebar.tsx
@@ -40,14 +40,14 @@ function Sidebar(props: any) {
                       </div>
                       <div
                         className="sidebar-link"
-                        onClick={() => navto('/donor-dashboard')}
+                        onClick={() => navto('/donationInfo')}
                       >
                         <i className="fa-solid fa-table-columns" /> &nbsp; Donor
                         Dashboard
                       </div>
                       <div
                         className="sidebar-link"
-                        onClick={() => navto('/communication')}
+                        onClick={() => navto('/communications')}
                       >
                         <i className="fa-solid fa-envelope" /> &nbsp;
                         Communications
@@ -58,6 +58,13 @@ function Sidebar(props: any) {
                       >
                         <i className="fa-solid fa-plus" /> &nbsp; New Donation
                       </div>
+                      <div
+                        className="sidebar-link"
+                        onClick={() => navto('/reports')}
+                      >
+                        <i className="fa-solid fa-sheet-plastic" /> &nbsp;
+                        Reports
+                      </div>
                     </div>
                   </div>
                 </div>

diff --git a/client/src/assets/theme.ts b/client/src/assets/theme.ts
@@ -74,10 +74,7 @@ const theme = createTheme({
           fontFamily: 'Hind Guntur',
           fontWeight: 'bold !important',
           fontSize: '25px',
-<<<<<<< HEAD
           color: COLORS.green,
-=======
->>>>>>> main
         },
       },
     },

diff --git a/client/src/index.tsx b/client/src/index.tsx
@@ -10,7 +10,8 @@ const container = document.getElementById('root');
 const root = createRoot(container!); // createRoot(container!) if you use TypeScript
 root.render(
   <AlertProvider>
-    <Sidebar side={<App />} />
+    {/* <Sidebar side={<App />} /> */}
+    <App />
   </AlertProvider>,
 );