From 74689dbc93d497fa409634336f597fc868320a69 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Mon, 5 Dec 2022 03:00:33 +0200 Subject: [PATCH] resources list --- src/api/index.js | 3 +- src/api/useDictionariesApi.js | 26 ++++ src/api/useHttpRequest.js | 45 ++++++ src/api/useResourcesApi.js | 89 ++++++------ .../components/ResourcesContainer.js | 131 ++++++++++++++++-- 5 files changed, 238 insertions(+), 56 deletions(-) create mode 100644 src/api/useDictionariesApi.js create mode 100644 src/api/useHttpRequest.js diff --git a/src/api/index.js b/src/api/index.js index ecdcff5..10a030f 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -1,3 +1,4 @@ +import useDictionariesApi from "./useDictionariesApi"; import useResourcesApi from "./useResourcesApi"; -export { useResourcesApi }; +export { useDictionariesApi, useResourcesApi }; diff --git a/src/api/useDictionariesApi.js b/src/api/useDictionariesApi.js new file mode 100644 index 0000000..1e00f5b --- /dev/null +++ b/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; diff --git a/src/api/useHttpRequest.js b/src/api/useHttpRequest.js new file mode 100644 index 0000000..5758548 --- /dev/null +++ b/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; diff --git a/src/api/useResourcesApi.js b/src/api/useResourcesApi.js index fef78bb..885e5f1 100644 --- a/src/api/useResourcesApi.js +++ b/src/api/useResourcesApi.js @@ -1,59 +1,58 @@ -import { useCallback, useMemo } from "react"; -import { useToast } from "../context/ToastContext"; -import { get, post } from "../utils/axios"; +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`, - resources: `${cdn}/admin/resources` + +const defaultResourcesInput = { + 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( - (err) => { - const message = `${err.title} ${err.correlationId}`; - error(message); - }, - [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); + const getResources = useCallback( + (filters, options) => { + const input = { ...defaultResourcesInput, ...filters }; + const endpoint = getResourcesEndpoint(input); + const promise = exec(() => get(endpoint), options); return promise; }, - [call, defaultOptions] + [exec] ); return { - getMimeTypes + getResources }; }; diff --git a/src/features/resources/components/ResourcesContainer.js b/src/features/resources/components/ResourcesContainer.js index bc2bd96..e749c0d 100644 --- a/src/features/resources/components/ResourcesContainer.js +++ b/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 { getMimeTypes } = useResourcesApi(); + const [list, setList] = useState({ loaded: false }); + const { getResources } = useResourcesApi(); useEffect(() => { - getMimeTypes({ - onCompleted: (data) => { - const dta = Object.assign(data, { loaded: true }); - setState(dta); + getResources( + {}, + { + onCompleted: (resources) => { + const data = Object.assign(resources, { loaded: true }); + setList(data); + } } - }); - }, [getMimeTypes]); + ); + }, [getResources]); - return
I'm alive!
; + 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 ( + + ); + } + } + } + ], + [] + ); + + return ( + <> + + {list.loaded === false ? ( + + ) : ( + + + + + + )} + + ); }; export default ResourcesContainer;