Merge remote-tracking branch 'upstream/release/v4.0.0-beta.1' into de…

…velop

.storybook/decorators/UiKitDecorator.tsx

@@ -14,7 +14,7 @@ const global = {
       icon: 'user',
       items: [
         {
-          value: 'Web-Test,Web-test',
+          value: 'Web-Test,Web-Test',
           title: 'Web-Test',
         },
         {

CHANGELOG.md

@@ -2,17 +2,23 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## 4.0.0-beta.1 (2024-04-05)
+
+### Bug Fixes
+
+- update ts-sdk version ([84204c0](https://github.com/EkoCommunications/AmityUiKitWeb/commit/84204c0194d2421513f20f7ef15aea3e12b09e74))
+
 ## 4.0.0-beta.0 (2024-03-25)
 
-### 3.2.4 (2024-03-11)
+### Bug Fixes
 
-### 3.2.3 (2024-03-01)
+- add pre-release condition ([#193](https://github.com/EkoCommunications/AmityUiKitWeb/issues/193)) ([ec9c0ca](https://github.com/EkoCommunications/AmityUiKitWeb/commit/ec9c0cab3c821842fae025ba30b54813e0999103))
 
 ## 3.1.0 (2024-01-25)
 
 ### Bug Fixes
 
-* icon size ([6f604b5](https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource/commit/6f604b5b0e8f87ea32c24ff7ba9fc3deccae1988))
+- icon size ([6f604b5](https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource/commit/6f604b5b0e8f87ea32c24ff7ba9fc3deccae1988))
 
 ### 3.2.2 (2024-02-27)
 

amity-uikit.config.json

@@ -43,11 +43,11 @@
     },
     "create_story_page/*/story_hyperlink_button": {
       "hyperlink_button_icon": "hyperlink_button",
-      "background_color": "#80000000"
+      "background_color": ""
     },
     "create_story_page/*/hyper_link": {
       "hyper_link_icon": "hyper_link",
-      "background_color": "#80000000"
+      "background_color": ""
     },
     "create_story_page/*/share_story_button": {
       "share_icon": "share_story_button",
@@ -101,19 +101,19 @@
     "*/hyper_link_config_component/*": {
       "component_theme": {
         "light_theme": {
-          "primary_color": "#1054DE",
-          "secondary_color": "#292B32"
+          "primary_color": "",
+          "secondary_color": ""
         }
       }
     },
     "*/hyper_link_config_component/done_button": {
       "done_icon": "",
-      "done_button_text": "Done",
-      "background_color": "#1243EE"
+      "done_button_text": "",
+      "background_color": ""
     },
     "*/hyper_link_config_component/cancel_button": {
       "cancel_icon": "",
-      "cancel_button_text": "Cancel"
+      "cancel_button_text": ""
     },
     "*/comment_tray_component/*": {},
     "*/story_tab_component/*": {},

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@amityco/ui-kit-open-source",
-  "version": "4.0.0-beta.0",
+  "name": "@amityco/ui-kit",
+  "version": "4.0.0-beta.1",
   "engines": {
     "node": ">=16",
     "pnpm": ">=8"
@@ -39,10 +39,10 @@
     "react-dom": ">=17.0.2"
   },
   "devDependencies": {
-    "@amityco/ts-sdk": "~6.20.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@amityco/ts-sdk": "6.21.0",
+    "@fortawesome/pro-light-svg-icons": "^5.15.4",
+    "@fortawesome/pro-regular-svg-icons": "^5.15.4",
+    "@fortawesome/pro-solid-svg-icons": "^5.15.4",
     "@storybook/addon-a11y": "^7.6.7",
     "@storybook/addon-actions": "^7.6.7",
     "@storybook/addon-backgrounds": "^7.6.7",
@@ -99,6 +99,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^3.3.4",
+    "@tanstack/react-query": "^5.28.14",
     "clsx": "^2.1.0",
     "extract-colors": "^4.0.2",
     "filesize": "^9.0.11",

src/chat/hooks/useMessageFlaggedByMe.ts

@@ -1,17 +1,23 @@
 import { MessageRepository } from '@amityco/ts-sdk';
+import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 
 const useMessageFlaggedByMe = (messageId?: string) => {
-  const [isLoading, setIsLoading] = useState(true);
   const [isFlaggedByMe, setIsFlaggedByMe] = useState(false);
 
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: ['asc-uikit', 'MessageRepository', 'isMessageFlaggedByMe', messageId],
+    queryFn: () => {
+      return MessageRepository.isMessageFlaggedByMe(messageId as string);
+    },
+    enabled: messageId != null,
+  });
+
   useEffect(() => {
-    if (!messageId) return;
-    MessageRepository.isMessageFlaggedByMe(messageId).then((value) => {
-      setIsFlaggedByMe(value);
-      setIsLoading(false);
-    });
-  }, [messageId]);
+    if (data != null) {
+      setIsFlaggedByMe(data);
+    }
+  }, [data]);
 
   const flagMessage = async () => {
     if (messageId == null) return;
@@ -20,6 +26,8 @@ const useMessageFlaggedByMe = (messageId?: string) => {
       await MessageRepository.flagMessage(messageId);
     } catch (_error) {
       setIsFlaggedByMe(false);
+    } finally {
+      refetch();
     }
   };
 
@@ -30,6 +38,8 @@ const useMessageFlaggedByMe = (messageId?: string) => {
       await MessageRepository.unflagMessage(messageId);
     } catch (_error) {
       setIsFlaggedByMe(true);
+    } finally {
+      refetch();
     }
   };
 

src/constants/index.ts

@@ -1 +1,3 @@
 export const LIKE_REACTION_KEY = 'like';
+export const LOVE_REACTION_KEY = 'love';
+export const FIRE_REACTION_KEY = 'fire';

src/core/components/Tabs/styles.tsx

@@ -24,8 +24,7 @@ export const TabButton = styled.button`
   border-bottom: 2px solid transparent;
   cursor: pointer;
   outline: none;
-  color: #abaeba;
-  ${({ theme }) => theme.typography.bodyBold}
+  color: ${({ theme }) => theme.v4.colors.base.shade3};
   text-align: center;
 
   &:hover {
@@ -34,8 +33,8 @@ export const TabButton = styled.button`
 
   &.active {
     ${({ theme }) => `
-      border-bottom: 2px solid ${theme.palette.primary.main};
-      color: ${theme.palette.primary.main};
+      border-bottom: 2px solid ${theme.v4.colors.primary.default};
+      color: ${theme.v4.colors.primary.default};
     `}
   }
 

src/core/hooks/useFile.ts

@@ -1,14 +1,16 @@
 import { FileRepository } from '@amityco/ts-sdk';
-import useFetcher from './useFetcher';
+import { useQuery } from '@tanstack/react-query';
 
 const useFile = <T extends Amity.File>(fileId?: string | null) => {
-  const file = useFetcher({
-    fetchFn: FileRepository.getFile,
-    params: [fileId] as [string],
-    shouldCall: () => !!fileId,
+  const { data: file } = useQuery({
+    queryKey: ['asc-uikit', 'FileRepository', 'getFile', fileId],
+    queryFn: () => {
+      return FileRepository.getFile(fileId as string);
+    },
+    enabled: !!fileId,
   });
 
-  return file?.data as T;
+  return file?.data as T | undefined;
 };
 
 export default useFile;

src/core/hooks/useImage.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FileRepository } from '@amityco/ts-sdk';
 import useFile from './useFile';
 
@@ -18,7 +18,8 @@ const useImage = ({ fileId, imageSize = 'medium' }: UseImageProps) => {
     }
 
     async function run() {
-      const newImageUrl = await FileRepository.fileUrlWithSize(file?.fileUrl, imageSize);
+      if (file?.fileUrl == null) return;
+      const newImageUrl = FileRepository.fileUrlWithSize(file?.fileUrl, imageSize);
       setImageUrl(newImageUrl);
     }
     run();