playlists: fix small issues

rr- · Aug 7, 2023 · ad9b102 · ad9b102
1 parent 19afff4
commit ad9b102
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 23 deletions.
diff --git a/frontend/src/components/common/PlaylistItemForm/index.tsx b/frontend/src/components/common/PlaylistItemForm/index.tsx
@@ -5,6 +5,7 @@ import { Formik } from "formik";
 import { Form } from "formik";
 import { useCallback } from "react";
 import { useQuery } from "react-query";
+import { useNavigate } from "react-router-dom";
 import { FormGrid } from "src/components/common/FormGrid";
 import { FormGridButtons } from "src/components/common/FormGrid";
 import { FormGridFieldSet } from "src/components/common/FormGrid";
@@ -20,27 +21,32 @@ import { filterFalsyObjectValues } from "src/utils/misc";
 import { makeSentence } from "src/utils/string";
 import { validateRequired } from "src/utils/validation";
 
-interface UserFormProps {
+interface PlaylistItemFormProps {
   user: UserNested;
   level: LevelNested;
   onSubmit?: (() => void) | undefined;
+  onNavigateToMyPlaylist?: (() => void) | undefined;
 }
 
 interface PlaylistItemFormValues {
   levelName?: string;
   status?: PlaylistItemStatus;
 }
 
-const PlaylistItemForm = ({ user, level, onSubmit }: UserFormProps) => {
-  const playlistItemResult = useQuery<PlaylistItemDetails, Error>(
-    ["playlists", PlaylistService.get, user?.id, level.id],
-    async () => PlaylistService.get(user?.id, level.id)
-  );
-
-  const playlistItem = playlistItemResult?.data;
+interface PlaylistItemFormViewProps extends PlaylistItemFormProps {
+  playlistItem?: PlaylistItemDetails | null;
+}
 
+const PlaylistItemFormView = ({
+  user,
+  level,
+  playlistItem,
+  onSubmit,
+  onNavigateToMyPlaylist,
+}: PlaylistItemFormViewProps) => {
+  const navigate = useNavigate();
   const initialValues: PlaylistItemFormValues = {
-    levelName: level?.name,
+    levelName: level.name,
     status: playlistItem?.status,
   };
 
@@ -101,6 +107,14 @@ const PlaylistItemForm = ({ user, level, onSubmit }: UserFormProps) => {
     return errors;
   };
 
+  const handleNavigateToPlaylist = useCallback(() => {
+    if (onNavigateToMyPlaylist) {
+      onNavigateToMyPlaylist();
+    } else {
+      navigate(`/users/${user.id}/playlist`);
+    }
+  }, [user, navigate, onNavigateToMyPlaylist]);
+
   const handleSubmit = useCallback(
     async (
       values: PlaylistItemFormValues,
@@ -129,7 +143,7 @@ const PlaylistItemForm = ({ user, level, onSubmit }: UserFormProps) => {
               <span className="FormFieldSuccess">Playlist updated.</span>
               <br />
               <br />
-              <Link to={`/users/${user.id}/playlist`}>Click here</Link> to see
+              <Link onClick={handleNavigateToPlaylist}>Click here</Link> to see
               your playlist.
             </>
           ),
@@ -139,7 +153,14 @@ const PlaylistItemForm = ({ user, level, onSubmit }: UserFormProps) => {
         handleSubmitError(error, helpers);
       }
     },
-    [user, level, playlistItem, onSubmit, handleSubmitError]
+    [
+      user,
+      level,
+      playlistItem,
+      onSubmit,
+      handleSubmitError,
+      handleNavigateToPlaylist,
+    ]
   );
 
   const statusOptions = [
@@ -150,10 +171,6 @@ const PlaylistItemForm = ({ user, level, onSubmit }: UserFormProps) => {
     { label: "On hold", value: PlaylistItemStatus.OnHold },
   ];
 
-  if (playlistItemResult.isLoading) {
-    return <></>;
-  }
-
   return (
     <Formik
       initialValues={initialValues}
@@ -192,4 +209,32 @@ const PlaylistItemForm = ({ user, level, onSubmit }: UserFormProps) => {
   );
 };
 
+const PlaylistItemForm = ({
+  user,
+  level,
+  onSubmit,
+  onNavigateToMyPlaylist,
+}: PlaylistItemFormProps) => {
+  const playlistItemResult = useQuery<PlaylistItemDetails, Error>(
+    ["playlists", PlaylistService.get, user.id, level.id],
+    async () => PlaylistService.get(user.id, level.id)
+  );
+
+  if (playlistItemResult.isLoading) {
+    return <></>;
+  }
+
+  const playlistItem = playlistItemResult?.data;
+
+  return (
+    <PlaylistItemFormView
+      user={user}
+      level={level}
+      playlistItem={playlistItem}
+      onSubmit={onSubmit}
+      onNavigateToMyPlaylist={onNavigateToMyPlaylist}
+    />
+  );
+};
+
 export { PlaylistItemForm };
diff --git a/frontend/src/components/common/PlaylistTable/EditButton/index.tsx b/frontend/src/components/common/PlaylistTable/EditButton/index.tsx
@@ -31,10 +31,14 @@ const EditPlaylistItemButton = ({
     setIsModalActive(true);
   };
 
+  const handleNavigateToMyPlaylist = () => {
+    resetQueries(queryClient, ["playlists"], false);
+  };
+
   const handleIsModalActiveChange = (value: boolean) => {
     setIsModalActive(value);
     if (isChanged) {
-      resetQueries(queryClient, ["playlists"]);
+      resetQueries(queryClient, ["playlists"], false);
     }
   };
 
@@ -46,6 +50,7 @@ const EditPlaylistItemButton = ({
         user={user}
         level={level}
         onSubmit={handleSubmit}
+        onNavigateToMyPlaylist={handleNavigateToMyPlaylist}
       />
 
       <Link onClick={handleButtonClick}>Edit</Link>

diff --git a/frontend/src/components/common/UserSidebar/index.tsx b/frontend/src/components/common/UserSidebar/index.tsx
@@ -144,12 +144,6 @@ const UserSidebar = ({ user }: UserSidebarProps) => {
             <SectionHeader>Library</SectionHeader>
           </DefinitionItem>
 
-          <DefinitionItem term="Played levels">
-            <Link to={`/users/${user.id}/playlist`}>
-              {user.played_level_count}
-            </Link>
-          </DefinitionItem>
-
           <DefinitionItem term="Levels authored">
             <Link onClick={handleLevelCountClick}>
               {user.authored_level_count}
@@ -167,6 +161,12 @@ const UserSidebar = ({ user }: UserSidebarProps) => {
               {user.authored_walkthrough_count}
             </Link>
           </DefinitionItem>
+
+          <DefinitionItem term="Played levels">
+            <Link to={`/users/${user.id}/playlist`}>
+              {user.played_level_count}
+            </Link>
+          </DefinitionItem>
         </DefinitionItemGroup>
 
         {user.awards.length ? (

diff --git a/frontend/src/components/modals/PlaylistItemModal/index.tsx b/frontend/src/components/modals/PlaylistItemModal/index.tsx
@@ -9,6 +9,7 @@ interface PlaylistItemModalProps {
   user: UserNested;
   level: LevelNested;
   onSubmit?: (() => void) | undefined;
+  onNavigateToMyPlaylist?: (() => void) | undefined;
 }
 
 const PlaylistItemModal = ({
@@ -17,14 +18,22 @@ const PlaylistItemModal = ({
   user,
   level,
   onSubmit,
+  onNavigateToMyPlaylist,
 }: PlaylistItemModalProps) => {
   return (
     <BaseModal
       title="Playlist item details"
       isActive={isActive}
       onIsActiveChange={onIsActiveChange}
     >
-      <PlaylistItemForm user={user} level={level} onSubmit={onSubmit} />
+      {isActive && (
+        <PlaylistItemForm
+          user={user}
+          level={level}
+          onSubmit={onSubmit}
+          onNavigateToMyPlaylist={onNavigateToMyPlaylist}
+        />
+      )}
     </BaseModal>
   );
 };