Add all functionality mentioned in Notion task (dropdown w/ multi-sel…

…ect, filtering, table)
uwblueprint · Jun 3, 2024 · a5639ef · a5639ef
1 parent 4c90371
commit a5639ef
Show file tree

Hide file tree

Showing 10 changed files with 295 additions and 64 deletions.
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
@@ -31,6 +31,7 @@ module.exports = {
     "react/no-array-index-key": "off",
     "jsx-a11y/click-events-have-key-events": "off",
     "jsx-a11y/no-static-element-interactions": "off",
+    "react/prop-types": "off",
   },
   ignorePatterns: ["build/*"],
 };
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -37,6 +37,7 @@
     "react-jsonschema-form": "^1.8.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
+    "react-select": "^5.8.0",
     "react-table": "^7.7.0",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -13,6 +13,7 @@ import SimpleEntityDisplayPage from "./components/pages/SimpleEntityDisplayPage"
 import NotFound from "./components/pages/NotFound";
 import UpdatePage from "./components/pages/UpdatePage";
 import SimpleEntityUpdatePage from "./components/pages/SimpleEntityUpdatePage";
+import DashboardPage from "./components/pages/DashboardPage";
 import * as Routes from "./constants/Routes";
 import AUTHENTICATED_USER_KEY from "./constants/AuthConstants";
 import AuthContext from "./contexts/AuthContext";
@@ -57,6 +58,8 @@ const App = (): React.ReactElement => {
               <Switch>
                 <Route exact path={Routes.LOGIN_PAGE} component={Login} />
                 <Route exact path={Routes.SIGNUP_PAGE} component={Signup} />
+                {/* TODO: Move to private route eventually */}
+                <Route exact path={Routes.DASHBOARD_PAGE} component ={DashboardPage} />
                 <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,8 +10,6 @@ import authAPIClient from "../../APIClients/AuthAPIClient";
 import { HOME_PAGE, SIGNUP_PAGE } from "../../constants/Routes";
 import AuthContext from "../../contexts/AuthContext";
 import { AuthenticatedUser } from "../../types/AuthTypes";
-import DonationsTable from "../common/DonationsTable";
-import donationsData from '../../constants/donationsDataSample'; // For testing purposes
 
 type GoogleResponse = GoogleLoginResponse | GoogleLoginResponseOffline;
 
@@ -46,13 +44,6 @@ const Login = (): React.ReactElement => {
     return <Redirect to={HOME_PAGE} />;
   }
 
-  // For testing purposes
-  const filter = {
-    causes: [],//empty array will include all causes
-    frequencies: ["Monthly", "One-time"], //if not empty, only donations with these frequencies will be included
-    years: []
-};
-
   return (
     <div style={{ textAlign: "center" }}>
       <h1>Login</h1>
@@ -108,8 +99,6 @@ const Login = (): React.ReactElement => {
           Sign Up
         </button>
       </div>
-      {/* For testing purposes */}
-      <DonationsTable filter={filter} data={donationsData}/>
     </div>
   );
 };

diff --git a/frontend/src/components/common/DonationsTable.tsx b/frontend/src/components/common/DonationsTable.tsx
@@ -12,27 +12,25 @@ import {
     Box,
 } from '@chakra-ui/react'
 
-type Donation = {
+interface Donation {
     Cause: string;
-    Date: string;
-    Time: string;
+    Date: Date;
     Amount: number;
     Frequency: string;
-};
+}
 
-type Filter = {
+interface Filter {
     causes?: string[];
     frequencies?: string[];
     years?: string[];
-};
+}
 
-type DonationsTableProps = {
+interface DonationsTableProps {
     filter: Filter;
     data: Donation[];
 }
 
 const DonationsTable: React.FC<DonationsTableProps> = ({ filter, data }) => {
-
     const filterData = () => {
         return data.filter(donation => {
             return (!filter.causes || filter.causes.length === 0 || filter.causes.includes(donation.Cause)) &&
@@ -48,31 +46,29 @@ const DonationsTable: React.FC<DonationsTableProps> = ({ filter, data }) => {
         // @ts-ignore
         <TableContainer>
             <Box border='1px' borderColor='gray.200' borderRadius="xl" overflow="hidden">
-            <Table variant='striped' colorScheme='gray'>
-                <TableCaption>Donations</TableCaption>
-                <Thead>
-                    <Tr bgColor='#fadbe7'>
-                        <Th textAlign="left" textTransform="none">Cause</Th>
-                        <Th textAlign="left" textTransform="none">Date</Th>
-                        <Th textAlign="left" textTransform="none">Time</Th>
-                        <Th textAlign="left" textTransform="none">Amount</Th>
-                        <Th textAlign="left" textTransform="none">Frequency</Th>
-                        <Th />
-                    </Tr>
-                </Thead>
-                <Tbody>
-                    {filteredData.map((donation, index) => (
-                        <Tr key={index}>
-                            <Td>{donation.Cause}</Td>
-                            <Td>{donation.Date}</Td>
-                            <Td>{donation.Time}</Td>
-                            <Td>{donation.Amount}</Td>
-                            <Td>{donation.Frequency}</Td>
-                            <Td/>
+                <Table variant='striped' colorScheme='gray'>
+                    <TableCaption>Donations</TableCaption>
+                    <Thead>
+                        <Tr bgColor='#fadbe7'>
+                            <Th textAlign="left" textTransform="none">Cause</Th>
+                            <Th textAlign="left" textTransform="none">Date</Th>
+                            <Th textAlign="left" textTransform="none">Time</Th>
+                            <Th textAlign="left" textTransform="none">Amount</Th>
+                            <Th textAlign="left" textTransform="none">Frequency</Th>
                         </Tr>
-                    ))}
-                </Tbody>
-            </Table>
+                    </Thead>
+                    <Tbody>
+                        {filteredData.map((donation, index) => (
+                            <Tr key={index}>
+                                <Td>{donation.Cause}</Td>
+                                <Td>{donation.Date.toLocaleDateString()}</Td>
+                                <Td>{donation.Date.toLocaleDateString()}</Td>
+                                <Td>{donation.Amount}</Td>
+                                <Td>{donation.Frequency}</Td>
+                            </Tr>
+                        ))}
+                    </Tbody>
+                </Table>
             </Box>
         </TableContainer>
     );

diff --git a/frontend/src/components/common/FilterDropdown.tsx b/frontend/src/components/common/FilterDropdown.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import Select from 'react-select';
+import {
+  FormControl,
+  FormLabel,
+} from '@chakra-ui/react';
+
+interface FilterDropdownProps {
+  label: string;
+  options: { value: string; label: string }[];
+  selectedOptions: { value: string; label: string }[];
+  onChange: (selectedOptions: { value: string; label: string }[]) => void;
+  isMulti?: boolean;
+}
+
+const FilterDropdown: React.FC<FilterDropdownProps> = ({
+  label,
+  options,
+  selectedOptions,
+  onChange,
+  isMulti = false,
+}) => {
+  const handleChange = (selected: any) => {
+    onChange(selected || []);
+  };
+
+  return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    <FormControl>
+      <FormLabel>{label}</FormLabel>
+      <Select
+        isMulti={isMulti}
+        options={options}
+        value={selectedOptions}
+        onChange={handleChange}
+        placeholder={`Select ${label.toLowerCase()}`}
+      />
+    </FormControl>
+  );
+};
+
+export default FilterDropdown;