diff options
| -rw-r--r-- | src/pages/_app.tsx | 6 | ||||
| -rw-r--r-- | src/pages/index.tsx | 55 | ||||
| -rw-r--r-- | src/styles/globals.css | 6 |
3 files changed, 53 insertions, 14 deletions
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 082f72f..139eaeb 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -10,7 +10,11 @@ function MyApp({ Component, pageProps }: AppProps) { return ( <QueryClientProvider client={queryClient}> <Component {...pageProps} /> - {process.env.APP_ENV === "development" ? (<div style={{textAlign: "center", marginTop: "14px"}}><a href="/q/dev/">Visit Quarkus dev page</a></div>) : undefined} + {process.env.APP_ENV === "development" ? ( + <div style={{ textAlign: "center", marginTop: "14px" }}> + <a href="/q/dev/">Visit Quarkus dev page</a> + </div> + ) : undefined} </QueryClientProvider> ); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c5f0994..6ba4d3d 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -7,6 +7,8 @@ import { Message, Container, Pagination, + Input, + Grid, } from "semantic-ui-react"; import styles from "../styles/Home.module.css"; @@ -40,6 +42,7 @@ const Home: NextPage = () => { }, }); const [activePage, setActivePage] = useState(1); + const [searchState, setSearchState] = useState<string>(""); const [sortState, setSortState] = useState<SortStateProps>({ field: "name", order: "ascending", @@ -51,13 +54,26 @@ const Home: NextPage = () => { ); const entries = useMemo(() => { const list = List<PantryItem>(data); + + // case insensitive filter + const filterValue = searchState.trim().toUpperCase(); + const filterList: List<PantryItem> = + filterValue !== "" + ? list.filter( + (item) => + item.name?.toUpperCase().includes(filterValue) || + item.description?.toUpperCase().includes(filterValue) || + item.quantityUnitType?.toUpperCase().includes(filterValue) + ) + : list; + // case insensitive sort - const sorted = list.sortBy((item) => + const sorted = filterList.sortBy((item) => item[sortState.field]?.toString().toUpperCase() ); return sortState.order === "ascending" ? sorted : sorted.reverse(); - }, [data, sortState]); + }, [data, sortState, searchState]); const handleSortChange = (field: keyof PantryItem) => { setSortState((state) => state.field === field @@ -140,17 +156,30 @@ const Home: NextPage = () => { </Table.Body> <Table.Footer> <Table.Row> - <Table.HeaderCell colSpan="3"> - <Pagination - activePage={activePage} - onPageChange={(_, { activePage }) => - setActivePage(Number(activePage ?? 1)) - } - totalPages={Math.max( - 1, - Math.ceil(entries.size / ENTRIES_PER_PAGE) - )} - /> + <Table.HeaderCell colspan="3"> + <Grid> + <Grid.Column width="4" /> + <Grid.Column width="8" className="paginate-container"> + <Pagination + activePage={activePage} + onPageChange={(_, { activePage }) => + setActivePage(Number(activePage ?? 1)) + } + totalPages={Math.max( + 1, + Math.ceil(entries.size / ENTRIES_PER_PAGE) + )} + /> + </Grid.Column> + <Grid.Column floated="right" width="4"> + <Input + value={searchState} + onChange={(_, { value }) => setSearchState(value)} + placeholder="Search..." + icon="search" + /> + </Grid.Column> + </Grid> </Table.HeaderCell> </Table.Row> </Table.Footer> diff --git a/src/styles/globals.css b/src/styles/globals.css index 344cd26..1675722 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -11,6 +11,12 @@ a { text-decoration: none; } +div.paginate-container { + display: flex !important; + align-items: center; + justify-content: center; +} + * { box-sizing: border-box; } |