feat: fixes

Author: boazpoolman

packages/addons/sitemap/admin/components/AdminRoute/index.tsx

@@ -6,7 +6,7 @@ const AdminRoute = () => {
   return (
     <Route
       path="/plugins/webtools/sitemap"
-      component={App}
+      element={<App />}
     />
   );
 };

packages/addons/sitemap/admin/components/NavLink/index.tsx

@@ -6,7 +6,7 @@ import {
 
 const NavLink = () => {
   return (
-    <SubNavLink href="/plugins/webtools/sitemap" active key="test">
+    <SubNavLink href="/admin/plugins/webtools/sitemap" active key="test">
       Sitemap
     </SubNavLink>
   );

packages/addons/sitemap/admin/index.ts

@@ -1,10 +1,13 @@
+import React from 'react';
 import { AdminApp } from '@pluginpal/webtools-helper-plugin';
+import { Route } from 'react-router-dom';
 import pluginPkg from '../package.json';
 import pluginId from './helpers/pluginId';
 import EditView from './components/EditView';
 import AdminRoute from './components/AdminRoute';
 import NavLink from './components/NavLink';
 import getTranslation from './helpers/getTranslation';
+import App from './containers/Main';
 
 const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
 const { name } = pluginPkg.strapi;
@@ -32,7 +35,10 @@ export default {
 
     app.getPlugin('webtools').injectComponent('webtoolsRouter', 'route', {
       name: 'settings-route',
-      Component: AdminRoute,
+      Component: {
+        path: "/plugins/webtools/sitemap",
+        element: App,
+      },
     });
   },
   async registerTrads(app: any) {

packages/core/admin/containers/App/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Route, Switch, useHistory } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 
 import {
   SubNav,
@@ -18,17 +18,17 @@ import List from '../../screens/List';
 import Overview from '../../screens/Overview';
 
 const App = () => {
-  const history = useHistory();
-
   const getPlugin = useStrapiApp('MyComponent', (state) => state.getPlugin);
 
   const plugin = getPlugin(pluginId);
+  console.log(plugin);
   const sidebarComponents = plugin?.getInjectedComponents('webtoolsSidebar', 'link');
   const routerComponents = plugin?.getInjectedComponents('webtoolsRouter', 'route');
 
-  if (history.location.pathname === `/plugins/${pluginId}`) {
-    history.replace(`/plugins/${pluginId}/overview`);
-  }
+
+  // if (history.location.pathname === `/plugins/${pluginId}`) {
+  //   history.replace(`/plugins/${pluginId}/overview`);
+  // }
 
   return (
     <Page.Protect permissions={pluginPermissions['settings.patterns']}>
@@ -38,13 +38,13 @@ const App = () => {
             <SubNavHeader value="" label="Webtools" />
             <SubNavSections>
               <SubNavSection label="Core">
-                <SubNavLink href="/plugins/webtools/overview" key="test">
+                <SubNavLink href="/admin/plugins/webtools/overview" key="test">
                   Overview
                 </SubNavLink>
-                <SubNavLink href="/plugins/webtools/urls" key="test">
+                <SubNavLink href="/admin/plugins/webtools/urls" key="test">
                   All URLs
                 </SubNavLink>
-                <SubNavLink href="/plugins/webtools/patterns" key="test">
+                <SubNavLink href="/admin/plugins/webtools/patterns" key="test">
                   Url Patterns
                 </SubNavLink>
               </SubNavSection>
@@ -58,16 +58,27 @@ const App = () => {
           </SubNav>
         )}
       >
-        <Switch>
-          <Route path={[`/plugins/${pluginId}/overview`, `/plugins/${pluginId}`]} component={Overview} exact />
-          <Route path={`/plugins/${pluginId}/urls`} component={List} exact />
+        <Routes>
+          <Route path="/overview" element={<Overview />} />
+          <Route path="/urls" element={<List />} />
           <Route
-            path={`/plugins/${pluginId}/patterns`}
-            component={Patterns}
+            path="/patterns"
+            element={<Patterns />}
           />
-          {routerComponents.map(({ Component }) => <Component />)}
+          {routerComponents.map(({ Component }) => {
+            console.log(Component);
+            return (
+              <Route
+                path={Component.path}
+                element={<Component.element />}
+              />
+            );
+            // @ts-ignore
+            // eslint-disable-next-line react/jsx-pascal-case
+            return <Component.type />;
+          })}
           {/* <Route path="" component={NotFound} /> */}
-        </Switch>
+        </Routes>
       </Layouts.Root>
     </Page.Protect>
   );

packages/core/admin/screens/List/components/TableRow/index.tsx

@@ -10,7 +10,7 @@ import {
 import { useNotification, getFetchClient } from '@strapi/strapi/admin';
 import { useIntl } from 'react-intl';
 import { Trash, ExternalLink, Pencil } from '@strapi/icons';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import DeleteConfirmModal from '../DeleteConfirmModal';
 import { Config } from '../../../../../server/admin-api/config';
 
@@ -35,12 +35,12 @@ const TableRow: FC<Props> = ({
   const { get } = getFetchClient();
   const { formatMessage } = useIntl();
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
-  const { push } = useHistory();
+  const navigate = useNavigate();
 
   const handleClick = (path: string) => {
     get<{ link: string }>(`/webtools/url-alias/editLink?path=${path}`)
       .then((res) => {
-        push(res.data.link);
+        navigate(res.data.link);
       })
       .catch(() => { });
   };

packages/core/admin/screens/List/index.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
 
 import { Button } from '@strapi/design-system';
 
@@ -35,7 +34,6 @@ const List = () => {
   const [openModal, setOpenModal] = useState<boolean>(false);
   const { post } = getFetchClient();
 
-  const history = useHistory();
   const { formatMessage } = useIntl();
   const { get } = getFetchClient();
   const [contentTypes, setContentTypes] = useState<EnabledContentTypes>([]);
@@ -49,18 +47,18 @@ const List = () => {
       .catch(() => {
         toggleNotification({ type: 'warning', message: formatMessage({ id: 'notification.error' }) });
       });
-  }, [get, toggleNotification]);
+  }, []);
 
   useEffect(() => {
-    get<any>(`/webtools/url-alias/findMany${history.location.search}`)
+    get<any>(`/webtools/url-alias/findMany${window.location.search}`)
       .then((res) => {
         setPaths(res.data.results);
         setPagination(res.data.pagination);
       })
       .catch(() => {
         toggleNotification({ type: 'warning', message: formatMessage({ id: 'notification.error' }) });
       });
-  }, [history.location.search, queryCount, toggleNotification]);
+  }, [window.location.search, queryCount, toggleNotification]);
 
   useEffect(() => {
     get<Config>('/webtools/info/config')

packages/core/admin/screens/Patterns/CreatePage/index.tsx

@@ -6,7 +6,7 @@ import {
   FormikProps,
   FormikErrors,
 } from 'formik';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import {
   Box,
@@ -32,7 +32,7 @@ import LanguageCheckboxes from '../../../components/LanguageCheckboxes';
 import HiddenLocalizedField from '../../../components/HiddenLocalizedField';
 
 const CreatePatternPage = () => {
-  const { push } = useHistory();
+  const navigate = useNavigate();
   const { toggleNotification } = useNotification();
   const [loading, setLoading] = useState(false);
   const [contentTypes, setContentTypes] = useState<EnabledContentTypes>([]);
@@ -62,7 +62,7 @@ const CreatePatternPage = () => {
         data: values,
       });
 
-      push(`/plugins/${pluginId}/patterns`);
+      navigate(`/plugins/${pluginId}/patterns`);
       toggleNotification({
         type: 'success',
         message: formatMessage({ id: 'webtools.settings.success.create' }),

packages/core/admin/screens/Patterns/EditPage/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { Formik, Form, FormikProps } from 'formik';
-import { useRouteMatch, useHistory } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import {
   Box,
   Link,
@@ -26,18 +26,15 @@ import HiddenLocalizedField from '../../../components/HiddenLocalizedField';
 import LanguageCheckboxes from '../../../components/LanguageCheckboxes';
 
 const EditPatternPage = () => {
-  const { push } = useHistory();
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
   const { toggleNotification } = useNotification();
   const [loading, setLoading] = useState(false);
   const [patternEntity, setPatternEntity] = useState<null | PatternEntity>(null);
   const [contentTypes, setContentTypes] = useState<EnabledContentTypes>([]);
   const { formatMessage } = useIntl();
   const { get, put, post } = getFetchClient();
 
-  const {
-    params: { id },
-  } = useRouteMatch<{ id: string }>(`/plugins/${pluginId}/patterns/:id`)!;
-
   useEffect(() => {
     setLoading(true);
     get<EnabledContentTypes>('/webtools/info/getContentTypes')
@@ -75,7 +72,7 @@ const EditPatternPage = () => {
         data: values,
       });
 
-      push(`/plugins/${pluginId}/patterns`);
+      navigate(`/plugins/${pluginId}/patterns`);
       toggleNotification({
         type: 'success',
         message: formatMessage({ id: 'webtools.settings.success.edit' }),

packages/core/admin/screens/Patterns/ListPage/components/TableBody/index.tsx

@@ -5,7 +5,7 @@ import {
 import { Pencil, Trash } from '@strapi/icons';
 import { getFetchClient, useNotification } from '@strapi/strapi/admin';
 import { useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import pluginId from '../../../../../helpers/pluginId';
 import { PatternEntity } from '../../../../../types/url-patterns';
@@ -17,7 +17,7 @@ interface Props {
 const TableBody: React.FC<Props> = ({ patterns }) => {
   const [statePatterns, setStatePatterns] = useState(patterns);
   const { formatMessage } = useIntl();
-  const { push } = useHistory();
+  const navigate = useNavigate();
   const { toggleNotification } = useNotification();
   const { get } = getFetchClient();
 
@@ -34,7 +34,7 @@ const TableBody: React.FC<Props> = ({ patterns }) => {
   };
 
   const handleClickEdit = (id: number) => {
-    push(`/plugins/${pluginId}/patterns/${id}`);
+    navigate(`/plugins/${pluginId}/patterns/${id}`);
   };
 
   return (

packages/core/admin/screens/Patterns/ListPage/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import {
   Loader,
   Button,
@@ -19,7 +19,7 @@ const ListPatternPage = () => {
   const [patterns, setPatterns] = useState<PatternEntity[]>([]);
   const [loading, setLoading] = useState(false);
   const { formatMessage } = useIntl();
-  const { push } = useHistory();
+  const navigate = useNavigate();
   const { get } = getFetchClient();
 
   useEffect(() => {
@@ -54,7 +54,7 @@ const ListPatternPage = () => {
         title={formatMessage({ id: 'webtools.settings.page.patterns.title', defaultMessage: 'Patterns' })}
         subtitle={formatMessage({ id: 'webtools.settings.page.patterns.description', defaultMessage: 'A list of all the known URL alias patterns.' })}
         primaryAction={(
-          <Button onClick={() => push(`/plugins/${pluginId}/patterns/new`)} startIcon={<Plus />} size="L">
+          <Button onClick={() => navigate(`/plugins/${pluginId}/patterns/new`)} startIcon={<Plus />} size="L">
             {formatMessage({
               id: 'webtools.settings.button.add_pattern',
               defaultMessage: 'Add new pattern',