@eohjsc/react-native-smart-city 0.6.2 → 0.7.3

package/src/screens/Device/detail.js

@@ -8,8 +8,8 @@ import React, {
 } from 'react';
 import { View, TouchableOpacity, Platform } from 'react-native';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
-import { IconFill, IconOutline } from '@ant-design/icons-react-native';
-import { Icon } from '@ant-design/react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import moment from 'moment';
 
 import { SCContext } from '../../context';
@@ -215,7 +215,7 @@ const DeviceDetail = ({ route }) => {
 
   useEffect(() => {
     if (
-      unit.remote_control_options &&
+      unit?.remote_control_options &&
       unit.remote_control_options.googlehome?.length &&
       isNetworkConnected
     ) {
@@ -685,9 +685,9 @@ const DeviceDetail = ({ route }) => {
         >
           <View style={styles.buttonStar}>
             {isFavorite ? (
-              <IconFill name="star" size={25} color={Colors.Yellow6} />
+              <AntDesign name="star" size={25} color={Colors.Yellow6} />
             ) : (
-              <IconOutline name="star" size={25} />
+              <AntDesign name="staro" size={25} />
             )}
           </View>
         </TouchableOpacity>
@@ -695,7 +695,7 @@ const DeviceDetail = ({ route }) => {
         {isShowSetupEmergencyContact && (
           <TouchableOpacity onPress={onPressSetting}>
             <View style={styles.button}>
-              <Icon name="setting" size={25} color={Colors.Black} />
+              <AntDesign name="setting" size={25} color={Colors.Black} />
             </View>
           </TouchableOpacity>
         )}
@@ -706,7 +706,7 @@ const DeviceDetail = ({ route }) => {
           ref={refMenuAction}
           accessibilityLabel={AccessibilityLabel.HEADER_DEVICE_BUTTON_MORE}
         >
-          <Icon name={'more'} size={27} color={Colors.Black} />
+          <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     ),
@@ -755,7 +755,7 @@ const DeviceDetail = ({ route }) => {
             >
               {display.items.map((item, index) => {
                 return (
-                  <>
+                  <View key={item?.id?.toString()}>
                     {!item.is_configuration_ready && (
                       <Text center>{t('bellow_widget_is_not_configured')}</Text>
                     )}
@@ -779,7 +779,7 @@ const DeviceDetail = ({ route }) => {
                       setShowWindDirection={setShowWindDirection}
                       background={station?.background}
                     />
-                  </>
+                  </View>
                 );
               })}
             </SensorConnectStatusViewHeader>
@@ -791,7 +791,9 @@ const DeviceDetail = ({ route }) => {
           canManageSubUnit && (
             <BottomButtonView
               style={styles.bottomButtonEmergencyContact}
-              mainIcon={<Icon name="plus" size={16} color={Colors.Primary} />}
+              mainIcon={
+                <AntDesign name="plus" size={16} color={Colors.Primary} />
+              }
               mainTitle={t('setup_my_emergency_contact')}
               onPressMain={onSetupContacts}
               typeMain="primaryBorder"
@@ -825,7 +827,7 @@ const DeviceDetail = ({ route }) => {
       {isShowEmergencyResolve && !isEmergencyPopupScreen && (
         <BottomButtonView
           style={styles.bottomButtonEmergencyResolve}
-          mainIcon={<IconFill name="tool" size={15} color={Colors.Gray6} />}
+          mainIcon={<AntDesign name="tool" size={15} color={Colors.Gray6} />}
           mainTitle={t('resolve_situation')}
           onPressMain={onPressResolveSituationConfirm}
           topComponent={
@@ -865,7 +867,7 @@ const DeviceDetail = ({ route }) => {
           >
             {unit?.name} - {sensor?.station?.name}
           </Text>
-          <IconFill
+          <AntDesign
             accessibilityLabel={AccessibilityLabel.BUTTON_POPUP_RESOLVED_ICON}
             name="check-circle"
             size={42}

package/src/screens/Drawer/Drawer.test.js

@@ -4,16 +4,7 @@ import AccessibilityLabel from '../../configs/AccessibilityLabel';
 import { SCProvider } from '../../context';
 import { mockSCStore } from '../../context/mockStore';
 import Drawer, { Row } from './index';
-
-const mockDispatch = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      dispatch: mockDispatch,
-    }),
-  };
-});
+import { useNavigation } from '@react-navigation/native';
 
 const wrapComponent = (initState = mockSCStore({})) => (
   <SCProvider initState={initState}>
@@ -24,6 +15,7 @@ const wrapComponent = (initState = mockSCStore({})) => (
 describe('Drawer', () => {
   let tree;
   it('test render with user', async () => {
+    const { dispatch } = useNavigation();
     await act(async () => {
       tree = await renderer.create(wrapComponent());
     });
@@ -43,7 +35,7 @@ describe('Drawer', () => {
     await act(async () => {
       await rows[2].props.onPress();
     });
-    expect(mockDispatch).toBeCalledWith({
+    expect(dispatch).toBeCalledWith({
       payload: { index: 0, routes: [{ name: 'Main' }] },
       type: 'RESET',
     });

package/src/screens/Drawer/index.js

@@ -1,5 +1,4 @@
-import { IconOutline } from '@ant-design/icons-react-native';
-import { Icon } from '@ant-design/react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import React, { useCallback, useContext } from 'react';
 import {
   Image,
@@ -60,7 +59,7 @@ const DrawerContainer = () => {
                 style={styles.avatar}
                 accessibilityLabel={AccessibilityLabel.SIDE_MENU_AVATAR_USER}
               >
-                <Icon name={'user'} size={27} />
+                <AntDesign name={'user'} size={27} />
               </View>
             )}
             <View style={styles.textContainer}>
@@ -117,7 +116,7 @@ export const Row = ({
       ]}
       accessibilityLabel={accessibilityLabel}
     >
-      <IconOutline name={image} size={24} />
+      <AntDesign name={image} size={24} />
 
       <View style={styles.wrapText}>
         <Text style={[styles.text]}>{name}</Text>

package/src/screens/EmergencyContacts/EmergencyContactsList.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { AlertAction, MenuActionList, Section } from '../../commons';
@@ -99,7 +99,7 @@ export const EmergencyContactsList = ({ route }) => {
                 : 'disable'
             }
             leftIcon={
-              <IconOutline name={'plus'} size={20} color={Colors.White} />
+              <AntDesign name={'plus'} size={20} color={Colors.White} />
             }
             text={t('add_new')}
             subtext={t('emergency_max_contacts', {
@@ -113,7 +113,7 @@ export const EmergencyContactsList = ({ route }) => {
                 key={contact.id}
                 index={index}
                 leftIcon={
-                  <IconOutline name={'user'} size={20} color={Colors.White} />
+                  <AntDesign name={'user'} size={20} color={Colors.White} />
                 }
                 text={contact.name}
                 subtext={contact.phone_number}
@@ -122,11 +122,7 @@ export const EmergencyContactsList = ({ route }) => {
                     style={styles.buttonRemove}
                     onPress={onPressRemoveContact(contact)}
                   >
-                    <IconOutline
-                      name={'minus'}
-                      size={20}
-                      color={Colors.Gray8}
-                    />
+                    <AntDesign name={'minus'} size={20} color={Colors.Gray8} />
                   </TouchableOpacity>
                 }
               />

package/src/screens/EmergencyContacts/EmergencyContactsSelectContacts.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Section, ViewButtonBottom } from '../../commons';
@@ -81,7 +81,7 @@ export const EmergencyContactsSelectContacts = ({ route }) => {
               }
               index={index}
               leftIcon={
-                <IconOutline name={'user'} size={20} color={Colors.White} />
+                <AntDesign name={'user'} size={20} color={Colors.White} />
               }
               text={contact.name}
               subtext={contact.phone_number}
@@ -91,7 +91,7 @@ export const EmergencyContactsSelectContacts = ({ route }) => {
                   {currentContacts.some(
                     (item) => item?.name === contact?.name
                   ) && (
-                    <IconOutline
+                    <AntDesign
                       name={'check-circle'}
                       size={20}
                       color={Colors.Primary}

package/src/screens/EmergencyContacts/__test__/EmergencyContactAddNew.test.js

@@ -20,19 +20,8 @@ const wrapComponent = (route) => (
 
 jest.mock('react-native-toast-message');
 
-const mockedGoBack = jest.fn();
-
 const mock = new MockAdapter(api.axiosInstance);
 
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      goBack: mockedGoBack,
-    }),
-  };
-});
-
 describe('test EmergencyContactAddNew', () => {
   let route;
   beforeEach(() => {
@@ -44,9 +33,7 @@ describe('test EmergencyContactAddNew', () => {
         },
       },
     };
-    mockedGoBack.mockClear();
-  });
-  afterEach(() => {
+    global.mockedGoBack.mockClear();
     Toast.show.mockClear();
   });
 
@@ -105,7 +92,7 @@ describe('test EmergencyContactAddNew', () => {
       viewButtonBottom.props.onLeftClick();
     });
 
-    expect(mockedGoBack).toHaveBeenCalledTimes(1);
+    expect(global.mockedGoBack).toHaveBeenCalledTimes(1);
   });
 
   it('onSave success', async () => {
@@ -129,7 +116,7 @@ describe('test EmergencyContactAddNew', () => {
       await viewButtonBottom.props.onRightClick();
     });
 
-    expect(mockedGoBack).toHaveBeenCalledTimes(1);
+    expect(global.mockedGoBack).toHaveBeenCalledTimes(1);
   });
 
   it('onSave failed', async () => {
@@ -159,7 +146,7 @@ describe('test EmergencyContactAddNew', () => {
       text1: getTranslate('en', 'create_contact_failed'),
       visibilityTime: 1000,
     });
-    expect(mockedGoBack).not.toHaveBeenCalled();
+    expect(global.mockedGoBack).not.toHaveBeenCalled();
   });
 
   it('invalid phone number', async () => {

package/src/screens/EmergencyContacts/__test__/EmergencyContactList.test.js

@@ -13,6 +13,7 @@ import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import api from '../../../utils/Apis/axios';
 import { RowUser } from '../../../commons/RowUser';
+import { useNavigation } from '@react-navigation/native';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -22,18 +23,6 @@ const wrapComponent = (route) => (
   </SCProvider>
 );
 
-const mockedNavigate = jest.fn();
-
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-    }),
-    useIsFocused: () => true,
-  };
-});
-
 describe('test EmergencyContactList', () => {
   let route;
 
@@ -44,7 +33,6 @@ describe('test EmergencyContactList', () => {
         group: 1,
       },
     };
-    mockedNavigate.mockClear();
     mock.reset();
   });
   let tree;
@@ -137,6 +125,7 @@ describe('test EmergencyContactList', () => {
   });
 
   it('onItemAddClick select unit members', async () => {
+    const { navigate } = useNavigation();
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -159,7 +148,7 @@ describe('test EmergencyContactList', () => {
       buttonsMenuActionList[1].props.onPress();
     });
 
-    expect(mockedNavigate).toHaveBeenCalledWith(
+    expect(navigate).toHaveBeenCalledWith(
       Routes.EmergencyContactsSelectContacts,
       {
         unitId: route.params.unitId,

package/src/screens/EmergencyContacts/__test__/EmergencyContactsSelectContacts.test.js

@@ -14,16 +14,6 @@ import { getTranslate } from '../../../utils/I18n';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockedNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-    }),
-  };
-});
-
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
     <EmergencyContactsSelectContacts route={route} />

package/src/screens/EmergencySetting/components/DropDownItem.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import { IconFill } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 
 import Text from '../../../commons/Text';
 import styles from '../styles/DropDownItem';
@@ -29,7 +29,7 @@ const DropDownItem = ({ label, data, onSelectItem, isOpen, onOpen, index }) => {
       <View style={styles.dropDownContainer}>
         <TouchableOpacity style={styles.dropDownStyle} onPress={handleOnOpen}>
           <Text>{selecteValue?.label}</Text>
-          <IconFill name="caret-down" size={18} color={Colors.Gray8} />
+          <AntDesign name="caretdown" size={18} color={Colors.Gray8} />
         </TouchableOpacity>
 
         {isOpen && (

package/src/screens/EnterPassword/__test__/EnterPassword.test.js

@@ -9,6 +9,7 @@ import EnterPassword from '../index';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import { API } from '../../../configs';
 import api from '../../../utils/Apis/axios';
+import { useNavigation } from '@react-navigation/native';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -18,19 +19,9 @@ const wrapComponent = (route) => (
   </SCProvider>
 );
 
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-    useIsFocused: jest.fn(),
-  };
-});
-
 describe('Test EnterPassword', () => {
   let tree;
+  const { navigate } = useNavigation();
   const buttonDone = (instance) => {
     return instance.findAll(
       (el) =>
@@ -40,10 +31,6 @@ describe('Test EnterPassword', () => {
     );
   };
 
-  beforeEach(() => {
-    mockNavigate.mockClear();
-  });
-
   it('test render EnterPassword button done', async () => {
     const route = {
       params: { dataParams: {}, type: '' },
@@ -116,7 +103,7 @@ describe('Test EnterPassword', () => {
     await act(async () => {
       await button[0].props.onPress();
     });
-    expect(mockNavigate).toBeCalled();
+    expect(navigate).toBeCalled();
   });
 
   it('test EnterPassword button failure', async () => {
@@ -138,6 +125,6 @@ describe('Test EnterPassword', () => {
     await act(async () => {
       await button[0].props.onPress();
     });
-    expect(mockNavigate).not.toBeCalled();
+    expect(navigate).not.toBeCalled();
   });
 });

package/src/screens/GuestInfo/__test__/index.test.js

@@ -20,16 +20,6 @@ const wrapComponent = (route) => (
   </SCProvider>
 );
 
-const mockGoBack = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      goBack: mockGoBack,
-    }),
-  };
-});
-
 const mock = new MockAdapter(api.axiosInstance);
 
 const getButton = (instance, accessibilityLabel, many = false) => {
@@ -53,7 +43,6 @@ describe('Test GuestInfo', () => {
   let data;
 
   beforeEach(() => {
-    mockGoBack.mockClear();
     route = {
       params: { id: 1 },
     };

package/src/screens/GuestInfo/components/RowGuestInfo.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import Text from '../../../commons/Text';
 import styles from '../styles/indexStyles';
 
@@ -19,7 +19,7 @@ const RowGuestInfo = ({
         <View style={styles.rowRight}>
           <Text type="Body">{textRight}</Text>
           {rightArrow && (
-            <IconOutline name="right" size={20} style={styles.icon} />
+            <AntDesign name="right" size={20} style={styles.icon} />
           )}
         </View>
       </View>

package/src/screens/GuestInfo/index.js

@@ -7,7 +7,7 @@ import RowGuestInfo from './components/RowGuestInfo';
 import HeaderGuestInfo from './components/HeaderGuestInfo';
 import AccessScheduleSheet from './components/AccessScheduleSheet';
 import { CircleView } from '../../commons/CircleView';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import Text from '../../commons/Text';
 import { useBoolean } from '../../hooks/Common';
 import { axiosGet, axiosPut } from '../../utils/Apis/axios';
@@ -113,7 +113,7 @@ const GuestInfo = ({ route }) => {
                   />
                 ) : (
                   <CircleView size={88} center style={styles.avatar}>
-                    <IconOutline name="user" size={44} color={Colors.Pink1} />
+                    <AntDesign name="user" size={44} color={Colors.Pink1} />
                   </CircleView>
                 )}
                 <Text type="H3" bold>

package/src/screens/HanetCamera/Detail.js

@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 import { View, TouchableOpacity, FlatList, Image } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { Icon } from '@ant-design/react-native';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import moment from 'moment';
 import styles from './styles/detailStyles';
 import { HeaderCustom } from '../../commons/Header';
@@ -184,7 +184,11 @@ const HanetCameraDetail = ({ route }) => {
               onPress={handleShowMenuAction}
               ref={refMenuAction}
             >
-              <Icon name={'more'} size={27} color={Colors.Black} />
+              <MaterialIcons
+                name={'more-vert'}
+                size={27}
+                color={Colors.Black}
+              />
             </TouchableOpacity>
           </View>
         );

package/src/screens/HanetCamera/ManageAccess.js

@@ -1,8 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { View, TouchableOpacity, Image, FlatList } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { Icon } from '@ant-design/react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { HeaderCustom } from '../../commons/Header';
 import Text from '../../commons/Text';
 import RequestFaceIDPopup from './components/RequestFaceIDPopup';
@@ -75,7 +74,7 @@ const HanetManageAccess = ({ route }) => {
             {' '}
             {item.name}
           </Text>
-          <IconOutline name="right" size={20} color={Colors.Gray6} />
+          <AntDesign name="right" size={20} color={Colors.Gray6} />
         </TouchableOpacity>
       );
     },
@@ -90,7 +89,7 @@ const HanetManageAccess = ({ route }) => {
           onPress={setShowAddMemberModal}
           accessibilityLabel={AccessibilityLabel.HANET_MANAGE_ACCESS_ADD_BUTTON}
         >
-          <Icon name={'plus'} size={27} color={Colors.Black} />
+          <AntDesign name={'plus'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     ),

package/src/screens/HanetCamera/MemberInfo.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { View, TouchableOpacity, Image } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { IconFill } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 
 import { HeaderCustom } from '../../commons/Header';
 import { AlertAction, FullLoading } from '../../commons';
@@ -78,9 +78,9 @@ const HanetMemberInfo = ({ route }) => {
       }
     );
     if (success) {
-      setMemberAvatar(data.avatar_uri);
+      setMemberAvatar(data?.avatar_uri);
     } else {
-      setError(data.detail);
+      setError(data?.detail);
     }
     setLoading(false);
   };
@@ -173,7 +173,7 @@ const HanetMemberInfo = ({ route }) => {
         onPress={setShowSetFaceIDModal}
         style={[styles.row, !!error && { borderBottomColor: Colors.Red6 }]}
       >
-        <IconFill name="camera" size={27} color={Colors.Primary} />
+        <AntDesign name="camera" size={27} color={Colors.Primary} />
         <Text
           type="Body"
           bold

package/src/screens/HanetCamera/__test__/CaptureFaceID.test.js

@@ -17,25 +17,11 @@ const wrapComponent = (route) => (
   </SCProvider>
 );
 
-const mockedNavigate = jest.fn();
-const mockedGoBack = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-      goBack: mockedGoBack,
-    }),
-  };
-});
-
 const mockSetAvatar = jest.fn();
 describe('Test HanetCaptureFaceID', () => {
   let tree, route;
 
   beforeEach(() => {
-    mockedNavigate.mockClear();
-    mockedGoBack.mockClear();
     mockSetAvatar.mockClear();
     route = {
       params: {
@@ -100,7 +86,7 @@ describe('Test HanetCaptureFaceID', () => {
       await touches[1].props.onPress();
     });
     expect(mockSetAvatar).toHaveBeenCalled();
-    expect(mockedGoBack).toHaveBeenCalled();
+    expect(global.mockedGoBack).toHaveBeenCalled();
   });
 
   it('Test set face id for new member', async () => {
@@ -117,6 +103,6 @@ describe('Test HanetCaptureFaceID', () => {
     await act(async () => {
       await touches[1].props.onPress();
     });
-    expect(mockedNavigate).toHaveBeenCalled();
+    expect(global.mockedNavigate).toHaveBeenCalled();
   });
 });

package/src/screens/HanetCamera/__test__/Detail.test.js

@@ -22,17 +22,6 @@ const wrapComponent = (route) => (
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useRoute: jest.fn(),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-  };
-});
-
 describe('Test HanetCameraDetail', () => {
   Date.now = jest.fn(() => new Date('2021-09-09T10:00:00.000Z'));
   let tree, route, responseDisplay, responseCheckin;
@@ -114,7 +103,7 @@ describe('Test HanetCameraDetail', () => {
     expect(textCountStranger.props.children).toBe(1);
     const MenuActionMores = instance.findByType(MenuActionMore);
     await MenuActionMores.props.onItemClick({ data: 'test' });
-    expect(mockNavigate).toBeCalled();
+    expect(global.mockedNavigate).toBeCalled();
   });
 
   it('Test change date', async () => {