feat: 🎸 add SearchAndFilter component

yeukfei02 · Jan 3, 2023 · c96e55e · c96e55e
1 parent 1c8f229
commit c96e55e
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 35 deletions.
diff --git a/apps/web/src/components/dashboard/Dashboard.tsx b/apps/web/src/components/dashboard/Dashboard.tsx
@@ -2,11 +2,7 @@ import React, { useState, useEffect } from 'react';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
-import Card from '@mui/material/Card';
 import FormControl from '@mui/material/FormControl';
-import Pagination from '@mui/material/Pagination';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import InputLabel from '@mui/material/InputLabel';
@@ -21,7 +17,7 @@ import CustomAppBar from '../customAppBar/CustomAppBar';
 import { IncidentType, UserRole } from '@prisma/client';
 import * as incidentService from '../../services/incidentService';
 import CustomBreadcrumbs from '../customBreadcrumbs/CustomBreadcrumbs';
-import { Typography } from '@mui/material';
+import SearchAndFilter from '../searchAndFilter/SearchAndFilter';
 
 function Dashboard() {
   const [dialogOpen, setDialogOpen] = useState(false);
@@ -198,36 +194,15 @@ function Dashboard() {
           ) : null}
         </div>
 
-        <Card className="p-5 mt-5">
-          <Typography variant="h5">
-            <span className="font-bold">Search and Filter</span>
-          </Typography>
-          <Pagination
-            className="my-5"
-            count={totalPageCount}
-            page={page}
-            onChange={handlePageChange}
-            variant="outlined"
-            color="primary"
-            showFirstButton
-            showLastButton
-          />
-
-          <div className="flex flex-row items-center">
-            <FormControlLabel
-              control={<Switch onChange={(e) => handleSortByCreatedAt(e)} />}
-              label={`Sort by Created At (${
-                sortByCreatedAt ? 'Ascending' : 'Descending'
-              })`}
-            />
-            <FormControlLabel
-              control={<Switch onChange={(e) => handleSortByUpdatedAt(e)} />}
-              label={`Sort by Updated At (${
-                sortByUpdatedAt ? 'Ascending' : 'Descending'
-              })`}
-            />
-          </div>
-        </Card>
+        <SearchAndFilter
+          totalPageCount={totalPageCount}
+          page={page}
+          handlePageChange={handlePageChange}
+          handleSortByCreatedAt={handleSortByCreatedAt}
+          handleSortByUpdatedAt={handleSortByUpdatedAt}
+          sortByCreatedAt={sortByCreatedAt}
+          sortByUpdatedAt={sortByUpdatedAt}
+        />
 
         <IncidentCardList incidents={incidents} getIncidents={getIncidents} />
 

diff --git a/apps/web/src/components/searchAndFilter/SearchAndFilter.tsx b/apps/web/src/components/searchAndFilter/SearchAndFilter.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import Card from '@mui/material/Card';
+import Pagination from '@mui/material/Pagination';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import { Typography } from '@mui/material';
+
+interface Props {
+  totalPageCount: number;
+  page: number;
+  handlePageChange: (e: React.ChangeEvent<unknown>, page: number) => void;
+  handleSortByCreatedAt: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleSortByUpdatedAt: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  sortByCreatedAt: boolean;
+  sortByUpdatedAt: boolean;
+}
+
+function SearchAndFilter({
+  totalPageCount,
+  page,
+  handlePageChange,
+  handleSortByCreatedAt,
+  handleSortByUpdatedAt,
+  sortByCreatedAt,
+  sortByUpdatedAt,
+}: Props) {
+  return (
+    <Card className="p-5 mt-5">
+      <Typography variant="h5">
+        <span className="font-bold">Search and Filter</span>
+      </Typography>
+      <Pagination
+        className="my-5"
+        count={totalPageCount}
+        page={page}
+        onChange={handlePageChange}
+        variant="outlined"
+        color="primary"
+        showFirstButton
+        showLastButton
+      />
+
+      <div className="flex flex-row items-center">
+        <FormControlLabel
+          control={<Switch onChange={(e) => handleSortByCreatedAt(e)} />}
+          label={`Sort by Created At (${
+            sortByCreatedAt ? 'Ascending' : 'Descending'
+          })`}
+        />
+        <FormControlLabel
+          control={<Switch onChange={(e) => handleSortByUpdatedAt(e)} />}
+          label={`Sort by Updated At (${
+            sortByUpdatedAt ? 'Ascending' : 'Descending'
+          })`}
+        />
+      </div>
+    </Card>
+  );
+}
+
+export default SearchAndFilter;