From 9f60330f4c4f2f6be756630e2beb28f18d9d79a5 Mon Sep 17 00:00:00 2001
From: Genadijus Paleckis <sickelap@users.noreply.github.com>
Date: Tue, 14 Nov 2023 14:26:33 +0000
Subject: [PATCH] more refactoring for albums to use RTK (#410)

* place albums RTK

* add keys and update type

* fix explorer

* delete all auto albums RTK

* cleanup unused code

* add rtk endpoints for album sharing

* cleanup duplication
---
 src/actions/albumsActions.ts                | 148 +------------------
 src/api_client/albums/auto.ts               |  47 +++++-
 src/api_client/albums/places.ts             |  17 ++-
 src/api_client/albums/user.ts               |  22 ++-
 src/layouts/albums/AlbumAutoGalleryView.tsx |   8 +-
 src/layouts/albums/AlbumPlace.tsx           |   6 +-
 src/layouts/albums/AlbumPlaceGallery.tsx    |  26 +---
 src/layouts/albums/Explorer.tsx             | 149 ++++++++++----------
 src/layouts/settings/AdminPage.tsx          | 148 +++++++++----------
 src/layouts/settings/Library.tsx            |  19 +--
 src/util/util.ts                            |   5 +-
 11 files changed, 258 insertions(+), 337 deletions(-)

diff --git a/src/actions/albumsActions.ts b/src/actions/albumsActions.ts
index 75240cef..9de9f7e4 100644
--- a/src/actions/albumsActions.ts
+++ b/src/actions/albumsActions.ts
@@ -1,108 +1,18 @@
-import { showNotification } from "@mantine/notifications";
 import _ from "lodash";
 import type { Dispatch } from "react";
-import { z } from "zod";
 
 import { Server } from "../api_client/apiClient";
-import i18n from "../i18n";
 import { PhotosetType } from "../reducers/photosReducer";
 import type { AppDispatch } from "../store/store";
 import { addTempElementsToGroups, getPhotosFlatFromGroupedByDate } from "../util/util";
-import type { AutoAlbumInfo, UserAlbumDetails, UserAlbumInfo } from "./albumActions.types";
-import {
-  FetchAutoAlbumsListResponseSchema,
-  FetchDateAlbumsListResponseSchema,
-  FetchUserAlbumsListResponseSchema,
-  FetchUserAlbumsSharedResponseSchema,
-  PlaceAlbumSchema,
-  UserAlbumInfoSchema,
-  UserAlbumSchema,
-} from "./albumActions.types";
-import type { DatePhotosGroup, IncompleteDatePhotosGroup } from "./photosActions.types";
+import type { UserAlbumInfo } from "./albumActions.types";
+import { FetchDateAlbumsListResponseSchema, FetchUserAlbumsSharedResponseSchema } from "./albumActions.types";
+import type { IncompleteDatePhotosGroup } from "./photosActions.types";
 import { IncompleteDatePhotosGroupSchema } from "./photosActions.types";
 
-export function fetchUserAlbumsList() {
-  return function cb(dispatch: Dispatch<any>) {
-    dispatch({ type: "FETCH_USER_ALBUMS_LIST" });
-    Server.get("albums/user/list/")
-      .then(response => {
-        const data = FetchUserAlbumsListResponseSchema.parse(response.data);
-        const userAlbumInfoList: UserAlbumInfo[] = data.results;
-        dispatch({
-          type: "FETCH_USER_ALBUMS_LIST_FULFILLED",
-          payload: userAlbumInfoList,
-        });
-      })
-      .catch(err => {
-        dispatch({ type: "FETCH_USER_ALBUMS_LIST_REJECTED", payload: err });
-      });
-  };
-}
-
-export const FETCH_USER_ALBUM = "FETCH_USER_ALBUM";
 export const FETCH_USER_ALBUM_FULFILLED = "FETCH_USER_ALBUM_FULFILLED";
 export const FETCH_USER_ALBUM_REJECTED = "FETCH_USER_ALBUM_REJECTED";
 
-export function fetchUserAlbum(album_id: number) {
-  return function cb(dispatch: Dispatch<any>) {
-    dispatch({ type: FETCH_USER_ALBUM });
-    Server.get(`albums/user/${album_id}/`)
-      .then(response => {
-        const data = UserAlbumSchema.parse(response.data);
-        const photosGroupedByDate: DatePhotosGroup[] = data.grouped_photos;
-        const albumDetails: UserAlbumDetails = data;
-        dispatch({
-          type: FETCH_USER_ALBUM_FULFILLED,
-          payload: {
-            photosGroupedByDate,
-            photosFlat: getPhotosFlatFromGroupedByDate(photosGroupedByDate),
-            albumDetails,
-          },
-        });
-      })
-      .catch(err => {
-        dispatch({ type: FETCH_USER_ALBUM_REJECTED, payload: err });
-      });
-  };
-}
-
-const PlaceAlbumResponseSchema = z.object({ results: PlaceAlbumSchema });
-
-export function fetchPlaceAlbum(album_id: string) {
-  return function cb(dispatch: Dispatch<any>) {
-    dispatch({ type: "FETCH_PLACE_ALBUMS" });
-    Server.get(`albums/place/${album_id}/`)
-      .then(response => {
-        const data = PlaceAlbumResponseSchema.parse(response.data);
-        dispatch({
-          type: "FETCH_PLACE_ALBUMS_FULFILLED",
-          payload: data,
-        });
-      })
-      .catch(err => {
-        dispatch({ type: "FETCH_PLACE_ALBUMS_REJECTED", payload: err });
-      });
-  };
-}
-
-export function fetchAutoAlbumsList() {
-  return function cb(dispatch: Dispatch<any>) {
-    dispatch({ type: "FETCH_AUTO_ALBUMS_LIST" });
-    Server.get("albums/auto/list/")
-      .then(response => {
-        const data = FetchAutoAlbumsListResponseSchema.parse(response.data);
-        const autoAlbumsList: AutoAlbumInfo[] = data.results;
-        dispatch({
-          type: "FETCH_AUTO_ALBUMS_LIST_FULFILLED",
-          payload: autoAlbumsList,
-        });
-      })
-      .catch(err => {
-        dispatch({ type: "FETCH_AUTO_ALBUMS_LIST_REJECTED", payload: err });
-      });
-  };
-}
-
 type AlbumDateListOptions = {
   photosetType: PhotosetType;
   person_id?: number;
@@ -187,58 +97,6 @@ export function fetchAlbumDate(dispatch: AppDispatch, options: AlbumDateOption)
     });
 }
 
-export function deleteAllAutoAlbum() {
-  return function cb(dispatch: Dispatch<any>) {
-    dispatch({ type: "DELETE_All_AUTO_ALBUM" });
-    Server.post(`/albums/auto/delete_all/`)
-      .then(() => {
-        dispatch({ type: "DELETE_ALL_AUTO_ALBUM_FULFILLED" });
-        dispatch(fetchAutoAlbumsList());
-        showNotification({
-          message: i18n.t("toasts.deleteallautoalbums"),
-          title: i18n.t("toasts.deleteallautoalbumstitle"),
-          color: "teal",
-        });
-      })
-      .catch(err => {
-        dispatch({ type: "DELETE_ALL_AUTO_ALBUM_REJECTED", payload: err });
-      });
-  };
-}
-
-// share user album
-export function setUserAlbumShared(album_id: number, target_user_id: string, val_shared: boolean) {
-  return function cb(dispatch: Dispatch<any>) {
-    dispatch({ type: "SET_ALBUM_USER_SHARED" });
-    Server.post("useralbum/share/", { shared: val_shared, album_id, target_user_id })
-      .then(response => {
-        const userAlbumInfo: UserAlbumInfo = UserAlbumInfoSchema.parse(response.data);
-        dispatch({
-          type: "SET_ALBUM_USER_SHARED_FULFILLED",
-          payload: userAlbumInfo,
-        });
-        dispatch(fetchUserAlbum(album_id));
-
-        if (val_shared) {
-          showNotification({
-            message: i18n.t("toasts.sharingalbum"),
-            title: i18n.t("toasts.sharingalbumtitle"),
-            color: "teal",
-          });
-        } else {
-          showNotification({
-            message: i18n.t("toasts.unsharingalbum"),
-            title: i18n.t("toasts.unsharingalbumtitle"),
-            color: "teal",
-          });
-        }
-      })
-      .catch(err => {
-        dispatch({ type: "SET_ALBUM_USER_SHARED_FULFILLED", payload: err });
-      });
-  };
-}
-
 export function fetchUserAlbumsSharedToMe() {
   return function cb(dispatch: Dispatch<any>) {
     dispatch({ type: "FETCH_ALBUMS_SHARED_TO_ME" });
diff --git a/src/api_client/albums/auto.ts b/src/api_client/albums/auto.ts
index 19558a09..d3e6e815 100644
--- a/src/api_client/albums/auto.ts
+++ b/src/api_client/albums/auto.ts
@@ -29,6 +29,7 @@ enum Endpoints {
   fetchAutoAlbum = "fetchAutoAlbum",
   deleteAutoAlbum = "deleteAutoAlbum",
   deleteAllAutoAlbums = "deleteAllAutoAlbums",
+  generateAutoAlbums = "generateAutoAlbums",
 }
 
 export const autoAlbumsApi = api
@@ -50,8 +51,36 @@ export const autoAlbumsApi = api
         }),
         transformResponse: (response, meta, query) => {
           showNotification({
-            message: i18n.t<string>("toasts.deletealbum", query),
-            title: i18n.t<string>("toasts.deletealbumtitle"),
+            message: i18n.t("toasts.deletealbum", query),
+            title: i18n.t("toasts.deletealbumtitle"),
+            color: "teal",
+          });
+        },
+      }),
+      [Endpoints.deleteAllAutoAlbums]: builder.mutation<void, void>({
+        query: () => ({
+          url: `albums/auto/delete_all/`,
+          method: "POST",
+          body: {},
+        }),
+        transformResponse: () => {
+          showNotification({
+            message: i18n.t("toasts.deleteallautoalbums"),
+            title: i18n.t("toasts.deleteallautoalbumstitle"),
+            color: "teal",
+          });
+        },
+      }),
+      [Endpoints.generateAutoAlbums]: builder.mutation<void, void>({
+        query: () => ({
+          url: `autoalbumgen/`,
+          method: "POST",
+          body: {},
+        }),
+        transformResponse: () => {
+          showNotification({
+            message: i18n.t("toasts.generateeventalbums"),
+            title: i18n.t("toasts.generateeventalbumstitle"),
             color: "teal",
           });
         },
@@ -70,7 +99,19 @@ export const autoAlbumsApi = api
       [Endpoints.deleteAutoAlbum]: {
         invalidatesTags: ["AutoAlbums", "AutoAlbum"],
       },
+      [Endpoints.deleteAllAutoAlbums]: {
+        invalidatesTags: ["AutoAlbums", "AutoAlbum"],
+      },
+      [Endpoints.generateAutoAlbums]: {
+        invalidatesTags: ["AutoAlbums", "AutoAlbum"],
+      },
     },
   });
 
-export const { useFetchAutoAlbumsQuery, useLazyFetchAutoAlbumQuery, useDeleteAutoAlbumMutation } = autoAlbumsApi;
+export const {
+  useFetchAutoAlbumsQuery,
+  useLazyFetchAutoAlbumQuery,
+  useDeleteAutoAlbumMutation,
+  useDeleteAllAutoAlbumsMutation,
+  useGenerateAutoAlbumsMutation,
+} = autoAlbumsApi;
diff --git a/src/api_client/albums/places.ts b/src/api_client/albums/places.ts
index e087a824..f7327b78 100644
--- a/src/api_client/albums/places.ts
+++ b/src/api_client/albums/places.ts
@@ -1,6 +1,6 @@
 import { z } from "zod";
 
-import { PhotoHashSchema } from "../../actions/photosActions.types";
+import { DatePhotosGroupSchema, PhotoHashSchema } from "../../actions/photosActions.types";
 import { api } from "../api";
 
 const AlbumInfoSchema = z.object({
@@ -25,8 +25,17 @@ const PlacesAlbumsResponseSchema = z.object({
 const LocationClustersResponseSchema = z.array(z.array(z.union([z.number(), z.string()])));
 export type LocationClusters = z.infer<typeof LocationClustersResponseSchema>;
 
+const PlaceAlbumSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  grouped_photos: DatePhotosGroupSchema.array(),
+});
+type PlaceAlbum = z.infer<typeof PlaceAlbumSchema>;
+const PlaceAlbumResponseSchema = z.object({ results: PlaceAlbumSchema });
+
 enum Endpoints {
   fetchPlacesAlbums = "fetchPlacesAlbums",
+  fetchPlaceAlbum = "fetchPlaceAlbum",
   fetchLocationClusters = "fetchLocationClusters",
 }
 
@@ -37,6 +46,10 @@ export const placesAlbumsApi = api
         query: () => "albums/place/list/",
         transformResponse: response => PlacesAlbumsResponseSchema.parse(response).results,
       }),
+      [Endpoints.fetchPlaceAlbum]: builder.query<PlaceAlbum, string>({
+        query: album_id => `albums/place/${album_id}/`,
+        transformResponse: response => PlaceAlbumResponseSchema.parse(response).results,
+      }),
       [Endpoints.fetchLocationClusters]: builder.query<LocationClusters, void>({
         query: () => "locclust/",
         transformResponse: response => LocationClustersResponseSchema.parse(response),
@@ -52,4 +65,4 @@ export const placesAlbumsApi = api
     },
   });
 
-export const { useFetchPlacesAlbumsQuery, useFetchLocationClustersQuery } = placesAlbumsApi;
+export const { useFetchPlacesAlbumsQuery, useFetchLocationClustersQuery, useFetchPlaceAlbumQuery } = placesAlbumsApi;
diff --git a/src/api_client/albums/user.ts b/src/api_client/albums/user.ts
index 22ddb29e..e61e4b2f 100644
--- a/src/api_client/albums/user.ts
+++ b/src/api_client/albums/user.ts
@@ -47,6 +47,8 @@ enum Endpoints {
   addPhotoToUserAlbum = "addPhotoToUserAlbum",
   setUserAlbumCover = "setUserAlbumCover",
   shareUserAlbum = "shareUserAlbum",
+  fetchAlbumsSharedByMe = "fetchAlbumsSharedByMe",
+  fetchAlbumsSharedWithMe = "fetchAlbumsSharedWithMe",
 }
 
 type DeleteUserAlbumParams = {
@@ -217,10 +219,18 @@ export const userAlbumsApi = api
           }
         },
       }),
+      [Endpoints.fetchAlbumsSharedByMe]: builder.query<UserAlbumList, void>({
+        query: () => "albums/user/shared/fromme/",
+        transformResponse: response => UserAlbumListResponseSchema.parse(response).results,
+      }),
+      [Endpoints.fetchAlbumsSharedWithMe]: builder.query<UserAlbumList, void>({
+        query: () => "albums/user/shared/tome/",
+        transformResponse: response => UserAlbumListResponseSchema.parse(response).results,
+      }),
     }),
   })
-  .enhanceEndpoints<"UserAlbums" | "UserAlbum">({
-    addTagTypes: ["UserAlbums", "UserAlbum"],
+  .enhanceEndpoints<"UserAlbums" | "UserAlbum" | "UserAlbumsSharedByMe" | "UserAlbumsSharedWithMe">({
+    addTagTypes: ["UserAlbums", "UserAlbum", "UserAlbumsSharedWithMe", "UserAlbumsSharedByMe"],
     endpoints: {
       [Endpoints.fetchUserAlbums]: {
         providesTags: ["UserAlbums"],
@@ -248,7 +258,13 @@ export const userAlbumsApi = api
       },
       [Endpoints.shareUserAlbum]: {
         // TODO(sickelap): invalidate only the album that was shared
-        invalidatesTags: ["UserAlbums", "UserAlbum"],
+        invalidatesTags: ["UserAlbums", "UserAlbum", "UserAlbumsSharedByMe"],
+      },
+      [Endpoints.fetchAlbumsSharedByMe]: {
+        providesTags: ["UserAlbumsSharedByMe"],
+      },
+      [Endpoints.fetchAlbumsSharedWithMe]: {
+        providesTags: ["UserAlbumsSharedWithMe"],
       },
     },
   });
diff --git a/src/layouts/albums/AlbumAutoGalleryView.tsx b/src/layouts/albums/AlbumAutoGalleryView.tsx
index 4229359c..bdb5e623 100644
--- a/src/layouts/albums/AlbumAutoGalleryView.tsx
+++ b/src/layouts/albums/AlbumAutoGalleryView.tsx
@@ -45,7 +45,7 @@ export function AlbumAutoGalleryView() {
     setEntrySquareSize((width - SIDEBAR_WIDTH - 20) / numEntrySquaresPerRow);
   }, [width]);
 
-  function getPhotoDetails(image_hash) {
+  function getPhotoDetails(image_hash: string) {
     dispatch(photoDetailsApi.endpoints.fetchPhotoDetails.initiate(image_hash));
   }
 
@@ -119,6 +119,7 @@ export function AlbumAutoGalleryView() {
             <Avatar.Group>
               {album.people.slice(0, 5).map(person => (
                 <Avatar
+                  key={person.id}
                   radius="xl"
                   component="a"
                   href={`/person/${person.id}`}
@@ -140,9 +141,9 @@ export function AlbumAutoGalleryView() {
                 }
                 return "";
               });
-            const uniqueLocations = _.uniq(locations).map(location => <Text>{location}</Text>);
+            const uniqueLocations = _.uniq(locations).map(location => <Text key={location}>{location}</Text>);
             return (
-              <div>
+              <div key={v[0]}>
                 <Divider hidden />
                 <Group>
                   <Calendar />
@@ -173,6 +174,7 @@ export function AlbumAutoGalleryView() {
 
                 {v[1].map(photo => (
                   <Box
+                    key={photo.image_hash}
                     onClick={() => {
                       if (albumID) {
                         const indexOf = album.photos.map(p => p.image_hash).indexOf(photo.image_hash);
diff --git a/src/layouts/albums/AlbumPlace.tsx b/src/layouts/albums/AlbumPlace.tsx
index 28f2ce61..8c5e6dbf 100644
--- a/src/layouts/albums/AlbumPlace.tsx
+++ b/src/layouts/albums/AlbumPlace.tsx
@@ -65,9 +65,9 @@ export function AlbumPlace({ height }: Props) {
     if (!locationClusters) {
       return <div />;
     }
-    return locationClusters.map(loc => {
-      const key = `${loc[0]}-${loc[1]}`;
-      return loc[0] !== 0 ? <Marker key={key} position={[+loc[0], +loc[1]]} /> : <div />;
+    return locationClusters.map((loc, idx) => {
+      const key = `${loc[0]}-${loc[1]}-${idx}`;
+      return loc[0] !== 0 ? <Marker key={key} position={[+loc[1], +loc[0]]} /> : <div />;
     });
   }
 
diff --git a/src/layouts/albums/AlbumPlaceGallery.tsx b/src/layouts/albums/AlbumPlaceGallery.tsx
index da391b1a..d2fadb17 100644
--- a/src/layouts/albums/AlbumPlaceGallery.tsx
+++ b/src/layouts/albums/AlbumPlaceGallery.tsx
@@ -1,35 +1,23 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
 import { Map } from "tabler-icons-react";
 
-import { fetchPlaceAlbum } from "../../actions/albumsActions";
+import { useFetchPlaceAlbumQuery } from "../../api_client/albums/places";
 import { PhotoListView } from "../../components/photolist/PhotoListView";
-import { useAppDispatch, useAppSelector } from "../../store/store";
 
 export function AlbumPlaceGallery() {
   const { t } = useTranslation();
   const { albumID } = useParams();
-  const dispatch = useAppDispatch();
-
-  const albumsPlace = useAppSelector(store => store.albums.albumsPlace);
-  const fetchingAlbumsPlace = useAppSelector(store => store.albums.fetchingAlbumsPlace);
-
-  const groupedPhotos = albumID ? albumsPlace[albumID] : undefined;
-
-  useEffect(() => {
-    if (albumID) {
-      dispatch(fetchPlaceAlbum(albumID));
-    }
-  }, [albumID, dispatch]);
+  const { data: album, isFetching } = useFetchPlaceAlbumQuery(albumID ?? "");
 
   return (
     <PhotoListView
-      title={groupedPhotos ? groupedPhotos.title : t("loading")}
-      loading={fetchingAlbumsPlace}
+      title={album?.title ?? t("loading")}
+      loading={isFetching}
       icon={<Map size={50} />}
-      photoset={groupedPhotos ? groupedPhotos.grouped_photos : []}
-      idx2hash={groupedPhotos ? groupedPhotos.grouped_photos.flatMap(el => el.items) : []}
+      photoset={album?.grouped_photos ?? []}
+      idx2hash={album?.grouped_photos.flatMap(el => el.items) ?? []}
       selectable
     />
   );
diff --git a/src/layouts/albums/Explorer.tsx b/src/layouts/albums/Explorer.tsx
index 94ac94d3..e77eb945 100644
--- a/src/layouts/albums/Explorer.tsx
+++ b/src/layouts/albums/Explorer.tsx
@@ -1,93 +1,96 @@
 import { Box, Button, Group, Stack, Title } from "@mantine/core";
-import React, { useEffect } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
-import { push } from "redux-first-history";
+import { Link, useNavigate } from "react-router-dom";
 import { Ballon } from "tabler-icons-react";
 
-import { fetchAutoAlbumsList, fetchUserAlbumsList } from "../../actions/albumsActions";
+import { useFetchPeopleAlbumsQuery } from "../../api_client/albums/people";
+import { useFetchPlacesAlbumsQuery } from "../../api_client/albums/places";
+import { useFetchThingsAlbumsQuery } from "../../api_client/albums/things";
 import { Tile } from "../../components/Tile";
-import { useAppDispatch, useAppSelector } from "../../store/store";
 import { HeaderComponent } from "./HeaderComponent";
 
-export function Explorer() {
-  const { albumsAutoList, fetchingAlbumsAutoList } = useAppSelector(store => store.albums);
-  const dispatch = useAppDispatch();
-  const { t } = useTranslation();
-  const entrySquareSize = 200;
+function showMoreButton(navigate: Function, link: string) {
+  return (
+    <Button variant="light" color="gray" onClick={() => navigate(link)}>
+      Show More
+    </Button>
+  );
+}
 
-  useEffect(() => {
-    dispatch(fetchAutoAlbumsList());
-    dispatch(fetchUserAlbumsList());
-  }, []);
+function albumTileLink(id: number, image_hash: string, isVideo: boolean, link: string) {
+  return (
+    <Link key={id} to={link}>
+      <Tile video={isVideo} height={190} width={190} image_hash={image_hash} />
+    </Link>
+  );
+}
 
-  function getAutoAlbums(albums) {
-    return albums.slice(0, 19).map(album => (
-      <Tile
-        onClick={() => {
-          dispatch(push(`/album/${album.id}`));
-        }}
-        key={album.id}
-        video={album.cover_photos[0].video === true}
-        height={entrySquareSize - 10}
-        width={entrySquareSize - 10}
-        image_hash={album.cover_photos[0].image_hash}
-      />
-    ));
-  }
+export function Explorer() {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { data: peopleAlbums, isFetching: isFetchingPeopleAlbums } = useFetchPeopleAlbumsQuery();
+  const { data: thingsAlbums, isFetching: isFetchingThingsAlbums } = useFetchThingsAlbumsQuery();
+  const { data: placesAlbums, isFetching: isFetchingPlacesAlbums } = useFetchPlacesAlbumsQuery();
 
   return (
     <Stack>
       <HeaderComponent
         icon={<Ballon size={50} />}
-        fetching={fetchingAlbumsAutoList}
+        fetching={isFetchingPeopleAlbums || isFetchingThingsAlbums || isFetchingPlacesAlbums}
         title="Explorer"
         subtitle="Explore your photos."
       />
-      <Title order={3}>{t("people")}</Title>
-      <Group>
-        {getAutoAlbums(albumsAutoList)}
-        <Box color="gray">
-          <Button
-            variant="light"
-            color="gray"
-            onClick={() => {
-              dispatch(push(`/album/`));
-            }}
-          >
-            Show More
-          </Button>
-        </Box>
-      </Group>
-      <Title order={3}>{t("things")}</Title>
-      <Group>
-        {getAutoAlbums(albumsAutoList)}
-        <Box color="gray">
-          <Button
-            variant="light"
-            color="gray"
-            onClick={() => {
-              dispatch(push(`/album/`));
-            }}
-          >
-            Show More
-          </Button>
-        </Box>
-      </Group>
-      <Title order={3}>{t("places")}</Title>
-      <Group>
-        {getAutoAlbums(albumsAutoList)}
-        <Box color="gray">
-          <Button
-            variant="light"
-            color="gray"
-            onClick={() => {
-              dispatch(push(`/album/`));
-            }}
-          >
-            Show More
-          </Button>
-        </Box>
-      </Group>
+
+      {!isFetchingPeopleAlbums && (
+        <>
+          <Title order={3}>{t("people")}</Title>
+          <Group>
+            {peopleAlbums
+              ?.slice(0, 19)
+              .map(album => albumTileLink(+album.key, album.face_photo_url, !!album.video, `/person/${album.key}/`))}
+            <Box color="gray">{showMoreButton(navigate, "/people/")}</Box>
+          </Group>
+        </>
+      )}
+
+      {!isFetchingThingsAlbums && (
+        <>
+          <Title order={3}>{t("things")}</Title>
+          <Group>
+            {thingsAlbums
+              ?.slice(0, 19)
+              .map(album =>
+                albumTileLink(
+                  album.id,
+                  album.cover_photos[0].image_hash,
+                  !!album.cover_photos[0].video,
+                  `/thing/${album.id}/`
+                )
+              )}
+            <Box color="gray">{showMoreButton(navigate, "/things/")}</Box>
+          </Group>
+        </>
+      )}
+
+      {!isFetchingPlacesAlbums && (
+        <>
+          <Title order={3}>{t("places")}</Title>
+          <Group>
+            {placesAlbums
+              ?.slice(0, 19)
+              .map(album =>
+                albumTileLink(
+                  album.id,
+                  album.cover_photos[0].image_hash,
+                  !!album.cover_photos[0].video,
+                  `/place/${album.id}/`
+                )
+              )}
+            <Box color="gray">{showMoreButton(navigate, "/places/")}</Box>
+          </Group>
+        </>
+      )}
     </Stack>
   );
 }
diff --git a/src/layouts/settings/AdminPage.tsx b/src/layouts/settings/AdminPage.tsx
index b5f2aa6a..8ff05593 100644
--- a/src/layouts/settings/AdminPage.tsx
+++ b/src/layouts/settings/AdminPage.tsx
@@ -5,34 +5,30 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Adjustments, Edit, Plus, Trash } from "tabler-icons-react";
 
-import { deleteAllAutoAlbum } from "../../actions/albumsActions";
+import { useDeleteAllAutoAlbumsMutation } from "../../api_client/albums/auto";
 import { useFetchServerStatsQuery, useFetchUserListQuery } from "../../api_client/api";
 import { JobList } from "../../components/job/JobList";
 import { ModalUserDelete } from "../../components/modals/ModalUserDelete";
 import { ModalUserEdit } from "../../components/modals/ModalUserEdit";
 import { i18nResolvedLanguage } from "../../i18n";
-import { useAppDispatch, useAppSelector } from "../../store/store";
+import { useAppSelector } from "../../store/store";
 import { SiteSettings } from "./SiteSettings";
 
 function UserTable() {
+  const { t } = useTranslation();
   const [userModalOpen, setUserModalOpen] = useState(false);
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
   const [userToEdit, setUserToEdit] = useState({});
   const [userToDelete, setUserToDelete] = useState({});
   const [createNewUser, setCreateNewUser] = useState(false);
-
-  const { data: userList } = useFetchUserListQuery();
-
-  const fetchingUserList = useAppSelector(state => state.util.fetchingUserList);
-
+  const { data: userList, isFetching } = useFetchUserListQuery();
   const matches = useMediaQuery("(min-width: 700px)");
-  const { t } = useTranslation();
 
   return (
     <Card shadow="md">
       <Title order={4} mb={16}>
         {t("adminarea.users")}
-        {fetchingUserList ? <Loader size="xs" /> : null}
+        {isFetching ? <Loader size="xs" /> : null}
       </Title>
       <Table striped highlightOnHover>
         <thead>
@@ -50,49 +46,45 @@ function UserTable() {
           </tr>
         </thead>
         <tbody>
-          {userList && userList.results
-            ? userList.results.map(user => (
-                <tr key={user.username}>
-                  <td>
-                    <span style={{ display: "flex" }}>
-                      <ActionIcon
-                        variant="transparent"
-                        color="blue"
-                        title={t("modify")}
-                        onClick={() => {
-                          setUserToEdit(user);
-                          setCreateNewUser(false);
-                          setUserModalOpen(true);
-                        }}
-                      >
-                        <Edit />
-                      </ActionIcon>
-
-                      <ActionIcon
-                        style={{ marginLeft: "5px" }}
-                        variant="transparent"
-                        color="red"
-                        disabled={user.is_superuser}
-                        title={user.is_superuser ? t("adminarea.cannotdeleteadmin") : t("delete")}
-                        onClick={() => {
-                          setUserToDelete(user);
-                          setDeleteModalOpen(true);
-                        }}
-                      >
-                        <Trash />
-                      </ActionIcon>
-                    </span>
-                  </td>
-                  <td>{user.username}</td>
-                  <td>{user.scan_directory ? user.scan_directory : t("adminarea.notset")}</td>
-                  {matches && <td>{user.confidence ? user.confidence : t("adminarea.notset")}</td>}
-                  {matches && <td>{user.photo_count}</td>}
-                  {matches && (
-                    <td>{DateTime.fromISO(user.date_joined).setLocale(i18nResolvedLanguage).toRelative()}</td>
-                  )}
-                </tr>
-              ))
-            : null}
+          {userList?.map(user => (
+            <tr key={user.username}>
+              <td>
+                <span style={{ display: "flex" }}>
+                  <ActionIcon
+                    variant="transparent"
+                    color="blue"
+                    title={t("modify")}
+                    onClick={() => {
+                      setUserToEdit(user);
+                      setCreateNewUser(false);
+                      setUserModalOpen(true);
+                    }}
+                  >
+                    <Edit />
+                  </ActionIcon>
+
+                  <ActionIcon
+                    style={{ marginLeft: "5px" }}
+                    variant="transparent"
+                    color="red"
+                    disabled={user.is_superuser}
+                    title={user.is_superuser ? t("adminarea.cannotdeleteadmin") : t("delete")}
+                    onClick={() => {
+                      setUserToDelete(user);
+                      setDeleteModalOpen(true);
+                    }}
+                  >
+                    <Trash />
+                  </ActionIcon>
+                </span>
+              </td>
+              <td>{user.username}</td>
+              <td>{user.scan_directory ? user.scan_directory : t("adminarea.notset")}</td>
+              {matches && <td>{user.confidence ? user.confidence : t("adminarea.notset")}</td>}
+              {matches && <td>{user.photo_count}</td>}
+              {matches && <td>{DateTime.fromISO(user.date_joined).setLocale(i18nResolvedLanguage).toRelative()}</td>}
+            </tr>
+          ))}
         </tbody>
       </Table>
       <Flex justify="flex-end" mt={10}>
@@ -131,10 +123,10 @@ function UserTable() {
   );
 }
 
-export function AdminPage() {
-  const dispatch = useAppDispatch();
-  const auth = useAppSelector(state => state.auth);
+function AdminTools() {
+  const { t } = useTranslation();
   const { data: serverStats, isLoading } = useFetchServerStatsQuery();
+  const [deleteAllAutoAlbums] = useDeleteAllAutoAlbumsMutation();
 
   const downloadFile = () => {
     // create file in browser
@@ -154,6 +146,32 @@ export function AdminPage() {
     document.body.removeChild(link);
     URL.revokeObjectURL(href);
   };
+
+  return (
+    <Card shadow="md">
+      <Stack>
+        <Title order={4} mb={16}>
+          {t("adminarea.admintools")}
+        </Title>
+        <Flex justify="space-between">
+          <>{t("adminarea.deleteallautoalbums")}</>
+          <Button onClick={() => deleteAllAutoAlbums()} variant="outline">
+            {t("adminarea.delete")}
+          </Button>
+        </Flex>
+        <Flex justify="space-between">
+          <div>{t("adminarea.downloadserverstats")}</div>
+          <Button loading={isLoading} onClick={() => downloadFile()}>
+            {t("adminarea.download")}
+          </Button>
+        </Flex>
+      </Stack>
+    </Card>
+  );
+}
+
+export function AdminPage() {
+  const auth = useAppSelector(state => state.auth);
   const { t } = useTranslation();
 
   if (!auth.access.is_admin) {
@@ -172,25 +190,7 @@ export function AdminPage() {
 
         <SiteSettings />
 
-        <Card shadow="md">
-          <Stack>
-            <Title order={4} mb={16}>
-              {t("adminarea.admintools")}
-            </Title>
-            <Flex justify="space-between">
-              <>{t("adminarea.deleteallautoalbums")}</>
-              <Button onClick={() => dispatch(deleteAllAutoAlbum())} variant="outline">
-                {t("adminarea.delete")}
-              </Button>
-            </Flex>
-            <Flex justify="space-between">
-              <div>{t("adminarea.downloadserverstats")}</div>
-              <Button loading={isLoading} onClick={() => downloadFile()}>
-                {t("adminarea.download")}
-              </Button>
-            </Flex>
-          </Stack>
-        </Card>
+        <AdminTools />
 
         <UserTable />
 
diff --git a/src/layouts/settings/Library.tsx b/src/layouts/settings/Library.tsx
index 00ccbb49..c0fbe61d 100644
--- a/src/layouts/settings/Library.tsx
+++ b/src/layouts/settings/Library.tsx
@@ -40,13 +40,8 @@ import {
 } from "tabler-icons-react";
 
 import { scanAllPhotos, scanNextcloudPhotos, scanPhotos } from "../../actions/photosActions";
-import {
-  deleteMissingPhotos,
-  fetchCountStats,
-  generateEventAlbumTitles,
-  generateEventAlbums,
-  updateUser,
-} from "../../actions/utilActions";
+import { deleteMissingPhotos, fetchCountStats, generateEventAlbumTitles, updateUser } from "../../actions/utilActions";
+import { useGenerateAutoAlbumsMutation } from "../../api_client/albums/auto";
 import { api, useWorkerQuery } from "../../api_client/api";
 import { serverAddress } from "../../api_client/apiClient";
 import { useLazyFetchNextcloudDirsQuery } from "../../api_client/nextcloud";
@@ -105,6 +100,7 @@ export function Library() {
   ] = useLazyFetchNextcloudDirsQuery();
   const [nextcloudStatusColor, setNextcloudStatusColor] = useState("gray");
   const { classes } = useStyles();
+  const [generateAutoAlbums] = useGenerateAutoAlbumsMutation();
 
   const onPhotoScanButtonClick = () => {
     dispatch(scanPhotos());
@@ -115,7 +111,12 @@ export function Library() {
   };
 
   const onGenerateEventAlbumsButtonClick = () => {
-    dispatch(generateEventAlbums());
+    dispatch({ type: "SET_WORKER_AVAILABILITY", payload: false });
+    dispatch({
+      type: "SET_WORKER_RUNNING_JOB",
+      payload: { job_type_str: "Generate Event Albums" },
+    });
+    generateAutoAlbums();
   };
 
   const onDeleteMissingPhotosButtonClick = () => {
@@ -234,7 +235,7 @@ export function Library() {
                       ? `${t("settings.statusscanphotostrue")}(${statusPhotoScan.added}/${statusPhotoScan.to_add})`
                       : t("settings.statusscanphotosfalse")}
                   </Button>
-                  <Menu transition="pop" position="bottom-end" withinPortal>
+                  <Menu transitionProps={{ transition: "pop" }} position="bottom-end" withinPortal>
                     <Menu.Target>
                       <ActionIcon variant="filled" color="blue" size={36} className={classes.menuControl}>
                         <ChevronDown size="1rem" />
diff --git a/src/util/util.ts b/src/util/util.ts
index bdb53e8d..af2ebb64 100644
--- a/src/util/util.ts
+++ b/src/util/util.ts
@@ -105,9 +105,8 @@ export function mergeDirTree(tree: DirTree[], branch: DirTree): DirTree[] {
 }
 
 export type PartialPhotoWithLocation = {
-  id: string;
-  exif_gps_lat: number;
-  exif_gps_lon: number;
+  exif_gps_lat: number | null;
+  exif_gps_lon: number | null;
   [key: string]: any;
 };