Merge branch 'birthday-input' into 'develop'

Use BirthdayInput on Edit profile page

See merge request soapbox-pub/soapbox-fe!1462

app/soapbox/features/auth_login/components/registration_form.tsx

@@ -58,7 +58,6 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
   const [usernameUnavailable, setUsernameUnavailable] = useState(false);
   const [passwordConfirmation, setPasswordConfirmation] = useState('');
   const [passwordMismatch, setPasswordMismatch] = useState(false);
-  const [birthday, setBirthday] = useState<Date | undefined>(undefined);
 
   const source = useRef(axios.CancelToken.source());
 
@@ -111,8 +110,8 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
     setPasswordMismatch(!passwordsMatch());
   };
 
-  const onBirthdayChange = (newBirthday: Date) => {
+  const onBirthdayChange = (birthday: string) => {
-    setBirthday(newBirthday);
+    updateParams({ birthday });
   };
 
   const launchModal = () => {
@@ -187,10 +186,6 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
       if (inviteToken) {
         params.set('token', inviteToken);
       }
-
-      if (birthday) {
-        params.set('birthday', new Date(birthday.getTime() - (birthday.getTimezoneOffset() * 60000)).toISOString().slice(0, 10));
-      }
     });
 
     setSubmissionLoading(true);
@@ -291,7 +286,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
 
         {birthdayRequired && (
           <BirthdayInput
-            value={birthday}
+            value={params.get('birthday')}
             onChange={onBirthdayChange}
             required
           />

app/soapbox/features/edit_profile/index.tsx

@@ -4,6 +4,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { updateNotificationSettings } from 'soapbox/actions/accounts';
 import { patchMe } from 'soapbox/actions/me';
 import snackbar from 'soapbox/actions/snackbar';
+import BirthdayInput from 'soapbox/components/birthday_input';
 import List, { ListItem } from 'soapbox/components/list';
 import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures } from 'soapbox/hooks';
 import { normalizeAccount } from 'soapbox/normalizers';
@@ -242,6 +243,10 @@ const EditProfile: React.FC = () => {
     };
   };
 
+  const handleBirthdayChange = (date: string) => {
+    updateData('birthday', date);
+  };
+
   const handleHideNetworkChange: React.ChangeEventHandler<HTMLInputElement> = e => {
     const hide = e.target.checked;
 
@@ -325,10 +330,9 @@ const EditProfile: React.FC = () => {
           <FormGroup
             labelText={<FormattedMessage id='edit_profile.fields.birthday_label' defaultMessage='Birthday' />}
           >
-            <Input
+            <BirthdayInput
-              type='text'
               value={data.birthday}
-              onChange={handleTextChange('birthday')}
+              onChange={handleBirthdayChange}
             />
           </FormGroup>
         )}