@amityco/react-native-social-uikit 4.0.0-df1703f8.0 → 4.0.0-e0eb8745.0

package/src/social/features/community/CommentsNotificationSetting/CommentsNotificationSetting.tsx

@@ -1,170 +1,38 @@
-import * as z from 'zod';
-import { useMemo } from 'react';
-import { useStyles } from './styles';
-import Header from './components/Header';
 import { ScrollView, View } from 'react-native';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Controller, useForm } from 'react-hook-form';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import { Controller } from 'react-hook-form';
 import { Typography } from '../../../../core/components/Typography/Typography';
-import { useNavigation } from '@react-navigation/native';
-import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { RootStackParamList } from '../../../../core/routes/RouteParamList';
 import { Radio } from '../../../../core/components/Radio';
-import { useMutation } from '@tanstack/react-query';
-import { CommunityRepository } from '@amityco/ts-sdk-react-native';
-import { useToast } from '../../../../core/stores/slices/toastSlice';
-
-type CommunityCommentsNotificationSettingProps = {
-  community: Amity.Community;
-};
-
-const schema = z.object({
-  reactComments: z.enum(['Everyone', 'Only moderator', 'Off']),
-  newComments: z.enum(['Everyone', 'Only moderator', 'Off']),
-  replies: z.enum(['Everyone', 'Only moderator', 'Off']),
-});
-
-type CommunityCommentsNotificationSettingFormValues = z.infer<typeof schema>;
+import Header from './components/Header';
+import { RootStackParamList } from '../../../../core/routes/RouteParamList';
+import { useCommentsNotificationSetting } from './hooks/useCommentsNotificationSetting';
 
-const useCommunityCommentsNotificationSetting = ({
+export function CommentsNotificationSetting({
   community,
-}: CommunityCommentsNotificationSettingProps) => {
-  const { styles, theme } = useStyles();
-  const { showToast } = useToast();
-  const navigation =
-    useNavigation<
-      NativeStackNavigationProp<
-        RootStackParamList,
-        'CommunityCommentsNotificationSetting'
-      >
-    >();
-
+}: RootStackParamList['CommunityCommentsNotificationSetting']) {
   const {
-    control,
-    handleSubmit,
-    formState: { isDirty, isValid, isSubmitting },
-  } = useForm<CommunityCommentsNotificationSettingFormValues>({
-    resolver: zodResolver(schema),
-    mode: 'onChange',
-    values: {
-      reactComments: 'Everyone',
-      newComments: 'Everyone',
-      replies: 'Everyone',
-    },
-  });
-
-  const { mutateAsync } = useMutation<
-    Amity.Cached<Amity.Community>,
-    Error,
-    CommunityCommentsNotificationSettingFormValues
-  >({
-    mutationFn: () =>
-      CommunityRepository.updateCommunity(community.communityId, {}),
-    onSuccess: () => {
-      navigation.navigate('CommunityProfilePage', {
-        communityId: community.communityId,
-      });
-      showToast({
-        type: 'success',
-        message: 'Successfully updated community profile.',
-      });
-    },
-    onError: () => {
-      showToast({
-        type: 'informative',
-        message: 'Failed to save your community profile. Please try again.',
-      });
-    },
-  });
-
-  const onSubmit = async (
-    data: CommunityCommentsNotificationSettingFormValues
-  ) => {
-    await mutateAsync(data);
-  };
-
-  const notifications = useMemo(
-    () =>
-      [
-        {
-          title: 'React comments',
-          description:
-            'Receive notifications when someone like your comment in this community.',
-          radio: {
-            name: 'reactComments',
-            items: [
-              { label: 'Everyone', value: 'Everyone' },
-              { label: 'Only moderator', value: 'Only moderator' },
-              { label: 'Off', value: 'Off' },
-            ],
-          },
-        },
-        {
-          title: 'New comments',
-          description:
-            'Receive notifications when someone comment to your posts in this community.',
-          radio: {
-            name: 'newComments',
-            items: [
-              { label: 'Everyone', value: 'Everyone' },
-              { label: 'Only moderator', value: 'Only moderator' },
-              { label: 'Off', value: 'Off' },
-            ],
-          },
-        },
-        {
-          title: 'Replies',
-          description:
-            'Receive notifications when someone comment to your comments in this community.',
-          radio: {
-            name: 'replies',
-            items: [
-              { label: 'Everyone', value: 'Everyone' },
-              { label: 'Only moderator', value: 'Only moderator' },
-              { label: 'Off', value: 'Off' },
-            ],
-          },
-        },
-      ] as const,
-    []
-  );
-
-  return {
     styles,
-    theme,
     control,
-    notifications,
-    disabled: !isDirty || !isValid || isSubmitting,
-    handleSubmit,
-    onSubmit,
     isDirty,
-  };
-};
-
-const CommunityCommentsNotificationSetting = ({
-  community,
-}: CommunityCommentsNotificationSettingProps) => {
-  const {
-    styles,
-    control,
-    notifications,
     disabled,
     onSubmit,
     handleSubmit,
-    isDirty,
-  } = useCommunityCommentsNotificationSetting({
-    community,
-  });
+    notifications,
+    accessibilityId,
+  } = useCommentsNotificationSetting({ community });
 
   return (
-    <SafeAreaView style={styles.container} edges={['top']}>
+    <SafeAreaView
+      edges={['top']}
+      testID={accessibilityId}
+      style={styles.container}
+    >
       <Header
-        onSave={handleSubmit(onSubmit)}
         disabled={disabled}
         isFormDirty={isDirty}
+        onSave={handleSubmit(onSubmit)}
       />
-      <ScrollView style={styles.scrollContainer}>
+      <ScrollView contentContainerStyle={styles.scrollContainer}>
         {notifications.map((item, index, list) => (
           <View key={item.radio.name}>
             <Controller
@@ -202,6 +70,4 @@ const CommunityCommentsNotificationSetting = ({
       </ScrollView>
     </SafeAreaView>
   );
-};
-
-export default CommunityCommentsNotificationSetting;
+}

package/src/social/features/community/CommentsNotificationSetting/components/Header/Header.tsx

@@ -6,6 +6,7 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useStyles } from './styles';
 import BackButton from '../../../../../elements/BackButton';
 import Button from '../../../../../components/Button/Button';
+import { ALERT } from '../../../../../../core/constants';
 
 type HeaderProps = {
   onSave: () => void;
@@ -24,15 +25,15 @@ function Header({ onSave, disabled, isFormDirty }: HeaderProps) {
         onPress={() => {
           if (!isFormDirty) return navigation.goBack();
           Alert.alert(
-            'Leave without finishing?',
-            'Your changes that you made may not be saved.',
+            ALERT.NOTIFICATION.LEAVE_WITHOUT_FINISHING.TITLE,
+            ALERT.NOTIFICATION.LEAVE_WITHOUT_FINISHING.MESSAGE,
             [
               {
-                text: 'Cancel',
+                text: ALERT.ACTION.CANCEL,
                 style: 'cancel',
               },
               {
-                text: 'Leave',
+                text: ALERT.NOTIFICATION.LEAVE_WITHOUT_FINISHING.ACTION,
                 style: 'destructive',
                 onPress: navigation.goBack,
               },

package/src/social/features/community/CommentsNotificationSetting/hooks/useCommentsNotificationSetting.ts

@@ -0,0 +1,194 @@
+import { useMemo } from 'react';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { RootStackParamList } from '../../../../../core/routes/RouteParamList';
+import { useStyles } from '../styles';
+import { useAmityPage } from '../../../../hooks';
+import { PageID } from '../../../../enums';
+import { useCommunityNotificationSettingsQuery } from '../../../../hooks/queries/useCommunityNotificationSettingsQuery';
+import { useToast } from '../../../../../core/stores/slices/toastSlice';
+import { TOAST } from '../../../../../core/constants';
+import { CommunityNotificationEventNameEnum } from '@amityco/ts-sdk-react-native';
+import { NOTIFICATION_RADIO_OPTIONS } from '../../shared/constants';
+import {
+  buildNotificationEvent,
+  getNotificationEventValue,
+} from '../../shared/utils';
+
+const schema = z.object({
+  reactComments: z.enum(Object.values(NOTIFICATION_RADIO_OPTIONS)),
+  newComments: z.enum(Object.values(NOTIFICATION_RADIO_OPTIONS)),
+  replies: z.enum(Object.values(NOTIFICATION_RADIO_OPTIONS)),
+});
+
+type FormValues = z.infer<typeof schema>;
+
+type Props = RootStackParamList['CommunityCommentsNotificationSetting'];
+
+export function useCommentsNotificationSetting({ community }: Props) {
+  const { styles } = useStyles();
+  const { showToast } = useToast();
+  const { accessibilityId } = useAmityPage({
+    pageId: PageID.community_comments_notification_page,
+  });
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+  const {
+    isLoading,
+    isPending,
+    data: settings,
+    enableNotifications,
+  } = useCommunityNotificationSettingsQuery({
+    communityId: community.communityId,
+  });
+
+  const formValues = useMemo<FormValues | undefined>(
+    () =>
+      settings
+        ? {
+            reactComments: getNotificationEventValue(
+              settings.events,
+              CommunityNotificationEventNameEnum.COMMENT_REACTED
+            ),
+            newComments: getNotificationEventValue(
+              settings.events,
+              CommunityNotificationEventNameEnum.COMMENT_CREATED
+            ),
+            replies: getNotificationEventValue(
+              settings.events,
+              CommunityNotificationEventNameEnum.COMMENT_REPLIED
+            ),
+          }
+        : undefined,
+    [settings]
+  );
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isDirty, isValid, isSubmitting },
+  } = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    mode: 'onChange',
+    values: formValues,
+  });
+
+  const notifications = [
+    {
+      title: 'React comments',
+      description:
+        'Receive notifications when someone like your comment in this community.',
+      radio: {
+        name: 'reactComments',
+        items: [
+          {
+            label: NOTIFICATION_RADIO_OPTIONS.everyone,
+            value: NOTIFICATION_RADIO_OPTIONS.everyone,
+          },
+          {
+            label: NOTIFICATION_RADIO_OPTIONS.onlyModerator,
+            value: NOTIFICATION_RADIO_OPTIONS.onlyModerator,
+          },
+          {
+            label: NOTIFICATION_RADIO_OPTIONS.off,
+            value: NOTIFICATION_RADIO_OPTIONS.off,
+          },
+        ],
+      },
+    },
+    {
+      title: 'New comments',
+      description:
+        'Receive notifications when someone comment to your posts in this community.',
+      radio: {
+        name: 'newComments',
+        items: [
+          {
+            label: NOTIFICATION_RADIO_OPTIONS.everyone,
+            value: NOTIFICATION_RADIO_OPTIONS.everyone,
+          },
+          {
+            label: NOTIFICATION_RADIO_OPTIONS.onlyModerator,
+            value: NOTIFICATION_RADIO_OPTIONS.onlyModerator,
+          },
+          {
+            label: NOTIFICATION_RADIO_OPTIONS.off,
+            value: NOTIFICATION_RADIO_OPTIONS.off,
+          },
+        ],
+      },
+    },
+    {
+      title: 'Replies',
+      description:
+        'Receive notifications when someone comment to your comments in this community.',
+      radio: {
+        name: 'replies',
+        items: [
+          {
+            label: NOTIFICATION_RADIO_OPTIONS.everyone,
+            value: NOTIFICATION_RADIO_OPTIONS.everyone,
+          },
+          {
+            label: NOTIFICATION_RADIO_OPTIONS.onlyModerator,
+            value: NOTIFICATION_RADIO_OPTIONS.onlyModerator,
+          },
+          {
+            label: NOTIFICATION_RADIO_OPTIONS.off,
+            value: NOTIFICATION_RADIO_OPTIONS.off,
+          },
+        ],
+      },
+    },
+  ] as const;
+
+  const onSubmit = async (data: FormValues) => {
+    try {
+      await enableNotifications({
+        communityId: community.communityId,
+        events: [
+          buildNotificationEvent(
+            CommunityNotificationEventNameEnum.COMMENT_REACTED,
+            data.reactComments
+          ),
+          buildNotificationEvent(
+            CommunityNotificationEventNameEnum.COMMENT_CREATED,
+            data.newComments
+          ),
+          buildNotificationEvent(
+            CommunityNotificationEventNameEnum.COMMENT_REPLIED,
+            data.replies
+          ),
+        ],
+      });
+      navigation.navigate('CommunityProfilePage', {
+        communityId: community.communityId,
+      });
+      showToast({
+        type: 'success',
+        message: TOAST.COMMUNITY.PROFILE.UPDATE.SUCCESS,
+      });
+    } catch {
+      showToast({
+        type: 'informative',
+        message: TOAST.COMMUNITY.PROFILE.UPDATE.FAILED,
+      });
+    }
+  };
+
+  return {
+    styles,
+    control,
+    isDirty,
+    onSubmit,
+    isLoading,
+    handleSubmit,
+    notifications,
+    accessibilityId,
+    disabled: !isDirty || !isValid || isSubmitting || isPending,
+  };
+}

package/src/social/features/community/CommentsNotificationSetting/index.tsx

@@ -1 +1 @@
-export { default } from './CommentsNotificationSetting';
+export { CommentsNotificationSetting } from './CommentsNotificationSetting';

package/src/social/features/community/CommentsNotificationSetting/styles.ts

@@ -13,8 +13,7 @@ export const useStyles = () => {
       backgroundColor: theme.colors.background,
     },
     scrollContainer: {
-      flex: 1,
-      paddingBottom: bottom + 120,
+      paddingBottom: bottom + 24,
     },
     labelContainer: {
       gap: 2,

package/src/social/features/community/LivestreamsNotificationSetting/LivestreamsNotificationSetting.tsx

@@ -1,140 +1,38 @@
-import * as z from 'zod';
-import { useMemo } from 'react';
-import { useStyles } from './styles';
-import Header from './components/Header';
 import { ScrollView, View } from 'react-native';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Controller, useForm } from 'react-hook-form';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import { Controller } from 'react-hook-form';
 import { Typography } from '../../../../core/components/Typography/Typography';
-import { useNavigation } from '@react-navigation/native';
-import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { RootStackParamList } from '../../../../core/routes/RouteParamList';
 import { Radio } from '../../../../core/components/Radio';
-import { useMutation } from '@tanstack/react-query';
-import { CommunityRepository } from '@amityco/ts-sdk-react-native';
-import { useToast } from '../../../../core/stores/slices/toastSlice';
-
-type CommunityLivestreamsNotificationSettingProps = {
-  community: Amity.Community;
-};
-
-const schema = z.object({
-  newLivestream: z.enum(['Everyone', 'Only moderator', 'Off']),
-});
-
-type CommunityLivestreamsNotificationSettingFormValues = z.infer<typeof schema>;
+import Header from './components/Header';
+import { RootStackParamList } from '../../../../core/routes/RouteParamList';
+import { useLivestreamsNotificationSetting } from './hooks/useLivestreamsNotificationSetting';
 
-const useCommunityLivestreamsNotificationSetting = ({
+export function LivestreamsNotificationSetting({
   community,
-}: CommunityLivestreamsNotificationSettingProps) => {
-  const { styles, theme } = useStyles();
-  const { showToast } = useToast();
-  const navigation =
-    useNavigation<
-      NativeStackNavigationProp<
-        RootStackParamList,
-        'CommunityLivestreamsNotificationSetting'
-      >
-    >();
-
+}: RootStackParamList['CommunityLivestreamsNotificationSetting']) {
   const {
-    control,
-    handleSubmit,
-    formState: { isDirty, isValid, isSubmitting },
-  } = useForm<CommunityLivestreamsNotificationSettingFormValues>({
-    resolver: zodResolver(schema),
-    mode: 'onChange',
-    values: {
-      newLivestream: 'Everyone',
-    },
-  });
-
-  const { mutateAsync } = useMutation<
-    Amity.Cached<Amity.Community>,
-    Error,
-    CommunityLivestreamsNotificationSettingFormValues
-  >({
-    mutationFn: () =>
-      CommunityRepository.updateCommunity(community.communityId, {}),
-    onSuccess: () => {
-      navigation.navigate('CommunityProfilePage', {
-        communityId: community.communityId,
-      });
-      showToast({
-        type: 'success',
-        message: 'Successfully updated community profile.',
-      });
-    },
-    onError: () => {
-      showToast({
-        type: 'informative',
-        message: 'Failed to save your community profile. Please try again.',
-      });
-    },
-  });
-
-  const onSubmit = async (
-    data: CommunityLivestreamsNotificationSettingFormValues
-  ) => {
-    await mutateAsync(data);
-  };
-
-  const notifications = useMemo(
-    () =>
-      [
-        {
-          title: 'Live streams',
-          description:
-            'Receive notifications when someone starts a live stream in this community.',
-          radio: {
-            name: 'newLivestream',
-            items: [
-              { label: 'Everyone', value: 'Everyone' },
-              { label: 'Only moderator', value: 'Only moderator' },
-              { label: 'Off', value: 'Off' },
-            ],
-          },
-        },
-      ] as const,
-    []
-  );
-
-  return {
     styles,
-    theme,
     control,
-    notifications,
-    disabled: !isDirty || !isValid || isSubmitting,
-    handleSubmit,
-    onSubmit,
     isDirty,
-  };
-};
-
-const CommunityLivestreamsNotificationSetting = ({
-  community,
-}: CommunityLivestreamsNotificationSettingProps) => {
-  const {
-    styles,
-    control,
-    notifications,
     disabled,
-    isDirty,
     onSubmit,
     handleSubmit,
-  } = useCommunityLivestreamsNotificationSetting({
-    community,
-  });
+    notifications,
+    accessibilityId,
+  } = useLivestreamsNotificationSetting({ community });
 
   return (
-    <SafeAreaView style={styles.container} edges={['top']}>
+    <SafeAreaView
+      edges={['top']}
+      testID={accessibilityId}
+      style={styles.container}
+    >
       <Header
+        disabled={disabled}
         isFormDirty={isDirty}
         onSave={handleSubmit(onSubmit)}
-        disabled={disabled}
       />
-      <ScrollView style={styles.scrollContainer}>
+      <ScrollView contentContainerStyle={styles.scrollContainer}>
         {notifications.map((item, index, list) => (
           <View key={item.radio.name}>
             <Controller
@@ -172,6 +70,4 @@ const CommunityLivestreamsNotificationSetting = ({
       </ScrollView>
     </SafeAreaView>
   );
-};
-
-export default CommunityLivestreamsNotificationSetting;
+}

package/src/social/features/community/LivestreamsNotificationSetting/components/Header/Header.tsx

@@ -6,6 +6,7 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useStyles } from './styles';
 import BackButton from '../../../../../elements/BackButton';
 import Button from '../../../../../components/Button/Button';
+import { ALERT } from '../../../../../../core/constants';
 
 type HeaderProps = {
   onSave: () => void;
@@ -24,15 +25,15 @@ function Header({ onSave, disabled, isFormDirty }: HeaderProps) {
         onPress={() => {
           if (!isFormDirty) return navigation.goBack();
           Alert.alert(
-            'Leave without finishing?',
-            'Your changes that you made may not be saved.',
+            ALERT.NOTIFICATION.LEAVE_WITHOUT_FINISHING.TITLE,
+            ALERT.NOTIFICATION.LEAVE_WITHOUT_FINISHING.MESSAGE,
             [
               {
-                text: 'Cancel',
+                text: ALERT.ACTION.CANCEL,
                 style: 'cancel',
               },
               {
-                text: 'Leave',
+                text: ALERT.NOTIFICATION.LEAVE_WITHOUT_FINISHING.ACTION,
                 style: 'destructive',
                 onPress: navigation.goBack,
               },