communities NewCommunities.tsx

0% Statements 0/28

0% Branches 0/4

0% Functions 0/8

0% Lines 0/25

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 96 97 98 99 100 101 102 103 104 105 106

import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
import { Chip, Skeleton, styled, Typography } from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import { RpcError } from "grpc-web";
import { useTranslation } from "i18n";
import { DASHBOARD } from "i18n/namespaces";
import { useRouter } from "next/router";
import { ListRecentCommunitiesRes } from "proto/communities_pb";
import { routeToCommunity } from "routes";
import { listRecentCommunities } from "service/communities";
 
const NEW_COMMUNITIES_LIMIT = 5;
 
const Container = styled("div")(({ theme }) => ({
  marginBottom: theme.spacing(3),
}));
 
const ChipsContainer = styled("div")(({ theme }) => ({
  display: "flex",
  flexWrap: "wrap",
  gap: theme.spacing(1),
  marginTop: theme.spacing(1),
}));
 
const StyledChip = styled(Chip)({
  fontSize: "0.875rem",
  fontWeight: 500,
  height: 36,
  "& .MuiChip-icon": {
    fontSize: "1rem",
  },
});
 
const Label = styled(Typography)(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  gap: theme.spacing(0.5),
  fontWeight: 600,
  color: "var(--mui-palette-text-secondary)",
  fontSize: "0.875rem",
}));
 
export default function NewCommunities() {
  const { t } = useTranslation(DASHBOARD);
  const router = useRouter();
 
  const { data, isLoading } = useQuery<
    ListRecentCommunitiesRes.AsObject,
    RpcError
  >({
    queryKey: ["recentCommunities", NEW_COMMUNITIES_LIMIT],
    queryFn: () => listRecentCommunities(NEW_COMMUNITIES_LIMIT),
  });
 
  Iif (isLoading) {
    return (
      <Container>
        <Label>
          <AutoAwesomeIcon fontSize="small" />
          {t("dashboard:new_pill")}
        </Label>
        <ChipsContainer>
          {Array.from({ length: NEW_COMMUNITIES_LIMIT }).map((_, i) => (
            <Skeleton
              key={i}
              variant="rectangular"
              width={100}
              height={36}
              sx={{ borderRadius: 2 }}
            />
          ))}
        </ChipsContainer>
      </Container>
    );
  }
 
  const communities = data?.communitiesList ?? [];
  Iif (communities.length === 0) {
    return null;
  }
 
  return (
    <Container>
      <Label>
        <AutoAwesomeIcon fontSize="small" />
        {t("dashboard:new_pill")}
      </Label>
      <ChipsContainer>
        {communities.map((community) => (
          <StyledChip
            key={community.communityId}
            label={community.name}
            clickable
            onClick={() =>
              router.push(
                routeToCommunity(community.communityId, community.slug),
              )
            }
            variant="outlined"
          />
        ))}
      </ChipsContainer>
    </Container>
  );
}