optimized code in first screen of nanny account creation and added up…

…load file functionnality in second screen
RitaSensei · May 5, 2024 · 356d6e8 · 356d6e8
1 parent 2410077
commit 356d6e8
Show file tree

Hide file tree

Showing 9 changed files with 492 additions and 31 deletions.
diff --git a/careconnect/app.config.js b/careconnect/app.config.js
@@ -18,6 +18,7 @@ export default {
     scheme: "careconnect",
     ios: {
       supportsTablet: true,
+      usesIcloudStorage: true,
     },
     android: {
       adaptiveIcon: {
@@ -65,6 +66,12 @@ export default {
           photosPermission: "The app accesses your photos",
         },
       ],
+      [
+        "expo-document-picker",
+        {
+          iCloudContainerEnvironment: "Production",
+        },
+      ],
     ],
     extra: {
       firebaseApiKey: process.env.FIREBASE_API_KEY,

diff --git a/careconnect/components/PickerComponent.js b/careconnect/components/PickerComponent.js
@@ -0,0 +1,96 @@
+import React, { useState } from "react";
+import { View, Text, ScrollView, SafeAreaView } from "react-native";
+import { IconButton } from "react-native-paper";
+import { Picker } from "react-native-ui-lib";
+import { Entypo } from "@expo/vector-icons";
+
+import styles from "../screens/creating account/styles";
+
+export const PickerComponent = ({
+  data,
+  emptyField,
+  onSelect,
+  onAdd,
+  onRemove,
+  disabled,
+  placeholder,
+  errorText,
+}) => {
+  return (
+    <View style={{ flexDirection: "column" }}>
+      {data.map((item, index) => (
+        <View key={index} style={{ flexDirection: "column", justifyContent: "center" }}>
+          <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
+            <Picker
+              placeholder={placeholder}
+              style={[styles.picker, emptyField && !item.nativePickerValue && styles.errorPicker]}
+              //   useDialog
+              useSafeArea
+              // useWheelPicker
+              enableModalBlur={false}
+              value={item.nativePickerValue}
+              onChange={nativePickerValue => {
+                const updatedData = [...data];
+                updatedData[index].pickerOpen = false;
+                onSelect(index, nativePickerValue);
+              }}
+              trailingAccessory={
+                <Entypo
+                  name={item.pickerOpen ? "chevron-up" : "chevron-down"}
+                  size={30}
+                  color="black"
+                  style={{ position: "absolute", marginStart: 290, top: 10 }}
+                />
+              }
+              onPress={() => {
+                const updatedData = [...data];
+                updatedData[index].pickerOpen = true;
+                onSelect(index, item.nativePickerValue);
+              }}
+              topBarProps={{
+                doneLabel: "Done",
+                cancelLabel: "Cancel",
+              }}
+              fieldType="filter"
+            >
+              {item.options.map(option => (
+                <Picker.Item
+                  key={option.value}
+                  value={option.value}
+                  label={option.label}
+                  disabled={option.disabled}
+                  style={{
+                    color: option.value === item.nativePickerValue ? "#ff0000" : "#000000",
+                  }}
+                  multiline
+                />
+              ))}
+            </Picker>
+            {index === 0 && (
+              <IconButton
+                icon="plus-circle"
+                iconColor="#FA89B8"
+                size={36}
+                style={{ position: "absolute", marginStart: 317, bottom: 18 }}
+                disabled={disabled}
+                onPress={onAdd}
+              />
+            )}
+            {index !== 0 && (
+              <IconButton
+                icon="minus-circle"
+                iconColor="#B22D1D"
+                size={36}
+                style={{ position: "absolute", marginStart: 317, bottom: 18 }}
+                onPress={onRemove}
+              />
+            )}
+          </View>
+          {emptyField && !item.nativePickerValue && (
+            <Text style={styles.errorText}>{errorText}</Text>
+          )}
+        </View>
+      ))}
+    </View>
+  );
+};
diff --git a/careconnect/package-lock.json b/careconnect/package-lock.json
diff --git a/careconnect/package.json b/careconnect/package.json
@@ -45,7 +45,8 @@
     "react-native-ui-lib": "^7.20.3",
     "react-native-vector-icons": "^10.0.3",
     "react-native-web": "~0.19.6",
-    "react-navigation-header-buttons": "^11.2.1"
+    "react-navigation-header-buttons": "^11.2.1",
+    "expo-document-picker": "~11.10.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

diff --git a/careconnect/screens/creating account/nanny/NewAccountNanny1.js b/careconnect/screens/creating account/nanny/NewAccountNanny1.js
@@ -29,16 +29,12 @@ const NewAccountNanny1Screen = ({ navigation }) => {
   const [emptyField, setEmptyField] = useState(false);
   const [validDateField, setValidDateField] = useState(false);
   const [currentCity, setCurrentCity] = useState({
-    itemsCount: 1,
     location: undefined,
-    option: undefined,
     nativePickerValue: "",
     pickerOpen: false,
   });
   const [nationality, setNationality] = useState({
-    itemsCount: 1,
     nationality: undefined,
-    option: undefined,
     nativePickerValue: "",
     pickerOpen: false,
   });
@@ -246,7 +242,7 @@ const NewAccountNanny1Screen = ({ navigation }) => {
             enableModalBlur={false}
             value={nationality.nativePickerValue}
             onChange={nativePickerValue =>
-              setNationality(prevState => ({ ...prevState, nativePickerValue }))
+              setNationality(prevState => ({ ...prevState, pickerOpen: false, nativePickerValue }))
             }
             trailingAccessory={
               <Entypo
@@ -256,9 +252,7 @@ const NewAccountNanny1Screen = ({ navigation }) => {
                 style={{ position: "absolute", marginStart: 290, top: 10 }}
               />
             }
-            onPress={() =>
-              setNationality(prevState => ({ ...prevState, pickerOpen: !prevState.pickerOpen }))
-            }
+            onPress={() => setNationality(prevState => ({ ...prevState, pickerOpen: true }))}
             topBarProps={{
               doneLabel: "Done",
               cancelLabel: "Cancel",
@@ -310,7 +304,7 @@ const NewAccountNanny1Screen = ({ navigation }) => {
             enableModalBlur={false}
             value={currentCity.nativePickerValue}
             onChange={nativePickerValue =>
-              setCurrentCity(prevState => ({ ...prevState, nativePickerValue }))
+              setCurrentCity(prevState => ({ ...prevState, pickerOpen: false, nativePickerValue }))
             }
             trailingAccessory={
               <Entypo
@@ -320,9 +314,7 @@ const NewAccountNanny1Screen = ({ navigation }) => {
                 style={{ position: "absolute", marginStart: 290, top: 10 }}
               />
             }
-            onPress={() =>
-              setCurrentCity(prevState => ({ ...prevState, pickerOpen: !prevState.pickerOpen }))
-            }
+            onPress={() => setCurrentCity(prevState => ({ ...prevState, pickerOpen: true }))}
             topBarProps={{
               doneLabel: "Done",
               cancelLabel: "Cancel",
@@ -455,7 +447,10 @@ const NewAccountNanny1Screen = ({ navigation }) => {
             style={styles.nextButton}
             buttonColor="#FA89B8"
             textColor="#fff"
-            onPress={handleNext}
+            // onPress={handleNext}
+            onPress={() =>
+              navigation.navigate("NewAccount", { screen: "Nanny New Account Page 2" })
+            }
           >
             <Text style={styles.nextButtonText}>Next</Text>
           </Button>