All files / src/apps/dictionaries/components ViewDictionariesPage.tsx

6.67% Statements 1/15
0% Branches 0/7
0% Functions 0/5
6.67% Lines 1/15

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 89 90 91 92 93 94                                                            1x                                                                                                                              
import React, { useEffect } from "react";
import { APIDictionary } from "../types";
import { ProgressOverlay } from "../../../utils/components";
import { generateURLWithQueryParams, useQueryParams } from "../../../utils";
import { useHistory, useLocation } from "react-router";
import ViewDictionaries from "../components/ViewDictionaries";
import {
  retrievePublicDictionariesAction,
  toggleShowVerifiedAction
} from "../redux";
import { Fab, Tooltip } from "@mui/material";
import { Add as AddIcon } from "@mui/icons-material";
import { Link } from "react-router-dom";
import { ContainerOwnerTabs } from "../../containers/components";
import { Header } from "../../../components";
import { TAB_LIST, PER_PAGE, TITLE } from "../constants";
 
interface Props {
  loading: boolean;
  dictionaries?: APIDictionary[];
  meta?: { num_found?: number };
  // not nice, but better than not typing it
  retrieveDictionaries: (
    ...args: Parameters<typeof retrievePublicDictionariesAction>
  ) => void;
  toggleShowVerified: (
    ...args: Parameters<typeof toggleShowVerifiedAction>
  ) => void;
  showOnlyVerified: boolean;
}
const ViewPublicDictionariesPage: React.FC<Props> = ({
  dictionaries = [],
  loading,
  meta = {},
  retrieveDictionaries,
  toggleShowVerified,
  showOnlyVerified
}) => {
  const { push: goTo } = useHistory();
  const { pathname: url } = useLocation();
  const { num_found: numFound = dictionaries.length } = meta;
 
  const queryParams: { page?: number; q?: string } = useQueryParams();
  const { page = 1, q: initialQ = "" } = queryParams;
 
  useEffect(() => {
    retrieveDictionaries(
      url,
      showOnlyVerified ? "CIEL" : initialQ,
      PER_PAGE,
      page
    );
  }, [retrieveDictionaries, url, initialQ, page, showOnlyVerified]);
 
  const changePage = (params: { page?: number; q?: string }) => {
    const targetURL = generateURLWithQueryParams(url, params, queryParams);
    goTo(targetURL);
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: "smooth"
    });
  };
 
  return (
    <Header title="Dictionaries">
      <ContainerOwnerTabs currentPageUrl={url} tabList={TAB_LIST} />
      <ProgressOverlay loading={loading}>
        <ViewDictionaries
          initialQ={initialQ}
          page={page}
          perPage={PER_PAGE}
          onSearch={(q: string) => changePage({ q })}
          onPageChange={(page: number) => changePage({ page })}
          dictionaries={dictionaries}
          numFound={numFound}
          title={TITLE}
          showOnlyVerified={showOnlyVerified}
          toggleShowVerified={toggleShowVerified}
        />
        <Link to={`/collections/new/`}>
          <Tooltip title="Create new dictionary" style={{ zIndex: 3 }}>
            <Fab color="primary" className="fab">
              <AddIcon />
            </Fab>
          </Tooltip>
        </Link>
      </ProgressOverlay>
    </Header>
  );
};
 
export default ViewPublicDictionariesPage;