adding mod badges to post and comments

README.md

@@ -8,7 +8,7 @@ You can now download and run Memmy on your iOS device by using TestFlight. To jo
 
 ## About
 
-An Apollo-inspired iOS client for using [Lemmy](https://github.com/LemmyNet/lemmy), a federated link aggregator. Heavly influenced and inspired by Apollo for Reddit. Thanks [Christian](https://github.com/christianselig).
+An Apollo-inspired iOS client for using [Lemmy](https://github.com/LemmyNet/lemmy), a federated link aggregator. Heavily influenced and inspired by Apollo for Reddit. Thanks [Christian](https://github.com/christianselig).
 
 ## Work in Progress
 This is a work in progress and is not in a functional state - yet. I intend to release builds at least nightly on TestFlight, although I am going a bit fast right now (getting ready for the withdraw from no longer having Apollo!)
@@ -37,7 +37,7 @@ npx pod install
 
 yarn ios
 ```
-A simulator should open with the app running. To change the device type or to deply to your physical device, run `yarn ios --device` and select the device you want to deploy to.
+A simulator should open with the app running. To change the device type or to deploy to your physical device, run `yarn ios --device` and select the device you want to deploy to.
 
 ## Info
 This application uses Expo. The various pluses to using Expo/React Native are the following:

src/components/common/Comments/CommentItem.tsx

@@ -23,6 +23,7 @@ interface IProps {
   comment: ILemmyComment;
   depth?: number;
   isUnreadReply?: boolean;
+  isMod: boolean;
   onVote: (value: ILemmyVote) => void;
   onPress: () => unknown;
 }
@@ -31,6 +32,7 @@ function CommentItem({
   comment,
   depth,
   isUnreadReply,
+  isMod,
   onVote,
   onPress,
 }: IProps) {
@@ -45,6 +47,8 @@ function CommentItem({
     comment,
   });
 
+  console.log("isMod: ", isMod);
+
   const voteOption = useMemo(
     () =>
       onVote ? (
@@ -78,6 +82,7 @@ function CommentItem({
                 <AvatarUsername
                   creator={comment.comment.creator}
                   opId={comment.comment.post.creator_id}
+                  isMod={isMod}
                 />
                 <SmallVoteIcons
                   upvotes={comment.comment.counts.upvotes}

src/components/screens/Feed/components/Community/ModeratorList.tsx

@@ -11,7 +11,12 @@ function ModeratorList({ moderators }: IProps) {
   return (
     <VStack space={1}>
       {moderators.map((moderator) => (
-        <AvatarUsername creator={moderator.moderator} isMod showPill={false} />
+        <AvatarUsername
+          creator={moderator.moderator}
+          key={moderator.moderator.id}
+          isMod
+          showPill={false}
+        />
       ))}
     </VStack>
   );

src/components/screens/Post/PostScreen.tsx

@@ -28,6 +28,7 @@ import { clearEditComment } from "../../../slices/comments/editCommentSlice";
 import { clearNewComment } from "../../../slices/comments/newCommentSlice";
 import PostCommentItem from "./components/PostCommentItem";
 import usePost from "../../../hooks/post/usePost";
+import useCommunity from "../../../hooks/communities/useCommunity";
 import CommentSortButton from "./components/CommentSortButton";
 
 interface IProps {
@@ -38,6 +39,10 @@ function PostScreen({ navigation }: IProps) {
   const { postKey } = useRoute<any>().params;
   const postHook = usePost();
   const currentPost = useCurrentPost(postKey);
+  const communityHook = useCommunity(currentPost.post.community_id);
+  const isMod = communityHook.moderators.some(
+    (mod) => mod.moderator.id === currentPost.post.creator_id
+  );
   const newComment = useNewComment();
   const editedComment = useEditedComment();
   const rerenderComments = usePostRerenderComments(postKey);
@@ -48,6 +53,8 @@ function PostScreen({ navigation }: IProps) {
   const { t } = useTranslation();
   const theme = useTheme();
 
+  console.log("currentPost_community_id: ", currentPost.post.community_id);
+
   useEffect(() => {
     postHook.doLoad();
 
@@ -67,6 +74,10 @@ function PostScreen({ navigation }: IProps) {
     });
   }, [commentsSort]);
 
+  useEffect(() => {
+    communityHook.doLoad();
+  }, []);
+
   useEffect(
     () =>
       // Remove the post when we are finished
@@ -134,15 +145,18 @@ function PostScreen({ navigation }: IProps) {
     clearEditComment();
   }, [editedComment]);
 
-  // Get the comments that are visible. Only recal whenever we trigger the render
+  // Get the comments that are visible. Only recall whenever we trigger the render
   const visibleComments = useMemo(
     () => comments.filter((c) => !c.hidden),
     [rerenderComments]
   );
 
+  console.log("PS_isMod: ", isMod);
   // Comment item renderer
   const commentItem = useCallback(
-    ({ item }) => <PostCommentItem commentId={item.comment.comment.id} />,
+    ({ item }) => (
+      <PostCommentItem commentId={item.comment.comment.id} isMod={isMod} />
+    ),
     [currentPost.post.id]
   );
 
@@ -170,7 +184,7 @@ function PostScreen({ navigation }: IProps) {
     return (
       <VStack flex={1} backgroundColor={theme.colors.app.bg}>
         <FlashList
-          ListHeaderComponent={<PostHeader />}
+          ListHeaderComponent={<PostHeader isMod />}
           ListFooterComponent={<PostFooter />}
           data={visibleComments}
           renderItem={commentItem}

src/components/screens/Post/components/PostCommentItem.tsx

@@ -11,9 +11,10 @@ import {
 
 interface IProps {
   commentId: number;
+  isMod: boolean;
 }
 
-function PostCommentItem({ commentId }: IProps) {
+function PostCommentItem({ commentId, isMod }: IProps) {
   const { postKey } = useRoute<any>().params;
   const comment = usePostComment(postKey, commentId);
 
@@ -68,7 +69,16 @@ function PostCommentItem({ commentId }: IProps) {
     });
   }, [comment.comment.comment.id]);
 
-  return <CommentItem comment={comment} onVote={onVote} onPress={onPress} />;
+  console.log("PCI_isMod: ", isMod);
+
+  return (
+    <CommentItem
+      comment={comment}
+      onVote={onVote}
+      onPress={onPress}
+      isMod={isMod}
+    />
+  );
 }
 
 export default React.memo(PostCommentItem);

src/components/screens/Post/components/PostHeader.tsx

@@ -22,7 +22,7 @@ import {
 } from "../../../../stores/posts/postsStore";
 import { setPostCollapsed } from "../../../../stores/posts/actions";
 
-function PostHeader() {
+function PostHeader({ isMod = false }: { isMod?: boolean }) {
   const { postKey } = useRoute<any>().params;
 
   const currentPost = useCurrentPost(postKey);
@@ -59,7 +59,7 @@ function PostHeader() {
       </Pressable>
 
       <HStack mb={2} mx={4} space={2}>
-        <AvatarUsername creator={currentPost.creator} />
+        <AvatarUsername creator={currentPost.creator} isMod={isMod} />
       </HStack>
       <HStack space={2} mx={4} mb={2}>
         <CommunityLink

src/hooks/communities/useCommunity.ts

@@ -5,7 +5,7 @@ import { handleLemmyError } from "../../helpers/LemmyErrorHelper";
 
 interface UseCommunity {
   community: CommunityView | null;
-  moderators: CommunityModeratorView[] | [];
+  moderators: CommunityModeratorView[];
   setCommunity: React.Dispatch<React.SetStateAction<CommunityView | null>>;
   communityLoading: boolean;
   communityError: boolean;