diff --git a/src/App/App.styles.scss b/src/App/App.styles.scss index dc2299e..85a5aee 100644 --- a/src/App/App.styles.scss +++ b/src/App/App.styles.scss @@ -66,12 +66,17 @@ body { // } .jobs-list-container { height: 100%; + display: flex; + flex-direction: column; + // padding-bottom: 10px; } .jobs-list-infinite-container { overflow-y: auto; overflow-x: hidden; height: 100%; + flex: 1; + padding-bottom: 30px; } //Required for the tab with infinite loading diff --git a/src/components/organisms/jobs-list-latest/jobs-list-latest.organism.jsx b/src/components/organisms/jobs-list-latest/jobs-list-latest.organism.jsx index 6fce11f..9772d10 100644 --- a/src/components/organisms/jobs-list-latest/jobs-list-latest.organism.jsx +++ b/src/components/organisms/jobs-list-latest/jobs-list-latest.organism.jsx @@ -1,6 +1,5 @@ -import { SyncOutlined } from "@ant-design/icons"; import { useQuery } from "@apollo/client"; -import { Dropdown, List, Menu, Spin } from "antd"; +import { List } from "antd"; import React, { useState } from "react"; import InfiniteScroll from "react-infinite-scroller"; import { QUERY_ALL_JOBS_PAGINATED } from "../../../graphql/jobs.queries"; @@ -22,21 +21,14 @@ export default function JobsTableOrganism() { } ); - const menu = ( -
- ); - - const handleInfiniteOnLoad = (page) => { - fetchMore && - fetchMore({ + const handleInfiniteOnLoad = async (page) => { + console.log("Fetching more records!", page, fetchMore); + if (fetchMore) { + await fetchMore({ variables: { offset: limit * page, }, + updateQuery: (prev, { fetchMoreResult }) => { if (!fetchMoreResult) { console.log("No more results. Fetch More was empty."); @@ -49,8 +41,8 @@ export default function JobsTableOrganism() { }); if ( - newCache.jobs.length >= data && - data.jobs_aggregate.aggregate.count + newCache.jobs.length >= + (data && data.jobs_aggregate.aggregate.count) ) { console.log("No more results."); setState({ ...state, hasMore: false }); @@ -59,6 +51,11 @@ export default function JobsTableOrganism() { return newCache; }, }); + // if (data.jobs.length >= data.jobs_aggregate.aggregate.count) { + // console.log("No more results."); + // setState({ ...state, hasMore: false }); + // } + } }; if (error) @@ -77,22 +74,16 @@ export default function JobsTableOrganism() { loadMore={handleInfiniteOnLoad} hasMore={!loading && state.hasMore} useWindow={false} + threshold={30} > -