refactor: improve search page further. fix pagination

app/src/App.js

@@ -1,10 +1,10 @@
 import { Box, CssBaseline, darkScrollbar, useMediaQuery } from "@mui/material";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
 import React, { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { BrowserRouter, Route, Routes, useNavigate } from "react-router-dom";
-import { getAuthToken } from "./api/gram/util/authToken";
 import "./App.css";
+import { getAuthToken } from "./api/gram/util/authToken";
 import AdminPage from "./components/admin/AdminPage";
 import { ErrorPage } from "./components/elements/ErrorPage";
 import { ModalManager } from "./components/elements/modal/ModalManager";
@@ -15,13 +15,13 @@ import { Model } from "./components/model/Model";
 import { NewWizard } from "./components/model/New";
 import { Navbar } from "./components/navbar/Navbar";
 import { Reviews } from "./components/reviews/Reviews";
+import SearchPage from "./components/search/SearchPage";
+import { LatestSystem } from "./components/system/LatestSystem";
 import { System } from "./components/system/System";
-import Search from "./components/search/Search";
 import { TeamSystemsPage } from "./components/systems/TeamSystems/TeamSystemPage";
 import UserModels from "./components/user-models/UserModels/UserModels";
 import { useIsFramed } from "./hooks/useIsFramed";
 import { authActions } from "./redux/authSlice";
-import { LatestSystem } from "./components/system/LatestSystem";
 
 function LoginRedirect() {
   const navigate = useNavigate();
@@ -116,7 +116,7 @@ export default function App() {
                       element={<LatestSystem />}
                     />
                     <Route path="/system/:id" element={<System />} />
-                    <Route path="/search" element={<Search />} />
+                    <Route path="/search" element={<SearchPage />} />
                     <Route path="/team">
                       <Route index element={<TeamSystemsPage />} />
                       <Route path=":teamId" element={<TeamSystemsPage />} />

app/src/api/gram/search.js

@@ -15,10 +15,10 @@ const searchApi = api.injectEndpoints({
       transformResponse: (response, meta, arg) => response.results,
     }),
     getSearchTypes: build.query({
-      query: ({ systemId }) => ({
+      query: () => ({
         url: `/search/types`,
       }),
-      transformResponse: (response, meta, arg) => response,
+      transformResponse: (response, meta, arg) => response.searchTypes,
     }),
   }),
 });

app/src/components/navbar/__snapshots__/Navbar.spec.js.snap

@@ -57,7 +57,7 @@ exports[`Navbar renders Navbar 1`] = `
               <input
                 aria-label="search"
                 class="MuiInputBase-input css-yz9k0d-MuiInputBase-input"
-                placeholder="Search system…"
+                placeholder="Search …"
                 type="text"
                 value=""
               />
@@ -209,7 +209,7 @@ exports[`Navbar renders Navbar 1`] = `
             <input
               aria-label="search"
               class="MuiInputBase-input css-yz9k0d-MuiInputBase-input"
-              placeholder="Search system…"
+              placeholder="Search …"
               type="text"
               value=""
             />

app/src/components/search/SearchPage.js

@@ -0,0 +1,44 @@
+import { Card, CardContent, Divider, Grid, Typography } from "@mui/material";
+import React from "react";
+import { useLocation } from "react-router-dom";
+import Loading from "../loading";
+
+import { useGetSearchTypesQuery } from "../../api/gram/search";
+import { CenteredPage } from "../elements/CenteredPage";
+import { SearchResultBox } from "./SearchResultBox";
+
+export default function SearchPage() {
+  const { search } = useLocation();
+  const query = new URLSearchParams(search);
+  const queryValue = query.get("query") || "";
+
+  const { data, isLoading } = useGetSearchTypesQuery();
+
+  return (
+    <CenteredPage>
+      <Card sx={{ maxWidth: "md" }}>
+        <CardContent>
+          <Typography variant="h5">
+            Search results for "{queryValue}"
+          </Typography>
+        </CardContent>
+      </Card>
+      <br />
+      <Divider />
+      <br />
+      <>
+        {!isLoading ? (
+          <Grid container spacing={2}>
+            {data?.map((searchType) => (
+              <Grid item md={4}>
+                <SearchResultBox searchText={queryValue} type={searchType} />
+              </Grid>
+            ))}
+          </Grid>
+        ) : (
+          <Loading />
+        )}
+      </>
+    </CenteredPage>
+  );
+}

app/src/components/search/Search.spec.js → app/src/components/search/SearchPage.spec.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { cleanup, render } from "@testing-library/react";
-import Search from "./Search";
+import SearchPage from "./SearchPage";
 import { BrowserRouter as Router } from "react-router-dom";
 import { createMockStore } from "redux-test-utils";
 import { Provider } from "react-redux";
@@ -11,7 +11,7 @@ const renderComponent = (props) =>
   render(
     <Provider store={store}>
       <Router>
-        <Search {...props} />
+        <SearchPage {...props} />
       </Router>
     </Provider>
   );

app/src/components/search/SearchResultBox.js

@@ -0,0 +1,64 @@
+import {
+  Card,
+  CardContent,
+  CircularProgress,
+  List,
+  ListItemButton,
+  ListItemText,
+  Pagination,
+  Typography,
+} from "@mui/material";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { useSearchQuery } from "../../api/gram/search";
+
+export function SearchResultBox({ searchText, type }) {
+  const [page, setPage] = useState(1);
+
+  const { data, isLoading } = useSearchQuery({
+    searchText,
+    types: [type.key],
+    page: page - 1,
+  });
+
+  const r = isLoading ? null : data[0];
+
+  if (isLoading || !r) {
+    return <CircularProgress />;
+  }
+
+  return (
+    <Card sx={{ maxWidth: "sm" }}>
+      <CardContent>
+        <Typography variant="h5">
+          {type.label}s {r.count > 0 && <>({r.count})</>}
+        </Typography>
+        {r.items && r.items.length === 0 && (
+          <Typography variant="body2" sx={{ marginTop: 1 }}>
+            No {type.label}s found
+          </Typography>
+        )}
+        <List>
+          {r.items &&
+            r.items.map((item) => (
+              <ListItemButton
+                component={Link}
+                to={item.url}
+                key={item.id}
+                style={{ lineHeight: 1, margin: 0, padding: 0 }}
+              >
+                <ListItemText primary={item.label} secondary={item.id} />
+              </ListItemButton>
+            ))}
+        </List>
+        {r.count > 0 && (
+          <Pagination
+            count={Math.floor(r.count / 10) || 1}
+            page={page}
+            onChange={(_, np) => setPage(np)}
+          />
+        )}
+      </CardContent>
+    </Card>
+  );
+}