useObservableState

UserListBulkAction.tsx

import * as React from "react";
import { FC, useEffect } from "react";
import { BulkDeleteButton, BulkExportButton, Loading } from "react-admin";
import { useSelector } from "react-redux";
import { useQuery } from "react-query";
import { reservationAPI } from "@/api";
import { ReservationStatus } from "@/utils/typing/reservation";
import { GetListResult } from "ra-core/esm/types";
import { forkJoin, from, Observable, of } from "rxjs";
import { csDataProvider, User } from "@/utils";
import { UpdateParams } from "ra-core/src/types";
import { catchError, map, startWith, switchMap } from "rxjs/operators";
import { useObservable, useObservableState } from "observable-hooks";

const getReservationByUserIds = (
  userIds: number[],
): Observable<GetListResult[]> => {
  const reservationsResult$ = userIds.map((userId: number) =>
    from(reservationAPI.getReservations(ReservationStatus.scheduled, userId)),
  );
  // update users in parallel.
  return forkJoin(reservationsResult$);
  //   .subscribe(
  //   (listResults: GetListResult[]) => {
  //     return listResults;
  //   },
  //   (error) => {},
  // );
};

const UserListBulkAction: FC<any> = (props) => {
  const selectedIds = useSelector(
    (state: any) => state.admin.resources.users.list.selectedIds,
  );
  // const { isLoading, isError, data, error } = useQuery(
  //   ["user_reservations", selectedIds],
  //   () => getReservationByUserIds,
  // );
  //consider to convert to Suspense
  const getReservationByUserIds$ = useObservable(
    (inputs$) =>
      inputs$.pipe(
        switchMap(([selectedIds]) => getReservationByUserIds(selectedIds)),
      ),
    [selectedIds],
  );
  // const vsvs = useObservableState(getReservationByUserIds$, null);
  const [status, onFetchData] = useObservableState(
    (getReservationByUserIds$) =>
      getReservationByUserIds$.pipe(
        map((value: any) => {
          console.log("value , ", value);
          return <p>Reservation attached to users: `${value[0]?.total}` </p>;
        }),
        catchError((error) => {
          console.log("error", error);
          return of(<p>Can't load reservation information...</p>);
        }),
        startWith(<Loading />),
      ),
    () => <>hoho</>, // initial state
  );
  // const [status, onFetchData] = useObservableState((event$) =>
  //   getReservationByUserIds$.pipe(
  //     // OMG I don't have to deal with race condition
  //     switchMap((event) => {
  //       console.log("event", event);
  //       return of(null);
  //     }),
  //   ),
  // );
  useEffect(() => {
    console.log("selectedIds", selectedIds);
    onFetchData(selectedIds);
  }, [selectedIds]);

  useEffect(() => {
    console.log("status", status);
  }, [status]);

  // useEffect(() => {
  //   console.log("vsvs", vsvs);
  // }, [vsvs]);

  return (
    <>
      <BulkExportButton {...props} />
      <BulkDeleteButton {...props} undoable={false} />
    </>
  );
};
export default UserListBulkAction;