diff --git a/app/javascript/components/resources/ResourceList.jsx b/app/javascript/components/resources/ResourceList.jsx index 6283c96..5a02bc9 100644 --- a/app/javascript/components/resources/ResourceList.jsx +++ b/app/javascript/components/resources/ResourceList.jsx @@ -1,11 +1,14 @@ import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; import SearchBar from './SearchBar'; +import { useSearchParams, useNavigate } from 'react-router-dom'; export default function ResourceList() { + const [searchParams] = useSearchParams(); + const navigate = useNavigate(); const [resources, setResources] = useState([]); const [filteredResources, setFilteredResources] = useState([]); - const [pageNumber, setPageNumber] = useState(1); + const [pageState, setPageState] = useState({ pageNumber: 1, identifier: '', status: 'Any'}); useEffect(() => { (async () => { @@ -19,33 +22,36 @@ export default function ResourceList() { const data = await response.json(); // setResources(data.concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data)); // setFilteredResources(data.concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data)); - console.log(data[0]) setResources(data); - setFilteredResources(data); + + let filteredData = data; + if (pageState.identifier) { filteredData = filteredData.filter((resource) => resource.identifier === pageState.identifier); } + if (pageState.status === '@undefined') { filteredData = filteredData.filter((resource) => resource.status === undefined); } + else if (pageState.status && pageState.status != 'Any') { filteredData = filteredData.filter((resource) => resource.status === pageState.status); } + setFilteredResources(filteredData) })(); }, []); + function setURL(identifier, status, page) { + let url = '?'; + if (identifier) { url = url + 'identifier=' + identifier + '&'}; + if (status) { url = url + 'status=' + status + '&'}; + if (page) { url = url + 'page=' + page}; + navigate(url); + } + function handleIdentifierSearch(identifier) { console.log('Looking for id ' + identifier); - if(identifier === '') { - setFilteredResources(resources); - } else { - setFilteredResources(resources.filter((resource) => resource.identifier === identifier)); - setPageNumber(1); - } + + setURL(identifier, pageState.status, 1); } function handleStatusFilter(status) { - console.log('Filtering by status ' + status) - if(status === 'Any') { - setFilteredResources(resources); - } else { - if(status === 'undefined') { - status = undefined - } - setFilteredResources(resources.filter((resource) => resource.status === status)); - setPageNumber(1); + if(status === 'undefined') { + status = '@undefined' } + setURL(pageState.identifier, status, 1); + console.log('Filtering by status ' + status) } function nextPage() { @@ -64,6 +70,45 @@ export default function ResourceList() { height: 100%; ` + const queryIdentifier = searchParams.get('identifier'); + const queryStatus = searchParams.get('status'); + const queryPage = searchParams.get('page'); + + const newPageState = { ...pageState } + + console.log(filteredResources); + + if ( + (queryIdentifier && (queryIdentifier != pageState.identifier)) || + (queryStatus && (queryStatus != pageState.status)) || + (queryPage && (parseInt(queryPage) != pageState.pageNumber) && (queryPage - 1) * 50 < filteredResources.length) + ) { + + if (queryIdentifier && (queryIdentifier != pageState.identifier)) { + // console.log("changing identifier from " + pageState.identifier + " to " + queryIdentifier); + setFilteredResources(resources.filter((resource) => resource.identifier === queryIdentifier)); + newPageState.identifier = queryIdentifier; + } + if (queryStatus && (queryStatus != pageState.status)) { + // console.log("changing status from " + pageState.status + " to " + queryStatus); + setFilteredResources(filteredResources.filter((resource) => resource.status === queryStatus)); + newPageState.status = queryStatus; + } + if (queryPage && (queryPage != pageState.pageNumber) && queryPage * 50 < filteredResources.length) { + console.log("changing page number from " + pageState.pageNumber + " to " + queryPage); + newPageState.pageNumber = queryPage; + } else if (newPageState.identifier != pageState.identifier || newPageState.status != pageState.status) { + // Move to page 1 if a filter param was updated and the page isn't specified + newPageState.pageNumber = 1; + } + + console.log(pageState); + console.log(newPageState); + setPageState(newPageState); + } + + console.log(filteredResources); + return (
- + @@ -89,7 +134,7 @@ export default function ResourceList() { - {filteredResources.slice((pageNumber - 1) * 50, pageNumber * 50).map((resource) => + {filteredResources.slice((pageState.pageNumber - 1) * 50, pageState.pageNumber * 50).map((resource) => {resource.identifier} {resource.source_uri} @@ -105,7 +150,7 @@ export default function ResourceList() { {/*
    {resources.map((resource) =>
  1. {JSON.stringify(resource)}
  2. )}
*/}
- +