@eohjsc/react-native-smart-city 0.3.91 → 0.3.92

package/src/screens/{ScriptDetail → Automate/ScriptDetail}/__test__/index.test.js

@@ -3,19 +3,24 @@ import { create, act } from 'react-test-renderer';
 import Toast from 'react-native-toast-message';
 
 import MockAdapter from 'axios-mock-adapter';
-import { SCProvider } from '../../../context';
-import { mockSCStore } from '../../../context/mockStore';
-import ScriptDetail from '..';
-import MenuActionMore from '../../../commons/MenuActionMore';
-import AlertAction from '../../../commons/AlertAction';
-import _TextInput from '../../../commons/Form/TextInput';
-import { AUTOMATE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
-import { API } from '../../../configs';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import ScriptDetail from '../index';
+import MenuActionMore from '../../../../commons/MenuActionMore';
+import AlertAction from '../../../../commons/AlertAction';
+import _TextInput from '../../../../commons/Form/TextInput';
+import {
+  AUTOMATE_TYPE,
+  AccessibilityLabel,
+} from '../../../../configs/Constants';
+import { API } from '../../../../configs';
 import { TouchableOpacity } from 'react-native';
-import Routes from '../../../utils/Route';
-import WrapHeaderScrollable from '../../../commons/Sharing/WrapHeaderScrollable';
-import ItemAutomate from '../../../commons/Automate/ItemAutomate';
-import api from '../../../utils/Apis/axios';
+import Routes from '../../../../utils/Route';
+import WrapHeaderScrollable from '../../../../commons/Sharing/WrapHeaderScrollable';
+import ItemAutomate from '../../../../commons/Automate/ItemAutomate';
+import api from '../../../../utils/Apis/axios';
+import Text from '../../../../commons/Text';
+import { useNavigation } from '@react-navigation/native';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -23,18 +28,6 @@ const wrapComponent = (route) => (
   </SCProvider>
 );
 
-const mockGoBack = jest.fn();
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      goBack: mockGoBack,
-      navigate: mockNavigate,
-    }),
-  };
-});
-
 const mock = new MockAdapter(api.axiosInstance);
 
 describe('Test ScriptDetail', () => {
@@ -42,18 +35,19 @@ describe('Test ScriptDetail', () => {
   let data;
   let tree;
 
+  const mockGoBack = useNavigation().goBack;
+  const mockNavigate = useNavigation().navigate;
   beforeEach(() => {
     mockGoBack.mockClear();
+    mockNavigate.mockClear();
+    mock.reset();
     route = {
       params: {
         id: 1,
-        name: 'script',
-        unit: { id: 2 },
-        type: AUTOMATE_TYPE.ONE_TAP,
-        havePermission: true,
-        automate: {
+        preAutomate: {
+          unit: 2,
           author: 'Le Minh Tam',
-          id: 1009,
+          id: 1,
           type: 'value_change',
           value_change: {
             condition: '<',
@@ -63,9 +57,6 @@ describe('Test ScriptDetail', () => {
             sensor_id: 73,
             value: 35,
           },
-          script: {
-            id: 1,
-          },
         },
       },
     };
@@ -89,7 +80,7 @@ describe('Test ScriptDetail', () => {
     });
     const instance = tree.root;
     const menu = instance.findByType(MenuActionMore);
-    const alertAction = instance.findByType(AlertAction);
+    const alertAction = instance.findAllByType(AlertAction)[0];
     const rename = menu.props.listMenuItem[0];
 
     await act(async () => {
@@ -115,7 +106,7 @@ describe('Test ScriptDetail', () => {
     });
     const instance = tree.root;
     const menu = instance.findByType(MenuActionMore);
-    const alertAction = instance.findByType(AlertAction);
+    const alertAction = instance.findAllByType(AlertAction)[0];
     const rename = menu.props.listMenuItem[0];
 
     await act(async () => {
@@ -124,7 +115,7 @@ describe('Test ScriptDetail', () => {
     expect(menu.props.isVisible).toBeFalsy();
     expect(alertAction.props.visible).toBeTruthy();
 
-    mock.onPatch(API.AUTOMATE.SCRIPT(1)).reply(500, { name: 'new_name' });
+    mock.onPatch(API.AUTOMATE.SCRIPT(1)).reply(500);
     await act(async () => {
       await alertAction.props.rightButtonClick();
     });
@@ -138,8 +129,8 @@ describe('Test ScriptDetail', () => {
     });
     const instance = tree.root;
     const menu = instance.findByType(MenuActionMore);
-    const alertAction = instance.findByType(AlertAction);
-    const deleteItem = menu.props.listMenuItem[3];
+    const alertAction = instance.findAllByType(AlertAction)[1];
+    const deleteItem = menu.props.listMenuItem[2];
 
     await act(async () => {
       await menu.props.onItemClick(deleteItem);
@@ -187,6 +178,8 @@ describe('Test ScriptDetail', () => {
 
   it('test activate one tap', async () => {
     mock.onGet(API.AUTOMATE.SCRIPT(1)).reply(200, data);
+    route.params.preAutomate.type = AUTOMATE_TYPE.ONE_TAP;
+
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -220,12 +213,8 @@ describe('Test ScriptDetail', () => {
       await button.props.onPress();
     });
     expect(mockNavigate).toHaveBeenCalledWith(Routes.SelectControlDevices, {
-      unit: route.params.unit,
-      automateId: route.params.id,
-      scriptName: route.params.name,
-      type: AUTOMATE_TYPE.ONE_TAP,
-      oldType: AUTOMATE_TYPE.ONE_TAP,
-      automate: route.params.automate,
+      unitId: route.params.preAutomate.unit,
+      automateId: route.params.preAutomate.id,
     });
   });
 
@@ -240,21 +229,24 @@ describe('Test ScriptDetail', () => {
     await act(async () => {
       await WrapHeaderScrollables[0].props.onGoBack();
     });
-    expect(mockNavigate).toBeCalled();
+    expect(mockGoBack).toBeCalled();
   });
 
-  const _testGoToActivityLog = (automateType, activityLogType, isMultiUnit) => {
-    it('test go to activity log', async () => {
-      route.params.type = automateType;
-      if (isMultiUnit) {
-        route.params.unit.id = undefined;
-      }
+  const _testGoToActivityLog = (
+    count,
+    automateType,
+    activityLogType,
+    unitId
+  ) => {
+    it(`test go to activity log ${count}`, async () => {
+      route.params.preAutomate.type = automateType;
+      route.params.preAutomate.unit = unitId;
       await act(async () => {
         tree = await create(wrapComponent(route));
       });
       const instance = tree.root;
       const menu = instance.findByType(MenuActionMore);
-      const gotoActivityLog = menu.props.listMenuItem[2];
+      const gotoActivityLog = menu.props.listMenuItem[1];
 
       await act(async () => {
         await menu.props.onItemClick(gotoActivityLog);
@@ -262,9 +254,9 @@ describe('Test ScriptDetail', () => {
       expect(mockNavigate).toHaveBeenCalledWith(Routes.ActivityLog, {
         id: route.params.id,
         type: activityLogType,
-        share: route.params.unit,
+        share: unitId,
         filterEnabled: {
-          user: !isMultiUnit,
+          user: !!unitId,
           date: true,
         },
       });
@@ -272,18 +264,19 @@ describe('Test ScriptDetail', () => {
   };
 
   _testGoToActivityLog(
+    1,
     AUTOMATE_TYPE.ONE_TAP,
     `automate.${AUTOMATE_TYPE.ONE_TAP}`,
-    false
+    2
   );
-  _testGoToActivityLog(AUTOMATE_TYPE.VALUE_CHANGE, 'automate', false);
-  _testGoToActivityLog(AUTOMATE_TYPE.VALUE_CHANGE, 'automate', true);
+  _testGoToActivityLog(2, AUTOMATE_TYPE.VALUE_CHANGE, 'automate', 2);
+  _testGoToActivityLog(3, AUTOMATE_TYPE.VALUE_CHANGE, 'automate', undefined);
 
   it('Test render textCondition value change >', async () => {
     route.params = {
       ...route.params,
-      type: AUTOMATE_TYPE.VALUE_CHANGE,
-      automate: {
+      preAutomate: {
+        type: AUTOMATE_TYPE.VALUE_CHANGE,
         value_change: {
           config_name: 'Light Value',
           value: 3,
@@ -296,7 +289,7 @@ describe('Test ScriptDetail', () => {
     });
     const instance = tree.root;
     const itemAutomate = instance.findByType(ItemAutomate);
-    expect(itemAutomate.props.textCondition).toEqual(
+    expect(itemAutomate.findAllByType(Text)[1].props.children).toEqual(
       'Light Value higher than 3'
     );
 
@@ -309,8 +302,8 @@ describe('Test ScriptDetail', () => {
   it('Test render textCondition value change =', async () => {
     route.params = {
       ...route.params,
-      type: AUTOMATE_TYPE.VALUE_CHANGE,
-      automate: {
+      preAutomate: {
+        type: AUTOMATE_TYPE.VALUE_CHANGE,
         value_change: { config_name: 'Light Value', value: 3, condition: '=' },
       },
     };
@@ -319,14 +312,16 @@ describe('Test ScriptDetail', () => {
     });
     const instance = tree.root;
     const itemAutomate = instance.findByType(ItemAutomate);
-    expect(itemAutomate.props.textCondition).toEqual('Light Value equal 3');
+    expect(itemAutomate.findAllByType(Text)[1].props.children).toEqual(
+      'Light Value equal 3'
+    );
   });
 
   it('Test render textCondition value change <', async () => {
     route.params = {
       ...route.params,
-      type: AUTOMATE_TYPE.VALUE_CHANGE,
-      automate: {
+      preAutomate: {
+        type: AUTOMATE_TYPE.VALUE_CHANGE,
         value_change: {
           config_name: 'Light Value',
           value: 3,
@@ -339,7 +334,7 @@ describe('Test ScriptDetail', () => {
     });
     const instance = tree.root;
     const itemAutomate = instance.findByType(ItemAutomate);
-    expect(itemAutomate.props.textCondition).toEqual(
+    expect(itemAutomate.findAllByType(Text)[1].props.children).toEqual(
       'Light Value lower than 3'
     );
   });
@@ -347,8 +342,8 @@ describe('Test ScriptDetail', () => {
   it('Test render textCondition schedule repeat everyday', async () => {
     route.params = {
       ...route.params,
-      type: AUTOMATE_TYPE.SCHEDULE,
-      automate: {
+      preAutomate: {
+        type: AUTOMATE_TYPE.SCHEDULE,
         schedule: {
           repeat: 'every_day',
           date_repeat: '2022-01-02',
@@ -361,14 +356,16 @@ describe('Test ScriptDetail', () => {
     });
     const instance = tree.root;
     const itemAutomate = instance.findByType(ItemAutomate);
-    expect(itemAutomate.props.textCondition).toEqual('Every day at 19:00');
+    expect(itemAutomate.findAllByType(Text)[1].props.children).toEqual(
+      'Every day at 19:00'
+    );
   });
 
   it('Test render textCondition schedule repeat weekday', async () => {
     route.params = {
       ...route.params,
-      type: AUTOMATE_TYPE.SCHEDULE,
-      automate: {
+      preAutomate: {
+        type: AUTOMATE_TYPE.SCHEDULE,
         schedule: {
           repeat: 'every_week',
           date_repeat: '2022-01-02',
@@ -382,7 +379,7 @@ describe('Test ScriptDetail', () => {
     });
     const instance = tree.root;
     const itemAutomate = instance.findByType(ItemAutomate);
-    expect(itemAutomate.props.textCondition).toEqual(
+    expect(itemAutomate.findAllByType(Text)[1].props.children).toEqual(
       'Mon, Tue, Thu, Sat at 19:00'
     );
   });

package/src/screens/{ScriptDetail → Automate/ScriptDetail}/__test__/useStarredScript.test.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { act, renderHook } from '@testing-library/react-hooks';
-import { SCProvider } from '../../../context';
-import { mockSCStore } from '../../../context/mockStore';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 import { useStarredScript } from '../hooks/useStarredScript';
 import MockAdapter from 'axios-mock-adapter';
-import api from '../../../utils/Apis/axios';
-import { API } from '../../../configs';
-import { Action } from '../../../context/actionType';
+import api from '../../../../utils/Apis/axios';
+import { API } from '../../../../configs';
+import { Action } from '../../../../context/actionType';
 
 const mockedSetAction = jest.fn();
 const mock = new MockAdapter(api.axiosInstance);
@@ -22,8 +22,9 @@ React.useContext = mockUseContext;
 
 jest.mock('react-native-deep-linking');
 
-describe('Test useStarredScript', async () => {
+describe('Test useStarredScript', () => {
   let props;
+
   beforeEach(() => {
     mockedSetAction.mockClear();
     props = {

package/src/screens/{ScriptDetail → Automate/ScriptDetail}/hooks/useStarredScript.js

@@ -1,8 +1,8 @@
 import { useCallback, useContext } from 'react';
-import { SCContext, useSCContextSelector } from '../../../context';
-import { Action } from '../../../context/actionType';
-import { axiosPost } from '../../../utils/Apis/axios';
-import { API } from '../../../configs';
+import { SCContext, useSCContextSelector } from '../../../../context';
+import { Action } from '../../../../context/actionType';
+import { axiosPost } from '../../../../utils/Apis/axios';
+import { API } from '../../../../configs';
 
 export const useStarredScript = (automate) => {
   const { setAction } = useContext(SCContext);

package/src/screens/Automate/ScriptDetail/index.js

@@ -0,0 +1,346 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Image, Platform, TouchableOpacity, View } from 'react-native';
+import { PopoverMode } from 'react-native-popover-view';
+import { IconFill, IconOutline } from '@ant-design/icons-react-native';
+import { Icon } from '@ant-design/react-native';
+
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import styles from './Styles/indexStyles';
+import Text from '../../../commons/Text';
+import WrapHeaderScrollable from '../../../commons/Sharing/WrapHeaderScrollable';
+import { API, Colors } from '../../../configs';
+import { usePopover } from '../../../hooks/Common';
+import { useStarredScript } from './hooks/useStarredScript';
+import MenuActionMore from '../../../commons/MenuActionMore';
+import Add from '../../../../assets/images/Add.svg';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { axiosGet, axiosPost } from '../../../utils/Apis/axios';
+import FImage from '../../../commons/FImage';
+import Routes from '../../../utils/Route';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import ItemAutomate from '../../../commons/Automate/ItemAutomate';
+import withPreventDoubleClick from '../../../commons/WithPreventDoubleClick';
+import { AccessibilityLabel, AUTOMATE_TYPE } from '../../../configs/Constants';
+import RenameScript from './Components/RenameScript';
+import DeleteScript from './Components/DeleteScript';
+import Images from '../../../configs/Images';
+
+const PreventDoubleTouch = withPreventDoubleClick(TouchableOpacity);
+
+const ScriptDetail = ({ route }) => {
+  const { navigate, goBack } = useNavigation();
+  const { params = {} } = route;
+  const refMenuAction = useRef();
+  const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
+    usePopover();
+  const t = useTranslations();
+  const {
+    id,
+    saveAt,
+    preAutomate = {}, // pre-loaded automate data
+    newAutomate, // updated automate data
+  } = params;
+  const [automate, setAutomate] = useState(preAutomate);
+  const [data, setData] = useState([]);
+  const [isShowRename, setIsShowRename] = useState(false);
+  const [isShowDelete, setIsShowDelete] = useState(false);
+
+  const onShowActivityLog = useCallback(() => {
+    navigate(Routes.ActivityLog, {
+      id: id,
+      type:
+        automate?.type === AUTOMATE_TYPE.ONE_TAP
+          ? `automate.${AUTOMATE_TYPE.ONE_TAP}`
+          : 'automate',
+      share: automate.unit,
+      filterEnabled: {
+        date: true,
+        user: Boolean(automate.unit),
+      },
+    });
+  }, [navigate, id, automate?.type, automate.unit]);
+
+  const listMenuItem = useMemo(
+    () => [
+      { text: t('rename'), doAction: () => setIsShowRename(true) },
+      {
+        text: t('activity_log'),
+        doAction: onShowActivityLog,
+      },
+      {
+        text: t('delete_script'),
+        doAction: () => setIsShowDelete(true),
+      },
+    ],
+    [t, onShowActivityLog]
+  );
+
+  const handleShowMenuAction = useCallback(
+    () => showPopoverWithRef(refMenuAction),
+    [showPopoverWithRef]
+  );
+
+  const onItemClick = useCallback((item) => {
+    item.doAction();
+  }, []);
+
+  const fetchAutomateActions = useCallback(async () => {
+    const { success, data: automateData } = await axiosGet(
+      API.AUTOMATE.SCRIPT(id)
+    );
+    success && setData(automateData?.script_actions || []);
+  }, [id]);
+
+  const fetchAutomate = useCallback(async () => {
+    const { success, data: automateData } = await axiosGet(
+      API.AUTOMATE.FETCH_AUTOMATE(id)
+    );
+    success && setAutomate(automateData);
+  }, [id]);
+
+  const onPressEdit = useCallback(() => {
+    navigate(Routes.EditActionsList, {
+      data,
+      id,
+      unitId: automate.unit,
+    });
+  }, [data, id, navigate, automate.unit]);
+
+  const handleScriptAction = useCallback(async () => {
+    const { success } = await axiosPost(API.AUTOMATE.ACTION_ONE_TAP(id));
+    if (success) {
+      ToastBottomHelper.success(t('Activated successfully.'));
+    } else {
+      ToastBottomHelper.error(t('Activation failed.'));
+    }
+  }, [id, t]);
+
+  const handleUpdateAutomate = useCallback(async () => {
+    navigate(Routes.AddNewAutoSmart, {
+      automate,
+      closeScreen: route.name,
+    });
+  }, [navigate, automate, route.name]);
+
+  useEffect(() => {
+    fetchAutomate();
+  }, [fetchAutomate]);
+
+  const rightComponent = useMemo(
+    () => (
+      <View style={styles.rightComponent}>
+        <ButtonStar automate={automate} />
+        <TouchableOpacity
+          onPress={handleShowMenuAction}
+          ref={refMenuAction}
+          style={[styles.headerButton, styles.moreButton]}
+        >
+          <Icon name={'more'} size={27} color={Colors.Black} />
+        </TouchableOpacity>
+      </View>
+    ),
+    [automate, refMenuAction, handleShowMenuAction]
+  );
+
+  useEffect(() => {
+    fetchAutomateActions();
+  }, [fetchAutomateActions]);
+
+  useEffect(() => {
+    saveAt && fetchAutomateActions();
+  }, [saveAt, fetchAutomateActions]);
+
+  useEffect(() => {
+    newAutomate && setAutomate(newAutomate);
+  }, [newAutomate]);
+
+  return (
+    <View style={styles.wrap}>
+      <WrapHeaderScrollable
+        title={automate?.name}
+        headerAniStyle={styles.headerAniStyle}
+        rightComponent={rightComponent}
+        onGoBack={goBack}
+      >
+        <View style={styles.wrapContent}>
+          <Text type="H3" semibold>
+            {t('how_to_start')}
+          </Text>
+          <ItemAutomate automate={automate} onPress={handleUpdateAutomate} />
+          {automate?.type === AUTOMATE_TYPE.ONE_TAP && (
+            <TouchableOpacity
+              onPress={handleScriptAction}
+              style={styles.activeButton}
+              accessibilityLabel={AccessibilityLabel.BUTTON_ACTIVATE_ONE_TAP}
+            >
+              <Image source={Images.activeButton} />
+            </TouchableOpacity>
+          )}
+
+          <View style={styles.row}>
+            <Text type="H3" color={Colors.Gray9} semibold>
+              {t('active_list')}
+            </Text>
+            {data.length > 0 && (
+              <TouchableOpacity
+                onPress={onPressEdit}
+                style={styles.editButton}
+                accessibilityLabel={
+                  AccessibilityLabel.BUTTON_EDIT_SCRIPT_ACTION
+                }
+              >
+                <Text type="Label" hilight>
+                  {t('edit')}
+                </Text>
+              </TouchableOpacity>
+            )}
+          </View>
+          {data.map((item, index) => (
+            <Item key={item?.id} item={item} index={index} />
+          ))}
+          <ItemAdd automate={automate} index={data.length} />
+        </View>
+      </WrapHeaderScrollable>
+      <MenuActionMore
+        isVisible={showingPopover}
+        hideMore={hidePopover}
+        listMenuItem={listMenuItem}
+        childRef={childRef}
+        onItemClick={onItemClick}
+        isTextCenter={false}
+        wrapStyle={styles.wrapStyle}
+        mode={
+          Platform.OS === 'ios' ? PopoverMode.JS_MODAL : PopoverMode.RN_MODAL
+        }
+      />
+      <RenameScript
+        automate={automate}
+        setAutomate={setAutomate}
+        isVisible={isShowRename}
+        setIsVisible={setIsShowRename}
+      />
+      <DeleteScript
+        automate={automate}
+        setIsVisible={setIsShowDelete}
+        isVisible={isShowDelete}
+      />
+    </View>
+  );
+};
+
+const Item = ({ item, index }) => {
+  return (
+    <View style={styles.wrapItem}>
+      <View style={styles.leftItem}>
+        <Text color={Colors.Gray9} type="H4" semibold>
+          {index + 1 < 10 ? '0' + (index + 1) : index + 1}
+        </Text>
+      </View>
+      <View style={styles.rightItem}>
+        <FImage
+          source={{ uri: item?.sensor_icon_kit }}
+          style={styles.iconItem}
+        />
+        <View style={styles.contentItem}>
+          <View style={styles.titleItem}>
+            <Text
+              numberOfLines={1}
+              semibold
+              type="Label"
+              color={Colors.Gray7}
+              style={styles.paddingRight4}
+            >
+              {item?.unit_name}
+            </Text>
+            <Text
+              numberOfLines={1}
+              type="Label"
+              color={Colors.Gray7}
+              style={styles.flex1}
+            >
+              {item?.station_name}
+            </Text>
+          </View>
+          <Text numberOfLines={1} type="H4" color={Colors.Gray9} semibold>
+            {item?.sensor_name}
+          </Text>
+          <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
+            {item?.action_name}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const ItemAdd = ({ automate, index }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const { name: currentScreenName } = useRoute();
+
+  const onPressAddAction = useCallback(() => {
+    const navParams = {
+      unitId: automate.unit,
+      automateId: automate.id,
+      closeScreen: currentScreenName,
+    };
+
+    navigate(
+      automate.unit ? Routes.SelectControlDevices : Routes.SelectUnit,
+      navParams
+    );
+  }, [automate.unit, automate.id, currentScreenName, navigate]);
+
+  return (
+    <View style={styles.wrapItem}>
+      <View style={styles.leftItemAdd}>
+        <Text style={styles.number} type="H4" semibold color={Colors.Gray7}>
+          {index + 1 < 10 ? '0' + (index + 1) : index + 1}
+        </Text>
+      </View>
+      <TouchableOpacity
+        onPress={onPressAddAction}
+        style={[styles.rightItemAdd]}
+        accessibilityLabel={AccessibilityLabel.BUTTON_ADD_SCRIPT_ACTION}
+      >
+        <Add />
+        <Text type="H4" color={Colors.Gray8} style={styles.addAction}>
+          {t('add_action')}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const ButtonStar = ({ automate }) => {
+  const { isStarred, starScript, unstarScript } = useStarredScript(automate);
+  const onPressStar = useCallback(async () => {
+    if (isStarred) {
+      await unstarScript();
+    } else {
+      await starScript();
+    }
+  }, [isStarred, starScript, unstarScript]);
+
+  return (
+    <PreventDoubleTouch
+      style={[styles.buttonStar, styles.headerButton]}
+      onPress={onPressStar}
+      accessibilityLabel={AccessibilityLabel.HEADER_SCRIPT_DETAIL_BUTTON_STAR}
+    >
+      {isStarred ? (
+        <IconFill name="star" size={25} color={Colors.Yellow6} />
+      ) : (
+        <IconOutline name="star" size={25} />
+      )}
+    </PreventDoubleTouch>
+  );
+};
+
+export default ScriptDetail;