fix: duplicate create new (#596)

packages/core/src/actions/entries.ts

@@ -1,5 +1,4 @@
 import isEqual from 'lodash/isEqual';
-import { redirect } from 'react-router-dom';
 
 import { currentBackend } from '../backend';
 import {
@@ -56,6 +55,7 @@ import { addAssets, getAsset } from './media';
 import { loadMedia, waitForMediaLibraryToLoad } from './mediaLibrary';
 import { waitUntil } from './waitUntil';
 
+import type { NavigateFunction } from 'react-router-dom';
 import type { AnyAction } from 'redux';
 import type { ThunkDispatch } from 'redux-thunk';
 import type { Backend } from '../backend';
@@ -951,7 +951,7 @@ export function getSerializedEntry(collection: Collection, entry: Entry): Entry
   return serializedEntry;
 }
 
-export function persistEntry(collection: Collection) {
+export function persistEntry(collection: Collection, navigate: NavigateFunction) {
   return async (dispatch: ThunkDispatch<RootState, {}, AnyAction>, getState: () => RootState) => {
     const state = getState();
     const entryDraft = state.entryDraft;
@@ -1040,7 +1040,7 @@ export function persistEntry(collection: Collection) {
         }
         if (entry.slug !== newSlug) {
           await dispatch(loadEntry(collection, newSlug));
-          redirect(`/collections/${collection.name}/entries/${newSlug}`);
+          navigate(`/collections/${collection.name}/entries/${newSlug}`);
         } else {
           await dispatch(loadEntry(collection, newSlug, true));
         }

packages/core/src/components/App/App.tsx

@@ -4,14 +4,23 @@ import { styled } from '@mui/material/styles';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { translate } from 'react-polyglot';
 import { connect } from 'react-redux';
-import { Navigate, Route, Routes, useLocation, useNavigate, useParams } from 'react-router-dom';
+import {
+  Navigate,
+  Route,
+  Routes,
+  useLocation,
+  useNavigate,
+  useParams,
+  useSearchParams,
+} from 'react-router-dom';
 import { ScrollSync } from 'react-scroll-sync';
 import TopBarProgress from 'react-topbar-progress-indicator';
 
 import { loginUser as loginUserAction } from '@staticcms/core/actions/auth';
-import { discardDraft as discardDraftAction } from '@staticcms/core/actions/entries';
+import { discardDraft } from '@staticcms/core/actions/entries';
 import { currentBackend } from '@staticcms/core/backend';
 import { colors, GlobalStyles } from '@staticcms/core/components/UI/styles';
+import { useAppDispatch } from '@staticcms/core/store/hooks';
 import { getDefaultPath } from '../../lib/util/collection.util';
 import CollectionRoute from '../Collection/CollectionRoute';
 import EditorRoute from '../Editor/EditorRoute';
@@ -81,9 +90,9 @@ const App = ({
   useMediaLibrary,
   t,
   scrollSyncEnabled,
-  discardDraft,
 }: TranslatedProps<AppProps>) => {
   const navigate = useNavigate();
+  const dispatch = useAppDispatch();
 
   const configError = useCallback(
     (error?: string) => {
@@ -146,17 +155,23 @@ const App = ({
         />
       </div>
     );
-  }, [AuthComponent, auth.error, auth.isFetching, config.config, handleLogin, t]);
+  }, [AuthComponent, auth.error, auth.isFetching, config.config, handleLogin, navigate, t]);
 
   const defaultPath = useMemo(() => getDefaultPath(collections), [collections]);
 
   const { pathname } = useLocation();
+  const [searchParams] = useSearchParams();
   useEffect(() => {
-    if (!/\/collections\/[a-zA-Z0-9_-]+\/entries\/[a-zA-Z0-9_-]+/g.test(pathname)) {
+    if (
-      discardDraft();
+      /\/collections\/[a-zA-Z0-9_-]+\/entries\/[a-zA-Z0-9_-]+/g.test(pathname) ||
+      (/\/collections\/[a-zA-Z0-9_-]+\/new/g.test(pathname) &&
+        searchParams.get('duplicate') === 'true')
+    ) {
+      return;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
-  }, [pathname]);
+    dispatch(discardDraft());
+  }, [dispatch, pathname, searchParams]);
 
   const content = useMemo(() => {
     if (!user) {
@@ -266,7 +281,6 @@ function mapStateToProps(state: RootState) {
 
 const mapDispatchToProps = {
   loginUser: loginUserAction,
-  discardDraft: discardDraftAction,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);

packages/core/src/components/Editor/Editor.tsx

@@ -1,32 +1,28 @@
+import { createHashHistory } from 'history';
 import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { translate } from 'react-polyglot';
 import { connect } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
-import { createHashHistory } from 'history';
 
-import { logoutUser as logoutUserAction } from '@staticcms/core/actions/auth';
+import { logoutUser } from '@staticcms/core/actions/auth';
 import {
-  createDraftDuplicateFromEntry as createDraftDuplicateFromEntryAction,
+  createDraftDuplicateFromEntry,
-  createEmptyDraft as createEmptyDraftAction,
+  createEmptyDraft,
-  deleteDraftLocalBackup as deleteDraftLocalBackupAction,
+  deleteDraftLocalBackup,
-  deleteEntry as deleteEntryAction,
+  deleteEntry,
-  deleteLocalBackup as deleteLocalBackupAction,
+  deleteLocalBackup,
-  discardDraft as discardDraftAction,
+  loadEntry,
-  loadEntries as loadEntriesAction,
+  loadLocalBackup,
-  loadEntry as loadEntryAction,
+  persistEntry,
-  loadLocalBackup as loadLocalBackupAction,
+  persistLocalBackup,
-  persistEntry as persistEntryAction,
+  retrieveLocalBackup,
-  persistLocalBackup as persistLocalBackupAction,
-  retrieveLocalBackup as retrieveLocalBackupAction,
 } from '@staticcms/core/actions/entries';
-import {
+import { loadScroll, toggleScroll } from '@staticcms/core/actions/scroll';
-  loadScroll as loadScrollAction,
-  toggleScroll as toggleScrollAction,
-} from '@staticcms/core/actions/scroll';
 import { selectFields } from '@staticcms/core/lib/util/collection.util';
 import { useWindowEvent } from '@staticcms/core/lib/util/window.util';
 import { selectEntry } from '@staticcms/core/reducers/selectors/entries';
+import { useAppDispatch } from '@staticcms/core/store/hooks';
 import confirm from '../UI/Confirm';
 import Loader from '../UI/Loader';
 import EditorInterface from './EditorInterface';
@@ -39,10 +35,10 @@ import type {
 } from '@staticcms/core/interface';
 import type { RootState } from '@staticcms/core/store';
 import type { Blocker } from 'history';
-import type { ComponentType } from 'react';
+import type { ComponentType, FC } from 'react';
 import type { ConnectedProps } from 'react-redux';
 
-const Editor = ({
+const Editor: FC<TranslatedProps<EditorProps>> = ({
   entry,
   entryDraft,
   fields,
@@ -51,38 +47,25 @@ const Editor = ({
   hasChanged,
   displayUrl,
   isModification,
-  logoutUser,
   draftKey,
-  t,
   editorBackLink,
-  toggleScroll,
   scrollSyncEnabled,
-  loadScroll,
   showDelete,
   slug,
   localBackup,
-  persistLocalBackup,
+  t,
-  loadEntry,
+}) => {
-  persistEntry,
-  deleteEntry,
-  loadLocalBackup,
-  retrieveLocalBackup,
-  deleteLocalBackup,
-  deleteDraftLocalBackup,
-  createDraftDuplicateFromEntry,
-  createEmptyDraft,
-  discardDraft,
-}: TranslatedProps<EditorProps>) => {
   const [version, setVersion] = useState(0);
 
   const history = createHashHistory();
+  const dispatch = useAppDispatch();
 
   const navigate = useNavigate();
 
   const createBackup = useMemo(
     () =>
       debounce(function (entry: Entry, collection: Collection) {
-        persistLocalBackup(entry, collection);
+        dispatch(persistLocalBackup(entry, collection));
       }, 2000),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
@@ -91,9 +74,9 @@ const Editor = ({
   const deleteBackup = useCallback(() => {
     createBackup.cancel();
     if (slug) {
-      deleteLocalBackup(collection, slug);
+      dispatch(deleteLocalBackup(collection, slug));
     }
-    deleteDraftLocalBackup();
+    dispatch(deleteDraftLocalBackup());
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [collection, createBackup, slug]);
 
@@ -110,29 +93,29 @@ const Editor = ({
 
       setTimeout(async () => {
         try {
-          await persistEntry(collection);
+          await dispatch(persistEntry(collection, navigate));
           setVersion(version + 1);
 
           deleteBackup();
 
           if (createNew) {
-            navigate(`/collections/${collection.name}/new`, { replace: true });
             if (duplicate && entryDraft.entry) {
-              createDraftDuplicateFromEntry(entryDraft.entry);
+              dispatch(createDraftDuplicateFromEntry(entryDraft.entry));
+              navigate(`/collections/${collection.name}/new`, { replace: true });
+            } else {
+              setSubmitted(false);
+              setTimeout(() => {
+                dispatch(createEmptyDraft(collection, location.search));
+                setVersion(version + 1);
+                navigate(`/collections/${collection.name}/new`, { replace: true });
+              }, 100);
             }
           }
           // eslint-disable-next-line no-empty
         } catch (e) {}
       }, 100);
     },
-    [
+    [collection, deleteBackup, dispatch, entryDraft.entry, navigate, version],
-      collection,
-      createDraftDuplicateFromEntry,
-      deleteBackup,
-      entryDraft.entry,
-      persistEntry,
-      version,
-    ],
   );
 
   const handleDuplicateEntry = useCallback(() => {
@@ -140,9 +123,9 @@ const Editor = ({
       return;
     }
 
-    navigate(`/collections/${collection.name}/new`, { replace: true });
+    dispatch(createDraftDuplicateFromEntry(entryDraft.entry));
-    createDraftDuplicateFromEntry(entryDraft.entry);
+    navigate(`/collections/${collection.name}/new?duplicate=true`, { replace: true });
-  }, [collection.name, createDraftDuplicateFromEntry, entryDraft.entry]);
+  }, [collection.name, dispatch, entryDraft.entry, navigate]);
 
   const handleDeleteEntry = useCallback(async () => {
     if (entryDraft.hasChanged) {
@@ -170,11 +153,11 @@ const Editor = ({
     }
 
     setTimeout(async () => {
-      await deleteEntry(collection, slug);
+      await dispatch(deleteEntry(collection, slug));
       deleteBackup();
       return navigate(`/collections/${collection.name}`);
     }, 0);
-  }, [collection, deleteBackup, deleteEntry, entryDraft.hasChanged, slug]);
+  }, [collection, deleteBackup, dispatch, entryDraft.hasChanged, navigate, slug]);
 
   const [prevLocalBackup, setPrevLocalBackup] = useState<
     | {
@@ -192,7 +175,7 @@ const Editor = ({
         });
 
         if (confirmLoadBackupBody) {
-          loadLocalBackup();
+          dispatch(loadLocalBackup());
           setVersion(version + 1);
         } else {
           deleteBackup();
@@ -203,7 +186,7 @@ const Editor = ({
     }
 
     setPrevLocalBackup(localBackup);
-  }, [deleteBackup, loadLocalBackup, localBackup, prevLocalBackup, version]);
+  }, [deleteBackup, dispatch, localBackup, prevLocalBackup, version]);
 
   useEffect(() => {
     if (hasChanged && entryDraft.entry) {
@@ -216,32 +199,22 @@ const Editor = ({
   }, [collection, createBackup, entryDraft.entry, hasChanged]);
 
   const [prevCollection, setPrevCollection] = useState<Collection | null>(null);
-  const [preSlug, setPrevSlug] = useState<string | undefined | null>(null);
+  const [prevSlug, setPrevSlug] = useState<string | undefined | null>(null);
   useEffect(() => {
-    if (!slug && preSlug !== slug) {
+    if (!slug && prevSlug !== slug) {
       setTimeout(() => {
-        createEmptyDraft(collection, location.search);
+        dispatch(createEmptyDraft(collection, location.search));
       });
-    } else if (slug && (prevCollection !== collection || preSlug !== slug)) {
+    } else if (slug && (prevCollection !== collection || prevSlug !== slug)) {
       setTimeout(() => {
-        retrieveLocalBackup(collection, slug);
+        dispatch(retrieveLocalBackup(collection, slug));
-        loadEntry(collection, slug);
+        dispatch(loadEntry(collection, slug));
       });
     }
 
     setPrevCollection(collection);
     setPrevSlug(slug);
-  }, [
+  }, [collection, entryDraft.entry, prevSlug, prevCollection, slug, dispatch]);
-    collection,
-    createEmptyDraft,
-    discardDraft,
-    entryDraft.entry,
-    loadEntry,
-    preSlug,
-    prevCollection,
-    retrieveLocalBackup,
-    slug,
-  ]);
 
   const leaveMessage = useMemo(() => t('editor.editor.onLeavePage'), [t]);
 
@@ -289,7 +262,19 @@ const Editor = ({
     return () => {
       unblock();
     };
-  }, [collection.name, deleteBackup, discardDraft, navigationBlocker]);
+  }, [collection.name, history, navigationBlocker]);
+
+  const handleLogout = useCallback(() => {
+    dispatch(logoutUser());
+  }, [dispatch]);
+
+  const handleToggleScroll = useCallback(async () => {
+    await dispatch(toggleScroll());
+  }, [dispatch]);
+
+  const handleLoadScroll = useCallback(async () => {
+    await dispatch(loadScroll());
+  }, [dispatch]);
 
   if (entry && entry.error) {
     return (
@@ -318,11 +303,11 @@ const Editor = ({
       displayUrl={displayUrl}
       isNewEntry={!slug}
       isModification={isModification}
-      onLogoutClick={logoutUser}
+      onLogoutClick={handleLogout}
       editorBackLink={editorBackLink}
-      toggleScroll={toggleScroll}
+      toggleScroll={handleToggleScroll}
       scrollSyncEnabled={scrollSyncEnabled}
-      loadScroll={loadScroll}
+      loadScroll={handleLoadScroll}
       submitted={submitted}
       t={t}
     />
@@ -383,25 +368,7 @@ function mapStateToProps(state: RootState, ownProps: CollectionViewOwnProps) {
   };
 }
 
-const mapDispatchToProps = {
+const connector = connect(mapStateToProps);
-  loadEntry: loadEntryAction,
-  loadEntries: loadEntriesAction,
-  loadLocalBackup: loadLocalBackupAction,
-  deleteDraftLocalBackup: deleteDraftLocalBackupAction,
-  retrieveLocalBackup: retrieveLocalBackupAction,
-  persistLocalBackup: persistLocalBackupAction,
-  deleteLocalBackup: deleteLocalBackupAction,
-  createDraftDuplicateFromEntry: createDraftDuplicateFromEntryAction,
-  createEmptyDraft: createEmptyDraftAction,
-  discardDraft: discardDraftAction,
-  persistEntry: persistEntryAction,
-  deleteEntry: deleteEntryAction,
-  logoutUser: logoutUserAction,
-  toggleScroll: toggleScrollAction,
-  loadScroll: loadScrollAction,
-};
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
 export type EditorProps = ConnectedProps<typeof connector>;
 
 export default connector(translate()(Editor) as ComponentType<EditorProps>);

packages/core/src/components/Editor/EditorInterface.tsx

@@ -137,7 +137,7 @@ interface EditorInterfaceProps {
   isModification: boolean;
   onLogoutClick: () => void;
   editorBackLink: string;
-  toggleScroll: () => Promise<{ readonly type: 'TOGGLE_SCROLL' }>;
+  toggleScroll: () => Promise<void>;
   scrollSyncEnabled: boolean;
   loadScroll: () => void;
   submitted: boolean;