adding Community service and community mod list

src/components/common/AvatarUsername.tsx

@@ -21,10 +21,16 @@ function isUserDev(userId: number): boolean {
 function getUserPillType({
   user,
   opId,
+  isMod,
 }: {
   user: Person;
   opId?: number;
+  isMod?: boolean;
 }): NameType | undefined {
+  if (isMod) {
+    return "mod";
+  }
+
   if (isUserDev(user.id)) {
     return "dev";
   }
@@ -44,6 +50,7 @@ interface IProps {
   creator: Person;
   showAvatar?: boolean;
   opId?: number;
+  isMod?: boolean;
   children?: React.ReactNode;
   link?: boolean;
 }
@@ -52,12 +59,13 @@ function AvatarUsername({
   showAvatar = true,
   creator,
   opId,
+  isMod = false,
   children,
   link = true,
 }: IProps) {
   const { showInstanceForUsernames } = useAppSelector(selectSettings);
   const theme = useTheme();
-  const type = getUserPillType({ user: creator, opId });
+  const type = getUserPillType({ user: creator, opId, isMod });
 
   const NameColorMap: Record<
     NameType,
@@ -125,7 +133,9 @@ function AvatarUsername({
           )}
         </HStack>
         {showInstanceForUsernames && (
-          <Text fontSize="xs">{getBaseUrl(creator.actor_id)}</Text>
+          <Text fontSize="xs" color={theme.colors.app.textPrimary}>
+            {getBaseUrl(creator.actor_id)}
+          </Text>
         )}
       </VStack>
       {children}

src/components/common/ModeratorList.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Text } from "native-base";
+import AvatarUsername from "./AvatarUsername";
+
+interface IProps {
+  item: any;
+}
+
+function moderatorList({ item }: IProps) {
+  return (
+    <Text marginTop={4}>
+      - <AvatarUsername creator={item} isMod />
+    </Text>
+  );
+}
+
+export default React.memo(moderatorList);

src/components/screens/Feed/CommunityAboutScreen.tsx

@@ -1,13 +1,34 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { ScrollView, Text, useTheme, VStack } from "native-base";
 import FastImage from "@gkasdorf/react-native-fast-image";
 import { IconPlanet } from "tabler-icons-react-native";
 import { useTranslation } from "react-i18next";
 import RenderMarkdown from "../../common/Markdown/RenderMarkdown";
+import useCommunity from "../../../hooks/communities/useCommunity";
+import LoadingErrorView from "../../common/Loading/LoadingErrorView";
+import NotFoundView from "../../common/Loading/NotFoundView";
+import ModeratorList from "../../common/ModeratorList";
 
 function CommunityAboutScreen({ route }: { route: any }) {
   const { t } = useTranslation();
   const theme = useTheme();
+  const community = useCommunity(route.params.communityId);
+
+  useEffect(() => {
+    community.doLoad();
+  }, []);
+
+  if (community.communityNotFound) {
+    return <NotFoundView />;
+  }
+
+  if (community.communityLoading || !community.community) {
+    return null;
+  }
+
+  if (community.communityError) {
+    return <LoadingErrorView onRetryPress={community.doLoad} />;
+  }
 
   return (
     <ScrollView flex={1} backgroundColor={theme.colors.app.bg}>
@@ -27,6 +48,17 @@ function CommunityAboutScreen({ route }: { route: any }) {
             {t("Description")}
           </Text>
           <RenderMarkdown text={route.params.description} />
+          <Text fontSize="xl" fontWeight="bold">
+            Mods:
+          </Text>
+          <VStack p={2}>
+            {[...community.moderators].map((moderator) => (
+              <ModeratorList
+                key={moderator.moderator.id}
+                item={moderator.moderator}
+              />
+            ))}
+          </VStack>
         </VStack>
       </VStack>
     </ScrollView>

src/hooks/communities/useCommunity.ts

@@ -0,0 +1,92 @@
+import React, { useEffect } from "react";
+import { CommunityModeratorView, CommunityView } from "lemmy-js-client";
+import { lemmyAuthToken, lemmyInstance } from "../../LemmyInstance";
+import { handleLemmyError } from "../../helpers/LemmyErrorHelper";
+
+interface UseCommunity {
+  community: CommunityView | null;
+  moderators: CommunityModeratorView[] | [];
+  setCommunity: React.Dispatch<React.SetStateAction<CommunityView | null>>;
+  communityLoading: boolean;
+  communityError: boolean;
+  communityNotFound: boolean;
+
+  doLoad: (refresh?: boolean) => void;
+
+  loaded: boolean;
+  setLoaded: React.Dispatch<React.SetStateAction<any>>;
+}
+
+const useCommunity = (communityID: number): UseCommunity => {
+  // State
+  const [community, setCommunity] = React.useState<CommunityView | null>(null);
+  const [moderators, setModerators] = React.useState<CommunityModeratorView[]>(
+    []
+  );
+  const [communityLoading, setCommunityLoading] =
+    React.useState<boolean>(false);
+  const [communityError, setCommunityError] = React.useState<boolean>(false);
+  const [communityNotFound, setCommunityNotFound] =
+    React.useState<boolean>(false);
+  const [loaded, setLoaded] = React.useState(false);
+
+  useEffect(() => {
+    if (!communityID) return;
+
+    if (lemmyInstance) {
+      doLoad(true).then();
+    }
+  }, [communityID]);
+
+  const doLoad = async (refresh = false) => {
+    const loadCommunity = async () => {
+      setCommunityLoading(true);
+      setCommunityError(false);
+
+      try {
+        const res = await lemmyInstance?.getCommunity({
+          auth: lemmyAuthToken,
+          id:
+            typeof communityID === "number"
+              ? (communityID as number)
+              : undefined,
+        });
+
+        setCommunity(res.community_view);
+        setModerators(res.moderators);
+        setCommunityLoading(false);
+      } catch (e) {
+        setCommunityLoading(false);
+        setCommunityError(true);
+
+        if (e.toString() === "couldnt_find_community") {
+          setCommunityNotFound(true);
+        }
+
+        handleLemmyError(e.toString());
+      }
+      setLoaded(true);
+    };
+
+    if (communityID && (refresh || !community)) {
+      loadCommunity().then();
+    }
+  };
+
+  return {
+    community,
+    moderators,
+    setCommunity,
+
+    communityLoading,
+    communityError,
+    communityNotFound,
+
+    doLoad,
+
+    loaded,
+    setLoaded,
+  };
+};
+
+export default useCommunity;

src/hooks/feeds/useCommunityFeed.ts

@@ -91,6 +91,7 @@ const useCommunityFeed = (communityFullName: string): UseCommunityFeed => {
       banner: feed.community.community.banner,
       description: feed.community.community.description,
       title: feed.community.community.title,
+      communityId: feed.community.community.id,
     });
   };