resource container

src/components/Layout/Content.js

@@ -15,6 +15,7 @@ import ContentFooter from "./ContentFooter";
 
 // containers
 import ResourcesContainer from "../../features/resources/components/ResourcesContainer";
+import ResourceContainer from "../../features/resources/components/ResourceContainer";
 
 // context
 import { useLayoutState } from "../../contexts/LayoutContext";
@@ -36,6 +37,7 @@ const Content = () => {
       <div id="fakeToolbar" className={classes.fakeToolbar} />
       <Switch>
         <Route path="/dashboard" component={Dashboard} />
+        <Route path="/resources/:id(\d+|new)" component={ResourceContainer} />
         <Route path="/resources" component={ResourcesContainer} />
         <Route path="/appearance" component={AppearancePage} />
         <Route path="/typography" component={Typography} />

src/features/resources/components/ResourceContainer.js

@@ -0,0 +1,15 @@
+import React from "react";
+import PageTitle from "../../../components/PageTitle";
+import { useParams } from "react-router-dom";
+
+const ResourceContainer = () => {
+  const params = useParams();
+  return (
+    <>
+      <PageTitle title={`Resource id: ${params.id}`} />
+      <>.................</>
+    </>
+  );
+};
+
+export default ResourceContainer;

src/features/resources/components/ResourcesContainer.js

@@ -14,6 +14,7 @@ import {
   OpenInNewOutlined
 } from "@material-ui/icons";
 import { useToast, useResourceSecurity } from "../../../hooks";
+import { useHistory } from "react-router-dom";
 
 const __ROWS_PER_PAGE_OPTIONS = [10, 20, 50, 100];
 const __RESOURCE_NAME_MAX_LENGTH = 35;
@@ -33,6 +34,7 @@ const ResourcesContainer = () => {
   const { getResources } = useResourcesApi();
   const { getResourceCategories } = useDictionariesApi();
   const { secureUrl } = useResourceSecurity();
+  const history = useHistory();
 
   useEffect(() => {
     getResourceCategories().then((r) => setResourceCategories(r));
@@ -74,7 +76,8 @@ const ResourcesContainer = () => {
     () => [
       {
         code: "edit",
-        effect: () => alert("edit"),
+        effect: (_event, resource) =>
+          history.push(`/resources/${resource.resourceId}`),
         icon: EditOutlined,
         tooltip: t("Generic.Edit"),
         top: true
@@ -102,7 +105,7 @@ const ResourcesContainer = () => {
         top: false
       }
     ],
-    [t, info, secureUrl]
+    [t, info, secureUrl, history]
   );
 
   const columns = useMemo(