fix: routing issues (#590)

packages/core/src/__mocks__/history.ts

@@ -1,2 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-export const createHashHistory = jest.fn();

packages/core/src/actions/collections.ts

@@ -1,18 +0,0 @@
-import { history } from '../routing/history';
-import { getCollectionUrl, getNewEntryUrl } from '../lib/urlHelper';
-
-export function searchCollections(query: string, collection?: string) {
-  if (collection) {
-    history.push(`/collections/${collection}/search/${query}`);
-  } else {
-    history.push(`/search/${query}`);
-  }
-}
-
-export function showCollection(collectionName: string) {
-  history.push(getCollectionUrl(collectionName));
-}
-
-export function createNewEntry(collectionName: string) {
-  history.push(getNewEntryUrl(collectionName));
-}

packages/core/src/actions/entries.ts

@@ -1,4 +1,5 @@
 import isEqual from 'lodash/isEqual';
+import { redirect } from 'react-router-dom';
 
 import { currentBackend } from '../backend';
 import {
@@ -48,7 +49,6 @@ import {
   selectIsFetching,
   selectPublishedSlugs,
 } from '../reducers/selectors/entries';
-import { navigateToEntry } from '../routing/history';
 import { addSnackbar } from '../store/slices/snackbars';
 import { createAssetProxy } from '../valueObjects/AssetProxy';
 import createEntry from '../valueObjects/createEntry';
@@ -1040,7 +1040,7 @@ export function persistEntry(collection: Collection) {
         }
         if (entry.slug !== newSlug) {
           await dispatch(loadEntry(collection, newSlug));
-          navigateToEntry(collection.name, newSlug);
+          redirect(`/collections/${collection.name}/entries/${newSlug}`);
         } else {
           await dispatch(loadEntry(collection, newSlug, true));
         }

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

@@ -4,7 +4,7 @@ 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, useParams } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { ScrollSync } from 'react-scroll-sync';
 import TopBarProgress from 'react-topbar-progress-indicator';
 
@@ -12,7 +12,6 @@ import { loginUser as loginUserAction } from '@staticcms/core/actions/auth';
 import { discardDraft as discardDraftAction } from '@staticcms/core/actions/entries';
 import { currentBackend } from '@staticcms/core/backend';
 import { colors, GlobalStyles } from '@staticcms/core/components/UI/styles';
-import { history } from '@staticcms/core/routing/history';
 import { getDefaultPath } from '../../lib/util/collection.util';
 import CollectionRoute from '../Collection/CollectionRoute';
 import EditorRoute from '../Editor/EditorRoute';
@@ -84,6 +83,8 @@ const App = ({
   scrollSyncEnabled,
   discardDraft,
 }: TranslatedProps<AppProps>) => {
+  const navigate = useNavigate();
+
   const configError = useCallback(
     (error?: string) => {
       return (
@@ -140,7 +141,7 @@ const App = ({
           base_url={config.config.backend.base_url}
           authEndpoint={config.config.backend.auth_endpoint}
           config={config.config}
-          clearHash={() => history.replace('/')}
+          clearHash={() => navigate('/', { replace: true })}
           t={t}
         />
       </div>

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

@@ -12,13 +12,13 @@ import Toolbar from '@mui/material/Toolbar';
 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 { logoutUser as logoutUserAction } from '@staticcms/core/actions/auth';
-import { createNewEntry } from '@staticcms/core/actions/collections';
 import { openMediaLibrary as openMediaLibraryAction } from '@staticcms/core/actions/mediaLibrary';
 import { checkBackendStatus as checkBackendStatusAction } from '@staticcms/core/actions/status';
 import { buttons, colors } from '@staticcms/core/components/UI/styles';
-import { stripProtocol } from '@staticcms/core/lib/urlHelper';
+import { stripProtocol, getNewEntryUrl } from '@staticcms/core/lib/urlHelper';
 import NavLink from '../UI/NavLink';
 import SettingsDropdown from '../UI/SettingsDropdown';
 
@@ -82,9 +82,7 @@ const Header = ({
     setAnchorEl(null);
   }, []);
 
-  const handleCreatePostClick = useCallback((collectionName: string) => {
+  const navigate = useNavigate();
-    createNewEntry(collectionName);
-  }, []);
 
   const creatableCollections = useMemo(
     () =>
@@ -148,7 +146,7 @@ const Header = ({
                 {creatableCollections.map(collection => (
                   <MenuItem
                     key={collection.name}
-                    onClick={() => handleCreatePostClick(collection.name)}
+                    onClick={() => navigate(getNewEntryUrl(collection.name))}
                   >
                     {collection.label_singular || collection.label}
                   </MenuItem>

packages/core/src/components/Collection/Sidebar.tsx

@@ -10,8 +10,8 @@ import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
 import React, { useMemo } from 'react';
 import { translate } from 'react-polyglot';
+import { useNavigate } from 'react-router-dom';
 
-import { searchCollections } from '@staticcms/core/actions/collections';
 import { colors } from '@staticcms/core/components/UI/styles';
 import { getAdditionalLinks, getIcon } from '@staticcms/core/lib/registry';
 import NavLink from '../UI/NavLink';
@@ -48,6 +48,15 @@ const Sidebar = ({
   t,
   filterTerm,
 }: TranslatedProps<SidebarProps>) => {
+  const navigate = useNavigate();
+  function searchCollections(query: string, collection?: string) {
+    if (collection) {
+      navigate(`/collections/${collection}/search/${query}`);
+    } else {
+      navigate(`/search/${query}`);
+    }
+  }
+
   const collectionLinks = useMemo(
     () =>
       Object.values(collections)

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

@@ -2,6 +2,8 @@ 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 {
@@ -25,7 +27,6 @@ import {
 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 { history, navigateToCollection, navigateToNewEntry } from '@staticcms/core/routing/history';
 import confirm from '../UI/Confirm';
 import Loader from '../UI/Loader';
 import EditorInterface from './EditorInterface';
@@ -74,6 +75,10 @@ const Editor = ({
 }: TranslatedProps<EditorProps>) => {
   const [version, setVersion] = useState(0);
 
+  const history = createHashHistory();
+
+  const navigate = useNavigate();
+
   const createBackup = useMemo(
     () =>
       debounce(function (entry: Entry, collection: Collection) {
@@ -111,7 +116,7 @@ const Editor = ({
           deleteBackup();
 
           if (createNew) {
-            navigateToNewEntry(collection.name);
+            navigate(`/collections/${collection.name}/new`, { replace: true });
             if (duplicate && entryDraft.entry) {
               createDraftDuplicateFromEntry(entryDraft.entry);
             }
@@ -135,7 +140,7 @@ const Editor = ({
       return;
     }
 
-    navigateToNewEntry(collection.name);
+    navigate(`/collections/${collection.name}/new`, { replace: true });
     createDraftDuplicateFromEntry(entryDraft.entry);
   }, [collection.name, createDraftDuplicateFromEntry, entryDraft.entry]);
 
@@ -161,13 +166,13 @@ const Editor = ({
     }
 
     if (!slug) {
-      return navigateToCollection(collection.name);
+      return navigate(`/collections/${collection.name}`);
     }
 
     setTimeout(async () => {
       await deleteEntry(collection, slug);
       deleteBackup();
-      return navigateToCollection(collection.name);
+      return navigate(`/collections/${collection.name}`);
     }, 0);
   }, [collection, deleteBackup, deleteEntry, entryDraft.hasChanged, slug]);
 

packages/core/src/locales/de/index.ts

@@ -21,7 +21,7 @@ const de: LocalePhrasesRoot = {
       content: 'Inhalt',
       workflow: 'Arbeitsablauf',
       media: 'Medien',
-      quickAdd: 'Schnell-Erstellung',
+      quickAdd: 'Schnellerstellung',
     },
     app: {
       errorHeader: 'Fehler beim Laden der CMS-Konfiguration.',
@@ -36,8 +36,8 @@ const de: LocalePhrasesRoot = {
   },
   collection: {
     sidebar: {
-      collections: 'Inhaltstypen',
+      collections: 'Bereiche',
-      allCollections: 'Allen Inhaltstypen',
+      allCollections: 'Allen Bereichen',
       searchAll: 'Alles durchsuchen',
       searchIn: 'Suchen in',
     },
@@ -231,6 +231,10 @@ const de: LocalePhrasesRoot = {
     },
   },
   ui: {
+    common: {
+      yes: 'Ja',
+      no: 'Nein',
+    },
     default: {
       goBackToSite: 'Zurück zur Seite',
     },

packages/core/src/routing/history.ts

@@ -1,17 +0,0 @@
-import { createHashHistory } from 'history';
-
-const history = createHashHistory();
-
-export function navigateToCollection(collectionName: string) {
-  return history.push(`/collections/${collectionName}`);
-}
-
-export function navigateToNewEntry(collectionName: string) {
-  return history.replace(`/collections/${collectionName}/new`);
-}
-
-export function navigateToEntry(collectionName: string, slug: string) {
-  return history.replace(`/collections/${collectionName}/entries/${slug}`);
-}
-
-export { history };