date picker done (#80)

7 files changed, 166 insertions, 77 deletions

diff --git a/package.json b/package.json
index bbcf6b1f..72ff434d 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "react-native": "0.63.3",
     "react-native-animatable": "^1.3.3",
     "react-native-confirmation-code-field": "^6.5.0",
-    "react-native-datepicker": "^1.7.2",
+    "react-native-date-picker": "^3.2.5",
     "react-native-elements": "^2.3.2",
     "react-native-gesture-handler": "^1.6.1",
     "react-native-hyperlink": "^0.0.19",
diff --git a/src/components/common/TaggDatePicker.tsx b/src/components/common/TaggDatePicker.tsx
new file mode 100644
index 00000000..d8010251
--- /dev/null
+++ b/src/components/common/TaggDatePicker.tsx
@@ -0,0 +1,30 @@
+import React, {useState} from 'react';
+import DatePicker from 'react-native-date-picker';
+
+interface TaggDatePickerProps {
+  handleDateUpdate: (_: Date) => void;
+  maxDate: Date;
+  textColor: string;
+}
+
+const TaggDatePicker: React.FC<TaggDatePickerProps> = ({
+  handleDateUpdate,
+  maxDate,
+  textColor,
+}) => {
+  const [date, setDate] = useState(new Date());
+  return (
+    <DatePicker
+      date={date}
+      textColor={textColor}
+      mode={'date'}
+      maximumDate={maxDate}
+      onDateChange={(newDate) => {
+        setDate(newDate);
+        handleDateUpdate(newDate);
+      }}
+    />
+  );
+};
+
+export default TaggDatePicker;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 950b3f61..87ebe810 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -11,4 +11,5 @@ export {default as LoadingIndicator} from './LoadingIndicator';
 export {default as DateLabel} from './DateLabel';
 export {default as SocialLinkModal} from './SocialLinkModal';
 export {default as ComingSoon} from './ComingSoon';
+export {default as TaggDatePicker} from './TaggDatePicker';
 export * from './post';
diff --git a/src/components/onboarding/BirthDatePicker.tsx b/src/components/onboarding/BirthDatePicker.tsx
new file mode 100644
index 00000000..f97f1a72
--- /dev/null
+++ b/src/components/onboarding/BirthDatePicker.tsx
@@ -0,0 +1,125 @@
+import moment from 'moment';
+import React, {useState} from 'react';
+import {
+  Modal,
+  StyleSheet,
+  Text,
+  TextInputProps,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import {Button} from 'react-native-elements';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {TaggDatePicker} from '../common';
+
+interface BirthDatePickerProps extends TextInputProps {
+  handleBDUpdate: (_: Date) => void;
+  width?: number | string;
+}
+
+const BirthDatePicker = React.forwardRef(
+  (props: BirthDatePickerProps, ref: any) => {
+    const getMaxDate = () => {
+      const maxDate = moment().subtract(13, 'y').subtract(1, 'd');
+      return maxDate.toDate();
+    };
+    const [date, setDate] = useState(new Date(0));
+    const [hidden, setHidden] = useState(true);
+    const [updated, setUpdated] = useState(false);
+    const textColor = updated ? 'white' : '#ddd';
+    const updateDate = (newDate: Date) => {
+      props.handleBDUpdate(newDate);
+      setDate(newDate);
+      setUpdated(true);
+    };
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity
+          onPress={() => {
+            setHidden(false);
+          }}>
+          <Text
+            style={[styles.input, {width: props.width}, {color: textColor}]}
+            ref={ref}
+            {...props}>
+            {updated ? moment(date).format('YYYY-MM-DD') : 'Date of Birth'}
+          </Text>
+        </TouchableOpacity>
+        <Modal visible={!hidden} transparent={true} animationType="fade">
+          <TouchableWithoutFeedback
+            onPress={() => {
+              setHidden(true);
+            }}>
+            <View style={styles.bottomView}>
+              <TouchableWithoutFeedback>
+                <View style={styles.modalView}>
+                  <View style={styles.buttonView}>
+                    <Button
+                      title="Done"
+                      titleStyle={styles.doneButtonTitle}
+                      buttonStyle={styles.doneButton}
+                      onPress={() => {
+                        setHidden(true);
+                      }}
+                    />
+                  </View>
+                  <TaggDatePicker
+                    handleDateUpdate={updateDate}
+                    maxDate={getMaxDate()}
+                    textColor={'black'}
+                  />
+                </View>
+              </TouchableWithoutFeedback>
+            </View>
+          </TouchableWithoutFeedback>
+        </Modal>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    alignItems: 'center',
+    marginVertical: 11,
+  },
+  input: {
+    height: 40,
+    fontSize: 16,
+    paddingTop: '2%',
+    fontWeight: '600',
+    borderColor: '#fffdfd',
+    borderWidth: 2,
+    borderRadius: 20,
+    paddingLeft: 13,
+  },
+  modalView: {
+    backgroundColor: 'rgb(202, 206, 212)',
+    height: '29%',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  bottomView: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  buttonView: {
+    backgroundColor: 'rgb(247, 247, 247)',
+    width: '100%',
+    paddingRight: '2.5%',
+    alignItems: 'flex-end',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  doneButtonTitle: {
+    fontWeight: '600',
+    fontSize: 17,
+    color: 'rgb(19, 125, 250)',
+  },
+  doneButton: {
+    backgroundColor: 'transparent',
+  },
+});
+
+export default BirthDatePicker;
diff --git a/src/components/onboarding/TaggDatePicker.tsx b/src/components/onboarding/TaggDatePicker.tsx
deleted file mode 100644
index 39af6234..00000000
--- a/src/components/onboarding/TaggDatePicker.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import DatePicker from 'react-native-datepicker';
-import {View, StyleSheet, TextInputProps} from 'react-native';
-
-interface TaggDatePickerProps extends TextInputProps {
-  width?: number | string;
-  date?: string;
-  maxDate?: Date | string;
-}
-/**
- * An input component that receives all props a normal TextInput component does. TaggInput components grow to 60% of their parent's width by default, but this can be set using the `width` prop.
- */
-const TaggDatePicker = React.forwardRef(
-  (props: TaggDatePickerProps, ref: any) => {
-    return (
-      <View style={styles.container}>
-        <DatePicker
-          {...props}
-          style={styles.input}
-          placeholder={'Date of Birth'}
-          showIcon={false}
-          ref={ref}
-          format={'YYYY-MM-DD'}
-          customStyles={{
-            placeholderText: {
-              color: '#ddd',
-
-              fontSize: 16,
-              fontWeight: '600',
-            },
-            dateText: {
-              color: '#fff',
-              fontSize: 16,
-              fontWeight: '600',
-            },
-            dateInput: {
-              borderColor: '#fffdfd',
-              borderWidth: 2,
-              borderRadius: 20,
-              justifyContent: 'center',
-              alignItems: 'flex-start',
-              paddingLeft: 13,
-            },
-          }}
-        />
-      </View>
-    );
-  },
-);
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    alignItems: 'center',
-    marginVertical: 11,
-  },
-  input: {
-    minWidth: '67%',
-    height: 40,
-  },
-});
-
-export default TaggDatePicker;
diff --git a/src/components/onboarding/index.ts b/src/components/onboarding/index.ts
index aaad7a62..fde4e0af 100644
--- a/src/components/onboarding/index.ts
+++ b/src/components/onboarding/index.ts
@@ -5,7 +5,7 @@ export {default as TermsConditions} from './TermsConditions';
 export {default as SubmitButton} from './SubmitButton';
 export {default as TaggInput} from './TaggInput';
 export {default as TaggBigInput} from './TaggBigInput';
-export {default as TaggDatePicker} from './TaggDatePicker';
+export {default as BirthDatePicker} from './BirthDatePicker';
 export {default as TaggDropDown} from './TaggDropDown';
 export {default as SocialMediaLinker} from './SocialMediaLinker';
 export {default as LinkSocialMedia} from './LinkSocialMedia';
diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/ProfileOnboarding.tsx
index e7fcec90..bbabbb56 100644
--- a/src/screens/onboarding/ProfileOnboarding.tsx
+++ b/src/screens/onboarding/ProfileOnboarding.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {RouteProp} from '@react-navigation/native';
+import moment from 'moment';
 import {StackNavigationProp} from '@react-navigation/stack';
 import {
   Text,
@@ -16,6 +17,7 @@ import {
   TaggInput,
   TaggDatePicker,
   TaggDropDown,
+  BirthDatePicker,
 } from '../../components';
 import {OnboardingStackParams} from '../../routes/onboarding';
 import {AuthContext} from '../../routes/authentication';
@@ -26,7 +28,6 @@ import {
   bioRegex,
   genderRegex,
 } from '../../constants';
-import moment from 'moment';
 import AsyncStorage from '@react-native-community/async-storage';
 
 type ProfileOnboardingScreenRouteProp = RouteProp<
@@ -228,18 +229,13 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
     });
   };
 
-  const handleBirthdateUpdate = (birthdate: string) => {
+  const handleBirthdateUpdate = (birthdate: Date) => {
     setForm({
       ...form,
-      birthdate,
+      birthdate: moment(birthdate).format('YYYY-MM-DD'),
     });
   };
 
-  const getMaxDate = () => {
-    const maxDate = moment().subtract(13, 'y').subtract(1, 'd');
-    return maxDate.format('YYYY-MM-DD');
-  };
-
   const handleSubmit = async () => {
     if (!form.largePic) {
       Alert.alert('Please upload a large profile picture!');
@@ -396,10 +392,10 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
         }
         width={280}
       />
-      <TaggDatePicker
-        date={form.birthdate}
-        maxDate={getMaxDate()}
-        onDateChange={(birthdate) => handleBirthdateUpdate(birthdate)}
+      <BirthDatePicker
+        ref={birthdateRef}
+        handleBDUpdate={handleBirthdateUpdate}
+        width={280}
       />
       <TaggDropDown
         onValueChange={(value) => handleGenderUpdate(value)}