resources list

src/api/index.js

@@ -1,3 +1,4 @@
+import useDictionariesApi from "./useDictionariesApi";
 import useResourcesApi from "./useResourcesApi";
 
-export { useResourcesApi };
+export { useDictionariesApi, useResourcesApi };

src/api/useDictionariesApi.js

@@ -0,0 +1,26 @@
+import { useCallback } from "react";
+import useHttpRequest from "./useHttpRequest";
+import { get } from "../utils/axios";
+
+const cdn = process.env.REACT_APP_CDN_URL;
+const endpoints = {
+  mimeTypes: `${cdn}/admin/mime-types`
+};
+
+const useDictionariesApi = () => {
+  const { exec } = useHttpRequest();
+
+  const getMimeTypes = useCallback(
+    (options) => {
+      const promise = exec(() => get(endpoints.mimeTypes), options);
+      return promise;
+    },
+    [exec]
+  );
+
+  return {
+    getMimeTypes
+  };
+};
+
+export default useDictionariesApi;

src/api/useHttpRequest.js

@@ -0,0 +1,45 @@
+import { useCallback, useMemo } from "react";
+import { useToast } from "../context/ToastContext";
+
+const useHttpRequest = () => {
+  const { error } = useToast();
+
+  const handleError = useCallback(
+    (err) => {
+      const message = `${err.title} ${err.correlationId}`;
+      error(message);
+    },
+    [error]
+  );
+
+  const defaultOptions = useMemo(
+    () => ({
+      onCompleted: () => {},
+      onError: handleError
+    }),
+    [handleError]
+  );
+
+  const exec = useCallback(
+    async (request, options) => {
+      const internalOptions = { ...defaultOptions, ...options };
+      const { onCompleted, onError } = internalOptions;
+
+      try {
+        const result = await request();
+        onCompleted(result);
+        return result;
+      } catch (error) {
+        onError(error);
+        throw error;
+      }
+    },
+    [defaultOptions]
+  );
+
+  return {
+    exec
+  };
+};
+
+export default useHttpRequest;

src/api/useResourcesApi.js

@@ -1,59 +1,58 @@
-import { useCallback, useMemo } from "react";
+import { useCallback } from "react";
-import { useToast } from "../context/ToastContext";
+import useHttpRequest from "./useHttpRequest";
-import { get, post } from "../utils/axios";
+import { get } from "../utils/axios";
 
 const cdn = process.env.REACT_APP_CDN_URL;
-const endpoints = {
+
-  mimeTypes: `${cdn}/admin/mime-types`,
+const defaultResourcesInput = {
-  resources: `${cdn}/admin/resources`
+  page: 1,
+  pageSize: 10,
+  sortBy: null,
+  sortDirection: 0,
+  fullTextSearch: null,
+  resourceCode: null,
+  resourceName: null,
+  categoryId: null,
+  secured: null
+};
+
+const getResourcesEndpoint = (filters) => {
+  const {
+    page,
+    pageSize,
+    sortBy,
+    sortDirection,
+    fullTextSearch,
+    resourceCode,
+    resourceName,
+    categoryId,
+    secured
+  } = filters;
+  let endpoint = `${cdn}/admin/resources?Page=${page}&PageSize=${pageSize}&SortDirection=${sortDirection}`;
+  if (sortBy) endpoint += `&SortBy=${sortBy}`;
+  if (fullTextSearch) endpoint += `&FullTextSearch=${fullTextSearch}`;
+  if (resourceCode) endpoint += `&ResourceCode=${resourceCode}`;
+  if (resourceCode) endpoint += `&ResourceName=${resourceName}`;
+  if (categoryId) endpoint += `&CategoryId=${categoryId}`;
+  if (secured) endpoint += `&Secured=${secured}`;
+  return endpoint;
 };
 
 const useResourcesApi = () => {
-  const { error } = useToast();
+  const { exec } = useHttpRequest();
 
-  const handleError = useCallback(
+  const getResources = useCallback(
-    (err) => {
+    (filters, options) => {
-      const message = `${err.title} ${err.correlationId}`;
+      const input = { ...defaultResourcesInput, ...filters };
-      error(message);
+      const endpoint = getResourcesEndpoint(input);
-    },
+      const promise = exec(() => get(endpoint), options);
-    [error]
-  );
-
-  const defaultOptions = useMemo(
-    () => ({
-      onCompleted: () => {},
-      onError: handleError
-    }),
-    [handleError]
-  );
-
-  const call = useCallback(
-    async (request, options) => {
-      const internalOptions = { ...defaultOptions, ...options };
-      const { onCompleted, onError } = internalOptions;
-
-      try {
-        const result = await request();
-        onCompleted(result);
-        return result;
-      } catch (error) {
-        onError(error);
-        throw error;
-      }
-    },
-    [defaultOptions]
-  );
-
-  const getMimeTypes = useCallback(
-    (options = defaultOptions) => {
-      const promise = call(() => get(endpoints.mimeTypes), options);
       return promise;
     },
-    [call, defaultOptions]
+    [exec]
   );
 
   return {
-    getMimeTypes
+    getResources
   };
 };
 

src/features/resources/components/ResourcesContainer.js

@@ -1,20 +1,131 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
+import { Grid, CircularProgress, Checkbox } from "@material-ui/core";
+import MUIDataTable from "mui-datatables";
+import PageTitle from "../../../components/PageTitle";
 import { useResourcesApi } from "../../../api";
 
 const ResourcesContainer = () => {
-  const [state, setState] = useState({ loaded: false });
+  const [list, setList] = useState({ loaded: false });
-  const { getMimeTypes } = useResourcesApi();
+  const { getResources } = useResourcesApi();
 
   useEffect(() => {
-    getMimeTypes({
+    getResources(
-      onCompleted: (data) => {
+      {},
-        const dta = Object.assign(data, { loaded: true });
+      {
-        setState(dta);
+        onCompleted: (resources) => {
+          const data = Object.assign(resources, { loaded: true });
+          setList(data);
+        }
       }
-    });
+    );
-  }, [getMimeTypes]);
+  }, [getResources]);
 
-  return <div>I'm alive!</div>;
+  const columns = useMemo(
+    () => [
+      {
+        label: "Code",
+        name: "resourceCode",
+        options: {
+          display: true,
+          draggable: true,
+          download: false,
+          print: false,
+          searchable: true,
+          sort: true,
+          filter: true,
+          filterType: "textField",
+          filterList: undefined,
+          hint: undefined
+        }
+      },
+      {
+        label: "Name",
+        name: "resourceName",
+        options: {
+          display: true,
+          draggable: true,
+          download: false,
+          print: false,
+          searchable: true,
+          sort: true,
+          filter: true,
+          filterType: "textField",
+          filterList: undefined,
+          hint: undefined
+        }
+      },
+      {
+        label: "Category",
+        name: "categoryId",
+        options: {
+          display: true,
+          draggable: true,
+          download: false,
+          print: false,
+          searchable: true,
+          sort: true,
+          filter: true,
+          filterType: "dropdown",
+          filterList: [],
+          hint: undefined
+        }
+      },
+      {
+        label: "Secured",
+        name: "secured",
+        options: {
+          display: true,
+          draggable: true,
+          download: false,
+          print: false,
+          searchable: true,
+          sort: true,
+          filter: true,
+          filterType: "checkbox",
+          filterList: undefined,
+          hint: undefined,
+          customBodyRender: (value, tableMeta, updateValue) => {
+            return (
+              <Checkbox
+                disabled
+                size="small"
+                checked={value}
+                style={{ padding: "0" }}
+              />
+            );
+          }
+        }
+      }
+    ],
+    []
+  );
+
+  return (
+    <>
+      <PageTitle title="ResourcesX" />
+      {list.loaded === false ? (
+        <CircularProgress size={26} />
+      ) : (
+        <Grid container spacing={4}>
+          <Grid item xs={12}>
+            <MUIDataTable
+              title="Resources"
+              columns={columns}
+              data={list.values ?? []}
+              options={{
+                filterType: "textField",
+                expandableRows: false,
+                print: false,
+                selectableRows: false,
+                rowsPerPage: 10,
+                rowsPerPageOptions: [10, 20, 50, 100]
+              }}
+            />
+          </Grid>
+        </Grid>
+      )}
+    </>
+  );
 };
 
 export default ResourcesContainer;