Create state/container for share modals

eslint.config.mjs

@@ -14,7 +14,7 @@ const eslintConfig = [
     rules: {
       '@next/next/no-img-element': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
-      'no-unused-expressions': 'warn',
+      'no-unused-expressions': ['warn'],
       '@typescript-eslint/no-unused-vars': [
         'warn', {
           'argsIgnorePattern': '^_',

src/app/layout.tsx

@@ -19,6 +19,7 @@ import Footer from '@/site/Footer';
 import CommandK from '@/site/CommandK';
 import SwrConfigClient from '../state/SwrConfigClient';
 import AdminBatchEditPanel from '@/admin/AdminBatchEditPanel';
+import ShareModals from '@/share/ShareModals';
 
 import '../site/globals.css';
 import '../site/sonner.css';
@@ -97,6 +98,7 @@ export default function RootLayout({
                   'min-h-[16rem] sm:min-h-[30rem]',
                   'mb-12',
                 )}>
+                  <ShareModals />
                   {children}
                 </div>
                 <Footer />

src/share/ShareModals.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import PhotoShareModal from '@/photo/PhotoShareModal';
+import TagShareModal from '@/tag/TagShareModal';
+import CameraShareModal from '@/camera/CameraShareModal';
+import FilmSimulationShareModal from '@/simulation/FilmSimulationShareModal';
+import FocalLengthShareModal from '@/focal/FocalLengthShareModal';
+import { useAppState } from '@/state/AppState';
+
+export default function ShareModals() {
+  const { shareModalProps = {} } = useAppState();
+  
+  const {
+    photo,
+    photos,
+    count,
+    dateRange,
+    tag,
+    camera,
+    simulation,
+    focal,
+  } = shareModalProps;
+
+  if (photo) {
+    return <PhotoShareModal {...{photo, tag, camera, simulation, focal}} />;
+  } else if (photos) {
+    const attributes = {photos, count, dateRange};
+    if (tag) {
+      return <TagShareModal {...{tag, ...attributes}} />;
+    } else if (camera) {
+      return <CameraShareModal {...{camera, ...attributes}} />;
+    } else if (simulation) {
+      return <FilmSimulationShareModal {...{simulation, ...attributes}} />;
+    } else if (focal !== undefined) {
+      return <FocalLengthShareModal {...{focal, ...attributes}} />;
+    }
+  }
+}

src/share/index.ts

@@ -0,0 +1,6 @@
+import { Photo, PhotoSetAttributes, PhotoSetCategory } from '@/photo';
+
+export type ShareModalProps = Omit<PhotoSetAttributes, 'photos'> & {
+  photo?: Photo
+  photos?: Photo[]
+} & PhotoSetCategory;

src/state/AppState.ts

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction, createContext, useContext } from 'react';
 import { AnimationConfig } from '@/components/AnimateItems';
+import { ShareModalProps } from '@/share';
 
 export interface AppStateContext {
   // GLOBAL
@@ -16,6 +17,8 @@ export interface AppStateContext {
   // MODAL
   isCommandKOpen?: boolean
   setIsCommandKOpen?: Dispatch<SetStateAction<boolean>>
+  shareModalProps?: ShareModalProps
+  setShareModalProps?: Dispatch<SetStateAction<ShareModalProps | undefined>>
   // ADMIN
   userEmail?: string
   setUserEmail?: Dispatch<SetStateAction<string | undefined>>