Merge pull request #8 from n1kko777/1.1.0

1.1.0
n1kko777 · Apr 18, 2021 · 4d81d96 · 4d81d96
2 parents 2e35963 + c63804a
commit 4d81d96
Show file tree

Hide file tree

Showing 17 changed files with 1,997 additions and 1,738 deletions.
diff --git a/app.json b/app.json
@@ -4,11 +4,8 @@
     "slug": "moneycontrol-rn-app",
     "description": "Corporate Money Control – мобильное приложение для автоматизации профессиональной деятельности, существенно облегчает и автоматизирует экономические, технические, аналитические процессы, повышая скорость и снижая время и средства на проведение различного рода операций.",
     "privacy": "public",
-    "platforms": [
-      "ios",
-      "android"
-    ],
-    "version": "1.0.16",
+    "platforms": ["ios", "android"],
+    "version": "1.1.0",
     "orientation": "portrait",
     "icon": "./assets/logo.png",
     "splash": {
@@ -19,17 +16,15 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "ru.mncntrl.n1kko777",
-      "buildNumber": "1.0.16"
+      "buildNumber": "1.1.0"
     },
     "android": {
       "package": "ru.mncntrl.n1kko777",
-      "versionCode": 16,
+      "versionCode": 110,
       "permissions": [
         "CAMERA",
         "READ_EXTERNAL_STORAGE",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,9 +26,10 @@
     ]
   },
   "dependencies": {
+    "@dietime/react-native-date-picker": "^1.1.1",
     "@eva-design/eva": "^2.0.0",
     "@expo/vector-icons": "^12.0.0",
-    "@react-native-async-storage/async-storage": "^1.14.1",
+    "@react-native-async-storage/async-storage": "^1.13.0",
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/bottom-tabs": "5.11.8",
     "@react-navigation/native": "^5.9.3",
@@ -37,28 +38,32 @@
     "@ui-kitten/eva-icons": "^5.0.0",
     "@ui-kitten/moment": "^5.0.0",
     "axios": "^0.21.1",
-    "expo": "^40.0.1",
-    "expo-clipboard": "~1.0.1",
-    "expo-font": "~8.4.0",
-    "expo-haptics": "~8.4.0",
-    "expo-image-picker": "~9.2.0",
-    "expo-permissions": "~10.0.0",
+    "expo": "^41.0.0",
+    "expo-clipboard": "~1.0.2",
+    "expo-font": "~9.1.0",
+    "expo-haptics": "~10.0.0",
+    "expo-image-picker": "~10.1.3",
     "install": "^0.13.0",
     "moment": "^2.29.1",
     "npm": "^7.6.3",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
     "react-native-appearance": "~0.3.3",
+    "react-native-best-wheel-datepicker": "^0.0.7",
     "react-native-chart-kit": "^6.11.0",
+    "react-native-custom-datepicker-ios": "^0.0.5",
+    "react-native-date-picker": "^3.2.10",
     "react-native-elements": "^3.3.2",
-    "react-native-gesture-handler": "~1.8.0",
+    "react-native-gesture-handler": "~1.10.2",
     "react-native-keyboard-aware-scroll-view": "^0.9.3",
+    "react-native-number-please": "^1.0.5",
     "react-native-paper": "^4.7.2",
-    "react-native-safe-area-context": "3.1.9",
-    "react-native-screens": "~2.15.2",
+    "react-native-safe-area-context": "3.2.0",
+    "react-native-screens": "~3.0.0",
     "react-native-svg": "12.1.0",
     "react-native-web": "~0.13.12",
+    "react-native-wheel-scrollview-picker": "^1.0.2",
     "react-navigation": "^4.4.4",
     "react-navigation-drawer": "^2.7.0",
     "react-navigation-header-buttons": "^7.0.0",

diff --git a/src/components/CustomDatePicker.js b/src/components/CustomDatePicker.js
@@ -1,168 +1,31 @@
-import React, { memo, useCallback, useMemo } from "react";
-import {
-  View,
-  Modal,
-  StyleSheet,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  Dimensions,
-} from "react-native";
+import React, { memo, useCallback } from "react";
+import { View, TouchableOpacity } from "react-native";
 
-import { useTheme, RangeCalendar, Button, Text } from "@ui-kitten/components";
+import { useTheme, Text } from "@ui-kitten/components";
 
-import { useDispatch, useSelector } from "react-redux";
-import { displayDate } from "../dispayDate";
+import { useSelector } from "react-redux";
 import { ThemeContext } from "../themes/theme-context";
 
 import { CalendarIcon } from "../themes/icons";
-import { setCalendar, clearCalendar } from "../store/actions/calendarAction";
-import { dateService } from "../dateService";
-import {
-  getCalendarEndDate,
-  getCalendarMinDate,
-  getCalendarStartDate,
-} from "../store/selectors";
-
-const styles = StyleSheet.create({
-  centeredView: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "rgba(0,0,0,0.4)",
-  },
-  modalView: {
-    margin: 20,
-    borderRadius: 10,
-    padding: 15,
-    alignItems: "center",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    width: Dimensions.get("window").width - 24,
-    maxWidth: 600,
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
-  },
-  openButton: {
-    backgroundColor: "#F194FF",
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2,
-  },
-  textStyle: {
-    color: "white",
-    fontWeight: "bold",
-    textAlign: "center",
-  },
-  modalText: {
-    marginBottom: 15,
-    textAlign: "center",
-  },
-});
-
-export const CustomDatePicker = memo(() => {
-  const dispatch = useDispatch();
-
-  const startDate = useSelector(getCalendarStartDate);
-  const endDate = useSelector(getCalendarEndDate);
-
-  const minDate = useSelector(getCalendarMinDate);
+import { getDisplayDate } from "../store/selectors";
 
+export const CustomDatePicker = memo(({ navigation }) => {
   const themeContext = React.useContext(ThemeContext);
   const kittenTheme = useTheme();
-  const [modalVisible, setModalVisible] = React.useState(false);
-
-  const [range, setRange] = React.useState({
-    startDate: null,
-    endDate: null,
-  });
-
-  React.useEffect(() => {
-    setRange({
-      startDate,
-      endDate,
-    });
-  }, [endDate, startDate]);
 
-  const onModalOpen = useCallback(() => setModalVisible(true), []);
+  const displayDate = useSelector(getDisplayDate);
 
-  const onModalClose = useCallback(() => {
-    setModalVisible(false);
-  }, []);
-
-  const clearRangeHandler = useCallback(() => {
-    dispatch(clearCalendar());
-    onModalClose();
-  }, [dispatch, onModalClose]);
-
-  const selectRangeHandler = useCallback(() => {
-    dispatch(setCalendar(range));
-    onModalClose();
-  }, [dispatch, onModalClose, range]);
-
-  const memoDisplayDate = useMemo(
-    () =>
-      `${displayDate(startDate)} – ${displayDate(
-        endDate !== null ? endDate : startDate
-      )}`,
-    [endDate, startDate]
-  );
+  const onDateClick = useCallback(() => {
+    if (navigation) {
+      navigation.navigate("PeriodPicker");
+    }
+  }, [navigation]);
 
   return (
     <View style={{ flex: 1, alignItems: "center" }}>
-      <Modal
-        onRequestClose={onModalClose}
-        animationType="slide"
-        transparent
-        visible={modalVisible}
-      >
-        <TouchableOpacity onPressOut={onModalClose} style={styles.centeredView}>
-          <View
-            style={{
-              ...styles.modalView,
-              backgroundColor:
-                kittenTheme[
-                  `color-basic-${themeContext.theme === "light" ? 200 : 900}`
-                ],
-            }}
-          >
-            <TouchableWithoutFeedback>
-              <>
-                <RangeCalendar
-                  dateService={dateService}
-                  range={range}
-                  onSelect={setRange}
-                  min={minDate}
-                />
-                <View
-                  style={{
-                    marginTop: 20,
-                    flexDirection: "row",
-                  }}
-                >
-                  <Button
-                    style={{ marginRight: 20 }}
-                    onPress={selectRangeHandler}
-                    status="info"
-                  >
-                    Выбрать
-                  </Button>
-                  <Button onPress={clearRangeHandler} appearance="outline">
-                    Сбросить
-                  </Button>
-                </View>
-              </>
-            </TouchableWithoutFeedback>
-          </View>
-        </TouchableOpacity>
-      </Modal>
-
       <TouchableOpacity
         style={{ flexDirection: "row", alignItems: "center" }}
-        onPressOut={onModalOpen}
+        onPress={onDateClick}
       >
         <CalendarIcon
           fill={
@@ -182,7 +45,7 @@ export const CustomDatePicker = memo(() => {
           }}
           category="p1"
         >
-          {memoDisplayDate}
+          {displayDate}
         </Text>
       </TouchableOpacity>
     </View>

diff --git a/src/components/profile/AvatarPicker.js b/src/components/profile/AvatarPicker.js
@@ -1,14 +1,16 @@
 import React, { memo, useCallback } from "react";
 import { Button, Image, View, Alert, Platform } from "react-native";
 import * as ImagePicker from "expo-image-picker";
-import * as Permissions from "expo-permissions";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import DefaultIcon from "../../../assets/icon.png";
 
 export const AvatarPicker = memo(({ isEdit, imageUrl, setImageUrl }) => {
   const getPermissionAsync = useCallback(async () => {
-    if (Platform.OS === "ios") {
-      const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
+    if (Platform.OS !== "web") {
+      const {
+        status,
+      } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+
       if (status !== "granted") {
         Alert.alert(
           "Доступ к камере",
@@ -42,7 +44,7 @@ export const AvatarPicker = memo(({ isEdit, imageUrl, setImageUrl }) => {
       const result = await ImagePicker.launchImageLibraryAsync({
         mediaTypes: ImagePicker.MediaTypeOptions.All,
         allowsEditing: true,
-        aspect: [4, 3],
+        aspect: [4, 4],
         quality: 1,
       });
       if (!result.cancelled) {

diff --git a/src/dateService.js b/src/dateService.js
diff --git a/src/dispayDate.js b/src/dispayDate.js
@@ -1,11 +1,3 @@
-export const displayDate = (date) => {
-  const newDate = new Date(date);
-  newDate.setDate(date.getDate() + 1);
+import moment from "moment";
 
-  const dateString = newDate.toISOString().split("-");
-  const year = dateString[0];
-  const month = dateString[1];
-  const day = dateString[2].split("T")[0];
-
-  return `${day}.${month}.${year}`;
-};
+export const displayDate = (date) => moment(date).format("DD.MM.YYYY");
diff --git a/src/navigations/AppNavigator.js b/src/navigations/AppNavigator.js
@@ -27,6 +27,7 @@ import { CreateTransactionScreen } from "../screens/operation/CreateTransactionS
 import { FilterOperationScreen } from "../screens/operation/FilterOperationScreen";
 import { CreateActionScreen } from "../screens/operation/CreateActionScreen";
 import { CreateTransferScreen } from "../screens/operation/CreateTransferScreen";
+import { PeriodPickerScreen } from "../screens/PeriodPickerScreen";
 
 const Stack = createStackNavigator();
 
@@ -68,6 +69,7 @@ const HomeNavigator = () => (
     <Stack.Screen name="Tag" component={TagScreen} />
     <Stack.Screen name="CreateTag" component={CreateTagScreen} />
     <Stack.Screen name="UpdateTag" component={UpdateTagScreen} />
+    <Stack.Screen name="PeriodPicker" component={PeriodPickerScreen} />
   </Stack.Navigator>
 );
 

diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js
@@ -67,7 +67,7 @@ export const HomeScreen = memo(({ navigation }) => {
           <BalanceComponent isBalance />
 
           <View style={{ height: 30, marginVertical: 10 }}>
-            <CustomDatePicker />
+            <CustomDatePicker navigation={navigation} />
           </View>
 
           <HomeList navigation={navigation} dataList={homeListData} />