export default function UserReportFrame()

in src/client/components/user_report_frame.tsx [12:58]

• 29 lines of code
• 8 McCabe index (conditional complexity)

export default function UserReportFrame({ from, to }: UserReportFrameProps) {
  const { isLoading, error, data } = useQuery<UserReportEntry[], Error>({
    queryKey: ["userReportResults", from, to],
    queryFn: async () => {
      const res = await fetch(
        `${import.meta.env.VITE_BACKEND_WEB_ROOT}/api/user_reports.json?${new URLSearchParams({ from, to })}`,
        {
          credentials: "include",
        },
      );

      const resData = await res.json();
      if (res.status == 200) {
        return resData;
      } else if (resData.error) {
        throw new Error(resData.error);
      } else {
        throw new Error(`Unexpected sever-side error! status code: ${res.status}`);
      }
    },
  });

  return (
    <>
      {isLoading && <LoadingSpinner />}
      {error && (
        <div className="error-box">
          <p>
            <strong>Error while trying to load the data</strong>:
          </p>
          <p>{error.message}</p>
        </div>
      )}
      {data &&
        (data.length < 1 ? (
          <h3>No reports for the selected date range found! :(</h3>
        ) : (
          <>
            <h3>
              Found reports for {data.length} {Pluralize(data.length, "domain", "domains")}:
            </h3>
            <UserReportList results={data} />
          </>
        ))}
    </>
  );
}