All files / src/features/Merchants/MerchantSidePanel/ApprovalFlowPanel/components/TasksBody TasksBody.tsx

45.83% Statements 11/24
33.33% Branches 4/12
12.5% Functions 1/8
50% Lines 11/22

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85                          21x 104x 104x 104x     104x               104x   104x               104x       104x         104x                     104x                                                      
import { useState } from "react";
import { TTaskStatus, TUnderwritingTasksStats } from "../../types";
import TasksBodyActions from "./TasksBodyActions";
import TasksBodyContent from "./TasksBodyContent";
import { useListUnderwritingTasks } from "../../hooks/useListUnderwritingTasks";
import { IParsedData } from "@components/Merchants/MerchantPreview/data.types";
import { useMerchantSidePanelContext } from "@features/Merchants/MerchantSidePanel/Provider/MerchantSidePanelProvider";
 
type Props = {
  stats: TUnderwritingTasksStats;
  merchantData: IParsedData;
};
 
const TasksBody = ({ stats, merchantData }: Props) => {
  const { queries } = useMerchantSidePanelContext();
  const [userTaggedInFilter, setUserTaggedInFilter] = useState("");
  const [challengeStatusFilter, setChallengeStatusFilter] = useState<
    TTaskStatus[]
  >([]);
  const merchantId = merchantData?.merchantInfo?.merchantID;
 
  const {
    data: taskList,
    isLoading,
    isFetching,
    error,
    refetch,
  } = useListUnderwritingTasks(challengeStatusFilter, userTaggedInFilter);
 
  const handleChallengeFilter = (filter: TTaskStatus) => {
    setChallengeStatusFilter((prev) =>
      prev.includes(filter)
        ? prev.filter((item) => item !== filter)
        : [...prev, filter],
    );
  };
 
  const handleUserTaggedFilter = (value: string) => {
    setUserTaggedInFilter((prev) => (prev ? "" : value));
  };
 
  const handleResetFilters = () => {
    setChallengeStatusFilter([]);
    setUserTaggedInFilter("");
  };
 
  const onRetry = async () => {
    if (!merchantId) {
      const res = await queries.merchantQuery.refetch();
      const newMerchantId = res.data?.merchantId;
 
      if (!newMerchantId) return;
    }
 
    refetch();
  };
 
  return (
    <div>
      <TasksBodyActions
        handleResetFilters={handleResetFilters}
        handleUserTaggedFilter={handleUserTaggedFilter}
        userTaggedInFilter={userTaggedInFilter}
        challengeStatusFilter={challengeStatusFilter}
        setChallengeStatusFilter={handleChallengeFilter}
        stats={stats}
        merchantData={merchantData}
      />
      <TasksBodyContent
        tasks={taskList}
        isTasksLoading={isLoading || isFetching}
        hasError={!!error || !merchantId}
        onRetry={onRetry}
        filters={{
          status: challengeStatusFilter,
          userTaggedIn: userTaggedInFilter,
        }}
        merchantData={merchantData}
      />
    </div>
  );
};
 
export default TasksBody;