resources components refactoring

src/components/Layout/Content.js

@@ -14,8 +14,8 @@ import AppearancePage from "../../pages/settings/appearance/components/Appearanc
 import ContentFooter from "./ContentFooter";
 
 // containers
-import ResourcesContainer from "../../features/resources/components/ResourcesContainer";
-import ResourceContainer from "../../features/resources/components/ResourceContainer";
+import ResourcesContainer from "../../features/resources/list/components/ResourcesContainer";
+import ResourceContainer from "../../features/resources/edit/components/ResourceContainer";
 
 // context
 import { useLayoutState } from "../../contexts/LayoutContext";

src/features/resources/api/useDictionariesApi.js

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
-import useHttpRequest from "./useHttpRequest";
-import { get } from "../utils/axios";
+import useHttpRequest from "../../../hooks/useHttpRequest";
+import { get } from "../../../utils/axios";
 
 const cdn = process.env.REACT_APP_CDN_URL;
 const endpoints = {

src/features/resources/api/useResourcesApi.js

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
-import useHttpRequest from "./useHttpRequest";
-import { get } from "../utils/axios";
-import { defaultResourcesFilters } from "../constants/resourcesConstants";
+import useHttpRequest from "../../../hooks/useHttpRequest";
+import { get } from "../../../utils/axios";
+import { defaultResourcesFilters } from "../../../constants/resourcesConstants";
 
 const cdn = process.env.REACT_APP_CDN_URL;
 
@@ -41,8 +41,18 @@ const useResourcesApi = () => {
     [exec]
   );
 
+  const getResource = useCallback(
+    (resourceId, options) => {
+      const endpoint = `${cdn}/admin/resource?ResourceId=${resourceId}`;
+      const promise = exec(() => get(endpoint), options);
+      return promise;
+    },
+    [exec]
+  );
+
   return {
-    getResources
+    getResources,
+    getResource
   };
 };
 

src/features/resources/components/ResourceContainer.js

@@ -1,15 +0,0 @@
-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/edit/components/ResourceContainer.js

@@ -0,0 +1,36 @@
+import React, { useState, useMemo, useEffect } from "react";
+import PageTitle from "../../../../components/PageTitle";
+import { useParams } from "react-router-dom";
+import { useResourcesApi } from "../../api";
+import { LoadingText } from "../../../../components";
+
+const ResourceContainer = () => {
+  const [state, setState] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const params = useParams();
+  const { getResource } = useResourcesApi();
+
+  const isNew = useMemo(() => params.id === "new", [params.id]);
+
+  useEffect(() => {
+    if (isNew) return;
+    const resourceId = parseInt(params.id);
+    setLoading(true);
+    getResource(resourceId).then((resource) => {
+      setState(resource);
+      setLoading(false);
+    });
+  }, [getResource, isNew, params.id]);
+
+  if (loading || state === null) return <LoadingText lines={15} onPaper />;
+
+  return (
+    <>
+      <PageTitle title={state.resourceName} />
+      <>.................</>
+    </>
+  );
+};
+
+export default ResourceContainer;

src/features/resources/list/components/ResourcesContainer.js

@@ -1,10 +1,10 @@
 import React, { useState, useEffect, useMemo, useCallback } from "react";
 import { Checkbox, FormLabel } from "@material-ui/core";
 import MUIDataTable, { debounceSearchRender } from "mui-datatables";
-import { LoadingText } from "../../../components";
-import PageTitle from "../../../components/PageTitle";
-import { useResourcesApi, useDictionariesApi } from "../../../api";
-import { defaultResourcesFilters } from "../../../constants/resourcesConstants";
+import { LoadingText } from "../../../../components";
+import PageTitle from "../../../../components/PageTitle";
+import { useResourcesApi, useDictionariesApi } from "../../api";
+import { defaultResourcesFilters } from "../../../../constants/resourcesConstants";
 import { useTranslation } from "react-i18next";
 import ActionButton from "./ActionButton";
 import SecondaryActionsGroup from "./SecondaryActionsGroup";
@@ -13,7 +13,7 @@ import {
   FileCopyOutlined,
   OpenInNewOutlined
 } from "@material-ui/icons";
-import { useToast, useResourceSecurity } from "../../../hooks";
+import { useToast, useResourceSecurity } from "../../../../hooks";
 import { useHistory } from "react-router-dom";
 
 const __ROWS_PER_PAGE_OPTIONS = [10, 20, 50, 100];

src/hooks/index.js

@@ -1,4 +1,5 @@
 import { useToast } from "../contexts/ToastContext";
+import useHttpRequest from "./useHttpRequest";
 import useResourceSecurity from "./useResourceSecurity";
 
-export { useToast, useResourceSecurity };
+export { useToast, useHttpRequest, useResourceSecurity };