Skip to content

Commit

Permalink
Updated to dynamically request resources one page at a time
Browse files Browse the repository at this point in the history
  • Loading branch information
@nwalker2398
nwalker2398 committed Feb 13, 2024
1 parent d385c87 commit 231c90d
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 34 deletions.
23 changes: 22 additions & 1 deletion app/controllers/api/v1/resources_controller.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,24 @@ def destroy

# GET /resources
def index
render json: Resource.limit(10).order(:id)
per_page = 50
status = params[:status]
page = Integer(params[:page])
identifier = params[:identifier]

resources = Resource
identifier && resources = resources.where(identifier: identifier)
status && status != 'Any' && resources = resources.where(status: status)
resources = resources.limit(per_page)
status && status != 'Any' && resources = resources.order(status)
render json:
resources
# Resource
# .where(identifier: identifier)
# # .find_by(status: status)
# .limit(per_page)
# .offset((page - 1) * per_page).order(status)

end

private
Expand All @@ -60,6 +77,10 @@ def set_resource
def create_params
params.require(:resource).permit(:source_uri, :featured_region, :pcdm_type)
end

def index_params
params.require(:resource).permit(:status, :page, :pcdm_type)
end
end
end
end
54 changes: 24 additions & 30 deletions app/javascript/components/resources/ResourceList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,31 @@ import styled from 'styled-components';
import SearchBar from './SearchBar';
import { useSearchParams, useNavigate } from 'react-router-dom';

const filterChoices = ['Pending', 'Processing', 'Failure', 'Ready'];

export default function ResourceList() {
const [searchParams] = useSearchParams();
const navigate = useNavigate();
const [resources, setResources] = useState([]);
const [filteredResources, setFilteredResources] = useState([]);
const [pageState, setPageState] = useState({ pageNumber: 1, identifier: '', status: 'Any'});
const [pageState, setPageState] = useState({ identifier: '', status: 'Any', pageNumber: 1});

useEffect(() => {
console.log(searchParams.identifier)
let fetch_url ='/api/v1/resources?'
if (pageState.identifier) {fetch_url += `identifier=${pageState.identifier}&`;}
if (pageState.status) {fetch_url += `status=${pageState.status}&`;}
fetch_url += `page=${pageState.pageNumber ? pageState.pageNumber : 1}`;
console.log(fetch_url);
(async () => {
const response = await fetch(
'/api/v1/resources',
{
headers: {
'Authorization': 'Token changethis'
}
});
const response = await fetch(fetch_url);
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));
setResources(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)
console.log('data:');
console.log(data);
setFilteredResources(data);
})();
}, []);
}, [searchParams]);

function setURL(identifier, status, page) {
let url = '?';
Expand All @@ -41,8 +38,6 @@ export default function ResourceList() {
}

function handleIdentifierSearch(identifier) {
console.log('Looking for id ' + identifier);

setURL(identifier, pageState.status, 1);
}

Expand All @@ -51,18 +46,17 @@ export default function ResourceList() {
status = '@undefined'
}
setURL(pageState.identifier, status, 1);
console.log('Filtering by status ' + status)
}

function nextPage() {
if(pageNumber * 50 < filteredResources.length) {
setPageNumber(pageNumber + 1);
if(filteredResources.length == 50) {
setURL(pageState.identifier, pageState.status, pageState.pageNumber + 1);
}
}

function prevPage() {
if(pageNumber > 1) {
setPageNumber(pageNumber - 1);
if(pageState.pageNumber > 1) {
setURL(pageState.identifier, pageState.status, pageState.pageNumber - 1);
}
}

Expand All @@ -76,8 +70,6 @@ export default function ResourceList() {

const newPageState = { ...pageState }

console.log(filteredResources);

if (
(queryIdentifier && (queryIdentifier != pageState.identifier)) ||
(queryStatus && (queryStatus != pageState.status)) ||
Expand All @@ -86,16 +78,16 @@ export default function ResourceList() {

if (queryIdentifier && (queryIdentifier != pageState.identifier)) {
// console.log("changing identifier from " + pageState.identifier + " to " + queryIdentifier);
setFilteredResources(resources.filter((resource) => resource.identifier === 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));
// 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);
// 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
Expand All @@ -112,7 +104,9 @@ export default function ResourceList() {
return (
<div>
<SearchBar
filterChoices={[...new Set(resources.map((resource) => {return resource.status}))]}
filterChoices={filterChoices}
filterDefault={pageState.status}
searchDefault={pageState.identifier}
onSearch={handleIdentifierSearch}
onFilter={handleStatusFilter}
/>
Expand Down
6 changes: 3 additions & 3 deletions app/javascript/components/resources/SearchBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,22 @@ import React, {useRef} from 'react';

// const STATUSES = [1, 2, 3, 4];

export default function SearchBar({filterChoices, onSearch, onFilter}) {
export default function SearchBar({filterChoices, filterDefault, searchDefault, onSearch, onFilter}) {
const identifierInput = useRef();

return (
<div>
<p>
<label>Filter by status: </label>
<select name="status" onChange={(event) => {return onFilter(event.target.value)}}>
<select name="status" value={filterDefault} onChange={(event) => {return onFilter(event.target.value)}}>
<option key={-1} value={'Any'}>Any</option>
{filterChoices.map((status) => {
return <option key={filterChoices.indexOf(status)} value={status + ''}>{status}</option>
})}
</select>
<label> </label>
<label>Search for Identifier: </label>
<input ref={identifierInput}/>
<input ref={identifierInput} value={searchDefault}/>
<label> </label>
<button onClick={() => onSearch(identifierInput.current.value)}>search</button>
</p>
Expand Down

0 comments on commit 231c90d

Please sign in to comment.