strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove favorite action from hidden photos

Browse Source
This commit is contained in:
Sam Becker 2024-05-26 14:46:07 -05:00
parent 1ae7ea12c3
commit 64d6608a79
5 changed files with 74 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/admin/AdminPhotoMenuClient.tsx
View File

@ -1,6 +1,6 @@
'use client';
import { ComponentProps } from 'react';
import { ComponentProps, useMemo } from 'react';
import { pathForAdminPhotoEdit, pathForPhoto } from '@/site/paths';
import { deletePhotoAction, toggleFavoritePhotoAction } from '@/photo/actions';
import { FaRegEdit, FaRegStar, FaStar } from 'react-icons/fa';
@ -8,17 +8,19 @@ import { Photo, deleteConfirmationTextForPhoto } from '@/photo';
import { isPathFavs, isPhotoFav } from '@/tag';
import { usePathname } from 'next/navigation';
import { BiTrash } from 'react-icons/bi';
import MoreMenu from '@/components/more/MoreMenu';
import MoreMenu, { MoreMenuItem } from '@/components/more/MoreMenu';
import { useAppState } from '@/state/AppState';
import { RevalidatePhoto } from '@/photo/InfinitePhotoScroll';
export default function AdminPhotoMenuClient({
photo,
revalidatePhoto,
includeFavorite = true,
...props
}: Omit<ComponentProps<typeof MoreMenu>, 'items'> & {
photo: Photo
revalidatePhoto?: RevalidatePhoto
includeFavorite?: boolean
}) {
const { isUserSignedIn, registerAdminUpdate } = useAppState();
@ -27,49 +29,64 @@ export default function AdminPhotoMenuClient({
const shouldRedirectFav = isPathFavs(path) && isFav;
const shouldRedirectDelete = pathForPhoto({ photo: photo.id }) === path;
const items = useMemo(() => {
const items: MoreMenuItem[] = [{
label: 'Edit',
icon: <FaRegEdit size={14} />,
href: pathForAdminPhotoEdit(photo.id),
}];
if (includeFavorite) {
items.push({
label: isFav ? 'Unfavorite' : 'Favorite',
icon: isFav
? <FaStar
size={14}
className="text-amber-500 translate-x-[-1.5px]"
/>
: <FaRegStar
size={14}
className="translate-x-[-2px]"
/>,
action: () => toggleFavoritePhotoAction(
photo.id,
shouldRedirectFav,
).then(() => revalidatePhoto?.(photo.id)),
});
}
items.push({
label: 'Delete',
icon: <BiTrash
size={15}
className="translate-x-[-1.5px] "
/>,
action: () => {
if (confirm(deleteConfirmationTextForPhoto(photo))) {
return deletePhotoAction(
photo.id,
photo.url,
shouldRedirectDelete,
).then(() => {
revalidatePhoto?.(photo.id, true);
registerAdminUpdate?.();
});
}
},
});
return items;
}, [
photo,
includeFavorite,
isFav,
shouldRedirectFav,
revalidatePhoto,
shouldRedirectDelete,
registerAdminUpdate,
]);
return (
isUserSignedIn
? <MoreMenu {...{
items: [
{
label: 'Edit',
icon: <FaRegEdit size={14} />,
href: pathForAdminPhotoEdit(photo.id),
}, {
label: isFav ? 'Unfavorite' : 'Favorite',
icon: isFav
? <FaStar
size={14}
className="text-amber-500 translate-x-[-1.5px]"
/>
: <FaRegStar
size={14}
className="translate-x-[-2px]"
/>,
action: () => toggleFavoritePhotoAction(
photo.id,
shouldRedirectFav,
).then(() => revalidatePhoto?.(photo.id)),
}, {
label: 'Delete',
icon: <BiTrash
size={14}
className="translate-x-[-1.5px] "
/>,
action: () => {
if (confirm(deleteConfirmationTextForPhoto(photo))) {
return deletePhotoAction(
photo.id,
photo.url,
shouldRedirectDelete,
).then(() => {
revalidatePhoto?.(photo.id, true);
registerAdminUpdate?.();
});
}
},
},
],
items,
...props,
}}/>
: null

1
src/app/tag/hidden/[photoId]/page.tsx
View File

@ -71,6 +71,7 @@ export default async function PhotoTagHiddenPage({
dateRange,
tag: TAG_HIDDEN,
shouldShare: false,
includeFavoriteInAdminMenu: false,
}} />
);
}

14
src/components/more/MoreMenu.tsx
View File

@ -4,17 +4,19 @@ import { clsx } from 'clsx/lite';
import { FiMoreHorizontal } from 'react-icons/fi';
import MoreMenuItem from './MoreMenuItem';
export interface MoreMenuItem {
label: ReactNode
icon?: ReactNode
href?: string
action?: () => Promise<void> | void
}
export default function MoreMenu({
items,
className,
buttonClassName,
}: {
items: {
label: ReactNode
icon?: ReactNode
href?: string
action?: () => Promise<void> | void
}[]
items: MoreMenuItem[]
className?: string
buttonClassName?: string
}){

3
src/photo/PhotoDetailPage.tsx
View File

@ -26,6 +26,7 @@ export default function PhotoDetailPage({
count,
dateRange,
shouldShare,
includeFavoriteInAdminMenu,
}: {
photo: Photo
photos: Photo[]
@ -38,6 +39,7 @@ export default function PhotoDetailPage({
count?: number
dateRange?: PhotoDateRange
shouldShare?: boolean
includeFavoriteInAdminMenu?: boolean
}) {
return (
<div>
@ -117,6 +119,7 @@ export default function PhotoDetailPage({
shouldShareCamera={camera !== undefined}
shouldShareSimulation={simulation !== undefined}
shouldScrollOnShare={false}
includeFavoriteInAdminMenu={includeFavoriteInAdminMenu}
/>,
]}
/>

3
src/photo/PhotoLarge.tsx
View File

@ -47,6 +47,7 @@ export default function PhotoLarge({
shouldShareSimulation,
shouldShareFocalLength,
shouldScrollOnShare,
includeFavoriteInAdminMenu,
onVisible,
}: {
photo: Photo
@ -63,6 +64,7 @@ export default function PhotoLarge({
shouldShareSimulation?: boolean
shouldShareFocalLength?: boolean
shouldScrollOnShare?: boolean
includeFavoriteInAdminMenu?: boolean
onVisible?: () => void
}) {
const ref = useRef<HTMLDivElement>(null);
@ -130,6 +132,7 @@ export default function PhotoLarge({
<AdminPhotoMenuClient {...{
photo,
revalidatePhoto,
includeFavorite: includeFavoriteInAdminMenu,
}} />
</div>
</div>