@amityco/react-native-social-uikit 4.0.0-RC10 → 4.0.0-RC11

package/src/v4/assets/icons/toast.tsx

@@ -1,18 +1,21 @@
-export const failed =
-  () => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125ZM12 19.2812C15.8672 19.2812 19.0312 16.1523 19.0312 12.25C19.0312 8.38281 15.8672 5.21875 12 5.21875C8.09766 5.21875 4.96875 8.38281 4.96875 12.25C4.96875 16.1523 8.09766 19.2812 12 19.2812ZM13.4766 15.625C13.4766 16.4688 12.8086 17.1016 12 17.1016C11.1562 17.1016 10.5234 16.4688 10.5234 15.625C10.5234 14.8164 11.1562 14.1484 12 14.1484C12.8086 14.1484 13.4766 14.8164 13.4766 15.625ZM10.5938 8.20703C10.5938 7.96094 10.7695 7.75 11.0156 7.75H12.9492C13.1953 7.75 13.3711 7.96094 13.3711 8.20703L13.125 12.9883C13.125 13.1992 12.9141 13.375 12.7031 13.375H11.2617C11.0508 13.375 10.8398 13.1992 10.8398 12.9883L10.5938 8.20703Z" fill="white"/>
+export const failed = (
+  color: string = 'currentColor'
+) => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125ZM12 19.2812C15.8672 19.2812 19.0312 16.1523 19.0312 12.25C19.0312 8.38281 15.8672 5.21875 12 5.21875C8.09766 5.21875 4.96875 8.38281 4.96875 12.25C4.96875 16.1523 8.09766 19.2812 12 19.2812ZM13.4766 15.625C13.4766 16.4688 12.8086 17.1016 12 17.1016C11.1562 17.1016 10.5234 16.4688 10.5234 15.625C10.5234 14.8164 11.1562 14.1484 12 14.1484C12.8086 14.1484 13.4766 14.8164 13.4766 15.625ZM10.5938 8.20703C10.5938 7.96094 10.7695 7.75 11.0156 7.75H12.9492C13.1953 7.75 13.3711 7.96094 13.3711 8.20703L13.125 12.9883C13.125 13.1992 12.9141 13.375 12.7031 13.375H11.2617C11.0508 13.375 10.8398 13.1992 10.8398 12.9883L10.5938 8.20703Z" fill=${color}/>
 </svg>
 
 `;
 
-export const success =
-  () => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125ZM12 5.21875C8.09766 5.21875 4.96875 8.38281 4.96875 12.25C4.96875 16.1523 8.09766 19.2812 12 19.2812C15.8672 19.2812 19.0312 16.1523 19.0312 12.25C19.0312 8.38281 15.8672 5.21875 12 5.21875ZM16.9219 9.82422C17.0625 9.96484 17.0625 10.2461 16.9219 10.4219L10.8398 16.4336C10.6641 16.6094 10.418 16.6094 10.2422 16.4336L7.04297 13.1992C6.90234 13.0586 6.90234 12.7773 7.04297 12.6016L7.85156 11.8281C8.02734 11.6523 8.27344 11.6523 8.44922 11.8281L10.5586 13.9375L15.5156 9.01562C15.6914 8.83984 15.9727 8.83984 16.1133 9.01562L16.9219 9.82422Z" fill="currentColor"/>
+export const success = (
+  color: string = 'currentColor'
+) => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125ZM12 5.21875C8.09766 5.21875 4.96875 8.38281 4.96875 12.25C4.96875 16.1523 8.09766 19.2812 12 19.2812C15.8672 19.2812 19.0312 16.1523 19.0312 12.25C19.0312 8.38281 15.8672 5.21875 12 5.21875ZM16.9219 9.82422C17.0625 9.96484 17.0625 10.2461 16.9219 10.4219L10.8398 16.4336C10.6641 16.6094 10.418 16.6094 10.2422 16.4336L7.04297 13.1992C6.90234 13.0586 6.90234 12.7773 7.04297 12.6016L7.85156 11.8281C8.02734 11.6523 8.27344 11.6523 8.44922 11.8281L10.5586 13.9375L15.5156 9.01562C15.6914 8.83984 15.9727 8.83984 16.1133 9.01562L16.9219 9.82422Z" fill=${color}/>
 </svg>
 `;
 
-export const informative =
-  () => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125ZM12 19.2812C15.8672 19.2812 19.0312 16.1523 19.0312 12.25C19.0312 8.38281 15.8672 5.21875 12 5.21875C8.09766 5.21875 4.96875 8.38281 4.96875 12.25C4.96875 16.1523 8.09766 19.2812 12 19.2812ZM12 7.39844C12.8086 7.39844 13.4766 8.06641 13.4766 8.875C13.4766 9.71875 12.8086 10.3516 12 10.3516C11.1562 10.3516 10.5234 9.71875 10.5234 8.875C10.5234 8.06641 11.1562 7.39844 12 7.39844ZM13.9688 16.3281C13.9688 16.5742 13.7578 16.75 13.5469 16.75H10.4531C10.207 16.75 10.0312 16.5742 10.0312 16.3281V15.4844C10.0312 15.2734 10.207 15.0625 10.4531 15.0625H10.875V12.8125H10.4531C10.207 12.8125 10.0312 12.6367 10.0312 12.3906V11.5469C10.0312 11.3359 10.207 11.125 10.4531 11.125H12.7031C12.9141 11.125 13.125 11.3359 13.125 11.5469V15.0625H13.5469C13.7578 15.0625 13.9688 15.2734 13.9688 15.4844V16.3281Z" fill="white"/>
+export const informative = (
+  color: string = 'currentColor'
+) => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125ZM12 19.2812C15.8672 19.2812 19.0312 16.1523 19.0312 12.25C19.0312 8.38281 15.8672 5.21875 12 5.21875C8.09766 5.21875 4.96875 8.38281 4.96875 12.25C4.96875 16.1523 8.09766 19.2812 12 19.2812ZM12 7.39844C12.8086 7.39844 13.4766 8.06641 13.4766 8.875C13.4766 9.71875 12.8086 10.3516 12 10.3516C11.1562 10.3516 10.5234 9.71875 10.5234 8.875C10.5234 8.06641 11.1562 7.39844 12 7.39844ZM13.9688 16.3281C13.9688 16.5742 13.7578 16.75 13.5469 16.75H10.4531C10.207 16.75 10.0312 16.5742 10.0312 16.3281V15.4844C10.0312 15.2734 10.207 15.0625 10.4531 15.0625H10.875V12.8125H10.4531C10.207 12.8125 10.0312 12.6367 10.0312 12.3906V11.5469C10.0312 11.3359 10.207 11.125 10.4531 11.125H12.7031C12.9141 11.125 13.125 11.3359 13.125 11.5469V15.0625H13.5469C13.7578 15.0625 13.9688 15.2734 13.9688 15.4844V16.3281Z" fill=${color}/>
 </svg>
 `;

package/src/v4/component/CommunityStories/index.tsx

@@ -5,6 +5,7 @@ import { useStory } from '../../hook/useStory';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import { SvgXml } from 'react-native-svg';
 import {
+  errorIcon,
   storyCircleCreatePlusIcon,
   storyRing,
 } from '../../../svg/svg-xml-list';
@@ -34,17 +35,18 @@ const CommunityStories = ({ communityId, community }: ICommunityStories) => {
   const { getImage } = useFile();
   const [avatarUrl, setAvatarUrl] = useState(undefined);
   const [viewStory, setViewStory] = useState(false);
-  const storyRingColor: string[] = storyTarget?.hasUnseen
-    ? (getUiKitConfig({
-        page: PageID.StoryPage,
-        component: ComponentID.StoryTab,
-        element: ElementID.StoryRing,
-      })?.progress_color as string[]) ?? ['#e2e2e2', '#e2e2e2']
-    : storyTarget?.failedStoriesCount > 0
-    ? ['#DE1029', '#DE1029']
-    : stories.length > 0
-    ? ['#e2e2e2', '#ffffff']
-    : ['#ffffff', '#ffffff'];
+  const storyRingColor: string[] =
+    hasStoryPermission && storyTarget?.failedStoriesCount > 0
+      ? ['#DE1029', '#DE1029']
+      : storyTarget?.hasUnseen
+      ? (getUiKitConfig({
+          page: PageID.StoryPage,
+          component: ComponentID.StoryTab,
+          element: ElementID.StoryRing,
+        })?.progress_color as string[]) ?? ['#e2e2e2', '#e2e2e2']
+      : stories.length > 0
+      ? ['#e2e2e2', '#ffffff']
+      : ['#ffffff', '#ffffff'];
 
   useEffect(() => {
     (async () => {
@@ -86,6 +88,7 @@ const CommunityStories = ({ communityId, community }: ICommunityStories) => {
     setViewStory(false);
     onPressCreateStory();
   }, [onPressCreateStory]);
+
   const onPressCommunityName = useCallback(() => {
     setViewStory(false);
     navigation.navigate('CommunityProfilePage', {
@@ -121,12 +124,18 @@ const CommunityStories = ({ communityId, community }: ICommunityStories) => {
               height={48}
               xml={storyRing(storyRingColor[0], storyRingColor[1])}
             />
-            {hasStoryPermission && (
-              <SvgXml
-                style={styles.storyCreateIcon}
-                xml={storyCircleCreatePlusIcon()}
-              />
-            )}
+            {hasStoryPermission ? (
+              storyTarget?.failedStoriesCount > 0 ? (
+                <SvgXml style={styles.errorIcon} xml={errorIcon()} />
+              ) : (
+                <TouchableOpacity onPress={() => onPressCreateStory()}>
+                  <SvgXml
+                    style={styles.storyCreateIcon}
+                    xml={storyCircleCreatePlusIcon()}
+                  />
+                </TouchableOpacity>
+              )
+            ) : null}
           </TouchableOpacity>
           <Typography.Caption style={styles.base}>Story</Typography.Caption>
         </>

package/src/v4/component/CommunityStories/styles.ts

@@ -91,10 +91,15 @@ export const useStyles = () => {
       alignItems: 'center',
       width: 68,
     },
+    errorIcon: {
+      position: 'absolute',
+      right: 8,
+      bottom: 0,
+    },
     storyCreateIcon: {
       position: 'absolute',
-      left: 42,
-      top: 30,
+      left: 8,
+      top: -16,
     },
     base: {
       color: theme.colors.base,

package/src/v4/component/LoadingImage/index.tsx

@@ -8,10 +8,6 @@ import {
 } from '../../../providers/file-provider';
 import { closeIcon, toastIcon } from '../../../svg/svg-xml-list';
 import { useStyles } from './styles';
-import { useTheme } from 'react-native-paper';
-import type { MyMD3Theme } from '../../../providers/amity-ui-kit-provider';
-import uiSlice from '../../../redux/slices/uiSlice';
-import { useUIKitDispatch } from '../../../redux/store';
 
 interface OverlayImageProps {
   source: string;
@@ -23,6 +19,7 @@ interface OverlayImageProps {
     index: number,
     originalPath: string
   ) => void;
+  onUploadError?: (hasError: boolean, source: string) => void;
   index?: number;
   isUploaded: boolean;
   fileId?: string;
@@ -36,6 +33,7 @@ const LoadingImage = ({
   onClose,
   index,
   onLoadFinish,
+  onUploadError,
   isUploaded = false,
   fileId = '',
   isEditMode = false,
@@ -43,9 +41,6 @@ const LoadingImage = ({
   postId,
   setIsUploading,
 }: OverlayImageProps) => {
-  const theme = useTheme() as MyMD3Theme;
-  const dispatch = useUIKitDispatch();
-  const { showToastMessage } = uiSlice.actions;
   const [loading, setLoading] = useState(true);
   const [progress, setProgress] = useState(0);
   const [isProcess, setIsProcess] = useState<boolean>(false);
@@ -84,33 +79,39 @@ const LoadingImage = ({
             source
           );
       } else {
+        setIsUploading(false);
         handleLoadEnd();
-        dispatch(showToastMessage({ toastMessage: 'Failed to upload file' }));
+        setIsProcess(false);
         setIsUploadError(true);
+        onUploadError?.(true, source);
       }
     } catch (error) {
       handleLoadEnd();
-      dispatch(showToastMessage({ toastMessage: 'Failed to upload file' }));
+      setIsProcess(false);
+      setIsUploading(false);
       setIsUploadError(true);
+      onUploadError?.(true, source);
     }
   }, [
-    dispatch,
     handleLoadEnd,
     index,
     onLoadFinish,
+    onUploadError,
     setIsUploading,
-    showToastMessage,
     source,
   ]);
 
   const handleDelete = async () => {
-    if (!fileId) return null;
-    if (!isEditMode) {
+    if (fileId && !isEditMode) {
       await deleteAmityFile(fileId);
     }
     onClose && onClose(source, fileId, postId);
   };
   useEffect(() => {
+    setIsUploadError(false);
+    onUploadError?.(false, source);
+    setProgress(0);
+    setIsProcess(false);
     if (isUploaded) {
       setLoading(false);
     } else {
@@ -151,19 +152,21 @@ const LoadingImage = ({
           )}
         </View>
       )}
-      {!loading && isUploadError ? (
-        <TouchableOpacity style={styles.overlay} onPress={onRetryUpload}>
-          <SvgXml xml={toastIcon()} width="24" height="24" />
-        </TouchableOpacity>
-      ) : (
-        <TouchableOpacity
-          style={styles.closeButton}
-          disabled={loading || isProcess}
-          onPress={handleDelete}
-        >
-          <SvgXml xml={closeIcon(theme.colors.base)} width="12" height="12" />
-        </TouchableOpacity>
+      {!loading && isUploadError && (
+        <View style={styles.failedOverlay}>
+          <TouchableOpacity style={styles.errorOverlay} onPress={onRetryUpload}>
+            <SvgXml xml={toastIcon()} width="28" height="28" />
+          </TouchableOpacity>
+        </View>
       )}
+
+      <TouchableOpacity
+        style={styles.closeButton}
+        disabled={(loading || isProcess) && !isUploadError}
+        onPress={handleDelete}
+      >
+        <SvgXml xml={closeIcon('white')} width="12" height="12" />
+      </TouchableOpacity>
     </View>
   );
 };

package/src/v4/component/LoadingImage/styles.ts

@@ -18,12 +18,28 @@ export const useStyles = () => {
       height: '100%',
       resizeMode: 'cover',
       borderRadius: 5,
+      position: 'relative',
     },
     overlay: {
       ...StyleSheet.absoluteFillObject,
       justifyContent: 'center',
       alignItems: 'center',
     },
+    failedOverlay: {
+      ...StyleSheet.absoluteFillObject,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: 'rgba(0, 0, 0, 0.4)',
+      borderRadius: 5,
+    },
+    errorOverlay: {
+      position: 'absolute',
+      top: '50%',
+      left: 0,
+      right: 0,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
     progressBar: {
       marginVertical: 10,
     },
@@ -40,6 +56,7 @@ export const useStyles = () => {
       padding: 7,
       backgroundColor: 'rgba(0, 0, 0, 0.4)',
       borderRadius: 72,
+      zIndex: 10,
     },
   });
 };

package/src/v4/component/LoadingVideo/index.tsx

@@ -18,8 +18,6 @@ import { useStyles } from './styles';
 import Video from 'react-native-video';
 import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { useTheme } from 'react-native-paper';
-import type { MyMD3Theme } from '../../../providers/amity-ui-kit-provider';
 import uiSlice from '../../../redux/slices/uiSlice';
 import { createVideoThumbnail } from 'react-native-compressor';
 import { useUIKitDispatch } from '../../../redux/store';
@@ -35,6 +33,7 @@ interface OverlayImageProps {
     originalPath: string,
     thumbNail: string
   ) => void;
+  onUploadError?: (hasError: boolean, source: string) => void;
   index?: number;
   isUploaded: boolean;
   fileId?: string;
@@ -50,6 +49,7 @@ const LoadingVideo = ({
   onClose,
   index,
   onLoadFinish,
+  onUploadError,
   isUploaded = false,
   thumbNail,
   onPlay,
@@ -59,7 +59,6 @@ const LoadingVideo = ({
   postId,
   setIsUploading,
 }: OverlayImageProps) => {
-  const theme = useTheme() as MyMD3Theme;
   const dispatch = useUIKitDispatch();
   const { showToastMessage } = uiSlice.actions;
   const [loading, setLoading] = useState(true);
@@ -129,23 +128,30 @@ const LoadingVideo = ({
       } else {
         handleLoadEnd();
         dispatch(showToastMessage({ toastMessage: 'Failed to upload file' }));
+        setIsProcess(false);
         setIsUploadError(true);
+        onUploadError?.(true, source);
       }
     } catch (error) {
       handleLoadEnd();
       dispatch(showToastMessage({ toastMessage: 'Failed to upload file' }));
+      setIsProcess(false);
       setIsUploadError(true);
+      onUploadError?.(true, source);
     }
   }, [source]);
 
   const handleDelete = async () => {
-    if (!fileId) return null;
-    if (!isEditMode) {
+    if (fileId && !isEditMode) {
       await deleteAmityFile(fileId);
     }
     onClose && onClose(source, fileId, postId);
   };
   useEffect(() => {
+    setIsUploadError(false);
+    onUploadError?.(false, source);
+    setProgress(0);
+    setIsProcess(false);
     if (isUploaded) {
       setLoading(false);
     } else {
@@ -216,10 +222,10 @@ const LoadingVideo = ({
       ) : (
         <TouchableOpacity
           style={styles.closeButton}
-          disabled={loading || isProcess}
+          disabled={(loading || isProcess) && !isUploadError}
           onPress={handleDelete}
         >
-          <SvgXml xml={closeIcon(theme.colors.base)} width="12" height="12" />
+          <SvgXml xml={closeIcon('white')} width="12" height="12" />
         </TouchableOpacity>
       )}
     </View>

package/src/v4/component/MyStories/StoryCircleItem.tsx

@@ -2,12 +2,13 @@ import { Image, Text, TouchableOpacity, View } from 'react-native';
 import React, { FC, useEffect, useState } from 'react';
 import { SvgXml } from 'react-native-svg';
 import {
+  errorIcon,
   officialIcon,
   privateIcon,
   storyRing,
 } from '../../../svg/svg-xml-list';
 import { ComponentID, ElementID, ImageSizeState, PageID } from '../../enum';
-import { useFile } from '../../hook';
+import { useFile, useStoryPermission } from '../../hook';
 import useConfig from '../../hook/useConfig';
 import { useStyles } from './styles';
 import { CommunityRepository } from '@amityco/ts-sdk-react-native';
@@ -26,18 +27,20 @@ const StoryCircleItem: FC<IStoryCircleItem> = ({
   const theme = useTheme() as MyMD3Theme;
   const [avatarUrl, setAvatarUrl] = useState(null);
   const [communityData, setCommunityData] = useState<Amity.Community>(null);
+  const hasStoryPermission = useStoryPermission(storyTarget.targetId);
   const { getImage } = useFile();
   const { getUiKitConfig } = useConfig();
   const styles = useStyles();
-  const storyRingColor: string[] = storyTarget?.hasUnseen
-    ? (getUiKitConfig({
-        page: PageID.StoryPage,
-        component: ComponentID.StoryTab,
-        element: ElementID.StoryRing,
-      })?.progress_color as string[]) ?? ['#e2e2e2', '#e2e2e2']
-    : storyTarget?.failedStoriesCount > 0
-    ? ['#DE1029', '#DE1029']
-    : ['#e2e2e2', '#e2e2e2'];
+  const storyRingColor: string[] =
+    hasStoryPermission && storyTarget?.failedStoriesCount > 0
+      ? ['#DE1029', '#DE1029']
+      : storyTarget?.hasUnseen
+      ? (getUiKitConfig({
+          page: PageID.StoryPage,
+          component: ComponentID.StoryTab,
+          element: ElementID.StoryRing,
+        })?.progress_color as string[]) ?? ['#e2e2e2', '#e2e2e2']
+      : ['#e2e2e2', '#e2e2e2'];
 
   useEffect(() => {
     if (storyTarget.targetType !== 'community') return;
@@ -80,12 +83,16 @@ const StoryCircleItem: FC<IStoryCircleItem> = ({
         height={68}
         xml={storyRing(storyRingColor[0], storyRingColor[1])}
       />
-      {communityData?.isOfficial && (
+      {hasStoryPermission && storyTarget?.failedStoriesCount > 0 ? (
+        <View style={styles.errorIcon}>
+          <SvgXml width={16} height={16} xml={errorIcon()} />
+        </View>
+      ) : communityData?.isOfficial ? (
         <SvgXml
           style={styles.officialIcon}
           xml={officialIcon(theme.colors.primary)}
         />
-      )}
+      ) : null}
       <View style={styles.textRow}>
         {!communityData?.isPublic && (
           <SvgXml width={17} height={17} xml={privateIcon(theme.colors.base)} />

package/src/v4/component/MyStories/styles.ts

@@ -82,6 +82,11 @@ export const useStyles = () => {
       left: 45,
       top: 42,
     },
+    errorIcon: {
+      position: 'absolute',
+      left: 45,
+      bottom: 24,
+    },
     scrollContainer: {
       paddingVertical: 4,
     },