Merge pull request #376 from sickelap/refactor_search_to_use_rtk

refactor search to use rtk

src/App.tsx

@@ -33,10 +33,10 @@ import { Statistics } from "./layouts/dataviz/Statistics";
 import { SignupPage } from "./layouts/login/SignUpPage";
 import { DeletedPhotos } from "./layouts/photos/DeletedPhotos";
 import { FavoritePhotos } from "./layouts/photos/FavoritePhotos";
-import { OnlyPhotos } from "./layouts/photos/OnlyPhotos";
-import { OnlyVideos } from "./layouts/photos/OnlyVideos";
 import { HiddenPhotos } from "./layouts/photos/HiddenPhotos";
 import { NoTimestampPhotosView } from "./layouts/photos/NoTimestampPhotosView";
+import { OnlyPhotos } from "./layouts/photos/OnlyPhotos";
+import { OnlyVideos } from "./layouts/photos/OnlyVideos";
 import { RecentlyAddedPhotos } from "./layouts/photos/RecentlyAddedPhotos";
 import { TimestampPhotos } from "./layouts/photos/TimestampPhotos";
 import { PublicUserList } from "./layouts/public/PublicUserList";
@@ -117,8 +117,8 @@ export function App() {
                   <Route path="things" element={<AlbumThing />} />
                   <Route path="recent" element={<RecentlyAddedPhotos />} />
                   <Route path="favorites" element={<FavoritePhotos />} />
-                  <Route path="photos" element={<OnlyPhotos/>} /> 
-                  <Route path="videos" element={<OnlyVideos/>} /> 
+                  <Route path="photos" element={<OnlyPhotos />} />
+                  <Route path="videos" element={<OnlyVideos />} />
                   <Route path="deleted" element={<DeletedPhotos />} />
                   <Route path="hidden" element={<HiddenPhotos />} />
                   <Route path="notimestamp" element={<NoTimestampPhotosView />} />
@@ -131,7 +131,7 @@ export function App() {
                   <Route path="profile" element={<Profile />} />
                   <Route path="library" element={<Library />} />
                   <Route path="faces" element={<FaceDashboard />} />
-                  <Route path="search" element={<SearchView />} />
+                  <Route path="search/:query" element={<SearchView />} />
                   <Route path="person/:albumID" element={<AlbumPersonGallery />} />
                   <Route path="place/:albumID" element={<AlbumPlaceGallery />} />
                   <Route path="thing/:albumID" element={<AlbumThingGallery />} />

src/api_client/search.ts

@@ -1,5 +1,7 @@
 import { z } from "zod";
 
+import { PigPhotoSchema } from "../actions/photosActions.types";
+import { getPhotosFlatFromGroupedByDate } from "../util/util";
 import { api } from "./api";
 
 const SearchExamplesSchema = z.array(z.string());
@@ -8,26 +10,59 @@ const SearchExamplesResponseSchema = z.object({
 });
 type SearchExamples = z.infer<typeof SearchExamplesSchema>;
 
+const PhotosGroupedByDate = z.array(
+  z.object({
+    date: z.string(),
+    location: z.string(),
+    items: z.array(PigPhotoSchema),
+  })
+);
+
+const SearchPhotosSchema = z.object({
+  results: PhotosGroupedByDate,
+});
+
+const SearchPhotosResultScheme = z.object({
+  photosFlat: z.array(PigPhotoSchema),
+  photosGroupedByDate: PhotosGroupedByDate,
+});
+
+type SearchPhotosResult = z.infer<typeof SearchPhotosResultScheme>;
+
 enum Endpoints {
-  fetchSearchExamples = "fetchSearchExamples",
+  searchExamples = "searchExamples",
+  searchPhotos = "searchPhotos",
 }
 
 const searchApi = api
   .injectEndpoints({
     endpoints: builder => ({
-      [Endpoints.fetchSearchExamples]: builder.query<SearchExamples, void>({
+      [Endpoints.searchExamples]: builder.query<SearchExamples, void>({
         query: () => "searchtermexamples/",
         transformResponse: response => SearchExamplesResponseSchema.parse(response).results,
       }),
+      [Endpoints.searchPhotos]: builder.query<SearchPhotosResult, string>({
+        query: query => `photos/searchlist/?search=${query}`,
+        transformResponse: response => {
+          const photosGroupedByDate = SearchPhotosSchema.parse(response).results;
+          return {
+            photosFlat: getPhotosFlatFromGroupedByDate(photosGroupedByDate),
+            photosGroupedByDate: photosGroupedByDate,
+          };
+        },
+      }),
     }),
   })
-  .enhanceEndpoints<"SearchExamples">({
-    addTagTypes: ["SearchExamples"],
+  .enhanceEndpoints<"SearchExamples" | "SearchPhotos">({
+    addTagTypes: ["SearchExamples", "SearchPhotos"],
     endpoints: {
-      [Endpoints.fetchSearchExamples]: {
+      [Endpoints.searchExamples]: {
         providesTags: ["SearchExamples"],
       },
+      [Endpoints.searchPhotos]: {
+        providesTags: ["SearchPhotos"],
+      },
     },
   });
 
-export const { useFetchSearchExamplesQuery } = searchApi;
+export const { useSearchExamplesQuery, useSearchPhotosQuery } = searchApi;

src/components/CustomSearch.tsx

@@ -8,12 +8,11 @@ import { useTranslation } from "react-i18next";
 import { push } from "redux-first-history";
 import { Album, Map, Search, Tag, X } from "tabler-icons-react";
 
-import { searchPhotos } from "../actions/searchActions";
 import { useFetchPeopleAlbumsQuery } from "../api_client/albums/people";
 import { useFetchPlacesAlbumsQuery } from "../api_client/albums/places";
 import { useFetchThingsAlbumsQuery } from "../api_client/albums/things";
 import { useFetchUserAlbumsQuery } from "../api_client/albums/user";
-import { useFetchSearchExamplesQuery } from "../api_client/search";
+import { useSearchExamplesQuery } from "../api_client/search";
 import { useAppDispatch } from "../store/store";
 import { fuzzyMatch } from "../util/util";
 
@@ -87,7 +86,7 @@ export function CustomSearch() {
   const [searchSuggestions, setSearchSuggestions] = useState<Array<AutocompleteItem>>([]);
   const [searchPlaceholder, setSearchPlaceholder] = useState("");
   const searchBarWidth = width - width / 2.2;
-  const { data: searchExamples } = useFetchSearchExamplesQuery();
+  const { data: searchExamples } = useSearchExamplesQuery();
   const { data: placeAlbums } = useFetchPlacesAlbumsQuery();
   const { data: thingAlbums } = useFetchThingsAlbumsQuery();
   const { data: userAlbums } = useFetchUserAlbumsQuery();
@@ -137,8 +136,7 @@ export function CustomSearch() {
     switch (item.type) {
       case undefined:
       case SuggestionType.EXAMPLE:
-        dispatch(searchPhotos(item.value));
-        dispatch(push("/search"));
+        dispatch(push(`/search/${item.value}`));
         break;
       case SuggestionType.USER_ALBUM:
         dispatch(push(`/useralbum/${item.id}`));

src/components/lightbox/Sidebar.tsx

@@ -10,7 +10,6 @@ import { Edit, Map2, Note, Photo, Tags, UserOff, Users, X } from "tabler-icons-r
 
 import { generatePhotoIm2txtCaption, savePhotoCaption } from "../../actions/photosActions";
 import type { Photo as PhotoType } from "../../actions/photosActions.types";
-import { searchPhotos } from "../../actions/searchActions";
 import { api } from "../../api_client/api";
 import { serverAddress } from "../../api_client/apiClient";
 import { photoDetailsApi } from "../../api_client/photos/photoDetail";
@@ -137,14 +136,11 @@ export function Sidebar(props: Props) {
                 <Title order={4}>{t("lightbox.sidebar.people")}</Title>
               </Group>
               {photoDetail.people.map(nc => (
-                <Group position="center" spacing="xs">
+                <Group position="center" spacing="xs" key={`${nc.name}`}>
                   <Button
                     variant="subtle"
                     leftIcon={<Avatar radius="xl" src={serverAddress + nc.face_url} />}
-                    onClick={() => {
-                      dispatch(searchPhotos(nc.name));
-                      dispatch(push("/search"));
-                    }}
+                    onClick={() => dispatch(push(`/search/${nc.name}`))}
                   >
                     <Text align="center" size="sm">
                       {nc.name}
@@ -223,8 +219,7 @@ export function Sidebar(props: Props) {
                     key={`lightbox_attribute_label_${photoDetail.image_hash}_${nc}`}
                     color="blue"
                     onClick={() => {
-                      dispatch(searchPhotos(nc));
-                      dispatch(push("/search"));
+                      dispatch(push(`/search/${nc}`));
                     }}
                   >
                     {nc}
@@ -239,8 +234,7 @@ export function Sidebar(props: Props) {
                     key={`lightbox_category_label_${photoDetail.image_hash}_${nc}`}
                     color="teal"
                     onClick={() => {
-                      dispatch(searchPhotos(nc));
-                      dispatch(push("/search"));
+                      dispatch(push(`/search/${nc}`));
                     }}
                   >
                     {nc}

src/layouts/SearchView.tsx

@@ -1,34 +1,26 @@
 import React from "react";
-// only needs to be imported once
-import { Navigate } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import "react-virtualized/styles.css";
 import { Search } from "tabler-icons-react";
 
+import { useSearchPhotosQuery } from "../api_client/search";
 import { PhotoListView } from "../components/photolist/PhotoListView";
-import { PhotosetType } from "../reducers/photosReducer";
 import { useAppSelector } from "../store/store";
 
+const DEFAULTS = {
+  photosFlat: [],
+  photosGroupedByDate: [],
+};
+
 export function SearchView() {
+  const { query: searchQuery } = useParams();
   const user = useAppSelector(state => state.user.userSelfDetails);
-  const photosGroupedByDate = useAppSelector(state => state.photos.photosGroupedByDate);
-  const photosFlat = useAppSelector(state => state.photos.photosFlat);
-  const fetchedPhotosetType = useAppSelector(state => state.photos.fetchedPhotosetType);
-
-  const searchQuery = useAppSelector(state => state.search.query);
-
-  if (!searchQuery) {
-    // User hasn't searched for anything. Redirect to root.
-    return <Navigate to="/" />;
-  }
-  // if semantic search is activated we get a flat array sorted by relevance
-  // thats why we have to change the parameters
-  const title = `Searching "${searchQuery}"...`;
+  const { data: { photosGroupedByDate, photosFlat } = DEFAULTS, isFetching } = useSearchPhotosQuery(searchQuery ?? "");
 
-  // To-Do: Semantic Search broken, Zod Error
   return (
     <PhotoListView
-      title={title}
-      loading={fetchedPhotosetType !== PhotosetType.SEARCH}
+      title={`Searching "${searchQuery}"...`}
+      loading={isFetching}
       icon={<Search size={50} />}
       photoset={photosGroupedByDate}
       idx2hash={user.semantic_search_topk ? photosGroupedByDate : photosFlat}