[TMA-382] Edit profile screen (#121)

* added more icon

* a less fat icon

* and the actual icon asset

* bottom drawer skeleton done

* removed warning, better code

* a more completed skeleton done

* bottom drawer done!

* Added content container,  sent birthday picker props, minor styling

* differenciating defined and undefined birthdate in birthdate, datepicker

* removed restricting width for TaggDropDown

* Added edit profile screen to navigator stack

* Add EditProfile view, refresh profile view on save

* Removes unnecessary import

* Stores gender and birthdate as part of ProfileType

* Added gender, birthdate, isEditProfile to AuthProv

* Conditional view applied for edit profile button

* Includes discarded changes in previous merge- BD

* removed unused icon

* resolved scary warnings

* added icon to drawer

* Small fix

* minor code improvement

* sc

* fixed birthday bug

* custom gender updation fixed

* small change to birthday default value

* missed something

* cleaned up types! Warnings gone!

* fixed another gender picker bug

* fixed gender bug and cleaned up logic

* removed warning, MUCH better code now

Co-authored-by: Ivan Chen <ivan@thetaggid.com>
Co-authored-by: Ashm Walia <ashmwalia@outlook.com>

1 files changed, 80 insertions, 70 deletions

diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/ProfileOnboarding.tsx
index 3979de38..f21f3864 100644
--- a/src/screens/onboarding/ProfileOnboarding.tsx
+++ b/src/screens/onboarding/ProfileOnboarding.tsx
@@ -15,7 +15,6 @@ import {
   Background,
   TaggBigInput,
   TaggInput,
-  TaggDatePicker,
   TaggDropDown,
   BirthDatePicker,
 } from '../../components';
@@ -52,12 +51,13 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
   navigation,
 }) => {
   const {userId, username} = route.params;
+  let emptyDate: string | undefined;
   const [form, setForm] = React.useState({
     largePic: '',
     smallPic: '',
     website: '',
     bio: '',
-    birthdate: '',
+    birthdate: emptyDate,
     gender: '',
     isValidWebsite: true,
     isValidBio: true,
@@ -65,7 +65,7 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
     attemptedSubmit: false,
     token: '',
   });
-  const [customGender, setCustomGender] = React.useState();
+  const [customGender, setCustomGender] = React.useState(Boolean);
 
   // refs for changing focus
   const bioRef = React.useRef();
@@ -232,7 +232,7 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
   const handleBirthdateUpdate = (birthdate: Date) => {
     setForm({
       ...form,
-      birthdate: moment(birthdate).format('YYYY-MM-DD'),
+      birthdate: birthdate && moment(birthdate).format('YYYY-MM-DD'),
     });
   };
 
@@ -357,81 +357,85 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
         <LargeProfilePic />
         <SmallProfilePic />
       </View>
-      <TaggInput
-        accessibilityHint="Enter a website."
-        accessibilityLabel="Website input field."
-        placeholder="Website"
-        autoCompleteType="off"
-        textContentType="URL"
-        autoCapitalize="none"
-        returnKeyType="next"
-        onChangeText={handleWebsiteUpdate}
-        onSubmitEditing={() => handleFocusChange('bio')}
-        blurOnSubmit={false}
-        valid={form.isValidWebsite}
-        attemptedSubmit={form.attemptedSubmit}
-        invalidWarning={'Website must be a valid link to your website'}
-        width={280}
-      />
-      <TaggBigInput
-        accessibilityHint="Enter a bio."
-        accessibilityLabel="Bio input field."
-        placeholder="Bio"
-        autoCompleteType="off"
-        textContentType="none"
-        autoCapitalize="none"
-        returnKeyType="next"
-        onChangeText={handleBioUpdate}
-        onSubmitEditing={() => handleFocusChange('bio')}
-        blurOnSubmit={false}
-        ref={bioRef}
-        valid={form.isValidBio}
-        attemptedSubmit={form.attemptedSubmit}
-        invalidWarning={
-          'Bio must be less than 150 characters and must contain valid characters'
-        }
-        width={280}
-      />
-      <BirthDatePicker
-        ref={birthdateRef}
-        handleBDUpdate={handleBirthdateUpdate}
-        width={280}
-      />
-      <TaggDropDown
-        onValueChange={(value) => handleGenderUpdate(value)}
-        items={[
-          {label: 'Male', value: 'male'},
-          {label: 'Female', value: 'female'},
-          {label: 'Custom', value: 'custom'},
-        ]}
-        placeholder={{
-          label: 'Gender',
-          value: null,
-          color: '#ddd',
-        }}
-      />
-      {customGender && (
+      <View style={styles.contentContainer}>
         <TaggInput
-          accessibilityHint="Custom"
-          accessibilityLabel="Gender input field."
-          placeholder="Enter your gender"
+          accessibilityHint="Enter a website."
+          accessibilityLabel="Website input field."
+          placeholder="Website"
+          autoCompleteType="off"
+          textContentType="URL"
+          autoCapitalize="none"
+          returnKeyType="next"
+          onChangeText={handleWebsiteUpdate}
+          onSubmitEditing={() => handleFocusChange('bio')}
+          blurOnSubmit={false}
+          valid={form.isValidWebsite}
+          attemptedSubmit={form.attemptedSubmit}
+          invalidWarning={'Website must be a valid link to your website'}
+          width={280}
+        />
+        <TaggBigInput
+          accessibilityHint="Enter a bio."
+          accessibilityLabel="Bio input field."
+          placeholder="Bio"
           autoCompleteType="off"
           textContentType="none"
           autoCapitalize="none"
           returnKeyType="next"
+          onChangeText={handleBioUpdate}
+          onSubmitEditing={() => handleFocusChange('bio')}
           blurOnSubmit={false}
-          ref={customGenderRef}
-          onChangeText={handleCustomGenderUpdate}
-          onSubmitEditing={() => handleSubmit()}
-          valid={form.isValidGender}
+          ref={bioRef}
+          valid={form.isValidBio}
           attemptedSubmit={form.attemptedSubmit}
-          invalidWarning={'Custom field can only contain letters and hyphens'}
+          invalidWarning={
+            'Bio must be less than 150 characters and must contain valid characters'
+          }
           width={280}
         />
-      )}
-      <TouchableOpacity onPress={handleSubmit} style={styles.submitBtn}>
-        <Text style={styles.submitBtnLabel}>Let's start!</Text>
-      </TouchableOpacity>
+        <BirthDatePicker
+          ref={birthdateRef}
+          handleBDUpdate={handleBirthdateUpdate}
+          width={280}
+          date={form.birthdate}
+          showPresetdate={false}
+        />
+        <TaggDropDown
+          onValueChange={(value: string) => handleGenderUpdate(value)}
+          items={[
+            {label: 'Male', value: 'male'},
+            {label: 'Female', value: 'female'},
+            {label: 'Custom', value: 'custom'},
+          ]}
+          placeholder={{
+            label: 'Gender',
+            value: null,
+            color: '#ddd',
+          }}
+        />
+        {customGender && (
+          <TaggInput
+            accessibilityHint="Custom"
+            accessibilityLabel="Gender input field."
+            placeholder="Enter your gender"
+            autoCompleteType="off"
+            textContentType="none"
+            autoCapitalize="none"
+            returnKeyType="next"
+            blurOnSubmit={false}
+            ref={customGenderRef}
+            onChangeText={handleCustomGenderUpdate}
+            onSubmitEditing={() => handleSubmit()}
+            valid={form.isValidGender}
+            attemptedSubmit={form.attemptedSubmit}
+            invalidWarning={'Custom field can only contain letters and hyphens'}
+            width={280}
+          />
+        )}
+        <TouchableOpacity onPress={handleSubmit} style={styles.submitBtn}>
+          <Text style={styles.submitBtnLabel}>Let's start!</Text>
+        </TouchableOpacity>
+      </View>
     </Background>
   );
 };
@@ -441,6 +445,11 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     marginBottom: '5%',
   },
+  contentContainer: {
+    position: 'relative',
+    width: 280,
+    alignSelf: 'center',
+  },
   largeProfileUploader: {
     justifyContent: 'center',
     alignItems: 'center',
@@ -493,6 +502,7 @@ const styles = StyleSheet.create({
     height: 40,
     borderRadius: 5,
     marginTop: '5%',
+    alignSelf: 'center',
   },
   submitBtnLabel: {
     fontSize: 16,