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 95 | 1x | import React, { useEffect } from "react"; import { Link } from "react-router-dom"; import { useHistory, useLocation } from "react-router"; import qs from "qs"; import { retrievePublicOrganisationsAction } from "../redux"; import { Fab, Tooltip } from "@mui/material"; import { Add as AddIcon } from "@mui/icons-material"; import { Header } from "../../../components"; import { BaseAPIOrganisation } from "../types"; import { ViewOrganisations } from "../components"; import { useQueryParams } from "../../../utils"; import { ProgressOverlay } from "../../../utils/components"; import { ContainerOwnerTabs } from "../../containers/components"; import { TAB_LIST } from "../constants"; import { APIProfile } from "../../authentication"; import { toggleShowVerifiedAction } from "../../dictionaries/redux"; interface Props { organisations?: BaseAPIOrganisation[]; profile?: APIProfile; meta?: { num_found?: number }; loading: boolean; retrieveOrganisations: ( ...args: Parameters<typeof retrievePublicOrganisationsAction> ) => void; toggleShowVerified: ( ...args: Parameters<typeof toggleShowVerifiedAction> ) => void; showOnlyVerified: boolean; } const ViewOrganisationsPage: React.FC<Props> = ({ organisations = [], profile, retrieveOrganisations, loading, meta = {}, toggleShowVerified, showOnlyVerified }: Props) => { const { push: goTo } = useHistory(); const { pathname: url } = useLocation(); const { num_found: numFound = organisations.length } = meta; const queryParams: { page?: number; q?: string } = useQueryParams(); const { page = 1, q: initialQ = "" } = queryParams; const PER_PAGE = 20; const gimmeAUrl = (params: { page?: number; q?: string }) => { const newParams: { page?: number; q?: string } = { ...queryParams, ...params }; return `${url}?${qs.stringify(newParams)}`; }; useEffect(() => { const query = showOnlyVerified ? "CIEL" : initialQ; if (profile) { retrieveOrganisations(profile?.username, query, PER_PAGE, page); } else retrieveOrganisations(url, query, PER_PAGE, page); }, [retrieveOrganisations, url, initialQ, page, profile]); // eslint-disable-line react-hooks/exhaustive-deps return ( <Header title="Organisations"> <ContainerOwnerTabs currentPageUrl={url} tabList={TAB_LIST} /> <ProgressOverlay loading={loading}> <ViewOrganisations organisations={organisations} title="Organisations" onSearch={(q: string) => goTo(gimmeAUrl({ q }))} initialQ={initialQ} page={page} perPage={PER_PAGE} onPageChange={(page: number) => goTo(gimmeAUrl({ page }))} numFound={numFound} showOnlyVerified={showOnlyVerified} toggleShowVerified={toggleShowVerified} /> <Link to={`/orgs/new/`}> <Tooltip title="Create new organisation"> <Fab color="primary" className="fab"> <AddIcon /> </Fab> </Tooltip> </Link> </ProgressOverlay> </Header> ); }; export default ViewOrganisationsPage; |