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; |