fix: make pattern pages work

Author: boazpoolman

packages/core/admin/components/EditForm/index.tsx

@@ -76,7 +76,7 @@ const EditForm = () => {
                     defaultMessage: ' Generate automatic URL alias',
                   })}
                 </Checkbox>
-                <Link href="/plugins/webtools/patterns">Configure URL alias patterns.</Link>
+                <Link href="/admin/plugins/webtools/patterns">Configure URL alias patterns.</Link>
               </Box>
               <Box paddingTop={4}>
                 <Field.Root

packages/core/admin/components/PatternField/index.tsx

@@ -54,7 +54,7 @@ const PatternField: FC<Props> = ({
       setLoadingError(true);
       setLoading(false);
     });
-  }, [error, get]);
+  }, [error]);
 
   const HoverBox = styled(Box)`
     cursor: pointer;

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

@@ -13,9 +13,11 @@ import { Page, useStrapiApp, Layouts } from '@strapi/strapi/admin';
 
 import pluginPermissions from '../../permissions';
 import pluginId from '../../helpers/pluginId';
-import Patterns from '../../screens/Patterns';
 import List from '../../screens/List';
 import Overview from '../../screens/Overview';
+import PatternsListPage from '../../screens/Patterns/ListPage';
+import PatternsEditPage from '../../screens/Patterns/EditPage';
+import PatternsCreatePage from '../../screens/Patterns/CreatePage';
 
 const App = () => {
   const getPlugin = useStrapiApp('MyComponent', (state) => state.getPlugin);
@@ -61,10 +63,9 @@ const App = () => {
         <Routes>
           <Route path="/overview" element={<Overview />} />
           <Route path="/urls" element={<List />} />
-          <Route
-            path="/patterns"
-            element={<Patterns />}
-          />
+          <Route path="/patterns" element={<PatternsListPage />} />
+          <Route path="/patterns/new" element={<PatternsCreatePage />} />
+          <Route path="/patterns/:id" element={<PatternsEditPage />} />
           {routerComponents.map(({ Component }) => {
             console.log(Component);
             return (

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

@@ -50,7 +50,7 @@ const CreatePatternPage = () => {
       .catch(() => {
         setLoading(false);
       });
-  }, [get]);
+  }, []);
 
   const handleCreateSubmit = async (
     values: PatternFormValues,
@@ -147,7 +147,7 @@ const CreatePatternPage = () => {
               defaultMessage: 'Add a pattern for automatic URL alias generation.',
             })}
             navigationAction={(
-              <Link startIcon={<ArrowLeft />} href={`/plugins/${pluginId}/patterns`}>
+              <Link startIcon={<ArrowLeft />} href={`/admin/plugins/${pluginId}/patterns`}>
                 {formatMessage({
                   id: 'global.back',
                   defaultMessage: 'Back',

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

@@ -35,6 +35,8 @@ const EditPatternPage = () => {
   const { formatMessage } = useIntl();
   const { get, put, post } = getFetchClient();
 
+  console.log('why rerender?');
+
   useEffect(() => {
     setLoading(true);
     get<EnabledContentTypes>('/webtools/info/getContentTypes')
@@ -46,7 +48,7 @@ const EditPatternPage = () => {
       .catch(() => {
         setLoading(false);
       });
-  }, [get]);
+  }, []);
 
   useEffect(() => {
     setLoading(true);
@@ -60,7 +62,7 @@ const EditPatternPage = () => {
         setLoading(false);
       });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [get, id]);
+  }, [id]);
 
   const handleEditSubmit = async (
     values: PatternFormValues,
@@ -171,7 +173,7 @@ const EditPatternPage = () => {
             navigationAction={(
               <Link
                 startIcon={<ArrowLeft />}
-                href={`/plugins/${pluginId}/patterns`}
+                href={`/admin/plugins/${pluginId}/patterns`}
               >
                 {formatMessage({
                   id: 'global.back',

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

@@ -38,7 +38,7 @@ const ListPatternPage = () => {
     fetchData().catch((error) => {
       console.error('Failed to fetch data:', error);
     });
-  }, [get]);
+  }, []);
 
   if (loading) {
     return (