resources list

master
Tudor Stanciu 2022-12-05 03:00:33 +02:00
parent f674085345
commit 74689dbc93
5 changed files with 238 additions and 56 deletions

View File

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

View File

@ -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;

45
src/api/useHttpRequest.js Normal file
View File

@ -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;

View File

@ -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 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 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; return promise;
}, },
[call, defaultOptions] [exec]
); );
return { return {
getMimeTypes getResources
}; };
}; };

View File

@ -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"; import { useResourcesApi } from "../../../api";
const ResourcesContainer = () => { const ResourcesContainer = () => {
const [state, setState] = useState({ loaded: false }); const [list, setList] = useState({ loaded: false });
const { getMimeTypes } = useResourcesApi(); const { getResources } = useResourcesApi();
useEffect(() => { 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; export default ResourcesContainer;