All files / src/apps/sources/components ViewSourcesPage.tsx

7.14% Statements 1/14
0% Branches 0/7
0% Functions 0/5
7.14% Lines 1/14

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 86 87 88                                                              1x                                                                                                                
import React, { useEffect } from "react";
import { APISource } from "../types";
import { ProgressOverlay } from "../../../utils/components";
import { useQueryParams } from "../../../utils";
import { useHistory, useLocation } from "react-router";
import qs from "qs";
import { retrievePersonalSourcesAction } from "../redux";
import ViewSources from "./ViewSources";
import Header from "../../../components/Header";
import { TAB_LIST, PER_PAGE, TITLE } from "../constants";
 
import { ContainerOwnerTabs } from "../../containers/components";
import { Link } from "react-router-dom";
import { Fab, Tooltip } from "@mui/material";
import { Add as AddIcon } from "@mui/icons-material";
import { toggleShowVerifiedAction } from "../../dictionaries/redux";
 
interface Props {
  loading: boolean;
  sources?: APISource[];
  meta?: { num_found?: number };
  // not nice, but better than not typing it
  retrieveSources: (
    ...args: Parameters<typeof retrievePersonalSourcesAction>
  ) => void;
  toggleShowVerified: (
    ...args: Parameters<typeof toggleShowVerifiedAction>
  ) => void;
  showOnlyVerified: boolean;
}
 
const ViewPersonalSourcesPage: React.FC<Props> = ({
  sources = [],
  loading,
  meta = {},
  retrieveSources,
  toggleShowVerified,
  showOnlyVerified
}) => {
  const { push: goTo } = useHistory();
  const { pathname: url } = useLocation();
  const { num_found: numFound = sources.length } = meta;
 
  const queryParams: { page?: number; q?: string } = useQueryParams();
  const { page = 1, q: initialQ = "" } = queryParams;
 
  useEffect(() => {
    retrieveSources(url, showOnlyVerified ? "CIEL" : initialQ, PER_PAGE, page);
  }, [retrieveSources, url, initialQ, page, showOnlyVerified]);
 
  const gimmeAUrl = (params: { page?: number; q?: string }) => {
    const newParams: { page?: number; q?: string } = {
      ...queryParams,
      ...params
    };
    return `${url}?${qs.stringify(newParams)}`;
  };
 
  return (
    <Header title="Sources">
      <ContainerOwnerTabs currentPageUrl={url} tabList={TAB_LIST} />
      <ProgressOverlay loading={loading}>
        <ViewSources
          initialQ={initialQ}
          page={page}
          perPage={PER_PAGE}
          onSearch={(q: string) => goTo(gimmeAUrl({ q }))}
          onPageChange={(page: number) => goTo(gimmeAUrl({ page }))}
          sources={sources}
          numFound={numFound}
          title={TITLE}
          showOnlyVerified={showOnlyVerified}
          toggleShowVerified={toggleShowVerified}
        />
        <Link to={`/sources/new/`}>
          <Tooltip title="Create new source">
            <Fab color="primary" className="fab">
              <AddIcon />
            </Fab>
          </Tooltip>
        </Link>
      </ProgressOverlay>
    </Header>
  );
};
 
export default ViewPersonalSourcesPage;