From ed2a9abd9cc612766d0459d599906a1f0dd7de60 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Mon, 8 Nov 2021 10:18:36 -0800
Subject: [PATCH] Create/Edit pack UX: Pack save redirects to manage packs
 page, fix flash message (#2767)

---
 changes/issue-2749-save-pack-redirect         |  1 +
 .../pages/packs/EditPackPage/EditPackPage.tsx | 19 ++++++++++---------
 .../PackComposerPage/PackComposerPage.jsx     | 19 +++++++------------
 3 files changed, 18 insertions(+), 21 deletions(-)
 create mode 100644 changes/issue-2749-save-pack-redirect

diff --git a/changes/issue-2749-save-pack-redirect b/changes/issue-2749-save-pack-redirect
new file mode 100644
index 0000000000..2a93713413
--- /dev/null
+++ b/changes/issue-2749-save-pack-redirect
@@ -0,0 +1 @@
+* Saving a pack redirects to the Manage Packs Page, fix flash render after creating pack
\ No newline at end of file
diff --git a/frontend/pages/packs/EditPackPage/EditPackPage.tsx b/frontend/pages/packs/EditPackPage/EditPackPage.tsx
index 4052e4d8e2..5a71a83a84 100644
--- a/frontend/pages/packs/EditPackPage/EditPackPage.tsx
+++ b/frontend/pages/packs/EditPackPage/EditPackPage.tsx
@@ -36,6 +36,7 @@ import PackQueryEditorModal from "./components/PackQueryEditorModal";
 import RemovePackQueryModal from "./components/RemovePackQueryModal";
 
 interface IEditPacksPageProps {
+  router: any;
   params: Params;
 }
 
@@ -71,6 +72,7 @@ interface IFormData {
 const baseClass = "edit-pack-page";
 
 const EditPacksPage = ({
+  router,
   params: { id: paramsPackId },
 }: IEditPacksPageProps): JSX.Element => {
   const { isPremiumTier } = useContext(AppContext);
@@ -102,13 +104,13 @@ const EditPacksPage = ({
     }
   );
 
-  const { data: storedPack, refetch: refetchStoredPack } = useQuery<
-    IStoredPackResponse,
-    Error,
-    IPack
-  >(["stored pack"], () => packsAPI.load(packId), {
-    select: (data: IStoredPackResponse) => data.pack,
-  });
+  const { data: storedPack } = useQuery<IStoredPackResponse, Error, IPack>(
+    ["stored pack"],
+    () => packsAPI.load(packId),
+    {
+      select: (data: IStoredPackResponse) => data.pack,
+    }
+  );
 
   const {
     data: storedPackQueries,
@@ -226,8 +228,7 @@ const EditPacksPage = ({
     packsAPI
       .update(packId, updatedPack)
       .then(() => {
-        refetchStoredPack();
-        window.scrollTo(0, 0);
+        router.push(PATHS.MANAGE_PACKS);
         dispatch(renderFlash("success", `Successfully updated this pack.`));
       })
       .catch((response) => {
diff --git a/frontend/pages/packs/PackComposerPage/PackComposerPage.jsx b/frontend/pages/packs/PackComposerPage/PackComposerPage.jsx
index e28036a77d..f867f7bafb 100644
--- a/frontend/pages/packs/PackComposerPage/PackComposerPage.jsx
+++ b/frontend/pages/packs/PackComposerPage/PackComposerPage.jsx
@@ -41,25 +41,20 @@ export class PackComposerPage extends Component {
     return false;
   };
 
-  visitPackPage = (packID) => {
-    const { dispatch } = this.props;
-
-    dispatch(push(PATHS.PACK(packID)));
-
-    return false;
-  };
-
   handleSubmit = (formData) => {
     const { create } = packActions;
     const { dispatch } = this.props;
-    const { visitPackPage } = this;
 
     return dispatch(create(formData))
       .then((pack) => {
         const { id: packID } = pack;
-
-        dispatch(renderFlash("success", `Pack successfully created.`));
-        visitPackPage(packID);
+        dispatch(push(PATHS.PACK(packID)));
+        dispatch(
+          renderFlash(
+            "success",
+            "Pack successfully created. Add queries to your pack."
+          )
+        );
       })
       .catch((response) => {
         if (response.base.slice(0, 27) === "Error 1062: Duplicate entry") {