@eohjsc/react-native-smart-city 0.2.56 → 0.2.60

package/src/screens/Unit/ManageUnit/index.js

@@ -1,286 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import {
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  Image,
-  Platform,
-} from 'react-native';
-import Animated from 'react-native-reanimated';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
-
-import { Colors, API, Device } from '../../../configs';
-import Routes from '../../../utils/Route';
-import { ToastBottomHelper } from '../../../utils/Utils';
-import {
-  createFormData,
-  axiosPatch,
-  axiosDelete,
-} from '../../../utils/Apis/axios';
-import { navigate } from '../../../navigations/utils';
-import useBoolean from '../../../hooks/Common/useBoolean';
-import useKeyboardAnimated from '../../../hooks/Explore/useKeyboardAnimated';
-
-import {
-  AlertAction,
-  Section,
-  ViewButtonBottom,
-  ImagePicker,
-} from '../../../commons';
-
-import Text from '../../../commons/Text';
-import _TextInput from '../../../commons/Form/TextInput';
-import WrapHeaderScrollable from '../../../commons/Sharing/WrapHeaderScrollable';
-import { getBottomSpace } from 'react-native-iphone-x-helper';
-import { useIsOwnerOfUnit } from '../../../hooks/Common';
-import { TESTID } from '../../../configs/Constants';
-import { ModalCustom } from '../../../commons/Modal';
-
-const ManageUnit = ({ route }) => {
-  const t = useTranslations();
-  const { unit } = route.params;
-  const { isOwner } = useIsOwnerOfUnit(unit.user_id);
-  const [showEdit, setshowEdit, setHideEdit] = useBoolean();
-  const [unitName, setUnitName] = useState(unit.name);
-  const [imageUrl, setImageUrl] = useState('');
-  const [showImagePicker, setShowImagePicker] = useState(false);
-
-  const updateUnit = useCallback(
-    async (headers) => {
-      const formData = createFormData(imageUrl, ['background']);
-
-      const { success } = await axiosPatch(
-        API.UNIT.MANAGE_UNIT(unit.id),
-        formData,
-        headers
-      );
-      if (success) {
-        ToastBottomHelper.success(t('unit_updated_successfully'));
-      }
-    },
-    [imageUrl, unit.id, t]
-  );
-
-  const goRename = useCallback(async () => {
-    await updateUnit({ name: unitName }, {});
-    setHideEdit(true);
-  }, [unitName, setHideEdit, updateUnit]);
-
-  const handleChoosePhoto = useCallback(() => {
-    setShowImagePicker(true);
-  }, [setShowImagePicker]);
-
-  useEffect(() => {
-    if (imageUrl) {
-      updateUnit({
-        headers: { 'Content-Type': 'multipart/form-data' },
-      });
-    }
-  }, [imageUrl, updateUnit]);
-
-  const [showRemove, setshowRemove, setHideRemove] = useBoolean();
-  const goRemove = useCallback(async () => {
-    const { success } = await axiosDelete(API.UNIT.MANAGE_UNIT(unit.id));
-    if (success) {
-      setHideEdit(true);
-      ToastBottomHelper.success(t('unit_deleted_successfully'));
-      navigate(Routes.Dashboard);
-    }
-  }, [unit.id, setHideEdit, t]);
-
-  const [transY] = useKeyboardAnimated(-16);
-  const animatedStyle = Platform.select({
-    ios: {
-      marginBottom: transY,
-    },
-  });
-
-  const options = {
-    mediaType: 'photo',
-    maxWidth: 1024,
-    quality: 0.8,
-    includeBase64: Device.isIOS,
-    saveToPhotos: true,
-  };
-
-  return (
-    <>
-      <WrapHeaderScrollable title={t('manage_unit')}>
-        <View style={styles.wraper}>
-          {isOwner && (
-            <Section type={'border'}>
-              <TouchableOpacity
-                onPress={setshowEdit}
-                testID={TESTID.TOUCH_UNIT_IN_MANAGE_UNIT}
-              >
-                <Text style={[styles.textWraper, styles.unitName]}>
-                  {unit.name}
-                </Text>
-              </TouchableOpacity>
-
-              <TouchableOpacity style={[styles.textWraper]}>
-                <Text style={styles.unitName}>{t('geolocation')}</Text>
-                <Text style={styles.unitGeolocation}>{unit.address}</Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                style={[styles.backgroundContainer]}
-                onPress={handleChoosePhoto}
-              >
-                <Text style={[styles.unitName, styles.textBackground]}>
-                  {t('background')}
-                </Text>
-                <Image
-                  style={styles.image}
-                  source={{ uri: unit.background }}
-                  resizeMode="cover"
-                />
-              </TouchableOpacity>
-
-              <ImagePicker
-                showImagePicker={showImagePicker}
-                setShowImagePicker={setShowImagePicker}
-                setImageUrl={setImageUrl}
-                optionsCapture={options}
-              />
-            </Section>
-          )}
-        </View>
-      </WrapHeaderScrollable>
-      <TouchableOpacity style={styles.removeButton} onPress={setshowRemove}>
-        <Text type={'H4'} semibold color={Colors.Gray6}>
-          {t('remove_unit')}
-        </Text>
-      </TouchableOpacity>
-      <ModalCustom
-        isVisible={showEdit}
-        onBackButtonPress={setHideEdit}
-        onBackdropPress={setHideEdit}
-        style={styles.modalContainer}
-      >
-        <Animated.View style={[styles.popoverStyle, animatedStyle]}>
-          <View style={styles.modalWrapper}>
-            <View style={styles.modalHeader}>
-              <Text semibold style={styles.modalHeaderText}>
-                {t('rename_unit')}
-              </Text>
-            </View>
-            <_TextInput
-              defaultValue={unitName}
-              onChange={(value) => setUnitName(value)}
-              textInputStyle={styles.textInputStyle}
-              wrapStyle={styles.textInputWrapStyle}
-              selectionColor={Colors.Primary}
-            />
-
-            <ViewButtonBottom
-              leftTitle={t('cancel')}
-              onLeftClick={setHideEdit}
-              rightTitle={t('rename')}
-              onRightClick={goRename}
-            />
-          </View>
-        </Animated.View>
-      </ModalCustom>
-      <AlertAction
-        visible={showRemove}
-        hideModal={setHideRemove}
-        title={t('remove_unit_name', { name: unitName })}
-        message={t('remove_note')}
-        leftButtonTitle={t('cancel')}
-        leftButtonClick={setHideRemove}
-        rightButtonTitle={t('remove')}
-        rightButtonClick={goRemove}
-      />
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  wraper: {
-    flex: 1,
-  },
-  textWraper: {
-    paddingTop: 16,
-    paddingBottom: 16,
-    borderBottomWidth: 0.5,
-  },
-  unitName: {
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: 16,
-    lineHeight: 24,
-    color: Colors.Gray9,
-  },
-  unitGeolocation: {
-    fontSize: 14,
-    lineHeight: 22,
-    color: Colors.Primary,
-  },
-  removeButton: {
-    position: 'absolute',
-    bottom: 0,
-    borderWidth: 0,
-    alignSelf: 'center',
-    paddingBottom: 16 + getBottomSpace(),
-  },
-  backgroundContainer: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    borderBottomWidth: 0.5,
-  },
-  image: {
-    width: 40,
-    height: 40,
-    borderRadius: 40 / 2,
-  },
-  textBackground: {
-    flex: 1,
-    paddingTop: 16,
-    paddingBottom: 16,
-  },
-  modalContainer: {
-    flex: 1,
-    margin: 0,
-  },
-  popoverStyle: {
-    width: '100%',
-    backgroundColor: Colors.White,
-    bottom: 0,
-    left: 0,
-    position: 'absolute',
-    borderRadius: 10,
-  },
-  modalWrapper: {
-    flex: 1,
-    flexDirection: 'column',
-    backgroundColor: Colors.White,
-    borderRadius: 10,
-  },
-  modalHeader: {
-    padding: 16,
-    backgroundColor: Colors.White,
-    borderBottomWidth: 1,
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    borderColor: Colors.Gray4,
-  },
-  modalHeaderText: {
-    fontSize: 16,
-    lineHeight: 24,
-    color: Colors.Gray9,
-  },
-  textInputStyle: {
-    borderWidth: 0,
-    borderBottomWidth: 1,
-    borderBottomColor: Colors.Primary,
-    fontSize: 16,
-    marginLeft: 16,
-    marginRight: 16,
-    paddingHorizontal: 0,
-  },
-  textInputWrapStyle: {
-    marginTop: 0,
-  },
-});
-
-export default ManageUnit;

package/src/screens/Unit/SelectLocation.js

@@ -1,161 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import React, { memo, useCallback, useRef, useState } from 'react';
-import { View } from 'react-native';
-
-import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
-import BottomButtonView from '../../commons/BottomButtonView';
-
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import { API } from '../../configs';
-import styles from './SelectLocationStyles';
-import SearchBarLocation from '../../commons/SearchLocation';
-import RowLocation from '../../commons/SearchLocation/RowLocation';
-import { axiosGet } from '../../utils/Apis/axios';
-import { ScrollView } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
-import { SCConfig } from '../../configs';
-import Point from '../../../assets/images/AddLocationMaps/Point.svg';
-
-const initialRegion = {
-  latitudeDelta: 0.0922,
-  longitudeDelta: 0.0421,
-};
-
-const DEFAULT_LATITUDE = 10.7974046; // EoH center
-const DEFAULT_LONGITUDE = 106.7035663;
-
-const SelectLocation = memo(({ route }) => {
-  const t = useTranslations();
-  const { updateLocation } = route.params;
-  const { goBack } = useNavigation();
-  const [input, setInput] = useState('');
-  const [searchData, setSearchData] = useState([]);
-  const [searchedLocation, setSearchedLocation] = useState(null);
-  const mapRef = useRef(null);
-
-  const onTextInput = useCallback(async (input) => {
-    setInput(input);
-    if (!input) {
-      setSearchData([]);
-      setSearchedLocation(null);
-      return;
-    }
-    try {
-      const config = {
-        params: {
-          input: input,
-          key: SCConfig.GOOGLE_MAP_API_KEY,
-          sessiontoken: 123456324,
-          strictBounds: false,
-          types: ['establishment'],
-        },
-      };
-
-      const { success, data } = await axiosGet(
-        API.EXTERNAL.GOOGLE_MAP.AUTO_COMPLETE,
-        config
-      );
-      if (success) {
-        setSearchData(data.predictions);
-      }
-    } catch (error) {}
-  }, []);
-
-  const animateToRegion = useCallback((lat, lng) => {
-    if (!mapRef || !mapRef.current) {
-      return;
-    }
-
-    mapRef.current.animateToRegion(
-      {
-        latitude: lat,
-        longitude: lng,
-        ...initialRegion,
-      },
-      600
-    );
-  }, []);
-
-  const onPressRowLocation = useCallback(async (item) => {
-    setInput(item.description);
-    setSearchData([]);
-    const body = {
-      params: {
-        place_id: item.place_id,
-        key: SCConfig.GOOGLE_MAP_API_KEY,
-      },
-    };
-
-    const { success, data } = await axiosGet(
-      API.EXTERNAL.GOOGLE_MAP.GET_LAT_LNG_BY_PLACE_ID,
-      body
-    );
-    if (success) {
-      const { location } = data.result.geometry;
-      animateToRegion(location.lat, location.lng);
-      setSearchedLocation({
-        description: item.description,
-        latitude: location.lat,
-        longitude: location.lng,
-      });
-    }
-  }, []);
-
-  const onDone = useCallback(() => {
-    if (!searchedLocation) {
-      return;
-    }
-
-    updateLocation(searchedLocation.description);
-    goBack();
-  }, [goBack, updateLocation, searchedLocation]);
-  return (
-    <View style={styles.wrap}>
-      <View style={styles.searchLocation}>
-        <SearchBarLocation input={input} onTextInput={onTextInput} />
-        <ScrollView style={styles.searchData}>
-          {searchData.map((item) => (
-            <RowLocation item={item} onPress={onPressRowLocation} />
-          ))}
-        </ScrollView>
-      </View>
-      <MapView
-        ref={mapRef}
-        provider={PROVIDER_GOOGLE}
-        style={styles.mapView}
-        initialRegion={{
-          ...initialRegion,
-          latitude: DEFAULT_LATITUDE,
-          longitude: DEFAULT_LONGITUDE,
-        }}
-        followUserLocation={true}
-      >
-        {searchedLocation && (
-          <Marker
-            coordinate={{
-              latitude: searchedLocation.latitude,
-              longitude: searchedLocation.longitude,
-            }}
-            tracksViewChanges={false}
-          >
-            <View style={styles.pointCircle}>
-              <Point />
-            </View>
-          </Marker>
-        )}
-      </MapView>
-      <BottomButtonView
-        rowButton
-        style={styles.bottomButton}
-        mainTitle={t('done')}
-        onPressMain={onDone}
-        secondaryTitle={t('cancel')}
-        onPressSecondary={goBack}
-        typeMain="primaryText"
-        typeSecondary="primaryText"
-      />
-    </View>
-  );
-});
-
-export default SelectLocation;

package/src/screens/Unit/SelectLocationStyles.js

@@ -1,114 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { Colors } from '../../configs';
-
-export default StyleSheet.create({
-  wrap: {
-    flex: 1,
-  },
-  mapView: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-  bottomButton: {
-    backgroundColor: Colors.White,
-  },
-  pointCircle: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 109,
-    height: 109,
-    borderRadius: 50,
-    backgroundColor: Colors.BlueTransparent5,
-    borderWidth: 1,
-    borderColor: Colors.Blue10,
-  },
-  searchLocation: {
-    paddingVertical: 8,
-    position: 'absolute',
-    zIndex: 1,
-    minHeight: 48,
-    top: 0,
-    left: 0,
-    right: 0,
-    flex: 1,
-    backgroundColor: Colors.White,
-  },
-  searchData: {
-    paddingHorizontal: 16,
-    position: 'relative',
-    width: '100%',
-    maxHeight: 100,
-  },
-  buttonShadow: {
-    shadowColor: Colors.Gray11,
-    shadowOffset: {
-      width: 0,
-      height: 8,
-    },
-    shadowOpacity: 1,
-    shadowRadius: 12,
-    elevation: 5,
-    marginBottom: 16,
-    marginRight: 16,
-  },
-  center: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  fullWidth: {
-    width: '100%',
-  },
-  button: {
-    paddingHorizontal: 30,
-    paddingVertical: 9,
-    backgroundColor: Colors.White,
-    borderColor: Colors.Gray4,
-    borderWidth: 1,
-    borderRadius: 30,
-  },
-  activeSessionView: {
-    marginHorizontal: 16,
-  },
-  popupIcon: {
-    marginLeft: '44%',
-    marginBottom: 15,
-  },
-  popupTitle: {
-    alignSelf: 'center',
-    marginBottom: 15,
-  },
-  popupDes: {
-    alignSelf: 'center',
-    textAlign: 'center',
-    width: '95%',
-  },
-  buttonAgree: {
-    flex: 1,
-    flexDirection: 'row',
-    paddingHorizontal: 16,
-    paddingTop: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  titleContainer: {
-    justifyContent: 'center',
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-    marginTop: 30,
-  },
-  childrenStyle: {
-    padding: 16,
-  },
-  scrollViewTerm: {
-    height: 300,
-    borderBottomWidth: 1,
-    borderTopWidth: 1,
-    borderTopColor: Colors.WrapGray,
-    borderBottomColor: Colors.WrapGray,
-  },
-});