diff --git a/src/camera/CameraShareModal.tsx b/src/camera/CameraShareModal.tsx index e8edb9fe..8d640ab1 100644 --- a/src/camera/CameraShareModal.tsx +++ b/src/camera/CameraShareModal.tsx @@ -1,6 +1,6 @@ -import { absolutePathForCamera, pathForCamera } from '@/site/paths'; +import { absolutePathForCamera } from '@/site/paths'; import { PhotoSetAttributes } from '../photo'; -import ShareModal from '@/components/ShareModal'; +import ShareModal from '@/share/ShareModal'; import CameraOGTile from './CameraOGTile'; import { Camera } from '.'; import { shareTextForCamera } from './meta'; @@ -16,7 +16,6 @@ export default function CameraShareModal({ return ( diff --git a/src/components/ShareButton.tsx b/src/components/ShareButton.tsx deleted file mode 100644 index bb9d5d33..00000000 --- a/src/components/ShareButton.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { TbPhotoShare } from 'react-icons/tb'; -import PathLoaderButton from './primitives/PathLoaderButton'; -import { clsx } from 'clsx/lite'; - -export default function ShareButton({ - path, - prefetch, - shouldScroll, - dim, - className, -}: { - path: string - prefetch?: boolean - shouldScroll?: boolean - dim?: boolean - className?: string -}) { - return ( - } - spinnerColor="dim" - prefetch={prefetch} - shouldScroll={shouldScroll} - styleAs="link" - shouldReplace - /> - ); -} diff --git a/src/focal/FocalLengthShareModal.tsx b/src/focal/FocalLengthShareModal.tsx index 542f83f2..5e7ee3e1 100644 --- a/src/focal/FocalLengthShareModal.tsx +++ b/src/focal/FocalLengthShareModal.tsx @@ -1,6 +1,6 @@ -import { absolutePathForFocalLength, pathForFocalLength } from '@/site/paths'; +import { absolutePathForFocalLength } from '@/site/paths'; import { PhotoSetAttributes } from '../photo'; -import ShareModal from '@/components/ShareModal'; +import ShareModal from '@/share/ShareModal'; import FocalLengthOGTile from './FocalLengthOGTile'; import { shareTextFocalLength } from '.'; @@ -15,7 +15,6 @@ export default function FocalLengthShareModal({ return ( diff --git a/src/photo/PhotoHeader.tsx b/src/photo/PhotoHeader.tsx index 7b1fdbf0..5a3d81bd 100644 --- a/src/photo/PhotoHeader.tsx +++ b/src/photo/PhotoHeader.tsx @@ -8,7 +8,7 @@ import { dateRangeForPhotos, titleForPhoto, } from '.'; -import ShareButton from '@/components/ShareButton'; +import ShareButton from '@/share/ShareButton'; import AnimateItems from '@/components/AnimateItems'; import { ReactNode } from 'react'; import DivDebugBaselineGrid from '@/components/DivDebugBaselineGrid'; @@ -140,8 +140,15 @@ export default function PhotoHeader({ {entityDescription} {sharePath && } diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx index a0146d2f..668298f4 100644 --- a/src/photo/PhotoLarge.tsx +++ b/src/photo/PhotoLarge.tsx @@ -15,10 +15,9 @@ import Link from 'next/link'; import { pathForFocalLength, pathForPhoto, - pathForPhotoShare, } from '@/site/paths'; import PhotoTags from '@/tag/PhotoTags'; -import ShareButton from '@/components/ShareButton'; +import ShareButton from '@/share/ShareButton'; import DownloadButton from '@/components/DownloadButton'; import PhotoCamera from '../camera/PhotoCamera'; import { cameraFromPhoto } from '@/camera'; @@ -54,7 +53,6 @@ export default function PhotoLarge({ shouldShareCamera, shouldShareSimulation, shouldShareFocalLength, - shouldScrollOnShare, includeFavoriteInAdminMenu, onVisible, }: { @@ -258,17 +256,14 @@ export default function PhotoLarge({ )}> {shouldShare && } {ALLOW_PUBLIC_DOWNLOADS && diff --git a/src/share/ShareButton.tsx b/src/share/ShareButton.tsx new file mode 100644 index 00000000..cd48b160 --- /dev/null +++ b/src/share/ShareButton.tsx @@ -0,0 +1,46 @@ +'use client'; + +import { TbPhotoShare } from 'react-icons/tb'; +import { clsx } from 'clsx/lite'; +import LoaderButton from '@/components/primitives/LoaderButton'; +import { useAppState } from '@/state/AppState'; +import { getSharePathFromShareModalProps, ShareModalProps } from '.'; +import { useEffect } from 'react'; +import { useRouter } from 'next/navigation'; + +export default function ShareButton({ + dim, + prefetch, + className, + ...rest +}: { + dim?: boolean + prefetch?: boolean + className?: string +} & ShareModalProps) { + const { setShareModalProps } = useAppState(); + + const router = useRouter(); + + const absoluteImagePath = getSharePathFromShareModalProps({ ...rest }); + + useEffect(() => { + if (prefetch && absoluteImagePath) { + console.log('prefetching', absoluteImagePath); + router.prefetch(absoluteImagePath); + } + }, [prefetch, absoluteImagePath, router]); + + return ( + setShareModalProps?.({ ...rest })} + className={clsx( + className, + dim ? 'text-dim' : 'text-medium', + )} + icon={} + spinnerColor="dim" + styleAs="link" + /> + ); +} diff --git a/src/components/ShareModal.tsx b/src/share/ShareModal.tsx similarity index 93% rename from src/components/ShareModal.tsx rename to src/share/ShareModal.tsx index 193ed7eb..67ee3953 100644 --- a/src/components/ShareModal.tsx +++ b/src/share/ShareModal.tsx @@ -10,20 +10,21 @@ import { toastSuccess } from '@/toast'; import { PiXLogo } from 'react-icons/pi'; import { SHOW_SOCIAL } from '@/site/config'; import { generateXPostText } from '@/utility/social'; +import { useAppState } from '@/state/AppState'; export default function ShareModal({ title, pathShare, - pathClose, socialText, children, }: { title?: string pathShare: string - pathClose: string socialText: string children: ReactNode }) { + const { setShareModalProps } = useAppState(); + const renderIcon = ( icon: JSX.Element, action: () => void, @@ -44,7 +45,7 @@ export default function ShareModal({ ; return ( - + setShareModalProps?.(undefined)}>
{title &&
& { photo?: Photo photos?: Photo[] } & PhotoSetCategory; + +export const getSharePathFromShareModalProps = ({ + photo, + tag, + camera, + simulation, + focal, +}: ShareModalProps) => { + if (photo) { + return absolutePathForPhotoImage(photo); + } + if (tag) { + return absolutePathForTagImage(tag); + } + if (camera) { + return absolutePathForCamera(camera); + } + if (simulation) { + return absolutePathForFilmSimulation(simulation); + } + if (focal) { + return absolutePathForFocalLength(focal); + } +}; diff --git a/src/simulation/FilmSimulationShareModal.tsx b/src/simulation/FilmSimulationShareModal.tsx index 24a92270..a1c64012 100644 --- a/src/simulation/FilmSimulationShareModal.tsx +++ b/src/simulation/FilmSimulationShareModal.tsx @@ -1,9 +1,6 @@ -import { - absolutePathForFilmSimulation, - pathForFilmSimulation, -} from '@/site/paths'; +import { absolutePathForFilmSimulation } from '@/site/paths'; import { PhotoSetAttributes } from '../photo'; -import ShareModal from '@/components/ShareModal'; +import ShareModal from '@/share/ShareModal'; import FilmSimulationOGTile from './FilmSimulationOGTile'; import { FilmSimulation, shareTextForFilmSimulation } from '.'; @@ -18,7 +15,6 @@ export default function FilmSimulationShareModal({ return ( diff --git a/src/state/AppState.ts b/src/state/AppState.ts index 733df7a0..69975e9e 100644 --- a/src/state/AppState.ts +++ b/src/state/AppState.ts @@ -3,7 +3,7 @@ import { AnimationConfig } from '@/components/AnimateItems'; import { ShareModalProps } from '@/share'; export interface AppStateContext { - // GLOBAL + // CORE previousPathname?: string hasLoaded?: boolean setHasLoaded?: Dispatch> diff --git a/src/state/AppStateProvider.tsx b/src/state/AppStateProvider.tsx index 89d89059..262b4776 100644 --- a/src/state/AppStateProvider.tsx +++ b/src/state/AppStateProvider.tsx @@ -8,6 +8,7 @@ import { getAuthAction } from '@/auth/actions'; import useSWR from 'swr'; import { HIGH_DENSITY_GRID, MATTE_PHOTOS } from '@/site/config'; import { getPhotosHiddenMetaCachedAction } from '@/photo/actions'; +import { ShareModalProps } from '@/share'; export default function AppStateProvider({ children, @@ -25,8 +26,11 @@ export default function AppStateProvider({ useState(); const [shouldRespondToKeyboardCommands, setShouldRespondToKeyboardCommands] = useState(true); + // MODAL const [isCommandKOpen, setIsCommandKOpen] = useState(false); + const [shareModalProps, setShareModalProps] = + useState(); // ADMIN const [userEmail, setUserEmail] = useState(); @@ -89,8 +93,11 @@ export default function AppStateProvider({ clearNextPhotoAnimation: () => setNextPhotoAnimation?.(undefined), shouldRespondToKeyboardCommands, setShouldRespondToKeyboardCommands, + // MODAL isCommandKOpen, setIsCommandKOpen, + shareModalProps, + setShareModalProps, // ADMIN userEmail, setUserEmail, diff --git a/src/tag/TagShareModal.tsx b/src/tag/TagShareModal.tsx index 8bf78f46..5d7f9250 100644 --- a/src/tag/TagShareModal.tsx +++ b/src/tag/TagShareModal.tsx @@ -1,6 +1,6 @@ -import { absolutePathForTag, pathForTag } from '@/site/paths'; +import { absolutePathForTag } from '@/site/paths'; import { PhotoSetAttributes } from '../photo'; -import ShareModal from '@/components/ShareModal'; +import ShareModal from '@/share/ShareModal'; import TagOGTile from './TagOGTile'; import { shareTextForTag } from '.'; @@ -15,7 +15,6 @@ export default function TagShareModal({ return (