@amityco/react-native-social-uikit 4.1.1-fe2678f6.0 → 4.2.0

package/src/social/hooks/useCommunities.ts

@@ -5,10 +5,12 @@ export const useCommunities = ({
   categoryId,
   membership = 'member',
   limit = 20,
+  sortBy = 'displayName',
 }: {
   membership?: 'all' | 'member' | 'notMember';
   categoryId?: string;
   limit?: number;
+  sortBy?: Amity.CommunitySortBy;
 } = {}) => {
   const [communities, setCommunities] = useState<Amity.Community[]>();
   const [loading, setLoading] = useState(true);
@@ -16,7 +18,7 @@ export const useCommunities = ({
     useState<() => void | null>(null);
   useEffect(() => {
     const unsubscribe = CommunityRepository.getCommunities(
-      { membership, limit, categoryId },
+      { membership, limit, categoryId, sortBy },
       ({ error, loading, data, hasNextPage, onNextPage }) => {
         if (error) return;
         if (!loading) {
@@ -31,6 +33,6 @@ export const useCommunities = ({
       }
     );
     return unsubscribe;
-  }, [categoryId, membership, limit]);
+  }, [categoryId, membership, limit, sortBy]);
   return { communities, onNextCommunityPage, loading };
 };

package/src/social/hooks/useCommunityPermission.ts

@@ -0,0 +1,40 @@
+import { Client } from '@amityco/ts-sdk-react-native';
+import { MemberRoles } from '../../core/constants';
+import { useCommunityMemberCollection } from './collections/community/useCommunityMemberCollection';
+import { useUser } from './useUser';
+import { isAdmin } from '../utils/permissions';
+
+/**
+ * Who may review a community's pending posts, resolved the way web resolves it
+ * (useCommunityPermission + useCommunityModeratorsCollection).
+ *
+ * Moderating a community is a property of the membership, not of the user: a
+ * moderator of one community carries no moderator role on their own user
+ * object. Reading the user's roles therefore misses every moderator who is not
+ * also a network-wide one.
+ */
+export const useCommunityPermission = (
+  communityId?: Amity.Community['communityId']
+) => {
+  const myId = Client.getActiveClient()?.userId;
+  const currentUser = useUser(myId ?? '');
+
+  const { members: moderators } = useCommunityMemberCollection({
+    enabled: !!communityId,
+    params: {
+      communityId: communityId as string,
+      roles: [MemberRoles.COMMUNITY_MODERATOR],
+      limit: 20,
+    },
+  });
+
+  const isCommunityModerator = !!moderators?.some(
+    (moderator) => moderator.userId === myId
+  );
+  const isGlobalAdmin = isAdmin(currentUser?.roles);
+
+  return {
+    isCommunityModerator,
+    canReviewCommunityPosts: isGlobalAdmin || isCommunityModerator,
+  };
+};

package/src/social/hooks/useCustomRankingGlobalFeed.ts

@@ -4,6 +4,7 @@ import {
 } from '@amityco/ts-sdk-react-native';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import globalFeedSlice from '../../core/stores/slices/globalfeedSlice';
+import uiSlice from '../../core/stores/slices/uiSlice';
 import { globalFeedPageLimit } from '../features/feed/components/GlobalFeed/GlobalFeed';
 import { InteractionManager } from 'react-native';
 import {
@@ -35,6 +36,7 @@ export const useCustomRankingGlobalFeed = ({
   const interactionHandleRef = useRef<{ cancel: () => void } | null>(null);
 
   const { setNewGlobalFeed } = globalFeedSlice.actions;
+  const { markFeedReloaded } = uiSlice.actions;
 
   const [fetching, setFetching] = useState(false);
   const [error, setError] = useState(false);
@@ -112,8 +114,13 @@ export const useCustomRankingGlobalFeed = ({
     onNextPageRef.current = null;
     hasInitialDataRef.current = false;
 
+    // The list keys posts by id, so a reload hands the same component
+    // instances back their old state instead of remounting them. Announce the
+    // reload so anything holding a position can start over.
+    dispatch(markFeedReloaded());
+
     unsubscribeRef.current = fetchCustomRanking();
-  }, [fetchCustomRanking]);
+  }, [dispatch, fetchCustomRanking, markFeedReloaded]);
 
   return {
     loading: fetching,

package/src/social/hooks/useFile.ts

@@ -12,6 +12,17 @@ interface useFileProps {
   type?: 'user' | 'community';
 }
 
+/**
+ * Resolves an **avatar** file to a display url.
+ *
+ * A miss — no id, no file, no url — answers with the default avatar (or
+ * community avatar) image, which is the right placeholder for a profile
+ * picture and the wrong one for anything else. Post media must not be resolved
+ * through here: handing an avatar back for a video whose thumbnail is still
+ * transcoding renders a person icon in the carousel as though it were the
+ * frame. Resolve media with FileRepository directly and let an unresolved file
+ * stay undefined.
+ */
 export const useFile = () => {
   const getImage = useCallback(
     async ({

package/src/social/screens/CommunityProfile/components/Header/Header.tsx

@@ -4,8 +4,7 @@ import { ComponentID, PageID } from '../../../../enums';
 import {
   useAmityComponent,
   useCommunity,
-  isModerator,
-  useUser,
+  useCommunityPermission,
   useGlobalBehavior,
 } from '../../../../hooks';
 import { useStyles } from './styles';
@@ -64,8 +63,21 @@ const AmityCommunityHeaderComponent: FC<AmityCommunityHeaderComponentProps> = ({
     componentId,
   });
 
-  const currentUser = useUser(client?.userId || '');
-  const isCommunityModerator = isModerator(currentUser?.roles);
+  const { canReviewCommunityPosts } = useCommunityPermission(communityId);
+
+  // A community may still be on the legacy flag when the SDK has not mapped it
+  // to `postSetting`, and reading `postSetting` alone hid the banner for those
+  // communities. Same fallback web applies.
+  const requiresPostApproval = community?.postSetting
+    ? community.postSetting === 'ADMIN_REVIEW_POST_REQUIRED'
+    : !!(community as Record<string, any>)?.needApprovalOnPostCreation;
+
+  // `postedUserId` is the field web reads; `creator` is what this screen read
+  // before. Keep both — the author of a pending post must not lose the banner
+  // if one of the two is absent from a payload.
+  const isPendingPostOwner = !!pendingPosts?.some(
+    (post) => (post.postedUserId ?? post.creator?.userId) === client?.userId
+  );
 
   const styles = useStyles(themeStyles);
 
@@ -174,18 +186,15 @@ const AmityCommunityHeaderComponent: FC<AmityCommunityHeaderComponentProps> = ({
               />
             </View>
           )}
-          {(isCommunityModerator ||
-            pendingPosts?.some(
-              (post) => post.creator?.userId === client.userId
-            )) &&
+          {(canReviewCommunityPosts || isPendingPostOwner) &&
             pendingPosts?.length > 0 &&
             community.isJoined &&
-            community?.postSetting === 'ADMIN_REVIEW_POST_REQUIRED' && (
+            requiresPostApproval && (
               <CommunityPendingPost
                 number={pendingPosts.length}
                 pageId={pageId}
                 componentId={componentId}
-                isModerator={isCommunityModerator}
+                isModerator={canReviewCommunityPosts}
                 style={styles.pendingPostWrap}
                 onPress={() => {
                   navigation.navigate('CommunityPendingRequest', {

package/src/social/utils/mediaAttachments.ts

@@ -0,0 +1,158 @@
+import type { IDisplayImage } from '../../core/types';
+
+/**
+ * The composer caps a post at 10 attachments of a single media type.
+ */
+export const MAX_MEDIA_ATTACHMENTS = 10;
+
+/**
+ * The identity fields a staged attachment must carry for the helpers below to
+ * recognise it across its own upload. See `IDisplayImage.localId`.
+ */
+export type MediaPickCandidate = IDisplayImage & {
+  localId: string;
+};
+
+/**
+ * Drop the candidates that are already staged, and any repeated inside the
+ * batch itself, preserving the order of the ones that survive.
+ *
+ * De-duplication runs against the LOCAL identity, never `fileName`: the moment
+ * an item finishes uploading the composer rewrites its `fileName` to the
+ * server's `attributes.name`, and edit-mode entries are hydrated with the
+ * fileId, so a set built from `fileName` compares server-side names against
+ * picker names and never matches. `localId` / `localFileName` are assigned once
+ * at pick time and survive the upload, so they still line up here.
+ *
+ * `localFileName` is a second key next to `localId` because the picker's
+ * `asset.id` is not populated by every configuration — the name is what catches
+ * a re-pick when no id came back. Camera captures deliberately carry no
+ * `localFileName`, so two shots never de-duplicate against each other.
+ *
+ * The drop is silent by design (no toast, no alert) and leaves the already
+ * staged copy exactly where it is, which is what keeps a re-pick of A followed
+ * by B and C rendering as A, B, C.
+ */
+export function dedupeMediaPicks<T extends MediaPickCandidate>(
+  staged: IDisplayImage[],
+  candidates: T[]
+): T[] {
+  const seenIds = new Set(
+    staged.map((item) => item.localId).filter(Boolean) as string[]
+  );
+  const seenNames = new Set(
+    staged.map((item) => item.localFileName).filter(Boolean) as string[]
+  );
+
+  const additions: T[] = [];
+  for (const candidate of candidates) {
+    const { localId, localFileName } = candidate;
+    if (seenIds.has(localId)) continue;
+    if (localFileName && seenNames.has(localFileName)) continue;
+    seenIds.add(localId);
+    if (localFileName) seenNames.add(localFileName);
+    additions.push(candidate);
+  }
+  return additions;
+}
+
+/**
+ * Append `additions` to `staged`, holding the 10-attachment cap.
+ */
+export function appendWithinCap(
+  staged: IDisplayImage[],
+  additions: IDisplayImage[]
+): IDisplayImage[] {
+  const updated = [...staged, ...additions];
+  return updated.length > MAX_MEDIA_ATTACHMENTS
+    ? updated.slice(0, MAX_MEDIA_ATTACHMENTS)
+    : updated;
+}
+
+/**
+ * Route a finished upload back to the entry it actually belongs to, matched by
+ * the local path the child was mounted with.
+ *
+ * The child reports both a positional `index` and the `originalPath`. The index
+ * is the array position the frame was RENDERED at when the upload started —
+ * LoadingVideo goes further and memoises its uploader on `[source]` alone, so
+ * it freezes the index of the render where the source last changed. Writing
+ * `data[index]` therefore lands on whatever now sits at that position: a frame
+ * removed, an upload retried after the array grew, or a slow upload finishing
+ * after its neighbours moved all put one file's remote url onto another file's
+ * entry — which is what QA saw as an already-loaded image repainting with a
+ * different picture once the network came back. Matching on `originalPath` is
+ * exact: a not-yet-uploaded entry's `url` IS the local path its child was
+ * handed, and pick de-duplication guarantees those are unique across the array.
+ *
+ * The patch is MERGED rather than replacing the entry: `localId` /
+ * `localFileName` are what the next pick de-duplicates against, and
+ * what the carousel keys its frames by, and the picker's width/height still
+ * classify the frame ratio — a wholesale replacement dropped all of them.
+ *
+ * No match means the entry is gone (closed mid-upload) or already finished, so
+ * the array is returned untouched rather than resurrecting or double-writing.
+ */
+export function applyFinishedUpload(
+  staged: IDisplayImage[],
+  originalPath: string,
+  patch: Partial<IDisplayImage>
+): IDisplayImage[] {
+  const targetIndex = staged.findIndex((item) => item.url === originalPath);
+  if (targetIndex === -1) return staged;
+  const updated = [...staged];
+  updated[targetIndex] = { ...updated[targetIndex], ...patch };
+  return updated;
+}
+
+/**
+ * Add or remove a media item's `source` from the set of in-flight uploads.
+ *
+ * The composer gates Post/Save on this set being empty. It replaced a single
+ * shared boolean that whichever upload finished FIRST flipped back to false on
+ * behalf of every other frame, unlocking Post while the rest were still
+ * uploading.
+ *
+ * Returns the same set instance when nothing changes, so a redundant report —
+ * a child clearing on unmount right after `handleLoadEnd` already cleared —
+ * does not trigger a re-render.
+ */
+export function toggleUploadingSource(
+  uploading: Set<string>,
+  source: string,
+  isUploading: boolean
+): Set<string> {
+  if (isUploading === uploading.has(source)) return uploading;
+  const updated = new Set(uploading);
+  if (isUploading) {
+    updated.add(source);
+  } else {
+    updated.delete(source);
+  }
+  return updated;
+}
+
+/**
+ * The entries the feed's local-thumbnail bridge should hold for a just-created
+ * video post.
+ *
+ * A video's server thumbnail does not exist until transcoding finishes, so the
+ * feed falls back to the frame the composer decoded at pick time, matched on
+ * the uploaded video's fileId. Entries without both halves are dropped: a row
+ * with an empty url still satisfies the feed's lookup, which suppresses its own
+ * pending state and leaves the frame blank instead of showing the play button
+ * over a plain background.
+ */
+export function toLocalVideoThumbnails(
+  videos: Pick<IDisplayImage, 'fileId' | 'thumbNail'>[]
+): { fileId: string; thumbnailUrl: string }[] {
+  return videos.reduce<{ fileId: string; thumbnailUrl: string }[]>(
+    (acc, { fileId, thumbNail }) => {
+      if (!fileId || !thumbNail) return acc;
+
+      acc.push({ fileId, thumbnailUrl: thumbNail });
+      return acc;
+    },
+    []
+  );
+}

package/src/social/utils/postChildren.ts

@@ -0,0 +1,85 @@
+import type { IVideoPost } from '../components/legacy/Social/PostList';
+
+/** A post child as the feed resolves it: the child post plus its own payload. */
+export type ResolvedPostChild = {
+  post?: Amity.Post;
+  dataType?: string;
+  data?: Record<string, any>;
+};
+
+export type ClassifiedPostChildren = {
+  /** Medium-size download urls, de-duplicated. */
+  images: string[];
+  videos: IVideoPost[];
+  polls: { pollId: string }[];
+  livestreams: Amity.Room['roomId'][];
+  /**
+   * The media children the carousel renders, in the same order — and for
+   * videos, at the same indices — as `videos`. The full-screen player is built
+   * from `videos` but opened with an index taken from this array, so a child
+   * that lands in one and not the other opens the wrong video.
+   */
+  media: Amity.Post[];
+};
+
+/**
+ * Sort a post's resolved children into what each surface needs.
+ *
+ * Every hop into a child's payload is guarded, because the cost of being wrong
+ * is out of proportion to the saving: an ErrorBoundary sits around the whole
+ * UIKit without an onError, so one TypeError in here replaces the entire app
+ * with a generic error page and takes its own stack down with it.
+ *
+ * `ContentDataVideo` types `videoFileId` as always present but every size
+ * inside it as optional, so `original` is the hop that can legitimately be
+ * missing. The keys above it are guarded on the same principle rather than on
+ * evidence that they go missing.
+ */
+export function classifyPostChildren(
+  children: ResolvedPostChild[],
+  apiRegion: string
+): ClassifiedPostChildren {
+  const images: string[] = [];
+  const videos: IVideoPost[] = [];
+  const polls: { pollId: string }[] = [];
+  const livestreams: Amity.Room['roomId'][] = [];
+  const media: Amity.Post[] = [];
+
+  children.forEach((item) => {
+    if (item?.dataType === 'image' && item?.data?.fileId) {
+      const url = `https://api.${apiRegion}.amity.co/api/v3/files/${item.data.fileId}/download?size=medium`;
+      if (!images.includes(url)) {
+        images.push(url);
+        if (item.post) media.push(item.post);
+      }
+      return;
+    }
+
+    if (item?.dataType === 'video' && item?.data?.videoFileId?.original) {
+      const isExisted = videos.some(
+        (video) =>
+          video.videoFileId?.original === item.data?.videoFileId?.original
+      );
+      if (!isExisted) {
+        videos.push(item.data as IVideoPost);
+        if (item.post) media.push(item.post);
+      }
+      return;
+    }
+
+    if (item?.dataType === 'poll' && item?.data?.pollId) {
+      if (!polls.some((poll) => poll.pollId === item.data?.pollId)) {
+        polls.push(item.data as { pollId: string });
+      }
+      return;
+    }
+
+    if (item?.dataType === 'room' && item?.data?.roomId) {
+      if (!livestreams.includes(item.data.roomId)) {
+        livestreams.push(item.data.roomId);
+      }
+    }
+  });
+
+  return { images, videos, polls, livestreams, media };
+}