Use BirthdayInput on Edit profile page

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
ci-review-rules
marcin mikołajczak 2022-05-27 19:13:44 +02:00
rodzic 8dfb8c4bb2
commit afe670b8fc
3 zmienionych plików z 73 dodań i 74 usunięć

Wyświetl plik

@ -1,13 +1,10 @@
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import React, { useMemo } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import IconButton from 'soapbox/components/icon_button';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
import { DatePicker } from 'soapbox/features/ui/util/async-components';
import { getFeatures } from 'soapbox/utils/features';
import { useAppSelector, useFeatures } from 'soapbox/hooks';
const messages = defineMessages({
birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birthday' },
@ -17,29 +14,37 @@ const messages = defineMessages({
nextYear: { id: 'datepicker.next_year', defaultMessage: 'Next year' },
});
const mapStateToProps = state => {
const features = getFeatures(state.get('instance'));
interface IBirthdayInput {
value?: string,
onChange: (value: string) => void,
required?: boolean,
}
return {
supportsBirthdays: features.birthdays,
minAge: state.getIn(['instance', 'pleroma', 'metadata', 'birthday_min_age']),
};
};
const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required }) => {
const intl = useIntl();
const features = useFeatures();
export default @connect(mapStateToProps)
@injectIntl
class BirthdayInput extends ImmutablePureComponent {
const supportsBirthdays = features.birthdays;
const minAge = useAppSelector((state) => state.instance.getIn(['pleroma', 'metadata', 'birthday_min_age'])) as number;
static propTypes = {
hint: PropTypes.node,
required: PropTypes.bool,
supportsBirthdays: PropTypes.bool,
minAge: PropTypes.number,
onChange: PropTypes.func.isRequired,
value: PropTypes.instanceOf(Date),
};
const maxDate = useMemo(() => {
if (!supportsBirthdays) return null;
renderHeader = ({
let maxDate = new Date();
maxDate = new Date(maxDate.getTime() - minAge * 1000 * 60 * 60 * 24 + maxDate.getTimezoneOffset() * 1000 * 60);
return maxDate;
}, [minAge]);
const selected = useMemo(() => {
if (!supportsBirthdays || !value) return null;
const date = new Date(value);
return new Date(date.getTime() + (date.getTimezoneOffset() * 60000));
}, [value]);
if (!supportsBirthdays) return null;
const renderCustomHeader = ({
decreaseMonth,
increaseMonth,
prevMonthButtonDisabled,
@ -49,12 +54,20 @@ class BirthdayInput extends ImmutablePureComponent {
prevYearButtonDisabled,
nextYearButtonDisabled,
date,
}: {
decreaseMonth(): void,
increaseMonth(): void,
prevMonthButtonDisabled: boolean,
nextMonthButtonDisabled: boolean,
decreaseYear(): void,
increaseYear(): void,
prevYearButtonDisabled: boolean,
nextYearButtonDisabled: boolean,
date: Date,
}) => {
const { intl } = this.props;
return (
<div className='datepicker__header'>
<div className='datepicker__months'>
<div className='flex flex-col gap-2'>
<div className='flex items-center justify-between'>
<IconButton
className='datepicker__button'
src={require('@tabler/icons/icons/chevron-left.svg')}
@ -73,7 +86,7 @@ class BirthdayInput extends ImmutablePureComponent {
title={intl.formatMessage(messages.nextMonth)}
/>
</div>
<div className='datepicker__years'>
<div className='flex items-center justify-between'>
<IconButton
className='datepicker__button'
src={require('@tabler/icons/icons/chevron-left.svg')}
@ -94,39 +107,26 @@ class BirthdayInput extends ImmutablePureComponent {
</div>
</div>
);
}
};
render() {
const { intl, value, onChange, supportsBirthdays, hint, required, minAge } = this.props;
if (!supportsBirthdays) return null;
let maxDate = new Date();
maxDate = new Date(maxDate.getTime() - minAge * 1000 * 60 * 60 * 24 + maxDate.getTimezoneOffset() * 1000 * 60);
const handleChange = (date: Date) => onChange(new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toISOString().slice(0, 10));
return (
<div className='datepicker'>
{hint && (
<div className='datepicker__hint'>
{hint}
</div>
)}
<div className='datepicker__input'>
<div className='mt-1 relative rounded-md shadow-sm'>
<BundleContainer fetchComponent={DatePicker}>
{Component => (<Component
selected={value}
selected={selected}
wrapperClassName='react-datepicker-wrapper'
onChange={onChange}
onChange={handleChange}
placeholderText={intl.formatMessage(messages.birthdayPlaceholder)}
minDate={new Date('1900-01-01')}
maxDate={maxDate}
required={required}
renderCustomHeader={this.renderHeader}
renderCustomHeader={renderCustomHeader}
/>)}
</BundleContainer>
</div>
</div>
);
}
};
}
export default BirthdayInput;

Wyświetl plik

@ -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) => {
setBirthday(newBirthday);
const onBirthdayChange = (birthday: string) => {
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
/>

Wyświetl plik

@ -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
type='text'
<BirthdayInput
value={data.birthday}
onChange={handleTextChange('birthday')}
onChange={handleBirthdayChange}
/>
</FormGroup>
)}