Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Brenna/pagination #222

Open
wants to merge 28 commits into
base: main
Choose a base branch
from
Open

Brenna/pagination #222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
18b401d
Converted applicant table to TanStack v8 Table
brennakj3 Oct 26, 2023
c35f1a3
Fixed pagination styling, added sorting
brennakj3 Oct 27, 2023
a199512
Adjusted dropdown to load in current piStatus, added date applied
brennakj3 Oct 27, 2023
00b4e65
Fixed tags to update piStatus when tag is changed
brennakj3 Oct 29, 2023
fc87fab
Added search bar (global filtering)
brennakj3 Oct 29, 2023
47115bb
Added API to update a piStatus
brennakj3 Nov 2, 2023
d3ecf6c
Added custom sort for graduation quarter
brennakj3 Nov 8, 2023
829c4e2
Changed pagination to server-side and adjusted overflow behavior for …
brennakj3 Nov 12, 2023
56d31d0
Adjusted API for applicants to return labeledJobs and added API to ge…
brennakj3 Nov 12, 2023
2af7216
Install @tanstack/react-table
joseph082 Nov 13, 2023
0aa72e2
Ensure Student has applied to the Job
joseph082 Nov 13, 2023
4654567
Get email for each applicant
joseph082 Nov 13, 2023
8c81976
Merge branch 'main' into brenna/pagination
joseph082 Nov 13, 2023
2b82875
Update pages to say 0-0 of 0 when there are no applicants
brennakj3 Nov 21, 2023
f27725b
Fixed table data not updating on dropdown change, adjusted query to o…
brennakj3 Nov 29, 2023
38f8f05
Fix tag dropdown to show entire menu
brennakj3 Jan 5, 2024
e621df5
Add resume links to applicant manager
brennakj3 Jan 9, 2024
3691f65
Added popperjs and react-popper to package
brennakj3 Jan 19, 2024
01df482
Merge branch 'main' into brenna/pagination
brennakj3 Jan 19, 2024
b254923
Merge branch 'main' into brenna/pagination
joseph082 Jan 19, 2024
1ff9dc1
Fix lint errors
joseph082 Jan 18, 2024
e74c66f
Changed resume links to fetch all before table display
brennakj3 Jan 20, 2024
43cb9da
Merge branch 'brenna/pagination' of https://github.com/ucladevx/brese…
brennakj3 Jan 20, 2024
6011173
Fixed resume fetch for applications < 5
brennakj3 Feb 3, 2024
54fa997
Adjusted background, added sidebar, fixed error handling
brennakj3 Mar 7, 2024
a07757a
Merge branch 'main' into brenna/pagination
brennakj3 Apr 19, 2024
d2c0c01
Removed background color in globals
brennakj3 Apr 19, 2024
d5144f1
Re-added title and head elements
brennakj3 May 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@
"react-datepicker": "4.21.0",
"react-dom": "18.2.0",
"react-dropzone": "14.2.3",
"react-popper": "2.3.0",
"react-hook-form": "7.48.2",
"react-popper": "2.3.0",
"react-quill": "2.0.0",
"react-select": "5.7.3"
},
Expand Down
98 changes: 56 additions & 42 deletions pages/app-manager/[jobId].jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { useState, useEffect, useMemo } from 'react';
import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/20/solid';
import { ArrowDownIcon, ArrowUpIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { useQuery, QueryClient, useQueryClient, QueryClientProvider } from '@tanstack/react-query';

import ResearcherSidebar from '../../components/ResearcherSidebar.jsx';
import {
Table as ReactTable,
useReactTable,
Expand All @@ -19,7 +19,7 @@ import {
getFilteredRowModel,
getSortedRowModel,
} from '@tanstack/react-table';

//&pageSize=${pageSize}
async function fetchApplicants(router, pageIndex, pageSize) {
if (!router.isReady) {
return;
Expand All @@ -36,15 +36,15 @@ async function fetchApplicants(router, pageIndex, pageSize) {
}
);
if (res.status === 200) {
const data = await res.json();
// console.log(data);
return data;
}
const data = await res.json();
// console.log(data);
return data;
} catch (e) {
throw e;
throw new Promise.reject(Error('Network response was not OK'));
}
}

//${profileId}
async function fetchResume(router, profileId) {
if (!router.isReady) {
return;
Expand All @@ -57,15 +57,15 @@ async function fetchResume(router, profileId) {
},
});
if (res.status === 200) {
const data = await res.json();
//console.log(data);
return data;
}
const data = await res.json();
//console.log(data);
return data;
} catch (e) {
throw e;
}
}

//${jobId}/
async function fetchApplicantCount(router) {
if (!router.isReady) {
return;
Expand All @@ -79,10 +79,10 @@ async function fetchApplicantCount(router) {
},
});
if (res.status === 200) {
const data = await res.json();
//console.log(data);
return data;
}
const data = await res.json();
// console.log({ data });
return data;
} catch (e) {
throw e;
}
Expand All @@ -91,28 +91,33 @@ const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchOnMount: true,
retry: false,
staleTime: 1000 * 60 * 60, //1 hour -- could make it more or less
},
},
});
//Applicant Manager page
export default function ApplicantManager() {
//Main page display
//ml-28 mt-8 mb-8
return (
<QueryClientProvider client={queryClient}>
<Head>
<title>Manage Applicants</title>
</Head>
<div className="z-1 w-full h-full m-0 bg-cover bg-neutral-100 overflow-y-auto">
<h1 className="text-2xl font-bold justify-self-left ml-28 mt-8 mb-8">Manage Applicants</h1>
<div className="mb-10">
<ApplicantTable />
<>
<QueryClientProvider client={queryClient}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Keep the Head and title elements

<Head>
<title>Manage Applicants</title>
</Head>
<div className="min-h-screen w-full flex flex-col ">
<ResearcherSidebar />
<div className="min-h-screen pl-64 bg-cover bg-neutral-100 pl-10 overflow-y-auto">
<h1 className="text-2xl font-bold justify-self-left ml-28 mt-8 mb-8">
Manage Applicants
</h1>
<div className="mb-10">
<ApplicantTable />
</div>
</div>
</div>
</div>
</QueryClientProvider>
</QueryClientProvider>
</>
);
}

Expand All @@ -128,6 +133,7 @@ const ApplicantTable = () => {
pageIndex: 0,
pageSize: 5,
});
const defaultData = useMemo(() => [], []);

//TODO: Update all page sections to use cursor instead, set pageSize to negative when requesting previous page and abs when setting next page

Expand All @@ -142,8 +148,8 @@ const ApplicantTable = () => {
const applicantCountQuery = useQuery({
queryKey: ['applicants-count', router],
queryFn: () => fetchApplicantCount(router),
keepPreviousData: true,
staleTime: Infinity,
placeholderData: 0,
});

const applicantQuery = useQuery({
Expand All @@ -153,6 +159,7 @@ const ApplicantTable = () => {
staleTime: 60 * 60 * 1000,
keepPreviousData: true,
enabled: !!applicantCount,
placeholderData: defaultData,
});

const columns = useMemo(
Expand Down Expand Up @@ -301,7 +308,10 @@ const ApplicantTable = () => {
queryFn: () => fetchResume(router, id),
});
//Ensure Profile IDs and Resumes are 1:1 matched
if (profileIds[id] === null) {
if (!resumeData) {
//add toast error
}
if (profileIds[id] === null && resumeData) {
profileIds[id] = resumeData.url;
resumesRetrieved += 1;
}
Expand All @@ -323,7 +333,14 @@ const ApplicantTable = () => {
};

useEffect(() => {
if (applicantQuery.data) {
if (applicantQuery.status === 'error') {
queryClient.setQueryData(['applicants', router, pageIndex, pageSize], defaultData); //TODO: add toast
}
if (applicantCountQuery.status === 'error') {
queryClient.setQueryData(['applicants-count', router], 0); //TODO: add toast
}
if (applicantQuery.status === 'success') {
//console.log(applicantQuery);
let dataForTable = applicantQuery.data;
/*Fetching Resume Links from Profile IDs and add to applicant data for table */
//Loop to get all profile IDs
Expand Down Expand Up @@ -355,7 +372,6 @@ const ApplicantTable = () => {
}
}, [applicantCountQuery, pageSize, applicantQuery]);

const defaultData = useMemo(() => [], []);
const table = useReactTable({
data: data ?? defaultData,
columns,
Expand Down Expand Up @@ -414,14 +430,14 @@ const ApplicantTable = () => {
<DebouncedInput
initialvalue={globalFilter ?? ''}
onChange={(value) => setGlobalFilter(String(value))}
className="p-2 text-base text-[#8b8b8b] outline-none"
className="p-2 text-lg text-[#8b8b8b] outline-none"
placeholder="Search..."
/>
</div>
</div>
<div className="relative overflow-x-auto">
<table className="table-fixed min-w-[950px] w-full text-sm text-left text-gray-500 dark:text-gray-400 ">
<thead className="text-base font-medium text-gray-700 border-b bg-white dark:bg-gray-700 dark:text-gray-400">
<table className="table-fixed min-w-[950px] w-full text-base text-left text-gray-500 dark:text-gray-400 ">
<thead className="text-xl font-medium text-gray-700 border-b bg-white dark:bg-gray-700 dark:text-gray-400">
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
Expand Down Expand Up @@ -490,14 +506,12 @@ const ApplicantTable = () => {
? 1 + table.getState().pagination.pageIndex * table.getState().pagination.pageSize
: '0'}
-
{table.getCanNextPage() ? (
(table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize
) : applicantCountQuery?.isLoading ? (
<div>Loading...</div>
) : (
applicantCount
)}{' '}
of {applicantCountQuery?.isLoading ? <div>Loading...</div> : applicantCount}
{table.getCanNextPage()
? (table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize
: applicantCountQuery?.isError
? 0
: applicantCount}{' '}
of {applicantCountQuery?.isError ? 0 : applicantCount}
</span>

<button
Expand Down
Loading