Refactor /photos to support react-router v6

app/actions/GalleryActions.ts

@@ -1,7 +1,10 @@
 import callAPI from 'app/actions/callAPI';
 import { gallerySchema } from 'app/reducers';
 import { Gallery } from './ActionTypes';
-import type { EntityID, GalleryEntity, Thunk } from 'app/types';
+import { FormValues as GalleryEditorFormValues } from 'app/routes/photos/components/GalleryEditor';
+import type { Thunk } from 'app/types';
+import type { ID } from 'app/store/models';
+import type { DetailedGallery } from 'app/store/models/Gallery';
 
 export function fetch({
   next,
@@ -26,8 +29,9 @@ export function fetch({
     );
   };
 }
-export function fetchGallery(galleryId: EntityID): Thunk<any> {
-  return callAPI({
+
+export function fetchGallery(galleryId: ID) {
+  return callAPI<DetailedGallery>({
     types: Gallery.FETCH,
     endpoint: `/galleries/${galleryId}/`,
     schema: gallerySchema,
@@ -37,7 +41,8 @@ export function fetchGallery(galleryId: EntityID): Thunk<any> {
     propagateError: false,
   });
 }
-export function fetchGalleryMetadata(galleryId: EntityID): Thunk<any> {
+
+export function fetchGalleryMetadata(galleryId: ID) {
   return callAPI({
     types: Gallery.FETCH,
     endpoint: `/galleries/${galleryId}/metadata/`,
@@ -46,8 +51,9 @@ export function fetchGalleryMetadata(galleryId: EntityID): Thunk<any> {
     propagateError: true,
   });
 }
-export function createGallery(gallery: GalleryEntity): Thunk<any> {
-  return callAPI({
+
+export function createGallery(gallery: GalleryEditorFormValues) {
+  return callAPI<DetailedGallery>({
     types: Gallery.CREATE,
     endpoint: '/galleries/',
     method: 'POST',
@@ -58,10 +64,11 @@ export function createGallery(gallery: GalleryEntity): Thunk<any> {
     },
   });
 }
-export function updateGallery(gallery: GalleryEntity): Thunk<any> {
-  return callAPI({
+
+export function updateGallery(galleryId: ID, gallery: GalleryEditorFormValues) {
+  return callAPI<DetailedGallery>({
     types: Gallery.EDIT,
-    endpoint: `/galleries/${gallery.id}/`,
+    endpoint: `/galleries/${galleryId}/`,
     method: 'PUT',
     schema: gallerySchema,
     body: gallery,
@@ -70,7 +77,8 @@ export function updateGallery(gallery: GalleryEntity): Thunk<any> {
     },
   });
 }
-export function updateGalleryCover(id: EntityID, cover: EntityID): Thunk<any> {
+
+export function updateGalleryCover(id: ID, cover: ID) {
   return callAPI({
     types: Gallery.EDIT,
     endpoint: `/galleries/${id}/`,
@@ -84,7 +92,8 @@ export function updateGalleryCover(id: EntityID, cover: EntityID): Thunk<any> {
     },
   });
 }
-export function deleteGallery(id: EntityID): Thunk<any> {
+
+export function deleteGallery(id: ID) {
   return callAPI({
     types: Gallery.DELETE,
     endpoint: `/galleries/${id}/`,

app/actions/GalleryPictureActions.ts

@@ -4,10 +4,13 @@ import { galleryPictureSchema } from 'app/reducers';
 import { GalleryPicture, Gallery } from './ActionTypes';
 import { uploadFile } from './FileActions';
 import type { GalleryPictureEntity } from 'app/reducers/galleryPictures';
-import type { EntityID, Thunk } from 'app/types';
+import type { AppDispatch } from 'app/store/createStore';
+import type { ID } from 'app/store/models';
+import type { GalleryListPicture } from 'app/store/models/GalleryPicture';
+import type { Thunk } from 'app/types';
 
 export function fetch(
-  galleryId: number,
+  galleryId: ID,
   {
     next,
     filters,
@@ -32,9 +35,10 @@ export function fetch(
     );
   };
 }
+
 export function fetchSiblingGallerPicture(
-  galleryId: EntityID,
-  currentPictureId: EntityID,
+  galleryId: ID,
+  currentPictureId: ID,
   next: boolean
 ) {
   const rawCursor = `p=${currentPictureId}&r=${next ? 0 : 1}`;
@@ -53,10 +57,8 @@ export function fetchSiblingGallerPicture(
     propagateError: true,
   });
 }
-export function fetchGalleryPicture(
-  galleryId: EntityID,
-  pictureId: EntityID
-): Thunk<any> {
+
+export function fetchGalleryPicture(galleryId: ID, pictureId: ID) {
   return callAPI({
     types: GalleryPicture.FETCH,
     endpoint: `/galleries/${galleryId}/pictures/${pictureId}/`,
@@ -67,6 +69,7 @@ export function fetchGalleryPicture(
     propagateError: true,
   });
 }
+
 export function updatePicture(
   galleryPicture: GalleryPictureEntity
 ): Thunk<any> {
@@ -83,10 +86,8 @@ export function updatePicture(
     },
   });
 }
-export function deletePicture(
-  galleryId: EntityID,
-  pictureId: EntityID
-): Thunk<any> {
+
+export function deletePicture(galleryId: ID, pictureId: ID) {
   return callAPI({
     types: GalleryPicture.DELETE,
     endpoint: `/galleries/${galleryId}/pictures/${pictureId}/`,
@@ -100,23 +101,25 @@ export function deletePicture(
     },
   });
 }
+
 export function CreateGalleryPicture(galleryPicture: {
-  galleryId: number;
+  galleryId: ID;
   file: string;
   active: boolean;
-}): Thunk<any> {
-  return callAPI({
+}) {
+  return callAPI<GalleryListPicture>({
     types: GalleryPicture.CREATE,
     endpoint: `/galleries/${galleryPicture.galleryId}/pictures/`,
     method: 'POST',
     schema: galleryPictureSchema,
     body: galleryPicture,
     meta: {
       galleryId: galleryPicture.galleryId,
-      errorMessage: 'Legg til bilde i galleriet feilet',
+      errorMessage: 'Opplasting av bilde i galleriet feilet',
     },
   });
 }
+
 const MAX_UPLOADS = 3;
 
 function uploadGalleryPicturesInTurn(files, galleryId, dispatch) {
@@ -144,7 +147,7 @@ function uploadGalleryPicturesInTurn(files, galleryId, dispatch) {
         error: true,
         meta: {
           fileName: file.name,
-          errorMessage: 'Opplasting av bilde feilet.',
+          errorMessage: 'Opplasting av bilde feilet',
         },
       });
     });
@@ -161,10 +164,10 @@ function uploadGalleryPicturesInTurn(files, galleryId, dispatch) {
 }
 
 export function uploadAndCreateGalleryPicture(
-  galleryId: number,
+  galleryId: ID,
   files: Array<Record<string, any>>
-): Thunk<any> {
-  return (dispatch) => {
+) {
+  return (dispatch: AppDispatch) => {
     dispatch({
       type: Gallery.UPLOAD.BEGIN,
       meta: {
@@ -174,8 +177,9 @@ export function uploadAndCreateGalleryPicture(
     return uploadGalleryPicturesInTurn(files, galleryId, dispatch);
   };
 }
-export function clear(galleryId: number): Thunk<any> {
-  return (dispatch) =>
+
+export function clear(galleryId: ID) {
+  return (dispatch: AppDispatch) =>
     dispatch({
       type: GalleryPicture.CLEAR,
       meta: {

app/components/CommentForm/index.tsx

@@ -6,17 +6,15 @@ import LegoFinalForm from 'app/components/Form/LegoFinalForm';
 import SubmissionError from 'app/components/Form/SubmissionError';
 import { SubmitButton } from 'app/components/Form/SubmitButton';
 import { ProfilePicture } from 'app/components/Image';
+import { useUserContext } from 'app/routes/app/AppRoute';
 import { useAppDispatch } from 'app/store/hooks';
 import { createValidator, legoEditorRequired } from 'app/utils/validation';
 import styles from './CommentForm.css';
 import type { ID } from 'app/store/models';
-import type { CurrentUser } from 'app/store/models/User';
 import type { ContentTarget } from 'app/store/utils/contentTarget';
 
 type Props = {
   contentTarget: ContentTarget;
-  user: CurrentUser;
-  loggedIn: boolean;
   submitText?: string;
   autoFocus?: boolean;
   parent?: ID;
@@ -29,15 +27,15 @@ const validate = createValidator({
 
 const CommentForm = ({
   contentTarget,
-  user,
-  loggedIn,
   submitText = 'Kommenter',
   autoFocus = false,
   parent,
   placeholder = 'Skriv en kommentar ...',
 }: Props) => {
   const dispatch = useAppDispatch();
 
+  const { currentUser, loggedIn } = useUserContext();
+
   if (!loggedIn) {
     return <div>Vennligst logg inn for å kommentere</div>;
   }
@@ -63,7 +61,7 @@ const CommentForm = ({
           return (
             <form onSubmit={handleSubmit}>
               <Flex alignItems="center" gap="1rem">
-                <ProfilePicture size={40} user={user} />
+                <ProfilePicture size={40} user={currentUser} />
 
                 <div className={styles.field}>
                   <Field

app/components/Comments/Comment.tsx

@@ -8,21 +8,18 @@ import { ProfilePicture } from 'app/components/Image';
 import { Tag } from 'app/components/Tags';
 import Time from 'app/components/Time';
 import Tooltip from 'app/components/Tooltip';
+import { useUserContext } from 'app/routes/app/AppRoute';
 import { useAppDispatch } from 'app/store/hooks';
 import styles from './Comment.css';
 import type CommentType from 'app/store/models/Comment';
 import type { ContentAuthors } from 'app/store/models/Comment';
-import type { CurrentUser } from 'app/store/models/User';
 import type { ContentTarget } from 'app/store/utils/contentTarget';
 
 type Props = {
   comment: CommentType;
   commentFormProps: {
-    contentTarget: string;
-    user: CurrentUser;
-    loggedIn: boolean;
+    contentTarget: ContentTarget;
   };
-  user: CurrentUser;
   contentTarget: ContentTarget;
   contentAuthors?: ContentAuthors;
 };
@@ -31,14 +28,15 @@ const Comment = ({
   comment,
   contentTarget,
   commentFormProps,
-  user,
   contentAuthors,
 }: Props) => {
   const [replyOpen, setReplyOpen] = useState(false);
   const { createdAt, text, author } = comment;
 
   const dispatch = useAppDispatch();
 
+  const { currentUser } = useUserContext();
+
   return (
     <>
       <div className={styles.comment}>
@@ -66,7 +64,7 @@ const Comment = ({
               </Flex>
             </Flex>
 
-            {user?.id === author.id && (
+            {currentUser?.id === author.id && (
               <Flex justifyContent="flex-end">
                 <Tooltip content="Slett kommentar">
                   <Icon
@@ -120,7 +118,7 @@ const Comment = ({
           submitText="Send svar"
           autoFocus
           parent={comment.id}
-          placeholder={`Svar ${author.fullName} ...`}
+          placeholder={`Svar ${author?.fullName} ...`}
         />
       )}
     </>

app/components/Comments/CommentTree.tsx

@@ -3,7 +3,6 @@ import Comment from './Comment';
 import styles from './CommentTree.css';
 import type CommentType from 'app/store/models/Comment';
 import type { ContentAuthors } from 'app/store/models/Comment';
-import type { CurrentUser } from 'app/store/models/User';
 import type { ContentTarget } from 'app/store/utils/contentTarget';
 import type { Tree } from 'app/utils';
 
@@ -12,11 +11,8 @@ type Props = {
   isChild?: boolean;
   commentFormProps: {
     contentTarget: ContentTarget;
-    user: CurrentUser;
-    loggedIn: boolean;
   };
   level?: number;
-  user: CurrentUser;
   contentTarget: ContentTarget;
   contentAuthors?: ContentAuthors;
 };
@@ -26,7 +22,6 @@ function CommentTree({
   isChild = false,
   commentFormProps,
   level = 0,
-  user,
   contentTarget,
   contentAuthors,
 }: Props) {
@@ -43,7 +38,6 @@ function CommentTree({
           <Comment
             comment={comment}
             commentFormProps={commentFormProps}
-            user={user}
             contentTarget={contentTarget}
             contentAuthors={contentAuthors}
           />
@@ -53,7 +47,6 @@ function CommentTree({
             isChild
             level={level + 1}
             commentFormProps={commentFormProps}
-            user={user}
             contentTarget={contentTarget}
             contentAuthors={contentAuthors}
           />
@@ -67,7 +60,6 @@ function CommentTree({
           key={comment.id}
           comment={comment}
           commentFormProps={commentFormProps}
-          user={user}
           contentTarget={contentTarget}
           contentAuthors={contentAuthors}
         />