Skip to content

Commit

Permalink
more user album rtk
Browse files Browse the repository at this point in the history
  • Loading branch information
@sickelap
sickelap committed Nov 6, 2023
1 parent e4e2f0c commit d31bd45
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 114 deletions.
83 changes: 0 additions & 83 deletions src/actions/albumsActions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import {
FetchUserAlbumsListResponseSchema,
FetchUserAlbumsSharedResponseSchema,
PlaceAlbumSchema,
UserAlbumEditResponseSchema,
UserAlbumInfoSchema,
UserAlbumSchema,
} from "./albumActions.types";
Expand Down Expand Up @@ -67,88 +66,6 @@ export function fetchUserAlbum(album_id: number) {
};
}

export function removeFromUserAlbum(album_id: number, title: string, image_hashes: string[]) {
return function cb(dispatch: Dispatch<any>) {
dispatch({ type: "REMOVE_USER_ALBUMS_LIST" });
Server.patch(`albums/user/edit/${album_id}/`, {
removedPhotos: image_hashes,
})
.then(response => {
const data = UserAlbumEditResponseSchema.parse(response.data);
dispatch({
type: "REMOVE_USER_ALBUMS_LIST_FULFILLED",
payload: data,
});
showNotification({
message: i18n.t("toasts.removefromalbum", {
numberOfPhotos: image_hashes.length,
title,
}),
title: i18n.t("toasts.removefromalbumtitle"),
color: "teal",
});

dispatch(fetchUserAlbumsList());
dispatch(fetchUserAlbum(album_id));
})
.catch(err => {
dispatch({ type: "REMOVE_USER_ALBUMS_LIST_REJECTED", payload: err });
});
};
}

export function setAlbumCoverForUserAlbum(album_id, photo_hash) {
return function cb(dispatch) {
dispatch({ type: "SET_ALBUM_COVER_FOR_USER_ALBUM" });
Server.patch(`albums/user/edit/${album_id}/`, {
cover_photo: photo_hash,
})
.then(() => {
// To-Do: I should do something with the response
dispatch({ type: "SET_ALBUM_COVER_FOR_USER_ALBUM_FULFILLED" });
showNotification({
message: i18n.t("toasts.setcoverphoto"),
title: i18n.t("toasts.setcoverphototitle"),
color: "teal",
});
dispatch(fetchUserAlbumsList());
})
.catch(err => {
dispatch({ type: "SET_ALBUM_COVER_FOR_PERSON_REJECTED", payload: err });
});
};
}

export function addToUserAlbum(album_id: number, title: string, image_hashes: string[]) {
return function cb(dispatch: Dispatch<any>) {
dispatch({ type: "EDIT_USER_ALBUMS_LIST" });
Server.patch(`albums/user/edit/${album_id}/`, {
title,
photos: image_hashes,
})
.then(response => {
const data = UserAlbumEditResponseSchema.parse(response.data);
dispatch({
type: "EDIT_USER_ALBUMS_LIST_FULFILLED",
payload: data,
});
showNotification({
message: i18n.t("toasts.addtoalbum", {
numberOfPhotos: image_hashes.length,
title,
}),
title: i18n.t("toasts.addtoalbumtitle"),
color: "teal",
});

dispatch(fetchUserAlbumsList());
})
.catch(err => {
dispatch({ type: "EDIT_USER_ALBUMS_LIST_REJECTED", payload: err });
});
};
}

const PlaceAlbumResponseSchema = z.object({ results: PlaceAlbumSchema });

export function fetchPlaceAlbum(album_id: string) {
Expand Down
108 changes: 101 additions & 7 deletions src/api_client/albums/user.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,39 @@ enum Endpoints {
shareUserAlbum = "shareUserAlbum",
}

type DeleteUserAlbumParams = {
id: string;
albumTitle: string;
};

type RenameUserAlbumParams = {
id: string;
title: string;
newTitle: string;
};

type CreateUserAlbumParams = {
title: string;
photos: string[];
};

type RemovePhotoFromUserAlbumParams = {
id: string;
title: string;
photos: string[];
};

type AddPhotoFromUserAlbumParams = {
id: string;
title: string;
photos: string[];
};

type SetUserAlbumCoverParams = {
id: string;
photo: string;
};

export const userAlbumsApi = api
.injectEndpoints({
endpoints: builder => ({
Expand All @@ -60,7 +93,7 @@ export const userAlbumsApi = api
query: id => `albums/user/${id}/`,
transformResponse: response => UserAlbumSchema.parse(response),
}),
[Endpoints.deleteUserAlbum]: builder.mutation<void, { id: string; albumTitle: string }>({
[Endpoints.deleteUserAlbum]: builder.mutation<void, DeleteUserAlbumParams>({
query: ({ id }) => ({
url: `albums/user/${id}/`,
method: "DELETE",
Expand All @@ -74,11 +107,11 @@ export const userAlbumsApi = api
});
},
}),
[Endpoints.renameUserAlbum]: builder.mutation<void, { id: string; title: string; newTitle: string }>({
query: ({ id, title }) => ({
[Endpoints.renameUserAlbum]: builder.mutation<void, RenameUserAlbumParams>({
query: ({ id, newTitle }) => ({
url: `albums/user/${id}/`,
method: "PATCH",
body: { title },
body: { title: newTitle },
}),
transformResponse: (response, meta, query) => {
showNotification({
Expand All @@ -91,7 +124,7 @@ export const userAlbumsApi = api
});
},
}),
[Endpoints.createUserAlbum]: builder.mutation<void, { title: string; photos: string[] }>({
[Endpoints.createUserAlbum]: builder.mutation<void, CreateUserAlbumParams>({
query: ({ title, photos }) => ({
url: `albums/user/edit/`,
method: "POST",
Expand All @@ -108,6 +141,54 @@ export const userAlbumsApi = api
});
},
}),
[Endpoints.removePhotoFromUserAlbum]: builder.mutation<void, RemovePhotoFromUserAlbumParams>({
query: ({ id, photos }) => ({
url: `albums/user/edit/${id}/`,
method: "PATCH",
body: { removedPhotos: photos },
}),
transformResponse: (response, meta, query) => {
showNotification({
message: i18n.t("toasts.removefromalbum", {
title: query.title,
numberOfPhotos: query.photos.length,
}),
title: i18n.t("toasts.removefromalbumtitle"),
color: "teal",
});
},
}),
[Endpoints.setUserAlbumCover]: builder.mutation<void, SetUserAlbumCoverParams>({
query: ({ id, photo }) => ({
url: `albums/user/edit/${id}/`,
method: "PATCH",
body: { cover_photo: photo },
}),
transformResponse: () => {
showNotification({
message: i18n.t("toasts.setcoverphoto"),
title: i18n.t("toasts.setcoverphototitle"),
color: "teal",
});
},
}),
[Endpoints.addPhotoToUserAlbum]: builder.mutation<void, AddPhotoFromUserAlbumParams>({
query: ({ id, title, photos }) => ({
url: `albums/user/edit/${id}/`,
method: "PATCH",
body: { title, photos },
}),
transformResponse: (response, meta, query) => {
showNotification({
message: i18n.t("toasts.addtoalbum", {
title: query.title,
numberOfPhotos: query.photos.length,
}),
title: i18n.t("toasts.addtoalbumtitle"),
color: "teal",
});
},
}),
}),
})
.enhanceEndpoints<"UserAlbums" | "UserAlbum">({
Expand All @@ -122,18 +203,31 @@ export const userAlbumsApi = api
[Endpoints.deleteUserAlbum]: {
invalidatesTags: ["UserAlbums"],
},
[Endpoints.renameUserAlbum]: {
invalidatesTags: ["UserAlbums", "UserAlbum"],
},
[Endpoints.createUserAlbum]: {
invalidatesTags: ["UserAlbums"],
},
// To-Do: Add invalidatesTags for when adding photos to an album / create album
[Endpoints.removePhotoFromUserAlbum]: {
invalidatesTags: ["UserAlbums", "UserAlbum"],
},
[Endpoints.setUserAlbumCover]: {
invalidatesTags: ["UserAlbums"],
},
[Endpoints.addPhotoToUserAlbum]: {
invalidatesTags: ["UserAlbums", "UserAlbum"],
},
},
});

export const {
useFetchUserAlbumsQuery,
useLazyFetchUserAlbumsQuery,
useLazyFetchUserAlbumQuery,
useDeleteUserAlbumMutation,
useRenameUserAlbumMutation,
useCreateUserAlbumMutation,
useRemovePhotoFromUserAlbumMutation,
useSetUserAlbumCoverMutation,
useAddPhotoToUserAlbumMutation,
} = userAlbumsApi;
22 changes: 11 additions & 11 deletions src/components/album/ModalAlbumEdit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@ import { DateTime } from "luxon";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";

import { addToUserAlbum } from "../../actions/albumsActions";
import { useCreateUserAlbumMutation, useFetchUserAlbumsQuery } from "../../api_client/albums/user";
import {
useAddPhotoToUserAlbumMutation,
useCreateUserAlbumMutation,
useFetchUserAlbumsQuery,
} from "../../api_client/albums/user";
import { i18nResolvedLanguage } from "../../i18n";
import { useAppDispatch } from "../../store/store";
import { fuzzyMatch } from "../../util/util";
import { Tile } from "../Tile";

Expand All @@ -20,11 +22,11 @@ type Props = {
export function ModalAlbumEdit(props: Props) {
const [newAlbumTitle, setNewAlbumTitle] = useState("");
const matches = useMediaQuery("(min-width: 700px)");
const dispatch = useAppDispatch();
const { isOpen, onRequestClose, selectedImages } = props;
const { t } = useTranslation();
const { data: albumsUserList = [] } = useFetchUserAlbumsQuery();
const [createUserAlbum] = useCreateUserAlbumMutation();
const [addPhotoToUserAlbum] = useAddPhotoToUserAlbumMutation();
const [filteredUserAlbumList, setFilteredUserAlbumList] = useState(albumsUserList);

useEffect(() => {
Expand Down Expand Up @@ -93,13 +95,11 @@ export function ModalAlbumEdit(props: Props) {
<UnstyledButton
key={`ub-${item.id}`}
onClick={() => {
dispatch(
addToUserAlbum(
item.id,
item.title,
selectedImages.map(i => i.id)
)
);
addPhotoToUserAlbum({
id: `${item.id}`,
title: item.title,
photos: selectedImages.map(i => i.id),
});
onRequestClose();
}}
>
Expand Down
8 changes: 6 additions & 2 deletions src/components/photolist/PhotoListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import _ from "lodash";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { useParams } from "react-router-dom";

import { setAlbumCoverForUserAlbum } from "../../actions/albumsActions";
import { setAlbumCoverForPerson } from "../../actions/peopleActions";
import { useSetUserAlbumCoverMutation } from "../../api_client/albums/user";
import { serverAddress } from "../../api_client/apiClient";
import { photoDetailsApi } from "../../api_client/photos/photoDetail";
import { useAppDispatch, useAppSelector } from "../../store/store";
Expand Down Expand Up @@ -64,6 +64,7 @@ function PhotoListViewComponent(props: Props) {
const [dataForScrollIndicator, setDataForScrollIndicator] = useState<IScrollerData[]>([]);
const gridHeight = useRef(200);
const setScrollLocked = useScrollLock(false)[1];
const [setUserAlbumCover] = useSetUserAlbumCoverMutation();

const route = useAppSelector(store => store.router);
const userSelfDetails = useAppSelector(store => store.user.userSelfDetails);
Expand Down Expand Up @@ -304,7 +305,10 @@ function PhotoListViewComponent(props: Props) {
dispatch(setAlbumCoverForPerson(params.albumID, selectionState.selectedItems[0].id));
}
if (actionType === "useralbum") {
dispatch(setAlbumCoverForUserAlbum(params.albumID, selectionState.selectedItems[0].id));
setUserAlbumCover({
id: `${params.albumID}`,
photo: selectionState.selectedItems[0].id,
});
}
}}
onSharePhotos={() => setModalSharePhotosOpen(true)}
Expand Down
20 changes: 9 additions & 11 deletions src/components/photolist/SelectionActions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,33 +18,34 @@ import {
Trash,
} from "tabler-icons-react";

import { removeFromUserAlbum } from "../../actions/albumsActions";
import {
downloadPhotos,
setPhotosDeleted,
setPhotosFavorite,
setPhotosHidden,
setPhotosPublic,
} from "../../actions/photosActions";
import { UserAlbum, useRemovePhotoFromUserAlbumMutation } from "../../api_client/albums/user";
import { serverAddress } from "../../api_client/apiClient";
import { useAppDispatch, useAppSelector } from "../../store/store";
import { copyToClipboard } from "../../util/util";

type Props = {
selectedItems: any[];
selectedItems: UserAlbum[];
updateSelectionState: (any) => void;
onSharePhotos: () => void;
setAlbumCover: (actionType: string) => void;
onShareAlbum: () => void;
onAddToAlbum: () => void;
title: string;
albumID: any;
albumID: number;
};

export function SelectionActions(props: Readonly<Props>) {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const route = useAppSelector(store => store.router);
const [removePhotosFromAlbum] = useRemovePhotoFromUserAlbumMutation();

const {
selectedItems,
Expand Down Expand Up @@ -311,14 +312,11 @@ export function SelectionActions(props: Readonly<Props>) {
icon={<FileMinus />}
disabled={!route.location.pathname.startsWith("/useralbum/") || selectedItems.length === 0}
onClick={() => {
dispatch(
removeFromUserAlbum(
albumID,
title,
selectedItems.map(i => i.id)
)
);

removePhotosFromAlbum({
id: albumID,
title,
photos: selectedItems.map(i => i.id),
});
updateSelectionState({
selectMode: false,
selectedItems: [],
Expand Down

0 comments on commit d31bd45

Please sign in to comment.