Links

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
Last modified 1mo ago