# 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
        ```