diff --git a/packages/core/src/__mocks__/history.ts b/packages/core/src/__mocks__/history.ts deleted file mode 100644 index ee6e935c..00000000 --- a/packages/core/src/__mocks__/history.ts +++ /dev/null @@ -1,2 +0,0 @@ -/* eslint-disable import/prefer-default-export */ -export const createHashHistory = jest.fn(); diff --git a/packages/core/src/actions/collections.ts b/packages/core/src/actions/collections.ts deleted file mode 100644 index 0171b3f1..00000000 --- a/packages/core/src/actions/collections.ts +++ /dev/null @@ -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)); -} diff --git a/packages/core/src/actions/entries.ts b/packages/core/src/actions/entries.ts index 02944e60..512ba467 100644 --- a/packages/core/src/actions/entries.ts +++ b/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)); } diff --git a/packages/core/src/components/App/App.tsx b/packages/core/src/components/App/App.tsx index 2b55c80f..3c0aa0d8 100644 --- a/packages/core/src/components/App/App.tsx +++ b/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) => { + 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} /> diff --git a/packages/core/src/components/App/Header.tsx b/packages/core/src/components/App/Header.tsx index 8b856218..90824721 100644 --- a/packages/core/src/components/App/Header.tsx +++ b/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) => { - createNewEntry(collectionName); - }, []); + const navigate = useNavigate(); const creatableCollections = useMemo( () => @@ -148,7 +146,7 @@ const Header = ({ {creatableCollections.map(collection => ( handleCreatePostClick(collection.name)} + onClick={() => navigate(getNewEntryUrl(collection.name))} > {collection.label_singular || collection.label} diff --git a/packages/core/src/components/Collection/Sidebar.tsx b/packages/core/src/components/Collection/Sidebar.tsx index 999f370a..0cdc5f85 100644 --- a/packages/core/src/components/Collection/Sidebar.tsx +++ b/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) => { + 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) diff --git a/packages/core/src/components/Editor/Editor.tsx b/packages/core/src/components/Editor/Editor.tsx index e7bd1c36..5885aca5 100644 --- a/packages/core/src/components/Editor/Editor.tsx +++ b/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) => { 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]); diff --git a/packages/core/src/locales/de/index.ts b/packages/core/src/locales/de/index.ts index a96ce061..cb3bcc7f 100644 --- a/packages/core/src/locales/de/index.ts +++ b/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', - allCollections: 'Allen Inhaltstypen', + collections: 'Bereiche', + 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', }, diff --git a/packages/core/src/routing/history.ts b/packages/core/src/routing/history.ts deleted file mode 100644 index 51562b7d..00000000 --- a/packages/core/src/routing/history.ts +++ /dev/null @@ -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 };