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 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 20x 20x 5x 20x 20x 5x 20x 20x 20x 20x 20x 20x 20x 20x 20x 3x 1x 1x 14x 30x | import { Collapse, styled } from "@mui/material";
import Alert from "components/Alert";
import Button from "components/Button";
import CenteredSpinner from "components/CenteredSpinner/CenteredSpinner";
import { EmailIcon } from "components/Icons";
import ProfileIncompleteDialog from "components/ProfileIncompleteDialog/ProfileIncompleteDialog";
import TextBody from "components/TextBody";
import useAccountInfo from "features/auth/useAccountInfo";
import { SectionTitle } from "features/communities/CommunityPage";
import { useListDiscussions } from "features/communities/hooks";
import { useTranslation } from "i18n";
import { COMMUNITIES } from "i18n/namespaces";
import { Community } from "proto/communities_pb";
import { useState } from "react";
import { theme } from "theme";
import hasAtLeastOnePage from "utils/hasAtLeastOnePage";
import CreateDiscussionForm from "./CreateDiscussionForm";
import DiscussionCard from "./DiscussionCard";
const StyledDiscussionsHeader = styled("div")(() => ({
alignItems: "center",
display: "flex",
}));
const StyledDiscussionsContainer = styled("div")(() => ({
"& > *": {
width: "100%",
},
"& > :not(:last-child)": {
marginBlockEnd: theme.spacing(3),
},
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "space-between",
paddingBlockEnd: theme.spacing(5),
}));
const StyledLoadMoreButton = styled("div")(() => ({
alignSelf: "center",
display: "flex",
justifyContent: "center",
width: "100%",
}));
const StyledCreateResourceButton = styled(Button)(() => ({
margin: theme.spacing(2, 0),
}));
const StyledNewPostButtonContainer = styled("div")(() => ({
"& > * + *": {
marginInlineStart: theme.spacing(2),
},
display: "flex",
alignItems: "center",
minHeight: theme.typography.pxToRem(40),
}));
export default function DiscussionsListPage({ community }: { community: Community.AsObject }) {
const { t } = useTranslation([COMMUNITIES]);
const { data: accountInfo } = useAccountInfo();
const hash = typeof window !== "undefined" ? window.location.hash : "";
// Intent to create a post, set by both the #new hash and the "New post" button.
const [isCreatingNewPost, setIsCreatingNewPost] = useState(hash.includes("new"));
const {
isLoading: isDiscussionsLoading,
isFetching: isDiscussionsFetching,
error: discussionsError,
data: discussions,
hasNextPage: discussionsHasNextPage,
fetchNextPage,
} = useListDiscussions(community.communityId);
// loading is false when refetched since there's old data in cache already
const isRefetching = !isDiscussionsLoading && isDiscussionsFetching;
// Derive form/dialog visibility during render so both entry points share the
// same gate: show the form only once the profile is known to be complete,
// otherwise show the dialog.
const profileIncomplete = accountInfo !== undefined && !accountInfo.profileComplete;
const showCreateForm = isCreatingNewPost && accountInfo?.profileComplete === true;
const profileDialogOpen = isCreatingNewPost && profileIncomplete;
return (
<>
<ProfileIncompleteDialog
open={profileDialogOpen}
onClose={() => setIsCreatingNewPost(false)}
attempted_action="create_discussion"
/>
<StyledDiscussionsHeader>
<SectionTitle icon={<EmailIcon />}>{t("communities:discussions_title")}</SectionTitle>
</StyledDiscussionsHeader>
{discussionsError && <Alert severity="error">{discussionsError.message}</Alert>}
<Collapse in={!showCreateForm}>
<StyledNewPostButtonContainer>
<StyledCreateResourceButton onClick={() => setIsCreatingNewPost(true)}>
{t("communities:new_post_label")}
</StyledCreateResourceButton>
{isRefetching && <CenteredSpinner />}
</StyledNewPostButtonContainer>
</Collapse>
<Collapse in={showCreateForm}>
<CreateDiscussionForm
communityId={community.communityId}
onCancel={() => setIsCreatingNewPost(false)}
onPostSuccess={() => setIsCreatingNewPost(false)}
/>
</Collapse>
<StyledDiscussionsContainer>
{isDiscussionsLoading ? (
<CenteredSpinner />
) : hasAtLeastOnePage(discussions, "discussionsList") ? (
discussions.pages
.flatMap((res) => res.discussionsList)
.map((discussion) => (
<DiscussionCard discussion={discussion} key={`discussioncard-${discussion.thread!.threadId}`} />
))
) : (
<TextBody>{t("communities:discussions_empty_state")}</TextBody>
)}
{discussionsHasNextPage && (
<StyledLoadMoreButton>
<Button onClick={() => fetchNextPage()}>{t("communities:see_more_discussions_label")}</Button>
</StyledLoadMoreButton>
)}
</StyledDiscussionsContainer>
</>
);
}
|