Merge commit '6e7679e24322056ab56339dedbb9a4afba79d9aa' into staging

src/Components/Facility/Consultations/DailyRounds/LogUpdateCardAttribute.tsx

@@ -69,7 +69,9 @@ const LogUpdateCardAttribute = <T extends keyof DailyRoundsModel>({
  <span className="text-sm font-semibold text-gray-700">
  {(attributeValue as string) === "VENTILATOR"
  ? "CRITICAL CARE"
- : (attributeValue as string)}
+ : (attributeValue as string) === "DOCTORS_LOG"
+ ? "PROGRESS NOTE"
+ : (attributeValue as string)}
  </span>
  </div>
  );

src/Components/Shifting/ShiftingBoard.tsx

@@ -39,17 +39,6 @@ interface boardProps {
  containerHeight: number;
 }
 
-const reduceLoading = (action: string, current: any) => {
- switch (action) {
- case "MORE":
- return { ...current, more: true };
- case "BOARD":
- return { ...current, board: true };
- case "COMPLETE":
- return { board: false, more: false };
- }
-};
-
 const ShiftCard = ({ shift, filter }: any) => {
  const { wartime_shifting } = useConfig();
  const [modalFor, setModalFor] = useState({
@@ -268,7 +257,8 @@ export default function ShiftingBoard({
 }: boardProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [offset, setOffSet] = useState(0);
- const [isLoading, setIsLoading] = useState({ board: "BOARD", more: false });
+ const [pages, setPages] = useState<PaginatedResponse<IShift>[]>([]);
+ const [isLoading, setIsLoading] = useState(true);
  const [{ isOver }, drop] = useDrop(() => ({
  accept: "shift-card",
  drop: (item: any) => {
@@ -278,23 +268,24 @@ export default function ShiftingBoard({
  },
  collect: (monitor) => ({ isOver: !!monitor.isOver() }),
  }));
- const [data, setData] = useState<PaginatedResponse<IShift>>();
 
- useQuery(routes.listShiftRequests, {
+ const query = useQuery(routes.listShiftRequests, {
  query: formatFilter({
  ...filterProp,
  status: board,
  }),
  onResponse: ({ res, data: listShiftData }) => {
+ setIsLoading(false);
  if (res?.ok && listShiftData) {
- setData(listShiftData);
+ setPages((prev) => [...prev, listShiftData]);
  }
- setIsLoading((loading) => reduceLoading("COMPLETE", loading));
  },
  });
 
  useEffect(() => {
- setIsLoading((loading) => reduceLoading("BOARD", loading));
+ setPages([]);
+ setIsLoading(true);
+ query.refetch();
  }, [
  filterProp.facility,
  filterProp.origin_facility,
@@ -316,7 +307,7 @@ export default function ShiftingBoard({
  ]);
 
  const handlePagination = async () => {
- setIsLoading((loading) => reduceLoading("MORE", loading));
+ setIsLoading(true);
  setOffSet(offset + 14);
  const { res, data: newPageData } = await request(routes.listShiftRequests, {
  query: formatFilter({
@@ -326,18 +317,15 @@ export default function ShiftingBoard({
  }),
  });
  if (res?.ok && newPageData) {
- setData((prev) =>
- prev
- ? { ...prev, results: [...prev.results, ...newPageData.results] }
- : newPageData,
- );
+ setPages((prev) => [...prev, newPageData]);
  }
- setIsLoading((loading) => reduceLoading("COMPLETE", loading));
+ setIsLoading(false);
  };
  const { t } = useTranslation();
 
  const patientFilter = (filter: string) => {
- return data?.results
+ return pages
+ .flatMap((p) => p.results)
  .filter(({ status }) => status === filter)
  .map((shift: any) => (
  <ShiftCard key={`shift_${shift.id}`} shift={shift} filter={filter} />
@@ -350,7 +338,7 @@ export default function ShiftingBoard({
  const { height } = container.getBoundingClientRect();
  containerHeight < height && setContainerHeight(height);
  }
- }, [containerRef.current, data?.results.length]);
+ }, [containerRef.current, pages.flatMap((p) => p.results).length]);
 
  return (
  <div
@@ -376,12 +364,17 @@ export default function ShiftingBoard({
  />
  </h3>
  <span className="ml-2 rounded-lg bg-primary-500 px-2 text-white">
- {data?.count || "0"}
+ {pages[0] ? pages[0].count : "..."}
  </span>
  </div>
  </div>
  <div ref={containerRef} className="mt-2 flex flex-col pb-2 text-sm">
- {isLoading.board ? (
+ {pages[0]?.count > 0
+ ? patientFilter(board)
+ : !isLoading && (
+ <p className="mx-auto p-4">{t("no_patients_to_show")}</p>
+ )}
+ {isLoading ? (
  <div className="m-1">
  <div className="mx-auto w-full max-w-sm rounded-md border border-gray-300 bg-white p-4 shadow">
  <div className="flex animate-pulse space-x-4 ">
@@ -395,25 +388,13 @@ export default function ShiftingBoard({
  </div>
  </div>
  </div>
- ) : data?.count ?? 0 > 0 ? (
- patientFilter(board)
  ) : (
- <p className="mx-auto p-4">{t("no_patients_to_show")}</p>
+ pages.at(-1)?.next && (
+ <ButtonV2 onClick={(_) => handlePagination()} className="m-2 block">
+ Load More
+ </ButtonV2>
+ )
  )}
- {!isLoading.board &&
- (data?.count ?? 0) < (data?.results.length || 0) &&
- (isLoading.more ? (
- <div className="mx-auto my-4 rounded-md bg-gray-100 p-2 px-4 hover:bg-white">
- {t("loading")}
- </div>
- ) : (
- <button
- onClick={(_) => handlePagination()}
- className="mx-auto my-4 rounded-md bg-gray-100 p-2 px-4 hover:bg-white"
- >
- More...
- </button>
- ))}
  </div>
  </div>
  );