Web UIKit v3.0 Migration Guide

Major breaking changes

• @amityco/js-sdk is no longer support

• The UIKit is now based on @amityco/ts-sdk is no longer support

• TypeScript support for Social/Chat Components

• remove children component as a function, render-props

• drop props-types support

• custom components config and post renderer config have been changed from

{
  [componentName: string]: ReactComponent
}  

to

{
  [componentName: string]: (props: componentProps) => ReactNode
}  

Deprecated functions

• components

  • FileUploader [src/core/components/Uploaders/Uploader.jsx]

    • use useFileUpload instead

  • LoadMore [src/social/components/LoadMore/index.jsx]

    • use LoadMoreWrapper instead

• hoc

  • withSize [src/core/hocs/withSize.jsx]

    • useSize instead

  • withSDK [src/core/hocs/withSDK.jsx]

    • useSDK instead

• hooks

  • useAsyncCallback [src/core/hooks/useAsyncCallback.ts]

    • const [isSubmitting, setIsSubmitting] = useState(false)
      const onSubmit = async () => {
        try {
          setIsSubmitting(true)
          // callback code
        } finally {
          setIsSubmitting(false);
        }
      }

  • useElement [src/core/hooks/useElement.ts]

    • const [ref, element] = useElement()
      
      <div ref={ref} />

      is equivalent to

      const elementRef = useRef<HTMLDivElement | null>(null)
      // element is elementRef.current
      <div ref={elementRef} />

  • useFollow [src/core/hooks/useFollow.ts]

    • for isFollowNone, isFollowAccepted, isFollowPending it can be replaced by useFollowStatus like this

    • const followStatus = useFollowStatus(sourceUserId)
      
      const isFollowNone = followStatus === 'none'
      const isFollowAccepted = followStatus === 'accepted'
      const isFollowPending = followStatus === 'pending'

    • for follow, followAccept, followDecline, deleteFollower just call a UserRepository.Relationship directly

      const follow = UserRepository.Relationship.follow
      const followAccept = UserRepository.Relationship.acceptMyFollower
      const followDecline = UserRepository.Relationship.declineMyFollower
      const deleteFollower = UserRepository.Relationship.unfollow

  • useCommentLike [src/social/hooks/useCommentLike.js] it can be replaced like this

• const isLiked = !!(
    comment &&
    comment.myReactions &&
    comment.myReactions.includes(LIKE_REACTION_KEY)
  );
  const totalLikes = comment?.reactions[LIKE_REACTION_KEY] || 0;
  
  const handleToggleLike = async () => {
    if (comment == null) return;
    try {
      if (!isLiked) {
        await ReactionRepository.addReaction('comment', comment.commentId, LIKE_REACTION_KEY);
        onLikeSuccess?.(comment);
      } else {
        await ReactionRepository.removeReaction('comment', comment.commentId, LIKE_REACTION_KEY);
        onUnlikeSuccess?.(comment);
      }
    } catch (_error) {
      console.error("Can't toggle like", _error);
    }
  };  

  • useCommunityMembers [src/social/hooks/useCommunityMembers.ts]

  use useCommunityMembersCollection and useCommunityModeratorsCollection instead

  • useCommunityOneMember [src/social/hooks/useCommunityOneMember.ts]

  currentMember = const currentMember = members.find((member) => member.userId === currentUserId);
  
  
  const isCommunityModerator = isModerator(currentMember?.roles);
  const hasModeratorPermissions =
    (isCommunityMember(currentMember) && isCommunityModerator) ||
    isModerator(user?.roles) ||
    isAdmin(user?.roles);
  
  for members use useCommunityMembersCollection instead
  for permission related use useCommunityPermission instead

• usePostChildren [src/social/hooks/usePostChildren.ts]

  • use usePostByIds instead

• usePostLike [src/social/hooks/usePostLike.ts]

  function isPostLikedByMe(post?: Amity.Post) {
    if (post == null || post.myReactions?.length === 0) return false;
    return post?.myReactions?.includes(LIKE_REACTION_KEY);
  }
  
    const [isActive, setIsActive] = useState(isPostLikedByMe(post));
  useEffect(() => {
    setIsActive(isPostLikedByMe(post));
  }, [post?.myReactions]);
  
  const handleToggleLike = async () => {
    if (post == null) return;
    if (!isActive) {
      await ReactionRepository.addReaction('post', post.postId, LIKE_REACTION_KEY);
      onLikeSuccess?.(post);
      setIsActive(!isActive);
    } else {
      await ReactionRepository.removeReaction('post', post.postId, LIKE_REACTION_KEY);
      onUnlikeSuccess?.(post);
      setIsActive(!isActive);
    }
  };

• useReport [src/social/hooks/useReport.ts]

  • use useUserFlaggedByMe instead

• useChannelMembers [src/chat/hooks/useChannelMembers.ts] -> useChannelMembersCollection

  • return values [channelMembers, hasMore, loadMore] to {channelMembers, isLoading, loadMore, hasMore, loadMoreHasBeenCalled }

• useChannels [src/chat/hooks/useChannels.ts] -> useChannelsCollection

  • return values [channels, hasMore, loadMore] to {channels, isLoading, loadMore, hasMore, loadMoreHasBeenCalled }

• useMessages [src/chat/hooks/useMessages.ts] -> useMessagesCollection

  • return values [messages, hasMore, loadMore] to {messages, isLoading, loadMore, hasMore, loadMoreHasBeenCalled }

• useAllUsers [src/core/hooks/useAllUsers.ts] -> useAllUsersCollection

  • return values [users, hasMore, loadMore] to {users, isLoading, loadMore, hasMore, loadMoreHasBeenCalled }

• useFollowers [src/core/hooks/useFollowers.ts] -> useFollowersCollectionCollection

  • return values [followers, hasMore, loadMore] to {followers, isLoading, loadMore, hasMore, loadMoreHasBeenCalled }

• useFollowings [src/core/hooks/useFollowings.ts] -> useFollowingsCollectionCollection

  • return values [followings, hasMore, loadMore] to {followings, isLoading, loadMore, hasMore, loadMoreHasBeenCalled }

• useUserQuery [src/core/hooks/useUserQuery.ts] -> useUsersCollection

  • return values [users, hasMore, loadMore] to {users, isLoading, loadMore, hasMore, loadMoreHasBeenCalled }

• useCategories [src/social/hooks/useCategories.ts] -> useCategoriesCollection

  • return values [categories, hasMore, loadMore] to {categories, isLoading, loadMore, hasMore, loadMoreHasBeenCalled }

• useCommunities [src/social/hooks/useCommunities.ts] -> useCommunitiesCollection

  • return values [communities, hasMore, loadMore] to {communities, isLoading, loadMore, hasMore, loadMoreHasBeenCalled }

• useMedia [src/social/hooks/useMedia.ts] -> useMediaCollection

  • return values [media, hasMore, loadMore] to {media, isLoading, loadMore, hasMore, loadMoreHasBeenCalled }

• usePosts [src/social/hooks/usePosts.ts] -> usePostsCollection

  • return values [posts, hasMore, loadMore] to {posts, isLoading, loadMore, hasMore, loadMoreHasBeenCalled }

• useRecommendedCommunities [src/social/hooks/useRecommendedCommunities.ts] -> useRecommendedCommunitiesCollection

  • return values [posts, hasMore, loadMore] to {posts, isLoading, loadMore, hasMore, loadMoreHasBeenCalled }

• useTrendingCommunities [src/social/hooks/useTrendingCommunities.ts] -> useTrendingCommunitiesCollection

  • return values [posts, hasMore, loadMore] to {posts, isLoading, loadMore, hasMore, loadMoreHasBeenCalled }

• functions

  • isEmpty [src/helpers/isEmpty.js] just use javascript equal syntax instead

  • isEqual [src/helpers/isEqual.js] just use javascript equal syntax instead

  • isPostModerator [src/helpers/utils.ts] use usePostPermission instead

  • canEditCommunity [src/helpers/utils.ts] use usePostPermission instead

  • canDeletePost [src/helpers/utils.ts] use usePostPermission instead

  • canEditPost [src/helpers/utils.ts] use usePostPermission instead

  • canReportPost [src/helpers/utils.ts] use usePostPermission instead

  • promisify [src/helpers/promisify.ts]

    use node promisify instead or
    const promise = new Promise((resolve, reject) => {
      fn(function callback(data) => {
        resolve(data)
      })
    })

  • stripUndefinedValues [src/helpers/utils.ts]

    export function stripUndefinedValues<T extends object>(obj: T): Partial<T> {
      const result: Partial<T> = {};
      
      Object.entries(obj).forEach(([key, value]) => {
        if (value !== undefined) {
          result[key as keyof T] = value;
        }
      });
      
      return result;
    }

Breaking changes functions

Opcomponents

• CommentList [src/social/components/CommentList/index.tsx]

  • props filterByParentId is removed

• hooks

  • useFollowStatus [src/core/hooks/useFollowStatus.ts]

    • parameters (sourceUserId, targetUserId) to (sourceUserId)

  • useChannelMembers [src/chat/hooks/useChannelMembers.ts]

    • parameters (channelId, memberCount) to (channelId)

    • return values [members, hasMore, loadMore] to {channelMembers, isLoading, loadMore, hasMore, loadMoreHasBeenCalled }

  • useCommentsQuery [src/core/hooks/useCommentsQuery] -> useCommentsCollection

    • parameters

      • limit has been added

      • first and last have been removed

  • useCommunity [src/core/hooks/useCommunity]

    • parameters resolver has been removed

    • return values

      • {
            community,
        	file,
            communityCategories,
        	joinCommunity,
            leaveCommunity,
            updateCommunity,
        	closeCommunity,
        }

        to

      • community