From 9d6e6e43c167baa7cbbf61af40fdf40242701e83 Mon Sep 17 00:00:00 2001
From: Maruf Bepary <bepary71@gmail.com>
Date: Wed, 10 Dec 2025 21:18:02 +0000
Subject: [PATCH 1/3] FEATURE: Implemented restricted community functionality -
 Only show posts and comments - Cannot create posts or comments until
 subscribed - Hidind UI when no permissions

---
 components/community/CreatePostLink.tsx     | 10 +++++++++
 components/navbar/right-content/Icons.tsx   | 22 ++++++++++++++++++-
 components/posts/comments/CommentItem.tsx   |  4 +++-
 components/posts/comments/Comments.tsx      | 24 +++++++++++++++------
 hooks/comments/useCreateComment.ts          | 23 ++++++++++++++++++++
 hooks/community/useCommunityPermissions.tsx | 20 +++++++++++++++--
 hooks/posts/useCreatePost.ts                | 23 ++++++++++++++++++++
 lib/community/communityPermissions.ts       | 22 +++++++++++++++++++
 8 files changed, 137 insertions(+), 11 deletions(-)
 create mode 100644 lib/community/communityPermissions.ts

diff --git a/components/community/CreatePostLink.tsx b/components/community/CreatePostLink.tsx
index 683ee17..912b43f 100644
--- a/components/community/CreatePostLink.tsx
+++ b/components/community/CreatePostLink.tsx
@@ -4,6 +4,8 @@ import React from "react";
 import { BsLink45Deg } from "react-icons/bs";
 import { IoIosCreate } from "react-icons/io";
 import { IoImageOutline } from "react-icons/io5";
+import useCommunityState from "@/hooks/community/useCommunityState";
+import useCommunityPermissions from "@/hooks/community/useCommunityPermissions";
 
 type CreatePostProps = {};
 
@@ -14,6 +16,14 @@ type CreatePostProps = {};
  */
 const CreatePostLink: React.FC<CreatePostProps> = () => {
   const { onClick } = useCallCreatePost(); // hook for creating a new post
+  const { communityStateValue } = useCommunityState();
+  const { canPost } = useCommunityPermissions(
+    communityStateValue.currentCommunity
+  );
+
+  if (communityStateValue.currentCommunity && !canPost) {
+    return null;
+  }
 
   return (
     <Flex
diff --git a/components/navbar/right-content/Icons.tsx b/components/navbar/right-content/Icons.tsx
index 24393e1..d1bdfac 100644
--- a/components/navbar/right-content/Icons.tsx
+++ b/components/navbar/right-content/Icons.tsx
@@ -1,7 +1,10 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { savedPostStateAtom } from "@/atoms/savedPostsAtom";
 import { useColorMode } from "@/components/ui/color-mode";
+import useCommunityState from "@/hooks/community/useCommunityState";
+import useCommunityPermissions from "@/hooks/community/useCommunityPermissions";
 import useCallCreatePost from "@/hooks/posts/useCallCreatePost";
+import useCustomToast from "@/hooks/useCustomToast";
 import { Flex, IconButton, Icon } from "@chakra-ui/react";
 import { useSetAtom } from "jotai";
 import React from "react";
@@ -19,6 +22,23 @@ const icons: React.FC = () => {
   const { onClick } = useCallCreatePost();
   const { colorMode, toggleColorMode } = useColorMode();
   const setSavedPostState = useSetAtom(savedPostStateAtom);
+  const { communityStateValue } = useCommunityState();
+  const { canPost } = useCommunityPermissions(
+    communityStateValue.currentCommunity
+  );
+  const showToast = useCustomToast();
+
+  const handleCreatePostClick = () => {
+    if (communityStateValue.currentCommunity && !canPost) {
+      showToast({
+        title: "Restricted Community",
+        description: "You must be a member to post in this community.",
+        status: "error",
+      });
+      return;
+    }
+    onClick();
+  };
 
   return (
     <Flex align="center" p={1}>
@@ -52,7 +72,7 @@ const icons: React.FC = () => {
           aria-label="Create post"
           variant="ghost"
           fontSize={22}
-          onClick={onClick}
+          onClick={handleCreatePostClick}
           mr={1.5}
           ml={1.5}
         >
diff --git a/components/posts/comments/CommentItem.tsx b/components/posts/comments/CommentItem.tsx
index 37dbb0b..fef7d1e 100644
--- a/components/posts/comments/CommentItem.tsx
+++ b/components/posts/comments/CommentItem.tsx
@@ -35,6 +35,7 @@ type CommentItemProps = {
     depth: number
   ) => Promise<void>;
   user?: User;
+  canComment?: boolean;
 };
 
 /**
@@ -60,6 +61,7 @@ const CommentItem: React.FC<CommentItemProps> = ({
   isCommunityAdmin,
   onCreateComment,
   user,
+  canComment = true,
 }) => {
   const [isReplying, setIsReplying] = useState(false);
   const [replyText, setReplyText] = useState("");
@@ -111,7 +113,7 @@ const CommentItem: React.FC<CommentItemProps> = ({
         borderColor={{ base: "gray.100", _dark: "gray.600" }}
       >
         <Stack direction="row" align="center" gap={2}>
-          {(comment.depth || 0) < 2 && (
+          {(comment.depth || 0) < 2 && canComment && (
             <Button
               size="sm"
               variant="ghost"
diff --git a/components/posts/comments/Comments.tsx b/components/posts/comments/Comments.tsx
index c15e350..9d198c3 100644
--- a/components/posts/comments/Comments.tsx
+++ b/components/posts/comments/Comments.tsx
@@ -4,6 +4,8 @@ import { Comment } from "@/types/comment";
 import useCommentList from "@/hooks/comments/useCommentList";
 import useCreateComment from "@/hooks/comments/useCreateComment";
 import useDeleteComment from "@/hooks/comments/useDeleteComment";
+import useCommunityState from "@/hooks/community/useCommunityState";
+import useCommunityPermissions from "@/hooks/community/useCommunityPermissions";
 import {
   Box,
   Flex,
@@ -52,6 +54,10 @@ const Comments: React.FC<CommentsProps> = ({
     comments,
     setComments
   );
+  const { communityStateValue } = useCommunityState();
+  const { canComment } = useCommunityPermissions(
+    communityStateValue.currentCommunity
+  );
 
   const handleCreateComment = async (text: string) => {
     await createComment(user!, text);
@@ -110,13 +116,15 @@ const Comments: React.FC<CommentsProps> = ({
         fontSize="10pt"
         width="100%"
       >
-        <CommentInput
-          commentText={commentText}
-          setCommentText={setCommentText}
-          user={user}
-          createLoading={createLoading}
-          onCreateComment={handleCreateComment}
-        />
+        {canComment && (
+          <CommentInput
+            commentText={commentText}
+            setCommentText={setCommentText}
+            user={user}
+            createLoading={createLoading}
+            onCreateComment={handleCreateComment}
+          />
+        )}
       </Flex>
       <Stack gap={4} m={4} ml={10}>
         {commentFetchLoading ? (
@@ -177,6 +185,7 @@ const Comments: React.FC<CommentsProps> = ({
                                 isCommunityAdmin={isCommunityAdmin}
                                 onCreateComment={createComment}
                                 user={user}
+                                canComment={canComment}
                               />
                             </Box>
                           </Flex>
@@ -198,6 +207,7 @@ const Comments: React.FC<CommentsProps> = ({
                               isCommunityAdmin={isCommunityAdmin}
                               onCreateComment={createComment}
                               user={user}
+                              canComment={canComment}
                             />
                           </Box>
                         </TreeView.Item>
diff --git a/hooks/comments/useCreateComment.ts b/hooks/comments/useCreateComment.ts
index f4a4a8a..f40aada 100644
--- a/hooks/comments/useCreateComment.ts
+++ b/hooks/comments/useCreateComment.ts
@@ -6,6 +6,8 @@ import { useSetAtom } from "jotai";
 import useCustomToast from "@/hooks/useCustomToast";
 import { Comment } from "../../types/comment";
 import { createComment } from "@/lib/comments/createComment";
+import useCommunityState from "../community/useCommunityState";
+import { checkCommunityPermission } from "@/lib/community/communityPermissions";
 
 /**
  * Creates a new comment or reply on the selected post and updates counts.
@@ -21,6 +23,7 @@ const useCreateComment = (
   const setPostState = useSetAtom(postStateAtom);
   const showToast = useCustomToast();
   const [createLoading, setCreateLoading] = useState(false);
+  const { communityStateValue } = useCommunityState();
 
   const onCreateComment = async (
     user: User,
@@ -30,6 +33,26 @@ const useCreateComment = (
   ) => {
     if (!selectedPost) return;
     setCreateLoading(true);
+
+    // Check for restricted community permissions
+    const currentCommunity = communityStateValue.currentCommunity;
+    if (currentCommunity?.id === selectedPost.communityId) {
+      const hasPermission = checkCommunityPermission(
+        currentCommunity,
+        communityStateValue.mySnippets
+      );
+
+      if (!hasPermission) {
+        showToast({
+          title: "Restricted Community",
+          description: "You must be a member to comment in this community.",
+          status: "error",
+        });
+        setCreateLoading(false);
+        return;
+      }
+    }
+
     try {
       const newComment = await createComment(
         user,
diff --git a/hooks/community/useCommunityPermissions.tsx b/hooks/community/useCommunityPermissions.tsx
index 7279989..7947cc0 100644
--- a/hooks/community/useCommunityPermissions.tsx
+++ b/hooks/community/useCommunityPermissions.tsx
@@ -1,27 +1,43 @@
 import { Community } from "@/types/community";
 import { auth } from "@/firebase/clientApp";
 import { useAuthState } from "react-firebase-hooks/auth";
+import useCommunityState from "./useCommunityState";
+import { checkCommunityPermission } from "@/lib/community/communityPermissions";
 
 /**
  * Calculates permission flags for the current user within a community.
  * @param communityData - Community to check against.
- * @returns Boolean flags for creator, admin, and admin-management rights.
+ * @returns Boolean flags for creator, admin, admin-management rights, posting, and commenting.
  */
 const useCommunityPermissions = (communityData?: Community) => {
   const [user] = useAuthState(auth);
+  const { communityStateValue } = useCommunityState();
 
   if (!communityData) {
-    return { isCreator: false, isAdmin: false, canManageAdmins: false };
+    return {
+      isCreator: false,
+      isAdmin: false,
+      canManageAdmins: false,
+      canPost: false,
+      canComment: false,
+    };
   }
 
   const isCreator = user?.uid === communityData.creatorId;
   const isAdmin =
     isCreator || communityData.adminIds?.includes(user?.uid || "");
 
+  const hasPermission = checkCommunityPermission(
+    communityData,
+    communityStateValue.mySnippets
+  );
+
   return {
     isCreator,
     isAdmin,
     canManageAdmins: isAdmin,
+    canPost: hasPermission,
+    canComment: hasPermission,
   };
 };
 
diff --git a/hooks/posts/useCreatePost.ts b/hooks/posts/useCreatePost.ts
index 7f1ca97..dd3ba2f 100644
--- a/hooks/posts/useCreatePost.ts
+++ b/hooks/posts/useCreatePost.ts
@@ -3,6 +3,8 @@ import { useRouter } from "next/navigation";
 import { User } from "firebase/auth";
 import useCustomToast from "@/hooks/useCustomToast";
 import { createPost } from "@/lib/posts/createPost";
+import useCommunityState from "../community/useCommunityState";
+import { checkCommunityPermission } from "@/lib/community/communityPermissions";
 
 /**
  * Creates a new post, uploads an optional image, and notifies the user.
@@ -18,6 +20,7 @@ const useCreatePost = () => {
   const showToast = useCustomToast();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
+  const { communityStateValue } = useCommunityState();
 
   const handleCreatePost = async (
     user: User,
@@ -28,6 +31,26 @@ const useCreatePost = () => {
   ) => {
     if (!user) return;
     setLoading(true);
+
+    // Check for restricted community permissions
+    const currentCommunity = communityStateValue.currentCommunity;
+    if (currentCommunity?.id === communityId) {
+      const hasPermission = checkCommunityPermission(
+        currentCommunity,
+        communityStateValue.mySnippets
+      );
+
+      if (!hasPermission) {
+        showToast({
+          title: "Restricted Community",
+          description: "You must be a member to post in this community.",
+          status: "error",
+        });
+        setLoading(false);
+        return;
+      }
+    }
+
     try {
       await createPost(
         user,
diff --git a/lib/community/communityPermissions.ts b/lib/community/communityPermissions.ts
new file mode 100644
index 0000000..ce2fca1
--- /dev/null
+++ b/lib/community/communityPermissions.ts
@@ -0,0 +1,22 @@
+import { Community, CommunitySnippet } from "@/types/community";
+
+/**
+ * Checks if a user has permission to perform an action in a community.
+ * Currently supports checking for 'post' and 'comment' actions based on community privacy settings.
+ *
+ * @param community - The community to check permissions for.
+ * @param userSnippets - The list of community snippets for the user (indicating membership).
+ * @returns boolean - True if the user has permission, false otherwise.
+ */
+export const checkCommunityPermission = (
+  community: Community,
+  userSnippets: CommunitySnippet[]
+): boolean => {
+  if (community.privacyType === "restricted") {
+    return !!userSnippets.find(
+      (snippet) => snippet.communityId === community.id
+    );
+  }
+  // Public communities allow everyone to post/comment (assuming they are authenticated, which is checked elsewhere)
+  return true;
+};

From cc9d0763b13fea64af2f632522f2893a6c95d921 Mon Sep 17 00:00:00 2001
From: Maruf Bepary <bepary71@gmail.com>
Date: Wed, 10 Dec 2025 21:46:37 +0000
Subject: [PATCH 2/3] FEATURE: Implemented private community functionality -
 Extension of restricted community - Do not show post and comments to
 unsubscribed user

---
 .../{ => comments}/CommunityClientPage.tsx    | 36 ++++++--
 .../comments/[pid]/PostClientPage.tsx         | 87 +++++++++++--------
 app/community/[communityId]/page.tsx          |  2 +-
 components/community/about/About.tsx          |  6 ++
 hooks/community/useCommunityPermissions.tsx   | 14 ++-
 lib/community/communityPermissions.ts         | 25 +++++-
 6 files changed, 124 insertions(+), 46 deletions(-)
 rename app/community/[communityId]/{ => comments}/CommunityClientPage.tsx (57%)

diff --git a/app/community/[communityId]/CommunityClientPage.tsx b/app/community/[communityId]/comments/CommunityClientPage.tsx
similarity index 57%
rename from app/community/[communityId]/CommunityClientPage.tsx
rename to app/community/[communityId]/comments/CommunityClientPage.tsx
index 6bd67d2..8393e36 100644
--- a/app/community/[communityId]/CommunityClientPage.tsx
+++ b/app/community/[communityId]/comments/CommunityClientPage.tsx
@@ -6,9 +6,12 @@ import About from "@/components/community/about/About";
 import CommunityHeader from "@/components/community/community-header/CommunityHeader";
 import PageContent from "@/components/layout/PageContent";
 import Posts from "@/components/posts/Posts";
+import useCommunityPermissions from "@/hooks/community/useCommunityPermissions";
 import { Community } from "@/types/community";
+import { Flex, Text, Icon, Stack } from "@chakra-ui/react";
 import { useAtom } from "jotai";
 import React, { useEffect } from "react";
+import { FaLock } from "react-icons/fa";
 
 type CommunityPageProps = {
   communityData: Community;
@@ -39,17 +42,40 @@ const CommunityClientPage: React.FC<CommunityPageProps> = ({
       ? communityStateValue.currentCommunity
       : communityData;
 
+  const { canView } = useCommunityPermissions(currentCommunity);
+
   return (
     <>
       <CommunityHeader communityData={currentCommunity} />
       <PageContent>
         <>
-          <CreatePostLink />
-          <Posts communityData={currentCommunity} />
-        </>
-        <>
-          <About communityData={currentCommunity} />
+          {canView ? (
+            <>
+              <CreatePostLink />
+              <Posts communityData={currentCommunity} />
+            </>
+          ) : (
+            <Flex
+              direction="column"
+              justify="center"
+              align="center"
+              border="1px solid"
+              borderColor={{ base: "gray.300", _dark: "gray.600" }}
+              borderRadius={"xl"}
+              p={10}
+              bg={{ base: "white", _dark: "gray.800" }}
+            >
+              <Icon as={FaLock} fontSize={50} color="gray.400" mb={4} />
+              <Text fontWeight={600} fontSize="lg">
+                This community is private
+              </Text>
+              <Text color="gray.500">
+                Posts are only available to subscribers.
+              </Text>
+            </Flex>
+          )}
         </>
+        <>{canView && <About communityData={currentCommunity} />}</>
       </PageContent>
     </>
   );
diff --git a/app/community/[communityId]/comments/[pid]/PostClientPage.tsx b/app/community/[communityId]/comments/[pid]/PostClientPage.tsx
index f4d8544..1f75a13 100644
--- a/app/community/[communityId]/comments/[pid]/PostClientPage.tsx
+++ b/app/community/[communityId]/comments/[pid]/PostClientPage.tsx
@@ -14,11 +14,12 @@ import usePostVote from "@/hooks/posts/usePostVote";
 import usePostVoteSync from "@/hooks/posts/usePostVoteSync";
 import { Community } from "@/types/community";
 import { Post } from "@/types/post";
-import { Stack } from "@chakra-ui/react";
+import { Stack, Flex, Icon, Text } from "@chakra-ui/react";
 import { User } from "firebase/auth";
 import { useAtom } from "jotai";
 import React, { useEffect } from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
+import { FaLock } from "react-icons/fa";
 
 type PostPageProps = {
   communityData: Community;
@@ -41,7 +42,7 @@ const PostPage: React.FC<PostPageProps> = ({ communityData, postData }) => {
     useAtom(communityStateAtom);
   const currentCommunity =
     communityStateValue.currentCommunity || communityData;
-  const { isAdmin } = useCommunityPermissions(currentCommunity);
+  const { isAdmin, canView } = useCommunityPermissions(currentCommunity);
   const [user] = useAuthState(auth);
 
   useEffect(() => {
@@ -60,47 +61,59 @@ const PostPage: React.FC<PostPageProps> = ({ communityData, postData }) => {
     }
   }, [postData, setPostStateValue]);
 
+  if (!canView) {
+    return (
+      <PageContent>
+        <Flex
+          direction="column"
+          justify="center"
+          align="center"
+          border="1px solid"
+          borderColor={{ base: "gray.300", _dark: "gray.600" }}
+          borderRadius={"xl"}
+          p={10}
+          bg={{ base: "white", _dark: "gray.800" }}
+        >
+          <Icon as={FaLock} fontSize={50} color="gray.400" mb={4} />
+          <Text fontWeight={600} fontSize="lg">
+            This community is private
+          </Text>
+          <Text color="gray.500">Posts are only shown to subscribers.</Text>
+        </Flex>
+        <></>
+      </PageContent>
+    );
+  }
+
   return (
     <PageContent>
-      {/* Left */}
       <>
-        {!postData && !postStateValue.selectedPost ? (
-          <PostLoader />
-        ) : (
-          <>
-            <Stack gap={3} direction="column">
-              {postStateValue.selectedPost && (
-                <PostItem
-                  post={postStateValue.selectedPost}
-                  onVote={onVote}
-                  onDeletePost={onDeletePost}
-                  userVoteValue={
-                    postStateValue.postVotes.find(
-                      (item) => item.postId === postStateValue.selectedPost?.id
-                    )?.voteValue
-                  }
-                  userIsCreator={
-                    user?.uid === postStateValue.selectedPost?.creatorId
-                  }
-                  userIsAdmin={isAdmin}
-                  showCommunityImage={true}
-                />
-              )}
-
-              <Comments
-                user={user as User}
-                selectedPost={postStateValue.selectedPost}
-                communityId={postStateValue.selectedPost?.communityId as string}
-                isCommunityAdmin={isAdmin}
-              />
-            </Stack>
-          </>
+        {postStateValue.selectedPost && (
+          <PostItem
+            post={postStateValue.selectedPost}
+            onVote={onVote}
+            onDeletePost={onDeletePost}
+            userVoteValue={
+              postStateValue.postVotes.find(
+                (item) => item.postId === postStateValue.selectedPost!.id
+              )?.voteValue
+            }
+            userIsCreator={user?.uid === postStateValue.selectedPost.creatorId}
+            userIsAdmin={isAdmin}
+          />
         )}
+        <Comments
+          user={user as User}
+          selectedPost={postStateValue.selectedPost}
+          communityId={postStateValue.selectedPost?.communityId as string}
+          isCommunityAdmin={isAdmin}
+        />
+      </>
+      <>
+        <About communityData={communityData} />
       </>
-      {currentCommunity && <About communityData={currentCommunity} />}
-      {/* Right */}
-      <></>
     </PageContent>
   );
 };
+
 export default PostPage;
diff --git a/app/community/[communityId]/page.tsx b/app/community/[communityId]/page.tsx
index b3bf8d4..d2cef6e 100644
--- a/app/community/[communityId]/page.tsx
+++ b/app/community/[communityId]/page.tsx
@@ -1,6 +1,6 @@
 import { getCommunityData } from "@/lib/community/getCommunityData";
 import { notFound } from "next/navigation";
-import CommunityClientPage from "./CommunityClientPage";
+import CommunityClientPage from "./comments/CommunityClientPage";
 
 /**
  * Server component that loads community data and renders the client view.
diff --git a/components/community/about/About.tsx b/components/community/about/About.tsx
index 44cdb81..193c680 100644
--- a/components/community/about/About.tsx
+++ b/components/community/about/About.tsx
@@ -7,6 +7,7 @@ import CommunityMembersModal from "../../modal/community-members/CommunityMember
 import AboutCommunity from "./AboutCommunity";
 import AboutHeaderBar from "./AboutHeaderBar";
 import AdminSectionAbout from "./AdminSectionAbout";
+import useCommunityPermissions from "@/hooks/community/useCommunityPermissions";
 
 /**
  * @param {string} communityName - Name of the community
@@ -37,6 +38,11 @@ const About: React.FC<AboutProps> = ({ communityData }) => {
     (item) => item.communityId === communityData.id
   );
   const [isMembersModalOpen, setMembersModalOpen] = useState(false);
+  const { canView } = useCommunityPermissions(communityData);
+
+  if (!canView) {
+    return null;
+  }
 
   return (
     // sticky position for the about section
diff --git a/hooks/community/useCommunityPermissions.tsx b/hooks/community/useCommunityPermissions.tsx
index 7947cc0..fd66dc1 100644
--- a/hooks/community/useCommunityPermissions.tsx
+++ b/hooks/community/useCommunityPermissions.tsx
@@ -2,12 +2,15 @@ import { Community } from "@/types/community";
 import { auth } from "@/firebase/clientApp";
 import { useAuthState } from "react-firebase-hooks/auth";
 import useCommunityState from "./useCommunityState";
-import { checkCommunityPermission } from "@/lib/community/communityPermissions";
+import {
+  checkCommunityPermission,
+  checkCommunityViewPermission,
+} from "@/lib/community/communityPermissions";
 
 /**
  * Calculates permission flags for the current user within a community.
  * @param communityData - Community to check against.
- * @returns Boolean flags for creator, admin, admin-management rights, posting, and commenting.
+ * @returns Boolean flags for creator, admin, admin-management rights, posting, commenting, and viewing.
  */
 const useCommunityPermissions = (communityData?: Community) => {
   const [user] = useAuthState(auth);
@@ -20,6 +23,7 @@ const useCommunityPermissions = (communityData?: Community) => {
       canManageAdmins: false,
       canPost: false,
       canComment: false,
+      canView: false,
     };
   }
 
@@ -32,12 +36,18 @@ const useCommunityPermissions = (communityData?: Community) => {
     communityStateValue.mySnippets
   );
 
+  const canView = checkCommunityViewPermission(
+    communityData,
+    communityStateValue.mySnippets
+  );
+
   return {
     isCreator,
     isAdmin,
     canManageAdmins: isAdmin,
     canPost: hasPermission,
     canComment: hasPermission,
+    canView,
   };
 };
 
diff --git a/lib/community/communityPermissions.ts b/lib/community/communityPermissions.ts
index ce2fca1..6a9d34d 100644
--- a/lib/community/communityPermissions.ts
+++ b/lib/community/communityPermissions.ts
@@ -12,7 +12,10 @@ export const checkCommunityPermission = (
   community: Community,
   userSnippets: CommunitySnippet[]
 ): boolean => {
-  if (community.privacyType === "restricted") {
+  if (
+    community.privacyType === "restricted" ||
+    community.privacyType === "private"
+  ) {
     return !!userSnippets.find(
       (snippet) => snippet.communityId === community.id
     );
@@ -20,3 +23,23 @@ export const checkCommunityPermission = (
   // Public communities allow everyone to post/comment (assuming they are authenticated, which is checked elsewhere)
   return true;
 };
+
+/**
+ * Checks if a user has permission to view content in a community.
+ *
+ * @param community - The community to check permissions for.
+ * @param userSnippets - The list of community snippets for the user (indicating membership).
+ * @returns boolean - True if the user has permission to view, false otherwise.
+ */
+export const checkCommunityViewPermission = (
+  community: Community,
+  userSnippets: CommunitySnippet[]
+): boolean => {
+  if (community.privacyType === "private") {
+    return !!userSnippets.find(
+      (snippet) => snippet.communityId === community.id
+    );
+  }
+  // Public and restricted communities allow everyone to view content
+  return true;
+};

From 80683156d5a4622cb448017e9c6262e8d80786a3 Mon Sep 17 00:00:00 2001
From: Maruf Bepary <bepary71@gmail.com>
Date: Wed, 10 Dec 2025 22:08:36 +0000
Subject: [PATCH 3/3] Tweaks for restricted and private communities - Gray out
 voting buttons - Use common component to show restricted access - Removed
 Create post button from about component card - Showing restriction banner in
 the create post page

---
 .../comments/CommunityClientPage.tsx          | 23 +------
 .../comments/[pid]/PostClientPage.tsx         | 67 ++++++++-----------
 .../submit/SubmitPostClientPage.tsx           | 15 +++++
 .../community/RestrictedCommunityBanner.tsx   | 34 ++++++++++
 components/community/about/About.tsx          | 20 +++---
 components/posts/Posts.tsx                    |  3 +-
 components/posts/post-item/PostItem.tsx       |  2 +
 components/posts/post-item/VoteSection.tsx    | 34 +++++++---
 hooks/posts/usePostVote.tsx                   | 39 ++++++++++-
 9 files changed, 159 insertions(+), 78 deletions(-)
 create mode 100644 components/community/RestrictedCommunityBanner.tsx

diff --git a/app/community/[communityId]/comments/CommunityClientPage.tsx b/app/community/[communityId]/comments/CommunityClientPage.tsx
index 8393e36..013a22a 100644
--- a/app/community/[communityId]/comments/CommunityClientPage.tsx
+++ b/app/community/[communityId]/comments/CommunityClientPage.tsx
@@ -7,11 +7,11 @@ import CommunityHeader from "@/components/community/community-header/CommunityHe
 import PageContent from "@/components/layout/PageContent";
 import Posts from "@/components/posts/Posts";
 import useCommunityPermissions from "@/hooks/community/useCommunityPermissions";
+import RestrictedCommunityBanner from "@/components/community/RestrictedCommunityBanner";
 import { Community } from "@/types/community";
-import { Flex, Text, Icon, Stack } from "@chakra-ui/react";
+import { Stack } from "@chakra-ui/react";
 import { useAtom } from "jotai";
 import React, { useEffect } from "react";
-import { FaLock } from "react-icons/fa";
 
 type CommunityPageProps = {
   communityData: Community;
@@ -55,24 +55,7 @@ const CommunityClientPage: React.FC<CommunityPageProps> = ({
               <Posts communityData={currentCommunity} />
             </>
           ) : (
-            <Flex
-              direction="column"
-              justify="center"
-              align="center"
-              border="1px solid"
-              borderColor={{ base: "gray.300", _dark: "gray.600" }}
-              borderRadius={"xl"}
-              p={10}
-              bg={{ base: "white", _dark: "gray.800" }}
-            >
-              <Icon as={FaLock} fontSize={50} color="gray.400" mb={4} />
-              <Text fontWeight={600} fontSize="lg">
-                This community is private
-              </Text>
-              <Text color="gray.500">
-                Posts are only available to subscribers.
-              </Text>
-            </Flex>
+            <RestrictedCommunityBanner />
           )}
         </>
         <>{canView && <About communityData={currentCommunity} />}</>
diff --git a/app/community/[communityId]/comments/[pid]/PostClientPage.tsx b/app/community/[communityId]/comments/[pid]/PostClientPage.tsx
index 1f75a13..9f8dc20 100644
--- a/app/community/[communityId]/comments/[pid]/PostClientPage.tsx
+++ b/app/community/[communityId]/comments/[pid]/PostClientPage.tsx
@@ -12,14 +12,14 @@ import usePostDeletion from "@/hooks/posts/usePostDeletion";
 import usePostState from "@/hooks/posts/usePostState";
 import usePostVote from "@/hooks/posts/usePostVote";
 import usePostVoteSync from "@/hooks/posts/usePostVoteSync";
+import RestrictedCommunityBanner from "@/components/community/RestrictedCommunityBanner";
 import { Community } from "@/types/community";
 import { Post } from "@/types/post";
-import { Stack, Flex, Icon, Text } from "@chakra-ui/react";
+import { Stack } from "@chakra-ui/react";
 import { User } from "firebase/auth";
 import { useAtom } from "jotai";
 import React, { useEffect } from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
-import { FaLock } from "react-icons/fa";
 
 type PostPageProps = {
   communityData: Community;
@@ -42,7 +42,8 @@ const PostPage: React.FC<PostPageProps> = ({ communityData, postData }) => {
     useAtom(communityStateAtom);
   const currentCommunity =
     communityStateValue.currentCommunity || communityData;
-  const { isAdmin, canView } = useCommunityPermissions(currentCommunity);
+  const { isAdmin, canView, canPost } =
+    useCommunityPermissions(currentCommunity);
   const [user] = useAuthState(auth);
 
   useEffect(() => {
@@ -64,22 +65,7 @@ const PostPage: React.FC<PostPageProps> = ({ communityData, postData }) => {
   if (!canView) {
     return (
       <PageContent>
-        <Flex
-          direction="column"
-          justify="center"
-          align="center"
-          border="1px solid"
-          borderColor={{ base: "gray.300", _dark: "gray.600" }}
-          borderRadius={"xl"}
-          p={10}
-          bg={{ base: "white", _dark: "gray.800" }}
-        >
-          <Icon as={FaLock} fontSize={50} color="gray.400" mb={4} />
-          <Text fontWeight={600} fontSize="lg">
-            This community is private
-          </Text>
-          <Text color="gray.500">Posts are only shown to subscribers.</Text>
-        </Flex>
+        <RestrictedCommunityBanner />
         <></>
       </PageContent>
     );
@@ -88,26 +74,31 @@ const PostPage: React.FC<PostPageProps> = ({ communityData, postData }) => {
   return (
     <PageContent>
       <>
-        {postStateValue.selectedPost && (
-          <PostItem
-            post={postStateValue.selectedPost}
-            onVote={onVote}
-            onDeletePost={onDeletePost}
-            userVoteValue={
-              postStateValue.postVotes.find(
-                (item) => item.postId === postStateValue.selectedPost!.id
-              )?.voteValue
-            }
-            userIsCreator={user?.uid === postStateValue.selectedPost.creatorId}
-            userIsAdmin={isAdmin}
+        <Stack gap={4}>
+          {postStateValue.selectedPost && (
+            <PostItem
+              post={postStateValue.selectedPost}
+              onVote={onVote}
+              onDeletePost={onDeletePost}
+              userVoteValue={
+                postStateValue.postVotes.find(
+                  (item) => item.postId === postStateValue.selectedPost!.id
+                )?.voteValue
+              }
+              userIsCreator={
+                user?.uid === postStateValue.selectedPost.creatorId
+              }
+              userIsAdmin={isAdmin}
+              votingDisabled={!canPost}
+            />
+          )}
+          <Comments
+            user={user as User}
+            selectedPost={postStateValue.selectedPost}
+            communityId={postStateValue.selectedPost?.communityId as string}
+            isCommunityAdmin={isAdmin}
           />
-        )}
-        <Comments
-          user={user as User}
-          selectedPost={postStateValue.selectedPost}
-          communityId={postStateValue.selectedPost?.communityId as string}
-          isCommunityAdmin={isAdmin}
-        />
+        </Stack>
       </>
       <>
         <About communityData={communityData} />
diff --git a/app/community/[communityId]/submit/SubmitPostClientPage.tsx b/app/community/[communityId]/submit/SubmitPostClientPage.tsx
index 519101a..7f562ca 100644
--- a/app/community/[communityId]/submit/SubmitPostClientPage.tsx
+++ b/app/community/[communityId]/submit/SubmitPostClientPage.tsx
@@ -12,6 +12,8 @@ import { Box, Stack, Text } from "@chakra-ui/react";
 import { useAtom, useSetAtom } from "jotai";
 import React, { useEffect } from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
+import useCommunityPermissions from "@/hooks/community/useCommunityPermissions";
+import RestrictedCommunityBanner from "@/components/community/RestrictedCommunityBanner";
 
 type SubmitPostPageProps = {
   communityData: Community;
@@ -37,6 +39,19 @@ const SubmitPostPage: React.FC<SubmitPostPageProps> = ({ communityData }) => {
 
   const currentCommunity =
     communityStateValue.currentCommunity || communityData;
+  const { canPost } = useCommunityPermissions(currentCommunity);
+
+  if (!canPost) {
+    return (
+      <PageContent>
+        <RestrictedCommunityBanner
+          title="Restricted Access"
+          description="Only subscribers can create posts in this community."
+        />
+        <About communityData={currentCommunity} />
+      </PageContent>
+    );
+  }
 
   return (
     <PageContent>
diff --git a/components/community/RestrictedCommunityBanner.tsx b/components/community/RestrictedCommunityBanner.tsx
new file mode 100644
index 0000000..2c19097
--- /dev/null
+++ b/components/community/RestrictedCommunityBanner.tsx
@@ -0,0 +1,34 @@
+import { Flex, Icon, Text } from "@chakra-ui/react";
+import React from "react";
+import { FaLock } from "react-icons/fa";
+
+type RestrictedCommunityBannerProps = {
+  title?: string;
+  description?: string;
+};
+
+const RestrictedCommunityBanner: React.FC<RestrictedCommunityBannerProps> = ({
+  title = "This community is private",
+  description = "Posts are only shown to subscribers.",
+}) => {
+  return (
+    <Flex
+      direction="column"
+      justify="center"
+      align="center"
+      border="1px solid"
+      borderColor={{ base: "gray.300", _dark: "gray.600" }}
+      borderRadius={"xl"}
+      p={10}
+      bg={{ base: "white", _dark: "gray.800" }}
+    >
+      <Icon as={FaLock} fontSize={50} color="gray.400" mb={4} />
+      <Text fontWeight={600} fontSize="lg">
+        {title}
+      </Text>
+      <Text color="gray.500">{description}</Text>
+    </Flex>
+  );
+};
+
+export default RestrictedCommunityBanner;
diff --git a/components/community/about/About.tsx b/components/community/about/About.tsx
index 193c680..ae7c981 100644
--- a/components/community/about/About.tsx
+++ b/components/community/about/About.tsx
@@ -38,7 +38,7 @@ const About: React.FC<AboutProps> = ({ communityData }) => {
     (item) => item.communityId === communityData.id
   );
   const [isMembersModalOpen, setMembersModalOpen] = useState(false);
-  const { canView } = useCommunityPermissions(communityData);
+  const { canView, canPost } = useCommunityPermissions(communityData);
 
   if (!canView) {
     return null;
@@ -65,14 +65,16 @@ const About: React.FC<AboutProps> = ({ communityData }) => {
         )}
         <Stack>
           <AboutCommunity communityData={communityData} />
-          <Button
-            width="100%"
-            onClick={() => {
-              router.push(`/community/${communityData.id}/submit`);
-            }}
-          >
-            Create Post
-          </Button>
+          {canPost && (
+            <Button
+              width="100%"
+              onClick={() => {
+                router.push(`/community/${communityData.id}/submit`);
+              }}
+            >
+              Create Post
+            </Button>
+          )}
           {isJoined && (
             <Button
               width="100%"
diff --git a/components/posts/Posts.tsx b/components/posts/Posts.tsx
index e7f877d..ecf6008 100644
--- a/components/posts/Posts.tsx
+++ b/components/posts/Posts.tsx
@@ -30,7 +30,7 @@ const Posts: React.FC<PostsProps> = ({ communityData }) => {
   const { onVote } = usePostVote(postStateValue, setPostStateValue);
   const { onDeletePost } = usePostDeletion(setPostStateValue);
   usePostVoteSync(setPostStateValue);
-  const { isAdmin } = useCommunityPermissions(communityData);
+  const { isAdmin, canPost } = useCommunityPermissions(communityData);
 
   const { loading, fetchPosts, ref, noMorePosts } = usePostsFeed({
     communityId: communityData.id,
@@ -62,6 +62,7 @@ const Posts: React.FC<PostsProps> = ({ communityData }) => {
               onVote={onVote}
               onSelectPost={onSelectPost}
               onDeletePost={onDeletePost}
+              votingDisabled={!canPost}
             />
           ))}
           {!noMorePosts ? (
diff --git a/components/posts/post-item/PostItem.tsx b/components/posts/post-item/PostItem.tsx
index 48fa319..39b4682 100644
--- a/components/posts/post-item/PostItem.tsx
+++ b/components/posts/post-item/PostItem.tsx
@@ -26,6 +26,7 @@ type PostItemProps = {
   onDeletePost: (post: Post) => Promise<boolean>; // function to handle deleting post
   onSelectPost?: (post: Post) => void; // optional because once a post is selected it cannot be reselected
   showCommunityImage?: boolean;
+  votingDisabled?: boolean;
 };
 
 /**
@@ -49,6 +50,7 @@ const PostItem: React.FC<PostItemProps> = ({
   onDeletePost,
   onSelectPost,
   showCommunityImage,
+  votingDisabled,
 }) => {
   const [loadingImage, setLoadingImage] = useState(true);
   const [error, setError] = useState(false);
diff --git a/components/posts/post-item/VoteSection.tsx b/components/posts/post-item/VoteSection.tsx
index 746bdc6..9cad186 100644
--- a/components/posts/post-item/VoteSection.tsx
+++ b/components/posts/post-item/VoteSection.tsx
@@ -17,22 +17,32 @@ type VoteSectionProps = {
     communityId: string
   ) => void;
   post: Post;
+  votingDisabled?: boolean;
 };
 
 const VoteSection: React.FC<VoteSectionProps> = ({
   userVoteValue,
   onVote,
   post,
+  votingDisabled,
 }) => {
   return (
     <>
       <Icon
         as={userVoteValue === 1 ? IoArrowUpCircleSharp : IoArrowUpCircleOutline}
-        color={userVoteValue === 1 ? "red.500" : "gray.500"}
+        color={
+          votingDisabled
+            ? "gray.300"
+            : userVoteValue === 1
+            ? "red.500"
+            : "gray.500"
+        }
         fontSize={22}
-        cursor="pointer"
-        _hover={{ color: "red.300" }}
-        onClick={(event) => onVote(event, post, 1, post.communityId)}
+        cursor={votingDisabled ? "not-allowed" : "pointer"}
+        _hover={votingDisabled ? undefined : { color: "red.300" }}
+        onClick={(event) =>
+          !votingDisabled && onVote(event, post, 1, post.communityId)
+        }
       />
       <Text fontSize="12pt" color={{ base: "gray.600", _dark: "gray.400" }}>
         {post.voteStatus}
@@ -43,11 +53,19 @@ const VoteSection: React.FC<VoteSectionProps> = ({
             ? IoArrowDownCircleSharp
             : IoArrowDownCircleOutline
         }
-        color={userVoteValue === -1 ? "red.500" : "gray.500"}
-        _hover={{ color: "red.300" }}
+        color={
+          votingDisabled
+            ? "gray.300"
+            : userVoteValue === -1
+            ? "red.500"
+            : "gray.500"
+        }
+        _hover={votingDisabled ? undefined : { color: "red.300" }}
         fontSize={22}
-        cursor="pointer"
-        onClick={(event) => onVote(event, post, -1, post.communityId)}
+        cursor={votingDisabled ? "not-allowed" : "pointer"}
+        onClick={(event) =>
+          !votingDisabled && onVote(event, post, -1, post.communityId)
+        }
       />
     </>
   );
diff --git a/hooks/posts/usePostVote.tsx b/hooks/posts/usePostVote.tsx
index 31811cb..762dd74 100644
--- a/hooks/posts/usePostVote.tsx
+++ b/hooks/posts/usePostVote.tsx
@@ -9,6 +9,8 @@ import { Post, PostVote } from "@/types/post";
 import { handlePostVote } from "@/lib/posts/handlePostVote";
 import { getPostVotes as getPostVotesLib } from "@/lib/posts/getPostVotes";
 import { getPost as getPostLib } from "@/lib/posts/getPost";
+import useCommunityState from "../community/useCommunityState";
+import { getCommunityData } from "@/lib/community/getCommunityData";
 
 type SetPostState = React.Dispatch<
   React.SetStateAction<{
@@ -35,6 +37,7 @@ const usePostVote = (
   const [user] = useAuthState(auth);
   const setAuthModalState = useSetAtom(authModalStateAtom);
   const showToast = useCustomToast();
+  const { communityStateValue } = useCommunityState();
 
   const onVote = async (
     event: React.MouseEvent<SVGElement, MouseEvent>,
@@ -49,8 +52,40 @@ const usePostVote = (
       return;
     }
 
+    // Check permissions
+    const isMember = !!communityStateValue.mySnippets.find(
+      (snippet) => snippet.communityId === communityId
+    );
+
+    if (!isMember) {
+      let community = communityStateValue.currentCommunity;
+
+      if (!community || community.id !== communityId) {
+        try {
+          community = await getCommunityData(communityId);
+        } catch (error) {
+          console.log(
+            "Error fetching community data for vote permission",
+            error
+          );
+        }
+      }
+
+      if (
+        community &&
+        (community.privacyType === "restricted" ||
+          community.privacyType === "private")
+      ) {
+        showToast({
+          title: "Restricted Community",
+          description: "You must be a member to vote in this community.",
+          status: "error",
+        });
+        return;
+      }
+    }
+
     try {
-      const { voteStatus } = post;
       const existingVote = postStateValue.postVotes.find(
         (v) => v.postId === post.id
       );
@@ -64,7 +99,7 @@ const usePostVote = (
       );
 
       let updatedPostVotes = [...postStateValue.postVotes];
-      const updatedPost = { ...post, voteStatus: voteStatus + voteChange };
+      const updatedPost = { ...post, voteStatus: post.voteStatus + voteChange };
       const updatedPosts = [...postStateValue.posts];
 
       if (voteIdToDelete) {