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.

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

Migrate changes to main #171

Merged
merged 12 commits into from
Aug 11, 2023
Prev Previous commit
Next Next commit
fix: added persiting of pageNum and using useQueries to make a promis…
…e.all call
  • Loading branch information
0tuedon authored and Extheoisah committed Aug 11, 2023
commit ee2e9e6538fdb01d6b1eceaf3153b3d02e0f1202
26 changes: 10 additions & 16 deletions src/components/tables/CurrentJobsTable.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useUserReviews } from "@/services/api/reviews";
import { useUserMultipleReviews } from "@/services/api/reviews";
import {
calculateReadingTime,
convertStringToArray,
Expand All @@ -18,29 +18,23 @@ import Image from "next/image";
const CurrentJobsTable = () => {
const { data: userSession } = useSession();
const {
data: activeReviews,
data: multipleStatusData,
isLoading,
isError,
refetch,
} = useUserReviews({
} = useUserMultipleReviews({
userId: userSession?.user?.id,
status: "active",
});
const { data: pendingReviews } = useUserReviews({
userId: userSession?.user?.id,
status: "pending",
multipleStatus: ["active"],
});

const router = useRouter();

const tableData = useMemo(() => {
let _activeData = activeReviews?.data ?? [];
let _pendingData = pendingReviews?.data ?? [];
let cummulativeCurrentJobs = _activeData.concat(_pendingData);
if (!cummulativeCurrentJobs.length) return [];
let allData = multipleStatusData?.data ?? [];
if (!allData.length) return [];

// return data restructured as ReviewTranscript[]
return cummulativeCurrentJobs.map((item) => {
return allData.map((item) => {
const { transcript, ...rest } = item;
return {
...transcript,
Expand All @@ -49,11 +43,11 @@ const CurrentJobsTable = () => {
},
};
}) as ReviewTranscript[];
}, [activeReviews, pendingReviews]);
}, [multipleStatusData]);

const ActionComponent = useCallback(
({ data }: { data: ReviewTranscript }) => {
const pendingIndex = pendingReviews?.data?.findIndex(
const pendingIndex = multipleStatusData?.data?.findIndex(
(review) => review.id === data.review?.id
);
const isPending = pendingIndex !== -1;
Expand Down Expand Up @@ -81,7 +75,7 @@ const CurrentJobsTable = () => {
</>
);
},
[pendingReviews, router]
[multipleStatusData, router]
);

const tableStructure = useMemo(
Expand Down
17 changes: 15 additions & 2 deletions src/components/tables/Pagination.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,32 @@
import { Button, Flex, Text } from "@chakra-ui/react";
import React, { Dispatch, SetStateAction } from "react";
import { useRouter } from "next/router";
import React, { Dispatch, SetStateAction, useLayoutEffect } from "react";

type IPagination = {
pages: number;
currentPage: number;
setCurrentPage: Dispatch<SetStateAction<number>>;
};
const Pagination = ({ pages, currentPage, setCurrentPage }: IPagination) => {
const router = useRouter();
const handleNextPage = (page: number) => {
router.replace({
query: { ...router.query, pageNum: page },
});
setCurrentPage(page);
};
useLayoutEffect(() => {
if (router.query?.pageNum) {
setCurrentPage(Number(router.query?.pageNum as string));
}
}, [router.query.pageNum, setCurrentPage]);
return (
<Flex justifyContent={"center"}>
{pages > 1 &&
Array.from({ length: pages }, (_, index) => index + 1).map((item) => (
<Button
colorScheme={currentPage === item ? "orange" : "gray"}
onClick={() => setCurrentPage(item)}
onClick={() => handleNextPage(item)}
key={item}
variant="ghost"
>
Expand Down
3 changes: 3 additions & 0 deletions src/services/api/endpoints.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@ export type ReviewQueryOptions = {
username?: string;
status?: "active" | "pending" | "inactive";
page?: number;
/* To be used for only multiple request with useQueries */
multipleStatus?: ReviewQueryStatus[];
};

export type ReviewQueryStatus = "active" | "pending" | "inactive";
export type TransactionQueryOptions = {
userId?: number;
status?: "success" | "pending" | "failed";
Expand Down
26 changes: 25 additions & 1 deletion src/services/api/reviews/useUserReviews.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useQuery } from "@tanstack/react-query";
import { useQueries, useQuery } from "@tanstack/react-query";
import type { UserReview } from "../../../../types";
import axios from "../axios";
import endpoints, { ReviewQueryOptions } from "../endpoints";
Expand Down Expand Up @@ -34,3 +34,27 @@ export const useUserReviews = ({
isLoading: queryInfo.isLoading && queryInfo.fetchStatus === "fetching",
} as typeof queryInfo;
};

// Multiple calls with promises
export const useUserMultipleReviews = ({
userId,
username,
multipleStatus,
page,
}: ReviewQueryOptions) => {
const multipleStatusArray = multipleStatus || [];
const queryInfo = useQueries({
queries: multipleStatusArray.map((status) => {
return {
queryFn: () => userReviews({ userId, username, status, page }),
queryKey: ["user-reviews", { userId, username, status, page }],
enabled: Boolean(!!userId || username),
};
}),
});
return {
...queryInfo[0],
isLoading:
queryInfo[0].isLoading && queryInfo[0].fetchStatus === "fetching",
};
};