All files / app/features/communities CommunityBase.tsx

90.47% Statements 19/21
42.85% Branches 3/7
100% Functions 2/2
89.47% Lines 17/19

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 598x 8x 8x 8x 8x   8x 8x   16x                                     8x       67x 67x           67x   67x         67x 16x   51x             51x    
import Alert from "components/Alert";
import CircularProgress from "components/CircularProgress";
import { useCommunity } from "features/communities/hooks";
import { useTranslation } from "i18n";
import { COMMUNITIES } from "i18n/namespaces";
import { Community } from "proto/communities_pb";
import React from "react";
import makeStyles from "utils/makeStyles";
 
export const useCommunityBaseStyles = makeStyles((theme) => ({
  root: {
    marginBottom: theme.spacing(2),
    "& > section": {
      margin: theme.spacing(3, 0),
    },
  },
  center: {
    display: "block",
    marginLeft: "auto",
    marginRight: "auto",
  },
}));
 
interface CommunityBaseProps {
  children(communityParams: { community: Community.AsObject }): React.ReactNode;
  communityId: number;
}
 
export default function CommunityBase({
  children,
  communityId,
}: CommunityBaseProps) {
  const { t } = useTranslation([COMMUNITIES]);
  const classes = useCommunityBaseStyles();
 
  const {
    isLoading: isCommunityLoading,
    error: communityError,
    data: community,
  } = useCommunity(communityId);
 
  Iif (!communityId)
    return (
      <Alert severity="error">{t("communities:invalid_community_id")}</Alert>
    );
 
  if (isCommunityLoading)
    return <CircularProgress className={classes.center} />;
 
  Iif (!community || communityError)
    return (
      <Alert severity="error">
        {communityError?.message || t("communities:error_loading_community")}
      </Alert>
    );
 
  return <div className={classes.root}>{children({ community })}</div>;
}