diff --git a/dist/esm/components/Assets/Catalog/index.js b/dist/esm/components/Assets/Catalog/index.js index a4dcc21..afba9d7 100644 --- a/dist/esm/components/Assets/Catalog/index.js +++ b/dist/esm/components/Assets/Catalog/index.js @@ -10,16 +10,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; import { useState, useEffect } from 'react'; import { Checkbox, TextInput, MultiSelect, Button, LoadingOverlay } from '@mantine/core'; -import { authHeader, egeriaFetch } from 'egeria-js-commons'; import { useSearchParams, useNavigate } from 'react-router-dom'; import { AgGridReact } from 'ag-grid-react'; import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; import QualifiedName from './qualified-name'; import DisplayNameCellRenderer from './displayNameCellRenderer'; -const QUERY_MIN_LENGTH = 3; -const TYPES_MIN_SELECTED = 1; -const PAGE_SIZE_INCREASE_VALUE = 25; +import { ASSET_CATALOG_PATH, PAGE_SIZE_INCREASE_VALUE, getQueryParams, getQueryParamsPath, fetchTypes, fetchRawData } from 'egeria-js-commons'; +/** + * Initial empty form value. + */ const emptyForm = { q: '', types: [], @@ -27,104 +27,27 @@ const emptyForm = { caseSensitive: false, pageSize: 25 }; +/** + * Initial types data value. + */ const emptyTypesData = []; -const getQueryParams = (searchParams) => { - var _a; - return { - q: searchParams.get('q') || '', - types: ((_a = searchParams.get('types')) === null || _a === void 0 ? void 0 : _a.split(',')) || [], - exactMatch: searchParams.get('exactMatch') === "true" ? true : false, - caseSensitive: searchParams.get('caseSensitive') === "true" ? true : false, - pageSize: searchParams.get('pageSize') ? parseInt(searchParams.get('pageSize')) : PAGE_SIZE_INCREASE_VALUE - }; -}; -const getQueryParamsPath = (formData) => { - const { q, exactMatch, caseSensitive, types, pageSize } = formData; - let queryParams = []; - if (q) { - queryParams.push(`q=${q}`); - } - if (types && types.length > 0) { - queryParams.push(`types=${types.join(',')}`); - } - if (exactMatch) { - queryParams.push(`exactMatch=true`); - } - if (caseSensitive) { - queryParams.push(`caseSensitive=true`); - } - if (types) { - queryParams.push(`pageSize=${pageSize}`); - } - return queryParams; -}; -const fetchData = (uri, method, callback) => __awaiter(void 0, void 0, void 0, function* () { - const res = yield egeriaFetch(uri, method, Object.assign({}, authHeader()), {}); - const data = yield res.json(); - if (callback) { - callback(data); - } - else { - return data; - } -}); -const fetchRawData = (formData, apiUrl) => __awaiter(void 0, void 0, void 0, function* () { - const { q, types } = formData; - if (q.length >= QUERY_MIN_LENGTH && types.length >= TYPES_MIN_SELECTED) { - const _queryParams = getQueryParamsPath(formData); - const path = `${apiUrl || ''}/api/assets/search${_queryParams.length ? `?${_queryParams.join('&')}` : ``}`; - const rawData = yield fetchData(path, 'GET'); - return rawData; - } - else { - return []; - } -}); -const fetchTypes = (apiUrl) => __awaiter(void 0, void 0, void 0, function* () { - let typesData = yield fetchData(`${apiUrl || ''}/api/assets/types`, 'GET'); - typesData = [ - ...typesData.map((d) => { - return { - value: d.name, - label: d.name - }; - }) - ]; - return typesData; -}); -const initData = (formData, callback, apiUrl) => __awaiter(void 0, void 0, void 0, function* () { - const typesData = yield fetchTypes(apiUrl); - const rawData = yield fetchRawData(formData, apiUrl); - if (callback) { - callback({ types: typesData, rawData: rawData }); - } -}); export function EgeriaAssetCatalog(props) { - // const [ URLSearchParams ] = useSearchParams(); + const { apiUrl } = props; const [searchParams, setSearchParams] = useSearchParams(); const queryParams = getQueryParams(searchParams); - // const { q, types, exactMatch, caseSensitive, pageSize } = searchParams; - // console.log(q, types, exactMatch, caseSensitive, pageSize); const navigate = useNavigate(); - const [data, setData] = useState({ + const [typesData, setTypesData] = useState({ + isLoading: false, + typesData: [...emptyTypesData, ...queryParams.types] + }); + const [form, setForm] = useState(Object.assign(Object.assign({}, emptyForm), queryParams)); + const [rowData, setRowData] = useState({ isLoading: false, - typesData: [...emptyTypesData, ...queryParams.types], - form: Object.assign(Object.assign({}, emptyForm), queryParams), rowData: [] }); - const { isLoading, rowData, typesData } = data; - useEffect(() => { - const _queryParams = getQueryParams(searchParams); - setData(Object.assign(Object.assign({}, data), { form: Object.assign({}, _queryParams) })); - }, [searchParams]); - // const [isLoading, setIsLoading] = useState(false); - // const [typesData, setTypesData] = useState([...emptyTypesData, ...queryParams.types]); - // const [formData, setFormData] = useState({...emptyForm, ...queryParams}); - // const [userFormData, setUserFormData] = useState({...emptyForm, ...queryParams}); - // const [rowData, setRowData]: any = useState([]); - const { apiUrl } = props; - // const { exactMatch, caseSensitive, q, types } = userFormData; - // const { pageSize } = formData; + /* + * Contains AGGrid data-table information and config. + */ const gridOptions = { suppressCellFocus: true, defaultColDef: { @@ -161,75 +84,66 @@ export function EgeriaAssetCatalog(props) { params.columnApi.autoSizeColumns(allColumnIds, true); } }; - // useEffect(() => { - // const bringTypes = async () => { - // const rawTypesData = await fetchTypes(apiUrl); - // setData({...data, typesData: [...rawTypesData]}); - // }; - // bringTypes(); - // }, []); - // useEffect(() => { - // const { form } = data; - // setData({...data, isLoading: true}); - // const queryData = async () => { - // const rowData = await fetchRawData(form, apiUrl); - // setData({ - // ...data, - // isLoading: false, - // rowData: [...rowData], - // form: { - // ...queryParams - // } - // }); - // }; - // queryData(); - // }, [URLSearchParams]); - // const submit = async () => { - // const { form } = data; - // goTo(form); - // // setData({ - // // ...data, - // // isLoading: true, - // // form: { - // // ...form - // // } - // // }); - // // const rowData = await fetchRawData(form, apiUrl); - // // setData({ - // // ...data, - // // isLoading: false, - // // rowData: [...rowData] - // // }); - // }; + useEffect(() => { + const _queryParams = getQueryParams(searchParams); + setForm(Object.assign({}, _queryParams)); + }, [searchParams]); + useEffect(() => { + setTypesData(Object.assign(Object.assign({}, typesData), { isLoading: true })); + const bringTypes = () => __awaiter(this, void 0, void 0, function* () { + const rawTypesData = yield fetchTypes(apiUrl); + setTypesData({ + isLoading: false, + typesData: [...rawTypesData] + }); + }); + bringTypes(); + }, []); + useEffect(() => { + const _queryParams = getQueryParams(searchParams); + setRowData(Object.assign(Object.assign({}, rowData), { isLoading: true })); + const queryData = () => __awaiter(this, void 0, void 0, function* () { + const _rowData = yield fetchRawData(Object.assign(Object.assign({}, form), _queryParams), apiUrl); + setRowData({ + isLoading: false, + rowData: [ + ..._rowData + ] + }); + }); + queryData(); + }, [searchParams]); + /* + * Submit handler for the main form. + */ const submit = () => { - const { form } = data; setSearchParams(form); - console.log('submitted'); }; + /* + * Submit handler for the main form on ENTER keypress. + */ const handleEnterPress = (e) => { if (e.key === 'Enter') { submit(); } }; - const loadMore = () => { }; - // const loadMore = () => { - // const { form } = data; - // const newPageSize = form.pageSize + PAGE_SIZE_INCREASE_VALUE; - // const newFormData = {...form, pageSize: newPageSize}; - // // TODO: check if last page (new array === last data array) - // setData({ - // ...data, - // form: { - // ...newFormData - // } - // }); - // goTo(newFormData); - // }; - // const goTo = (formData: formData) => { - // const path = `/assets/catalog`; - // const queryParams = getQueryParamsPath(formData); - // navigate(`${path}${queryParams.length ? `?${queryParams.join('&')}` : ``}` ); - // }; - console.log('data = ', data); - return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ style: { display: 'flex', alignItems: 'stretch', flexDirection: 'column', position: 'relative', height: '100%', } }, { children: [_jsx(LoadingOverlay, { visible: isLoading }), _jsxs("div", Object.assign({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10 } }, { children: [_jsx(TextInput, { mr: "xl", style: { minWidth: 180 }, placeholder: "Search", value: data.form.q, onKeyPress: handleEnterPress, onChange: (event) => setData(Object.assign(Object.assign({}, data), { form: Object.assign(Object.assign({}, data.form), { q: event.currentTarget.value }) })) }), _jsx(MultiSelect, { mr: "xl", style: { minWidth: 230 }, data: typesData, value: data.form.types, placeholder: "Types", onChange: (value) => setData(Object.assign(Object.assign({}, data), { form: Object.assign(Object.assign({}, data.form), { types: [...value] }) })) }), _jsx(Checkbox, { mr: "xl", label: 'Exact match', checked: data.form.exactMatch, onChange: (event) => setData(Object.assign(Object.assign({}, data), { form: Object.assign(Object.assign({}, data.form), { exactMatch: event.currentTarget.checked }) })) }), _jsx(Checkbox, { mr: "xl", label: 'Case sensitive', checked: data.form.caseSensitive, onChange: (event) => setData(Object.assign(Object.assign({}, data), { form: Object.assign(Object.assign({}, data.form), { caseSensitive: event.currentTarget.checked }) })) }), _jsx(Button, Object.assign({ onClick: () => submit() }, { children: "Search" }))] })), _jsx("div", Object.assign({ className: "ag-theme-alpine", style: { width: '100%', height: '100%' } }, { children: _jsx(AgGridReact, { gridOptions: gridOptions, rowData: rowData }) })), _jsx("div", { children: _jsx(Button, Object.assign({ size: "xs", compact: true, fullWidth: true, onClick: () => loadMore(), style: { marginBottom: 1, marginTop: 10 } }, { children: "Load more..." })) })] })) })); + /* + * Load more handler for loading more elements, pagintation. + */ + const loadMore = () => { + const newPageSize = form.pageSize + PAGE_SIZE_INCREASE_VALUE; + const newFormData = Object.assign(Object.assign({}, form), { pageSize: newPageSize }); + // TODO: check if last page (new array === last data array) + setForm(Object.assign({}, newFormData)); + goTo(newFormData); + }; + /* + * Method used to update current browser's URL. + */ + const goTo = (formData) => { + const path = ASSET_CATALOG_PATH; + const queryParams = getQueryParamsPath(formData); + navigate(`${path}${queryParams.length ? `?${queryParams.join('&')}` : ``}`); + }; + return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ style: { display: 'flex', alignItems: 'stretch', flexDirection: 'column', position: 'relative', height: '100%', } }, { children: [_jsx(LoadingOverlay, { visible: rowData.isLoading || typesData.isLoading }), _jsxs("div", Object.assign({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10 } }, { children: [_jsx(TextInput, { mr: "xl", style: { minWidth: 180 }, placeholder: "Search", value: form.q, onKeyPress: handleEnterPress, onChange: (event) => setForm(Object.assign(Object.assign({}, form), { q: event.currentTarget.value })) }), _jsx(MultiSelect, { mr: "xl", style: { minWidth: 230 }, data: typesData.typesData, value: form.types, placeholder: "Types", onChange: (value) => setForm(Object.assign(Object.assign({}, form), { types: [...value] })) }), _jsx(Checkbox, { mr: "xl", label: 'Exact match', checked: form.exactMatch, onChange: (event) => setForm(Object.assign(Object.assign({}, form), { exactMatch: event.currentTarget.checked })) }), _jsx(Checkbox, { mr: "xl", label: 'Case sensitive', checked: form.caseSensitive, onChange: (event) => setForm(Object.assign(Object.assign({}, form), { caseSensitive: event.currentTarget.checked })) }), _jsx(Button, Object.assign({ onClick: () => submit() }, { children: "Search" }))] })), _jsx("div", Object.assign({ className: "ag-theme-alpine", style: { width: '100%', height: '100%' } }, { children: _jsx(AgGridReact, { gridOptions: gridOptions, rowData: rowData.rowData }) })), _jsx("div", { children: _jsx(Button, Object.assign({ size: "xs", compact: true, fullWidth: true, onClick: () => loadMore(), style: { marginBottom: 1, marginTop: 10 } }, { children: "Load more..." })) })] })) })); } diff --git a/package-lock.json b/package-lock.json index ce0a1e9..10bafb4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,15 @@ { "name": "egeria-ui-components", - "version": "4.0.2", + "version": "4.0.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "egeria-ui-components", - "version": "4.0.2", + "version": "4.0.3", + "dependencies": { + "egeria-js-commons": "github:odpi/egeria-js-commons#4.0.1" + }, "devDependencies": { "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", @@ -26,7 +29,6 @@ "@mantine/next": "4.2.9", "ag-grid-community": "^28.1.1", "ag-grid-react": "^28.1.1", - "egeria-js-commons": "github:odpi/egeria-js-commons#4.0.0", "egeria-ui-core": "github:odpi/egeria-ui-core#4.0.1", "happi-graph": "github:odpi/happi-graph#4.0.0", "react": "^18.2.0", @@ -8507,10 +8509,9 @@ "dev": true }, "node_modules/egeria-js-commons": { - "version": "4.0.0", - "resolved": "git+ssh://git@github.com/odpi/egeria-js-commons.git#b450064d18445ea1959d98047fd0cebd7f9dafa1", - "license": "SEE LICENSE IN LICENSE", - "peer": true + "version": "4.0.1", + "resolved": "git+ssh://git@github.com/odpi/egeria-js-commons.git#1132113f0f23115f94e761f890ec6bfd4abeac77", + "license": "SEE LICENSE IN LICENSE" }, "node_modules/egeria-ui-core": { "version": "4.0.1", @@ -28677,9 +28678,8 @@ "dev": true }, "egeria-js-commons": { - "version": "git+ssh://git@github.com/odpi/egeria-js-commons.git#b450064d18445ea1959d98047fd0cebd7f9dafa1", - "from": "egeria-js-commons@github:odpi/egeria-js-commons#4.0.0", - "peer": true + "version": "git+ssh://git@github.com/odpi/egeria-js-commons.git#1132113f0f23115f94e761f890ec6bfd4abeac77", + "from": "egeria-js-commons@github:odpi/egeria-js-commons#4.0.1" }, "egeria-ui-core": { "version": "git+ssh://git@github.com/odpi/egeria-ui-core.git#2547a85bef13e89d75ac55c4daccbb9cbf72d6b5", diff --git a/package.json b/package.json index cf5a2eb..8012569 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "egeria-ui-components", - "version": "4.0.2", + "version": "4.0.3", "private": true, "files": [ "dist", @@ -15,7 +15,6 @@ "@mantine/next": "4.2.9", "ag-grid-community": "^28.1.1", "ag-grid-react": "^28.1.1", - "egeria-js-commons": "github:odpi/egeria-js-commons#4.0.0", "egeria-ui-core": "github:odpi/egeria-ui-core#4.0.1", "happi-graph": "github:odpi/happi-graph#4.0.0", "react": "^18.2.0", @@ -63,5 +62,8 @@ "node-sass": "^7.0.1", "react-scripts": "^5.0.1", "typescript": "^4.8.4" + }, + "dependencies": { + "egeria-js-commons": "github:odpi/egeria-js-commons#4.0.1" } } diff --git a/src/components/Assets/Catalog/index.tsx b/src/components/Assets/Catalog/index.tsx index 285ad0a..d51ef2a 100644 --- a/src/components/Assets/Catalog/index.tsx +++ b/src/components/Assets/Catalog/index.tsx @@ -1,6 +1,5 @@ import { useState, useEffect } from 'react'; import { Checkbox, TextInput, MultiSelect, Button, LoadingOverlay } from '@mantine/core'; -import { authHeader, egeriaFetch } from 'egeria-js-commons'; import { useSearchParams, useNavigate } from 'react-router-dom'; import { AgGridReact } from 'ag-grid-react'; @@ -10,166 +9,60 @@ import 'ag-grid-community/styles/ag-theme-alpine.css'; import QualifiedName from './qualified-name'; import DisplayNameCellRenderer from './displayNameCellRenderer'; -const QUERY_MIN_LENGTH = 3; -const TYPES_MIN_SELECTED = 1; -const PAGE_SIZE_INCREASE_VALUE = 25; - -interface formData { - caseSensitive: boolean, - exactMatch: boolean, - pageSize: number, - q: string, - types: Array -} - +import { + ASSET_CATALOG_PATH, + PAGE_SIZE_INCREASE_VALUE, + formData, + getQueryParams, + getQueryParamsPath, + fetchTypes, + fetchRawData +} from 'egeria-js-commons'; + +/** + * Initial empty form value. + */ const emptyForm: formData = { q: '', - types: [], + types: [] as any, exactMatch: false, caseSensitive: false, pageSize: 25 }; +/** + * Initial types data value. + */ const emptyTypesData: Array = []; -const getQueryParams = (searchParams: any) => { - return { - q: searchParams.get('q') || '', - types: searchParams.get('types')?.split(',') || [], - exactMatch: searchParams.get('exactMatch') === "true" ? true : false, - caseSensitive: searchParams.get('caseSensitive') === "true" ? true : false, - pageSize: searchParams.get('pageSize') ? parseInt(searchParams.get('pageSize')) : PAGE_SIZE_INCREASE_VALUE - }; -}; - -const getQueryParamsPath = (formData: formData) => { - const {q, exactMatch, caseSensitive, types, pageSize } = formData; - - let queryParams = []; - - if(q) { - queryParams.push(`q=${q}`); - } - - if(types && types.length > 0) { - queryParams.push(`types=${types.join(',')}`); - } - - if(exactMatch) { - queryParams.push(`exactMatch=true`); - } - - if(caseSensitive) { - queryParams.push(`caseSensitive=true`); - } - - if(types) { - queryParams.push(`pageSize=${pageSize}`); - } - - return queryParams; -}; - -const fetchData = async (uri: string, method: string, callback?: Function) => { - const res = await egeriaFetch(uri, method, {...authHeader()}, {}); - const data = await res.json(); - - if(callback) { - callback(data); - } else { - return data; - } -}; - -const fetchRawData = async (formData: formData, apiUrl?: string) => { - const {q, types} = formData; - - if(q.length >= QUERY_MIN_LENGTH && types.length >= TYPES_MIN_SELECTED) { - const _queryParams = getQueryParamsPath(formData); - const path = `${apiUrl || ''}/api/assets/search${_queryParams.length ? `?${_queryParams.join('&')}` : ``}`; - - const rawData = await fetchData(path, 'GET'); - - return rawData; - } else { - return []; - } -}; - -const fetchTypes = async (apiUrl?: string) => { - let typesData = await fetchData(`${apiUrl || ''}/api/assets/types`, 'GET'); - - typesData = [ - ...typesData.map((d: any) => { - return { - value: d.name, - label: d.name - }; - }) - ]; - - return typesData; -}; - -const initData = async (formData: formData, callback: Function, apiUrl?: string) => { - const typesData = await fetchTypes(apiUrl); - const rawData = await fetchRawData(formData, apiUrl); - - if(callback) { - callback({types: typesData, rawData: rawData}); - } -}; - interface Props { apiUrl?: string; } export function EgeriaAssetCatalog(props: Props) { - // const [ URLSearchParams ] = useSearchParams(); + const { apiUrl } = props; const [searchParams, setSearchParams] = useSearchParams(); const queryParams = getQueryParams(searchParams); - - // const { q, types, exactMatch, caseSensitive, pageSize } = searchParams; - - // console.log(q, types, exactMatch, caseSensitive, pageSize); - const navigate = useNavigate(); - const [data, setData] = useState({ + const [typesData, setTypesData] = useState({ isLoading: false, - typesData: [...emptyTypesData, ...queryParams.types], - form: { - ...emptyForm, - ...queryParams - }, - rowData: [] + typesData: [...emptyTypesData, ...queryParams.types] } as any); - const { isLoading, rowData, typesData } = data; - - useEffect(() => { - const _queryParams = getQueryParams(searchParams); - - setData({ - ...data, - form: { - ..._queryParams - } - }); - - }, [searchParams]); - - - // const [isLoading, setIsLoading] = useState(false); - // const [typesData, setTypesData] = useState([...emptyTypesData, ...queryParams.types]); - // const [formData, setFormData] = useState({...emptyForm, ...queryParams}); - // const [userFormData, setUserFormData] = useState({...emptyForm, ...queryParams}); - // const [rowData, setRowData]: any = useState([]); + const [form, setForm] = useState({ + ...emptyForm, + ...queryParams + } as any); - const { apiUrl } = props; - // const { exactMatch, caseSensitive, q, types } = userFormData; - // const { pageSize } = formData; + const [rowData, setRowData] = useState({ + isLoading: false, + rowData: [] as any + }); + /* + * Contains AGGrid data-table information and config. + */ const gridOptions = { suppressCellFocus: true, defaultColDef: { @@ -209,130 +102,120 @@ export function EgeriaAssetCatalog(props: Props) { } }; - // useEffect(() => { - // const bringTypes = async () => { - // const rawTypesData = await fetchTypes(apiUrl); + useEffect(() => { + const _queryParams = getQueryParams(searchParams); - // setData({...data, typesData: [...rawTypesData]}); - // }; + setForm({ + ..._queryParams + }); - // bringTypes(); - // }, []); + }, [searchParams]); - // useEffect(() => { - // const { form } = data; - // setData({...data, isLoading: true}); + useEffect(() => { + setTypesData({...typesData, isLoading: true}); - // const queryData = async () => { - // const rowData = await fetchRawData(form, apiUrl); + const bringTypes = async () => { + const rawTypesData = await fetchTypes(apiUrl); - // setData({ - // ...data, - // isLoading: false, - // rowData: [...rowData], - // form: { - // ...queryParams - // } - // }); - // }; + setTypesData({ + isLoading: false, + typesData: [...rawTypesData] + }); + }; - // queryData(); - // }, [URLSearchParams]); + bringTypes(); + }, []); - // const submit = async () => { - // const { form } = data; + useEffect(() => { + const _queryParams = getQueryParams(searchParams); - // goTo(form); + setRowData({...rowData, isLoading: true}); - // // setData({ - // // ...data, - // // isLoading: true, - // // form: { - // // ...form - // // } - // // }); + const queryData = async () => { + const _rowData = await fetchRawData({...form, ..._queryParams}, apiUrl); - // // const rowData = await fetchRawData(form, apiUrl); + setRowData({ + isLoading: false, + rowData: [ + ..._rowData + ] + }); + }; - // // setData({ - // // ...data, - // // isLoading: false, - // // rowData: [...rowData] - // // }); - // }; + queryData(); + }, [searchParams]); + /* + * Submit handler for the main form. + */ const submit = () => { - const { form } = data; - setSearchParams(form); - - console.log('submitted'); }; + /* + * Submit handler for the main form on ENTER keypress. + */ const handleEnterPress = (e: any) => { if(e.key === 'Enter') { submit(); } }; - const loadMore = () => { }; - - // const loadMore = () => { - // const { form } = data; - - // const newPageSize = form.pageSize + PAGE_SIZE_INCREASE_VALUE; - // const newFormData = {...form, pageSize: newPageSize}; + /* + * Load more handler for loading more elements, pagintation. + */ + const loadMore = () => { + const newPageSize = form.pageSize + PAGE_SIZE_INCREASE_VALUE; + const newFormData = {...form, pageSize: newPageSize}; - // // TODO: check if last page (new array === last data array) - // setData({ - // ...data, - // form: { - // ...newFormData - // } - // }); - - // goTo(newFormData); - // }; + // TODO: check if last page (new array === last data array) + setForm({ + ...newFormData + }); - // const goTo = (formData: formData) => { - // const path = `/assets/catalog`; - // const queryParams = getQueryParamsPath(formData); + goTo(newFormData); + }; - // navigate(`${path}${queryParams.length ? `?${queryParams.join('&')}` : ``}` ); - // }; + /* + * Method used to update current browser's URL. + */ + const goTo = (formData: formData) => { + const path = ASSET_CATALOG_PATH; + const queryParams = getQueryParamsPath(formData); - console.log('data = ', data); + navigate(`${path}${queryParams.length ? `?${queryParams.join('&')}` : ``}` ); + }; return ( <>
- +
setData({...data, form: {...data.form, q: event.currentTarget.value}})} /> + onChange={(event: any) => setForm({...form, q: event.currentTarget.value})} /> setData({...data, form: {...data.form, types: [...value]}})} /> + onChange={(value) => setForm({...form, types: [...value]})} /> setData({...data, form: {...data.form, exactMatch: event.currentTarget.checked}})} /> + checked={form.exactMatch} + onChange={(event) => setForm({...form, exactMatch: event.currentTarget.checked})} /> setData({...data, form: {...data.form, caseSensitive: event.currentTarget.checked}})} /> + checked={form.caseSensitive} + onChange={(event) => setForm({...form, caseSensitive: event.currentTarget.checked})} />