From 5e76b5afca3fb3ffa308b766b855a84a29a19811 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Wed, 19 Jan 2022 21:43:03 +0100 Subject: [PATCH 01/12] Birth dates MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/features/edit_profile/index.js | 46 ++++++++++++++++++- .../ui/components/profile_info_panel.js | 10 ++++ app/soapbox/utils/features.js | 1 + app/styles/components/profile-info-panel.scss | 3 +- app/styles/forms.scss | 37 +++++++++++++++ package.json | 2 +- yarn.lock | 8 ++-- 7 files changed, 99 insertions(+), 8 deletions(-) diff --git a/app/soapbox/features/edit_profile/index.js b/app/soapbox/features/edit_profile/index.js index f38197653..0a3dad66b 100644 --- a/app/soapbox/features/edit_profile/index.js +++ b/app/soapbox/features/edit_profile/index.js @@ -5,10 +5,12 @@ import { import { unescape } from 'lodash'; import PropTypes from 'prop-types'; import React from 'react'; +import DatePicker from 'react-datepicker'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; +import 'react-datepicker/dist/react-datepicker.css'; import { updateNotificationSettings } from 'soapbox/actions/accounts'; import { patchMe } from 'soapbox/actions/me'; @@ -49,6 +51,7 @@ const messages = defineMessages({ error: { id: 'edit_profile.error', defaultMessage: 'Profile update failed' }, bioPlaceholder: { id: 'edit_profile.fields.bio_placeholder', defaultMessage: 'Tell us about yourself.' }, displayNamePlaceholder: { id: 'edit_profile.fields.display_name_placeholder', defaultMessage: 'Name' }, + birthDatePlaceholder: { id: 'edit_profile.fields.birth_date_placeholder', defaultMessage: 'Your birth date' }, }); const makeMapStateToProps = () => { @@ -58,12 +61,15 @@ const makeMapStateToProps = () => { const me = state.get('me'); const account = getAccount(state, me); const soapbox = getSoapboxConfig(state); + const features = getFeatures(state.get('instance')); return { account, maxFields: state.getIn(['instance', 'pleroma', 'metadata', 'fields_limits', 'max_fields'], 4), verifiedCanEditName: soapbox.get('verifiedCanEditName'), - supportsEmailList: getFeatures(state.get('instance')).emailList, + supportsEmailList: features.emailList, + supportsBirthDates: features.birthDates, + minAge: state.getIn(['instance', 'pleroma', 'metadata', 'birth_date_min_age']), }; }; @@ -94,6 +100,9 @@ class EditProfile extends ImmutablePureComponent { account: ImmutablePropTypes.map, maxFields: PropTypes.number, verifiedCanEditName: PropTypes.bool, + supportsEmailList: PropTypes.bool, + supportsBirthDates: PropTypes.bool, + minAge: PropTypes.number, }; state = { @@ -107,6 +116,7 @@ class EditProfile extends ImmutablePureComponent { const strangerNotifications = account.getIn(['pleroma', 'notification_settings', 'block_from_strangers']); const acceptsEmailList = account.getIn(['pleroma', 'accepts_email_list']); const discoverable = account.getIn(['source', 'pleroma', 'discoverable']); + const birthDate = account.getIn(['pleroma', 'birth_date']); const initialState = account.withMutations(map => { map.merge(map.get('source')); @@ -116,6 +126,7 @@ class EditProfile extends ImmutablePureComponent { map.set('accepts_email_list', acceptsEmailList); map.set('hide_network', hidesNetwork(account)); map.set('discoverable', discoverable); + if (birthDate) map.set('birthDate', new Date(birthDate)); unescapeParams(map, ['display_name', 'bio']); }); @@ -156,6 +167,7 @@ class EditProfile extends ImmutablePureComponent { hide_follows: state.hide_network, hide_followers_count: state.hide_network, hide_follows_count: state.hide_network, + birth_date: state.birthDate?.toISOString().slice(0, 10), }, this.getFieldParams().toJS()); } @@ -223,6 +235,12 @@ class EditProfile extends ImmutablePureComponent { }; } + handleBirthDateChange = (birthDate) => { + this.setState({ + birthDate, + }); + } + handleAddField = () => { this.setState({ fields: this.state.fields.push(ImmutableMap({ name: '', value: '' })), @@ -237,8 +255,15 @@ class EditProfile extends ImmutablePureComponent { }; } + isDateValid = date => { + const { minAge } = this.props; + const allowedDate = new Date(); + allowedDate.setDate(allowedDate.getDate() - minAge); + return date && allowedDate.setHours(0, 0, 0, 0) >= new Date(date).setHours(0, 0, 0, 0); + } + render() { - const { intl, maxFields, account, verifiedCanEditName, supportsEmailList } = this.props; + const { intl, maxFields, account, verifiedCanEditName, supportsEmailList, supportsBirthDates } = this.props; const verified = isVerified(account); const canEditName = verifiedCanEditName || !verified; @@ -267,6 +292,23 @@ class EditProfile extends ImmutablePureComponent { onChange={this.handleTextChange} rows={3} /> + {supportsBirthDates && ( +
+
+ +
+
+ +
+
+ )}
diff --git a/app/soapbox/features/ui/components/profile_info_panel.js b/app/soapbox/features/ui/components/profile_info_panel.js index 74dd9a187..f2af515f5 100644 --- a/app/soapbox/features/ui/components/profile_info_panel.js +++ b/app/soapbox/features/ui/components/profile_info_panel.js @@ -103,6 +103,7 @@ class ProfileInfoPanel extends ImmutablePureComponent { const deactivated = !account.getIn(['pleroma', 'is_active'], true); const displayNameHtml = deactivated ? { __html: intl.formatMessage(messages.deactivated) } : { __html: account.get('display_name_html') }; const memberSinceDate = intl.formatDate(account.get('created_at'), { month: 'long', year: 'numeric' }); + const birthDate = account.getIn(['pleroma', 'birth_date']) && intl.formatDate(account.getIn(['pleroma', 'birth_date']), { day: 'numeric', month: 'long', year: 'numeric' }); const verified = isVerified(account); const badges = this.getBadges(); @@ -150,6 +151,15 @@ class ProfileInfoPanel extends ImmutablePureComponent { />
} + {birthDate &&
+ + +
} + Date: Wed, 19 Jan 2022 23:59:10 +0100 Subject: [PATCH 02/12] Show birth date field on registration page when required MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/birth_date_input.js | 71 +++++++++++++++++++ .../components/registration_form.js | 24 ++++++- app/soapbox/features/edit_profile/index.js | 48 +++++-------- app/styles/forms.scss | 1 + package.json | 2 +- yarn.lock | 28 ++++---- 6 files changed, 127 insertions(+), 47 deletions(-) create mode 100644 app/soapbox/components/birth_date_input.js diff --git a/app/soapbox/components/birth_date_input.js b/app/soapbox/components/birth_date_input.js new file mode 100644 index 000000000..5183973d6 --- /dev/null +++ b/app/soapbox/components/birth_date_input.js @@ -0,0 +1,71 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import DatePicker from 'react-datepicker'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { defineMessages, injectIntl } from 'react-intl'; +import { connect } from 'react-redux'; +import 'react-datepicker/dist/react-datepicker.css'; + +import { getFeatures } from 'soapbox/utils/features'; + +const messages = defineMessages({ + birthDatePlaceholder: { id: 'edit_profile.fields.birth_date_placeholder', defaultMessage: 'Your birth date' }, +}); + +const mapStateToProps = state => { + const features = getFeatures(state.get('instance')); + + return { + supportsBirthDates: features.birthDates, + minAge: state.getIn(['instance', 'pleroma', 'metadata', 'birth_date_min_age']), + }; +}; + +export default @connect(mapStateToProps) +@injectIntl +class EditProfile extends ImmutablePureComponent { + + static propTypes = { + hint: PropTypes.node, + required: PropTypes.bool, + supportsBirthDates: PropTypes.bool, + minAge: PropTypes.number, + onChange: PropTypes.func.isRequired, + value: PropTypes.instanceOf(Date), + }; + + isDateValid = date => { + const { minAge } = this.props; + const allowedDate = new Date(); + allowedDate.setDate(allowedDate.getDate() - minAge); + return date && allowedDate.setHours(0, 0, 0, 0) >= new Date(date).setHours(0, 0, 0, 0); + } + + render() { + const { intl, value, onChange, supportsBirthDates, hint, required } = this.props; + + if (!supportsBirthDates) return null; + + return ( +
+ {hint && ( +
+ {hint} +
+ )} +
+ +
+
+ ); + } + +} \ No newline at end of file diff --git a/app/soapbox/features/auth_login/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js index d9226f505..8b6ceb3a9 100644 --- a/app/soapbox/features/auth_login/components/registration_form.js +++ b/app/soapbox/features/auth_login/components/registration_form.js @@ -14,6 +14,7 @@ import { accountLookup } from 'soapbox/actions/accounts'; import { register, verifyCredentials } from 'soapbox/actions/auth'; import { openModal } from 'soapbox/actions/modal'; import { getSettings } from 'soapbox/actions/settings'; +import BirthDateInput from 'soapbox/components/birth_date_input'; import ShowablePassword from 'soapbox/components/showable_password'; import CaptchaField from 'soapbox/features/auth_login/components/captcha'; import { @@ -46,6 +47,7 @@ const mapStateToProps = (state, props) => ({ needsApproval: state.getIn(['instance', 'approval_required']), supportsEmailList: getFeatures(state.get('instance')).emailList, supportsAccountLookup: getFeatures(state.get('instance')).accountLookup, + birthDateRequired: state.getIn(['instance', 'pleroma', 'metadata', 'birth_date_required']), }); export default @connect(mapStateToProps) @@ -61,6 +63,7 @@ class RegistrationForm extends ImmutablePureComponent { supportsEmailList: PropTypes.bool, supportsAccountLookup: PropTypes.bool, inviteToken: PropTypes.string, + birthDateRequired: PropTypes.bool, } static contextTypes = { @@ -129,6 +132,12 @@ class RegistrationForm extends ImmutablePureComponent { this.setState({ passwordMismatch: !this.passwordsMatch() }); } + onBirthDateChange = birthDate => { + this.setState({ + birthDate, + }); + } + launchModal = () => { const { dispatch, intl, needsConfirmation, needsApproval } = this.props; @@ -197,6 +206,7 @@ class RegistrationForm extends ImmutablePureComponent { onSubmit = e => { const { dispatch, inviteToken } = this.props; + const { birthDate } = this.state; if (!this.passwordsMatch()) { this.setState({ passwordMismatch: true }); @@ -211,6 +221,10 @@ class RegistrationForm extends ImmutablePureComponent { if (inviteToken) { params.set('token', inviteToken); } + + if (birthDate) { + params.set('birth_date', birthDate.toISOString().slice(0, 10)); + } }); this.setState({ submissionLoading: true }); @@ -245,8 +259,8 @@ class RegistrationForm extends ImmutablePureComponent { } render() { - const { instance, intl, supportsEmailList } = this.props; - const { params, usernameUnavailable, passwordConfirmation, passwordMismatch } = this.state; + const { instance, intl, supportsEmailList, birthDateRequired } = this.props; + const { params, usernameUnavailable, passwordConfirmation, passwordMismatch, birthDate } = this.state; const isLoading = this.state.captchaLoading || this.state.submissionLoading; return ( @@ -311,6 +325,12 @@ class RegistrationForm extends ImmutablePureComponent { error={passwordMismatch === true} required /> + {!birthDateRequired && + } {instance.get('approval_required') && } diff --git a/app/soapbox/features/edit_profile/index.js b/app/soapbox/features/edit_profile/index.js index 0a3dad66b..f055d601e 100644 --- a/app/soapbox/features/edit_profile/index.js +++ b/app/soapbox/features/edit_profile/index.js @@ -5,17 +5,16 @@ import { import { unescape } from 'lodash'; import PropTypes from 'prop-types'; import React from 'react'; -import DatePicker from 'react-datepicker'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; -import 'react-datepicker/dist/react-datepicker.css'; import { updateNotificationSettings } from 'soapbox/actions/accounts'; import { patchMe } from 'soapbox/actions/me'; import snackbar from 'soapbox/actions/snackbar'; import { getSoapboxConfig } from 'soapbox/actions/soapbox'; +import BirthDateInput from 'soapbox/components/birth_date_input'; import Icon from 'soapbox/components/icon'; import { SimpleForm, @@ -69,7 +68,6 @@ const makeMapStateToProps = () => { verifiedCanEditName: soapbox.get('verifiedCanEditName'), supportsEmailList: features.emailList, supportsBirthDates: features.birthDates, - minAge: state.getIn(['instance', 'pleroma', 'metadata', 'birth_date_min_age']), }; }; @@ -102,7 +100,6 @@ class EditProfile extends ImmutablePureComponent { verifiedCanEditName: PropTypes.bool, supportsEmailList: PropTypes.bool, supportsBirthDates: PropTypes.bool, - minAge: PropTypes.number, }; state = { @@ -117,6 +114,7 @@ class EditProfile extends ImmutablePureComponent { const acceptsEmailList = account.getIn(['pleroma', 'accepts_email_list']); const discoverable = account.getIn(['source', 'pleroma', 'discoverable']); const birthDate = account.getIn(['pleroma', 'birth_date']); + const hideBirthDate = account.getIn(['pleroma', 'hide_birth_date']); const initialState = account.withMutations(map => { map.merge(map.get('source')); @@ -126,6 +124,7 @@ class EditProfile extends ImmutablePureComponent { map.set('accepts_email_list', acceptsEmailList); map.set('hide_network', hidesNetwork(account)); map.set('discoverable', discoverable); + map.set('hide_birth_date', hideBirthDate); if (birthDate) map.set('birthDate', new Date(birthDate)); unescapeParams(map, ['display_name', 'bio']); }); @@ -168,6 +167,7 @@ class EditProfile extends ImmutablePureComponent { hide_followers_count: state.hide_network, hide_follows_count: state.hide_network, birth_date: state.birthDate?.toISOString().slice(0, 10), + hide_birth_date: state.hide_birth_date, }, this.getFieldParams().toJS()); } @@ -235,7 +235,7 @@ class EditProfile extends ImmutablePureComponent { }; } - handleBirthDateChange = (birthDate) => { + handleBirthDateChange = birthDate => { this.setState({ birthDate, }); @@ -255,15 +255,8 @@ class EditProfile extends ImmutablePureComponent { }; } - isDateValid = date => { - const { minAge } = this.props; - const allowedDate = new Date(); - allowedDate.setDate(allowedDate.getDate() - minAge); - return date && allowedDate.setHours(0, 0, 0, 0) >= new Date(date).setHours(0, 0, 0, 0); - } - render() { - const { intl, maxFields, account, verifiedCanEditName, supportsEmailList, supportsBirthDates } = this.props; + const { intl, maxFields, account, verifiedCanEditName, supportsBirthDates, supportsEmailList } = this.props; const verified = isVerified(account); const canEditName = verifiedCanEditName || !verified; @@ -292,23 +285,11 @@ class EditProfile extends ImmutablePureComponent { onChange={this.handleTextChange} rows={3} /> - {supportsBirthDates && ( -
-
- -
-
- -
-
- )} + } + value={this.state.birthDate} + onChange={this.handleBirthDateChange} + />
@@ -363,6 +344,13 @@ class EditProfile extends ImmutablePureComponent { checked={this.state.discoverable} onChange={this.handleCheckboxChange} /> + {supportsBirthDates && } + hint={} + name='hide_birth_date' + checked={this.state.hide_birth_date} + onChange={this.handleCheckboxChange} + />} {supportsEmailList && } hint={} diff --git a/app/styles/forms.scss b/app/styles/forms.scss index 55daca384..9c46a965f 100644 --- a/app/styles/forms.scss +++ b/app/styles/forms.scss @@ -638,6 +638,7 @@ code { .datepicker { padding: 0; margin-bottom: 8px; + border: none; &__hint { padding-bottom: 0; diff --git a/package.json b/package.json index 72ad7dfb5..2706765e6 100644 --- a/package.json +++ b/package.json @@ -118,7 +118,7 @@ "qrcode.react": "^1.0.0", "react": "^16.13.1", "react-color": "^2.18.1", - "react-datepicker": "^4.1.1", + "react-datepicker": "^4.6.0", "react-dom": "^16.13.1", "react-helmet": "^6.0.0", "react-hotkeys": "^1.1.4", diff --git a/yarn.lock b/yarn.lock index 48f6a651c..53ae2f599 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3292,10 +3292,10 @@ data-urls@^2.0.0: whatwg-mimetype "^2.3.0" whatwg-url "^8.0.0" -date-fns@^2.0.1: - version "2.23.0" - resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.23.0.tgz#4e886c941659af0cf7b30fafdd1eaa37e88788a9" - integrity sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA== +date-fns@^2.24.0: + version "2.28.0" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2" + integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw== debug@2.6.9, debug@^2.6.9: version "2.6.9" @@ -7820,16 +7820,16 @@ react-color@^2.18.1: reactcss "^1.2.0" tinycolor2 "^1.4.1" -react-datepicker@^4.1.1: - version "4.2.1" - resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.2.1.tgz#72caf5055bc7c4eb0279c1f6d7624ded053edc4c" - integrity sha512-0gcvHMnX8rS1fV90PjjsB7MQdsWNU77JeVHf6bbwK9HnFxgwjVflTx40ebKmHV+leqe+f+FgUP9Nvqbe5RGyfA== +react-datepicker@^4.6.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.6.0.tgz#10fc7c5b9c72df5c3e29712d559cb3fe73fd9f62" + integrity sha512-JGSQnQSQYUkS7zvSaZuyHv5lxp3wMrN7GXV0VA0E9Ax9fL3Bb6E1pSXjL6C3WoeuV8dt/mItQfRkPpRGCrl/OA== dependencies: "@popperjs/core" "^2.9.2" classnames "^2.2.6" - date-fns "^2.0.1" + date-fns "^2.24.0" prop-types "^15.7.2" - react-onclickoutside "^6.10.0" + react-onclickoutside "^6.12.0" react-popper "^2.2.5" react-dom@^16.13.1: @@ -7959,10 +7959,10 @@ react-notification@^6.8.4: dependencies: prop-types "^15.6.2" -react-onclickoutside@^6.10.0: - version "6.12.0" - resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.12.0.tgz#c63db2e3c2c852b288160cdb6cff443604e28db4" - integrity sha512-oPlOTYcISLHfpMog2lUZMFSbqOs4LFcA4+vo7fpfevB5v9Z0D5VBDBkfeO5lv+hpEcGoaGk67braLT+QT+eICA== +react-onclickoutside@^6.12.0: + version "6.12.1" + resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.12.1.tgz#92dddd28f55e483a1838c5c2930e051168c1e96b" + integrity sha512-a5Q7CkWznBRUWPmocCvE8b6lEYw1s6+opp/60dCunhO+G6E4tDTO2Sd2jKE+leEnnrLAE2Wj5DlDHNqj5wPv1Q== react-overlays@^0.9.0: version "0.9.3" From d6f0023cc90a237bf06cda9ef8b71f2128217cc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Thu, 20 Jan 2022 22:28:49 +0100 Subject: [PATCH 03/12] Add birthday reminder notification MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/actions/accounts.js | 27 ++++ app/soapbox/actions/settings.js | 4 + app/soapbox/components/birthday_reminders.js | 118 ++++++++++++++++++ .../components/column_settings.js | 15 ++- .../containers/column_settings_container.js | 1 + app/soapbox/features/notifications/index.js | 30 +++-- .../features/ui/components/birthdays_modal.js | 97 ++++++++++++++ .../features/ui/components/modal_root.js | 2 + .../features/ui/util/async-components.js | 4 + app/soapbox/reducers/user_lists.js | 4 + app/styles/components/notification.scss | 15 +++ docs/store.md | 3 + 12 files changed, 310 insertions(+), 10 deletions(-) create mode 100644 app/soapbox/components/birthday_reminders.js create mode 100644 app/soapbox/features/ui/components/birthdays_modal.js diff --git a/app/soapbox/actions/accounts.js b/app/soapbox/actions/accounts.js index aacdcd106..e0bcbd46c 100644 --- a/app/soapbox/actions/accounts.js +++ b/app/soapbox/actions/accounts.js @@ -109,6 +109,10 @@ export const NOTIFICATION_SETTINGS_REQUEST = 'NOTIFICATION_SETTINGS_REQUEST'; export const NOTIFICATION_SETTINGS_SUCCESS = 'NOTIFICATION_SETTINGS_SUCCESS'; export const NOTIFICATION_SETTINGS_FAIL = 'NOTIFICATION_SETTINGS_FAIL'; +export const BIRTHDAY_REMINDERS_FETCH_REQUEST = 'BIRTHDAY_REMINDERS_FETCH_REQUEST'; +export const BIRTHDAY_REMINDERS_FETCH_SUCCESS = 'BIRTHDAY_REMINDERS_FETCH_SUCCESS'; +export const BIRTHDAY_REMINDERS_FETCH_FAIL = 'BIRTHDAY_REMINDERS_FETCH_FAIL'; + export function createAccount(params) { return (dispatch, getState) => { dispatch({ type: ACCOUNT_CREATE_REQUEST, params }); @@ -1030,3 +1034,26 @@ export function accountLookup(acct, cancelToken) { }); }; } + +export function fetchBirthdayReminders(day, month) { + return (dispatch, getState) => { + if (!isLoggedIn(getState)) return; + + const me = getState().get('me'); + + dispatch({ type: BIRTHDAY_REMINDERS_FETCH_REQUEST, day, month, id: me }); + + api(getState).get('/api/v1/pleroma/birthday_reminders', { params: { day, month } }).then(response => { + dispatch(importFetchedAccounts(response.data)); + dispatch({ + type: BIRTHDAY_REMINDERS_FETCH_SUCCESS, + accounts: response.data, + day, + month, + id: me, + }); + }).catch(error => { + dispatch({ type: BIRTHDAY_REMINDERS_FETCH_FAIL, day, month, id: me }); + }); + }; +} diff --git a/app/soapbox/actions/settings.js b/app/soapbox/actions/settings.js index 4a50909fa..418c41292 100644 --- a/app/soapbox/actions/settings.js +++ b/app/soapbox/actions/settings.js @@ -100,6 +100,10 @@ export const defaultSettings = ImmutableMap({ move: false, 'pleroma:emoji_reaction': false, }), + + birthdays: ImmutableMap({ + show: true, + }), }), community: ImmutableMap({ diff --git a/app/soapbox/components/birthday_reminders.js b/app/soapbox/components/birthday_reminders.js new file mode 100644 index 000000000..a00a1ba33 --- /dev/null +++ b/app/soapbox/components/birthday_reminders.js @@ -0,0 +1,118 @@ + +import PropTypes from 'prop-types'; +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { injectIntl, FormattedMessage } from 'react-intl'; +import { connect } from 'react-redux'; +import { Link } from 'react-router-dom'; + +import { fetchBirthdayReminders } from 'soapbox/actions/accounts'; +import { openModal } from 'soapbox/actions/modal'; +import Icon from 'soapbox/components/icon'; +import { makeGetAccount } from 'soapbox/selectors'; + +const mapStateToProps = (state, props) => { + const me = state.get('me'); + const getAccount = makeGetAccount(); + + const birthdays = state.getIn(['user_lists', 'birthday_reminders', me]); + + if (birthdays && birthdays.size > 0) { + return { + birthdays, + account: getAccount(state, birthdays.first()), + }; + } + + return { + birthdays, + }; +}; + +export default @connect(mapStateToProps) +@injectIntl +class BirthdayReminders extends ImmutablePureComponent { + + static propTypes = { + birthdays: ImmutablePropTypes.orderedSet, + intl: PropTypes.object.isRequired, + dispatch: PropTypes.func.isRequired, + }; + + componentDidMount() { + const { dispatch } = this.props; + + const date = new Date(); + + const day = date.getDate(); + const month = date.getMonth() + 1; + + dispatch(fetchBirthdayReminders(day, month)); + } + + handleOpenBirthdaysModal = () => { + const { dispatch } = this.props; + + dispatch(openModal('BIRTHDAYS')); + } + + renderMessage() { + const { birthdays, account } = this.props; + + const link = ( + + + + ); + + if (birthdays.size === 1) { + return ; + } + + return ( + + + + ), + }} + /> + ); + } + + render() { + const { birthdays } = this.props; + + if (!birthdays || birthdays.size === 0) return null; + + return ( +
+
+
+ +
+ + + {this.renderMessage()} + +
+
+ ); + } + +} \ No newline at end of file diff --git a/app/soapbox/features/notifications/components/column_settings.js b/app/soapbox/features/notifications/components/column_settings.js index e033eb6be..39dd79836 100644 --- a/app/soapbox/features/notifications/components/column_settings.js +++ b/app/soapbox/features/notifications/components/column_settings.js @@ -24,6 +24,7 @@ class ColumnSettings extends React.PureComponent { onClear: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired, supportsEmojiReacts: PropTypes.bool, + supportsBirthDates: PropTypes.bool, }; onPushChange = (path, checked) => { @@ -39,7 +40,7 @@ class ColumnSettings extends React.PureComponent { } render() { - const { intl, settings, pushSettings, onChange, onClear, onClose, supportsEmojiReacts } = this.props; + const { intl, settings, pushSettings, onChange, onClear, onClose, supportsEmojiReacts, supportsBirthDates } = this.props; const filterShowStr = ; const filterAdvancedStr = ; @@ -50,6 +51,7 @@ class ColumnSettings extends React.PureComponent { const soundSettings = [['sounds', 'follow'], ['sounds', 'favourite'], ['sounds', 'pleroma:emoji_reaction'], ['sounds', 'mention'], ['sounds', 'reblog'], ['sounds', 'poll'], ['sounds', 'move']]; const showPushSettings = pushSettings.get('browserSupport') && pushSettings.get('isSubscribed'); const pushStr = showPushSettings && ; + const birthdaysStr = ; return (
@@ -84,6 +86,17 @@ class ColumnSettings extends React.PureComponent {
+ {supportsBirthDates && +
+ + + +
+ +
+
+ } +
diff --git a/app/soapbox/features/notifications/containers/column_settings_container.js b/app/soapbox/features/notifications/containers/column_settings_container.js index da37f306f..05dc1f0eb 100644 --- a/app/soapbox/features/notifications/containers/column_settings_container.js +++ b/app/soapbox/features/notifications/containers/column_settings_container.js @@ -24,6 +24,7 @@ const mapStateToProps = state => { settings: getSettings(state).get('notifications'), pushSettings: state.get('push_notifications'), supportsEmojiReacts: features.emojiReacts, + supportsBirthDates: features.birthDates, }; }; diff --git a/app/soapbox/features/notifications/index.js b/app/soapbox/features/notifications/index.js index b174d776e..57edf8315 100644 --- a/app/soapbox/features/notifications/index.js +++ b/app/soapbox/features/notifications/index.js @@ -8,8 +8,10 @@ import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import { getSettings } from 'soapbox/actions/settings'; +import BirthdayReminders from 'soapbox/components/birthday_reminders'; import SubNavigation from 'soapbox/components/sub_navigation'; import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder_notification'; +import { getFeatures } from 'soapbox/utils/features'; import { expandNotifications, @@ -45,14 +47,21 @@ const getNotifications = createSelector([ return notifications.filter(item => item !== null && allowedType === item.get('type')); }); -const mapStateToProps = state => ({ - showFilterBar: getSettings(state).getIn(['notifications', 'quickFilter', 'show']), - notifications: getNotifications(state), - isLoading: state.getIn(['notifications', 'isLoading'], true), - isUnread: state.getIn(['notifications', 'unread']) > 0, - hasMore: state.getIn(['notifications', 'hasMore']), - totalQueuedNotificationsCount: state.getIn(['notifications', 'totalQueuedNotificationsCount'], 0), -}); +const mapStateToProps = state => { + const settings = getSettings(state); + const instance = state.get('instance'); + const features = getFeatures(instance); + + return { + showFilterBar: settings.getIn(['notifications', 'quickFilter', 'show']), + notifications: getNotifications(state), + isLoading: state.getIn(['notifications', 'isLoading'], true), + isUnread: state.getIn(['notifications', 'unread']) > 0, + hasMore: state.getIn(['notifications', 'hasMore']), + totalQueuedNotificationsCount: state.getIn(['notifications', 'totalQueuedNotificationsCount'], 0), + showBirthdayReminders: settings.getIn(['notifications', 'birthdays', 'show']) && settings.getIn(['notifications', 'quickFilter', 'active']) === 'all' && features.birthDates, + }; +}; export default @connect(mapStateToProps) @injectIntl @@ -68,6 +77,7 @@ class Notifications extends React.PureComponent { hasMore: PropTypes.bool, dequeueNotifications: PropTypes.func, totalQueuedNotificationsCount: PropTypes.number, + showBirthdayReminders: PropTypes.bool, }; componentWillUnmount() { @@ -137,7 +147,7 @@ class Notifications extends React.PureComponent { } render() { - const { intl, notifications, isLoading, hasMore, showFilterBar, totalQueuedNotificationsCount } = this.props; + const { intl, notifications, isLoading, hasMore, showFilterBar, totalQueuedNotificationsCount, showBirthdayReminders } = this.props; const emptyMessage = ; let scrollableContent = null; @@ -164,6 +174,8 @@ class Notifications extends React.PureComponent { onMoveDown={this.handleMoveDown} /> )); + + if (showBirthdayReminders) scrollableContent = scrollableContent.unshift(); } else { scrollableContent = null; } diff --git a/app/soapbox/features/ui/components/birthdays_modal.js b/app/soapbox/features/ui/components/birthdays_modal.js new file mode 100644 index 000000000..995ad5cc5 --- /dev/null +++ b/app/soapbox/features/ui/components/birthdays_modal.js @@ -0,0 +1,97 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { injectIntl, FormattedMessage, defineMessages } from 'react-intl'; +import { connect } from 'react-redux'; + +import IconButton from 'soapbox/components/icon_button'; +import LoadingIndicator from 'soapbox/components/loading_indicator'; +import ScrollableList from 'soapbox/components/scrollable_list'; +import AccountContainer from 'soapbox/containers/account_container'; + +const messages = defineMessages({ + close: { id: 'lightbox.close', defaultMessage: 'Close' }, +}); + +const mapStateToProps = (state) => { + const me = state.get('me'); + + return { + accountIds: state.getIn(['user_lists', 'birthday_reminders', me]), + }; +}; + +export default @connect(mapStateToProps) +@injectIntl +class BirthdaysModal extends React.PureComponent { + + static contextTypes = { + router: PropTypes.object, + }; + + static propTypes = { + onClose: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + accountIds: ImmutablePropTypes.orderedSet, + }; + + componentDidMount() { + this.unlistenHistory = this.context.router.history.listen((_, action) => { + if (action === 'PUSH') { + this.onClickClose(null, true); + } + }); + } + + componentWillUnmount() { + if (this.unlistenHistory) { + this.unlistenHistory(); + } + } + + onClickClose = (_, noPop) => { + this.props.onClose('BIRTHDAYS', noPop); + }; + + render() { + const { intl, accountIds } = this.props; + + let body; + + if (!accountIds) { + body = ; + } else { + const emptyMessage = ; + + body = ( + + {accountIds.map(id => + , + )} + + ); + } + + + return ( +
+
+

+ +

+ +
+ {body} +
+ ); + } + +} diff --git a/app/soapbox/features/ui/components/modal_root.js b/app/soapbox/features/ui/components/modal_root.js index 5425cf5eb..1cc6304c6 100644 --- a/app/soapbox/features/ui/components/modal_root.js +++ b/app/soapbox/features/ui/components/modal_root.js @@ -26,6 +26,7 @@ import { FavouritesModal, ReblogsModal, MentionsModal, + BirthdaysModal, } from '../../../features/ui/util/async-components'; import BundleContainer from '../containers/bundle_container'; @@ -57,6 +58,7 @@ const MODAL_COMPONENTS = { 'FAVOURITES': FavouritesModal, 'REACTIONS': ReactionsModal, 'MENTIONS': MentionsModal, + 'BIRTHDAYS': BirthdaysModal, }; export default class ModalRoot extends React.PureComponent { diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index 08a223f90..7111a43c5 100644 --- a/app/soapbox/features/ui/util/async-components.js +++ b/app/soapbox/features/ui/util/async-components.js @@ -214,6 +214,10 @@ export function MentionsModal() { return import(/* webpackChunkName: "features/ui" */'../components/mentions_modal'); } +export function BirthdaysModal() { + return import(/* webpackChunkName: "features/ui" */'../components/birthdays_modal'); +} + export function ListEditor() { return import(/* webpackChunkName: "features/list_editor" */'../../list_editor'); } diff --git a/app/soapbox/reducers/user_lists.js b/app/soapbox/reducers/user_lists.js index 2b9feaaa2..076144f75 100644 --- a/app/soapbox/reducers/user_lists.js +++ b/app/soapbox/reducers/user_lists.js @@ -10,6 +10,7 @@ import { FOLLOW_REQUEST_AUTHORIZE_SUCCESS, FOLLOW_REQUEST_REJECT_SUCCESS, PINNED_ACCOUNTS_FETCH_SUCCESS, + BIRTHDAY_REMINDERS_FETCH_SUCCESS, } from '../actions/accounts'; import { BLOCKS_FETCH_SUCCESS, @@ -55,6 +56,7 @@ const initialState = ImmutableMap({ groups: ImmutableMap(), groups_removed_accounts: ImmutableMap(), pinned: ImmutableMap(), + birthday_reminders: ImmutableMap(), }); const normalizeList = (state, type, id, accounts, next) => { @@ -131,6 +133,8 @@ export default function userLists(state = initialState, action) { return state.updateIn(['groups_removed_accounts', action.groupId, 'items'], list => list.filterNot(item => item === action.id)); case PINNED_ACCOUNTS_FETCH_SUCCESS: return normalizeList(state, 'pinned', action.id, action.accounts, action.next); + case BIRTHDAY_REMINDERS_FETCH_SUCCESS: + return state.setIn(['birthday_reminders', action.id], ImmutableOrderedSet(action.accounts.map(item => item.id))); default: return state; } diff --git a/app/styles/components/notification.scss b/app/styles/components/notification.scss index 0a1e58a09..1bcbb937c 100644 --- a/app/styles/components/notification.scss +++ b/app/styles/components/notification.scss @@ -89,3 +89,18 @@ padding-bottom: 8px !important; } } + +.notification-birthday span[type="button"] { + &:focus, + &:hover, + &:active { + text-decoration: underline; + cursor: pointer; + } +} + +.columns-area .notification-birthday { + .notification__message { + padding-top: 0; + } +} diff --git a/docs/store.md b/docs/store.md index 34088ab8c..7f866bacb 100644 --- a/docs/store.md +++ b/docs/store.md @@ -391,6 +391,9 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn mention: true, poll: true, reblog: true + }, + birthdays: { + show: true } }, theme: 'azure', From 97d09317aeea4a7591d326dd30a9c926cd9dc0d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Fri, 21 Jan 2022 23:40:39 +0100 Subject: [PATCH 04/12] Modal improvements, profile information MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/birthday_reminders.js | 27 ++++-- app/soapbox/features/birthdays/account.js | 88 +++++++++++++++++++ .../features/ui/components/birthdays_modal.js | 4 +- .../ui/components/profile_info_panel.js | 45 ++++++++-- .../reducers/__tests__/user_lists-test.js | 1 + app/styles/accounts.scss | 6 ++ docs/store.md | 3 +- 7 files changed, 153 insertions(+), 21 deletions(-) create mode 100644 app/soapbox/features/birthdays/account.js diff --git a/app/soapbox/components/birthday_reminders.js b/app/soapbox/components/birthday_reminders.js index a00a1ba33..8c1896bf7 100644 --- a/app/soapbox/components/birthday_reminders.js +++ b/app/soapbox/components/birthday_reminders.js @@ -1,6 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; +import { HotKeys } from 'react-hotkeys'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { injectIntl, FormattedMessage } from 'react-intl'; @@ -51,6 +52,12 @@ class BirthdayReminders extends ImmutablePureComponent { dispatch(fetchBirthdayReminders(day, month)); } + getHandlers() { + return { + open: this.handleOpenBirthdaysModal, + }; + } + handleOpenBirthdaysModal = () => { const { dispatch } = this.props; @@ -101,17 +108,19 @@ class BirthdayReminders extends ImmutablePureComponent { if (!birthdays || birthdays.size === 0) return null; return ( -
-
-
- + +
+
+
+ +
+ + + {this.renderMessage()} +
- - - {this.renderMessage()} -
-
+ ); } diff --git a/app/soapbox/features/birthdays/account.js b/app/soapbox/features/birthdays/account.js new file mode 100644 index 000000000..141fd7b8e --- /dev/null +++ b/app/soapbox/features/birthdays/account.js @@ -0,0 +1,88 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { defineMessages, injectIntl } from 'react-intl'; +import { connect } from 'react-redux'; + +import Avatar from 'soapbox/components/avatar'; +import DisplayName from 'soapbox/components/display_name'; +import Icon from 'soapbox/components/icon'; +import Permalink from 'soapbox/components/permalink'; +import { makeGetAccount } from 'soapbox/selectors'; + +const messages = defineMessages({ + birthDate: { id: 'account.birth_date', defaultMessage: 'Birth date: {date}' }, +}); + +const makeMapStateToProps = () => { + const getAccount = makeGetAccount(); + + const mapStateToProps = (state, { accountId }) => { + const account = getAccount(state, accountId); + + return { + account, + }; + }; + + return mapStateToProps; +}; + +export default @connect(makeMapStateToProps) +@injectIntl +class Account extends ImmutablePureComponent { + + static propTypes = { + accountId: PropTypes.string.isRequired, + intl: PropTypes.object.isRequired, + account: ImmutablePropTypes.map, + }; + + static defaultProps = { + added: false, + }; + + componentDidMount() { + const { account, accountId } = this.props; + + if (accountId && !account) { + this.props.fetchAccount(accountId); + } + } + + render() { + const { account, intl } = this.props; + + if (!account) return null; + + const birthDate = account.getIn(['pleroma', 'birth_date']); + if (!birthDate) return null; + + const formattedBirthDate = intl.formatDate(birthDate, { day: 'numeric', month: 'short', year: 'numeric' }); + + return ( +
+
+ +
+
+ + +
+ +
+ + {formattedBirthDate} +
+
+
+ ); + } + +} diff --git a/app/soapbox/features/ui/components/birthdays_modal.js b/app/soapbox/features/ui/components/birthdays_modal.js index 995ad5cc5..9a0744ba7 100644 --- a/app/soapbox/features/ui/components/birthdays_modal.js +++ b/app/soapbox/features/ui/components/birthdays_modal.js @@ -7,7 +7,7 @@ import { connect } from 'react-redux'; import IconButton from 'soapbox/components/icon_button'; import LoadingIndicator from 'soapbox/components/loading_indicator'; import ScrollableList from 'soapbox/components/scrollable_list'; -import AccountContainer from 'soapbox/containers/account_container'; +import Account from 'soapbox/features/birthdays/account'; const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' }, @@ -69,7 +69,7 @@ class BirthdaysModal extends React.PureComponent { emptyMessage={emptyMessage} > {accountIds.map(id => - , + , )} ); diff --git a/app/soapbox/features/ui/components/profile_info_panel.js b/app/soapbox/features/ui/components/profile_info_panel.js index f2af515f5..98abf8d86 100644 --- a/app/soapbox/features/ui/components/profile_info_panel.js +++ b/app/soapbox/features/ui/components/profile_info_panel.js @@ -80,6 +80,41 @@ class ProfileInfoPanel extends ImmutablePureComponent { return badges; } + getBirthDate = () => { + const { account, intl } = this.props; + + const birthDate = account.getIn(['pleroma', 'birth_date']); + if (!birthDate) return null; + + const formattedBirthDate = intl.formatDate(birthDate, { day: 'numeric', month: 'long', year: 'numeric' }); + + const date = new Date(birthDate); + const today = new Date(); + + const hasBirthday = date.getDate() === today.getDate() && date.getMonth() === today.getMonth(); + + if (hasBirthday) { + return ( +
+ + +
+ ); + } + return ( +
+ + +
+ ); + } + render() { const { account, displayFqn, intl, identity_proofs, username } = this.props; @@ -103,7 +138,6 @@ class ProfileInfoPanel extends ImmutablePureComponent { const deactivated = !account.getIn(['pleroma', 'is_active'], true); const displayNameHtml = deactivated ? { __html: intl.formatMessage(messages.deactivated) } : { __html: account.get('display_name_html') }; const memberSinceDate = intl.formatDate(account.get('created_at'), { month: 'long', year: 'numeric' }); - const birthDate = account.getIn(['pleroma', 'birth_date']) && intl.formatDate(account.getIn(['pleroma', 'birth_date']), { day: 'numeric', month: 'long', year: 'numeric' }); const verified = isVerified(account); const badges = this.getBadges(); @@ -151,14 +185,7 @@ class ProfileInfoPanel extends ImmutablePureComponent { />
} - {birthDate &&
- - -
} + {this.getBirthDate()} { groups: ImmutableMap(), groups_removed_accounts: ImmutableMap(), pinned: ImmutableMap(), + birthday_reminders: ImmutableMap(), })); }); }); diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss index 7b0a53fe9..21579f647 100644 --- a/app/styles/accounts.scss +++ b/app/styles/accounts.scss @@ -554,3 +554,9 @@ a .account__avatar { padding-right: 3px; } } + +.account__birth-date { + display: flex; + align-items: center; + white-space: nowrap; +} diff --git a/docs/store.md b/docs/store.md index 7f866bacb..7c0bff506 100644 --- a/docs/store.md +++ b/docs/store.md @@ -126,7 +126,8 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn groups: {}, followers: {}, mutes: {}, - favourited_by: {} + favourited_by: {}, + birthday_reminders: {} } ``` From bae4455f8cb7f98a72208062913fc932cbdf566d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sun, 23 Jan 2022 12:53:48 +0100 Subject: [PATCH 05/12] birth_date -> birthday, hide_birth_date -> show_birthday MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/birth_date_input.js | 4 ++-- .../components/registration_form.js | 4 ++-- app/soapbox/features/birthdays/account.js | 2 +- app/soapbox/features/edit_profile/index.js | 22 +++++++++---------- .../ui/components/profile_info_panel.js | 2 +- 5 files changed, 17 insertions(+), 17 deletions(-) diff --git a/app/soapbox/components/birth_date_input.js b/app/soapbox/components/birth_date_input.js index 5183973d6..3147c317e 100644 --- a/app/soapbox/components/birth_date_input.js +++ b/app/soapbox/components/birth_date_input.js @@ -9,7 +9,7 @@ import 'react-datepicker/dist/react-datepicker.css'; import { getFeatures } from 'soapbox/utils/features'; const messages = defineMessages({ - birthDatePlaceholder: { id: 'edit_profile.fields.birth_date_placeholder', defaultMessage: 'Your birth date' }, + birthDatePlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birth date' }, }); const mapStateToProps = state => { @@ -17,7 +17,7 @@ const mapStateToProps = state => { return { supportsBirthDates: features.birthDates, - minAge: state.getIn(['instance', 'pleroma', 'metadata', 'birth_date_min_age']), + minAge: state.getIn(['instance', 'pleroma', 'metadata', 'birthday_min_age']), }; }; diff --git a/app/soapbox/features/auth_login/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js index 8b6ceb3a9..0bc68be30 100644 --- a/app/soapbox/features/auth_login/components/registration_form.js +++ b/app/soapbox/features/auth_login/components/registration_form.js @@ -47,7 +47,7 @@ const mapStateToProps = (state, props) => ({ needsApproval: state.getIn(['instance', 'approval_required']), supportsEmailList: getFeatures(state.get('instance')).emailList, supportsAccountLookup: getFeatures(state.get('instance')).accountLookup, - birthDateRequired: state.getIn(['instance', 'pleroma', 'metadata', 'birth_date_required']), + birthDateRequired: state.getIn(['instance', 'pleroma', 'metadata', 'birthday_required']), }); export default @connect(mapStateToProps) @@ -223,7 +223,7 @@ class RegistrationForm extends ImmutablePureComponent { } if (birthDate) { - params.set('birth_date', birthDate.toISOString().slice(0, 10)); + params.set('birthday', birthDate.toISOString().slice(0, 10)); } }); diff --git a/app/soapbox/features/birthdays/account.js b/app/soapbox/features/birthdays/account.js index 141fd7b8e..4a266cd8f 100644 --- a/app/soapbox/features/birthdays/account.js +++ b/app/soapbox/features/birthdays/account.js @@ -56,7 +56,7 @@ class Account extends ImmutablePureComponent { if (!account) return null; - const birthDate = account.getIn(['pleroma', 'birth_date']); + const birthDate = account.getIn(['pleroma', 'birthday']); if (!birthDate) return null; const formattedBirthDate = intl.formatDate(birthDate, { day: 'numeric', month: 'short', year: 'numeric' }); diff --git a/app/soapbox/features/edit_profile/index.js b/app/soapbox/features/edit_profile/index.js index f055d601e..426af2a39 100644 --- a/app/soapbox/features/edit_profile/index.js +++ b/app/soapbox/features/edit_profile/index.js @@ -50,7 +50,7 @@ const messages = defineMessages({ error: { id: 'edit_profile.error', defaultMessage: 'Profile update failed' }, bioPlaceholder: { id: 'edit_profile.fields.bio_placeholder', defaultMessage: 'Tell us about yourself.' }, displayNamePlaceholder: { id: 'edit_profile.fields.display_name_placeholder', defaultMessage: 'Name' }, - birthDatePlaceholder: { id: 'edit_profile.fields.birth_date_placeholder', defaultMessage: 'Your birth date' }, + birthDatePlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birth date' }, }); const makeMapStateToProps = () => { @@ -113,8 +113,8 @@ class EditProfile extends ImmutablePureComponent { const strangerNotifications = account.getIn(['pleroma', 'notification_settings', 'block_from_strangers']); const acceptsEmailList = account.getIn(['pleroma', 'accepts_email_list']); const discoverable = account.getIn(['source', 'pleroma', 'discoverable']); - const birthDate = account.getIn(['pleroma', 'birth_date']); - const hideBirthDate = account.getIn(['pleroma', 'hide_birth_date']); + const birthDate = account.getIn(['pleroma', 'birthday']); + const showBirthDate = account.getIn(['source', 'pleroma', 'show_birthday']); const initialState = account.withMutations(map => { map.merge(map.get('source')); @@ -124,7 +124,7 @@ class EditProfile extends ImmutablePureComponent { map.set('accepts_email_list', acceptsEmailList); map.set('hide_network', hidesNetwork(account)); map.set('discoverable', discoverable); - map.set('hide_birth_date', hideBirthDate); + map.set('show_birthday', showBirthDate); if (birthDate) map.set('birthDate', new Date(birthDate)); unescapeParams(map, ['display_name', 'bio']); }); @@ -166,8 +166,8 @@ class EditProfile extends ImmutablePureComponent { hide_follows: state.hide_network, hide_followers_count: state.hide_network, hide_follows_count: state.hide_network, - birth_date: state.birthDate?.toISOString().slice(0, 10), - hide_birth_date: state.hide_birth_date, + birthday: state.birthDate?.toISOString().slice(0, 10), + show_birthday: state.show_birthday, }, this.getFieldParams().toJS()); } @@ -286,7 +286,7 @@ class EditProfile extends ImmutablePureComponent { rows={3} /> } + hint={} value={this.state.birthDate} onChange={this.handleBirthDateChange} /> @@ -345,10 +345,10 @@ class EditProfile extends ImmutablePureComponent { onChange={this.handleCheckboxChange} /> {supportsBirthDates && } - hint={} - name='hide_birth_date' - checked={this.state.hide_birth_date} + label={} + hint={} + name='show_birthday' + checked={this.state.show_birthday} onChange={this.handleCheckboxChange} />} {supportsEmailList && { const { account, intl } = this.props; - const birthDate = account.getIn(['pleroma', 'birth_date']); + const birthDate = account.getIn(['pleroma', 'birthday']); if (!birthDate) return null; const formattedBirthDate = intl.formatDate(birthDate, { day: 'numeric', month: 'long', year: 'numeric' }); From bcc0e0983b76835143a489642eab53f5e73c4a4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Mon, 24 Jan 2022 23:33:16 +0100 Subject: [PATCH 06/12] Birthdays: use the new route MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/actions/accounts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/actions/accounts.js b/app/soapbox/actions/accounts.js index e0bcbd46c..2d12fe06f 100644 --- a/app/soapbox/actions/accounts.js +++ b/app/soapbox/actions/accounts.js @@ -1043,7 +1043,7 @@ export function fetchBirthdayReminders(day, month) { dispatch({ type: BIRTHDAY_REMINDERS_FETCH_REQUEST, day, month, id: me }); - api(getState).get('/api/v1/pleroma/birthday_reminders', { params: { day, month } }).then(response => { + api(getState).get('/api/v1/pleroma/birthdays', { params: { day, month } }).then(response => { dispatch(importFetchedAccounts(response.data)); dispatch({ type: BIRTHDAY_REMINDERS_FETCH_SUCCESS, From e0d7f2dd8772a688ad7038edb9975da7538d5897 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Mon, 24 Jan 2022 23:51:22 +0100 Subject: [PATCH 07/12] Birthdays: Accessibility improvements/fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/birthday_reminders.js | 29 +++++++++++++++++++- app/soapbox/features/notifications/index.js | 27 +++++++++++++++--- 2 files changed, 51 insertions(+), 5 deletions(-) diff --git a/app/soapbox/components/birthday_reminders.js b/app/soapbox/components/birthday_reminders.js index 8c1896bf7..9a14f1f55 100644 --- a/app/soapbox/components/birthday_reminders.js +++ b/app/soapbox/components/birthday_reminders.js @@ -39,6 +39,7 @@ class BirthdayReminders extends ImmutablePureComponent { birthdays: ImmutablePropTypes.orderedSet, intl: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, + onMoveDown: PropTypes.func, }; componentDidMount() { @@ -55,6 +56,7 @@ class BirthdayReminders extends ImmutablePureComponent { getHandlers() { return { open: this.handleOpenBirthdaysModal, + moveDown: this.props.onMoveDown, }; } @@ -102,6 +104,31 @@ class BirthdayReminders extends ImmutablePureComponent { ); } + renderMessageForScreenReader = () => { + const { intl, birthdays, account } = this.props; + + if (birthdays.size === 1) { + return intl.formatMessage({ id: 'notification.birthday', defaultMessage: '{name} has birthday today' }, { name: account.get('display_name') }); + } + + return intl.formatMessage( + { + id: 'notification.birthday_plural', + defaultMessage: '{name} and {more} have birthday today', + }, + { + name: account.get('display_name'), + more: intl.formatMessage( + { + id: 'notification.birthday.more', + defaultMessage: '{count} more {count, plural, one {friend} other {friends}}', + }, + { count: birthdays.size - 1 }, + ), + }, + ); + } + render() { const { birthdays } = this.props; @@ -109,7 +136,7 @@ class BirthdayReminders extends ImmutablePureComponent { return ( -
+
diff --git a/app/soapbox/features/notifications/index.js b/app/soapbox/features/notifications/index.js index 57edf8315..29434fa65 100644 --- a/app/soapbox/features/notifications/index.js +++ b/app/soapbox/features/notifications/index.js @@ -51,6 +51,8 @@ const mapStateToProps = state => { const settings = getSettings(state); const instance = state.get('instance'); const features = getFeatures(instance); + const showBirthdayReminders = settings.getIn(['notifications', 'birthdays', 'show']) && settings.getIn(['notifications', 'quickFilter', 'active']) === 'all' && features.birthDates; + const birthdays = showBirthdayReminders && state.getIn(['user_lists', 'birthday_reminders', state.get('me')]); return { showFilterBar: settings.getIn(['notifications', 'quickFilter', 'show']), @@ -59,7 +61,8 @@ const mapStateToProps = state => { isUnread: state.getIn(['notifications', 'unread']) > 0, hasMore: state.getIn(['notifications', 'hasMore']), totalQueuedNotificationsCount: state.getIn(['notifications', 'totalQueuedNotificationsCount'], 0), - showBirthdayReminders: settings.getIn(['notifications', 'birthdays', 'show']) && settings.getIn(['notifications', 'quickFilter', 'active']) === 'all' && features.birthDates, + showBirthdayReminders, + hasBirthdays: !!birthdays, }; }; @@ -78,6 +81,7 @@ class Notifications extends React.PureComponent { dequeueNotifications: PropTypes.func, totalQueuedNotificationsCount: PropTypes.number, showBirthdayReminders: PropTypes.bool, + hasBirthdays: PropTypes.bool, }; componentWillUnmount() { @@ -114,15 +118,25 @@ class Notifications extends React.PureComponent { } handleMoveUp = id => { - const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) - 1; + const { hasBirthdays } = this.props; + + let elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) - 1; + if (hasBirthdays) elementIndex++; this._selectChild(elementIndex, true); } handleMoveDown = id => { - const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) + 1; + const { hasBirthdays } = this.props; + + let elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) + 1; + if (hasBirthdays) elementIndex++; this._selectChild(elementIndex, false); } + handleMoveBelowBirthdays = () => { + this._selectChild(1, false); + } + _selectChild(index, align_top) { const container = this.column.node; const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`); @@ -175,7 +189,12 @@ class Notifications extends React.PureComponent { /> )); - if (showBirthdayReminders) scrollableContent = scrollableContent.unshift(); + if (showBirthdayReminders) scrollableContent = scrollableContent.unshift( + , + ); } else { scrollableContent = null; } From 980f5f8ae3455026971f0ad5678cb594e83a46df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Tue, 25 Jan 2022 16:51:15 +0100 Subject: [PATCH 08/12] Birthdays: use maxDate MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/birth_date_input.js | 14 +++++--------- .../auth_login/components/registration_form.js | 2 +- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/app/soapbox/components/birth_date_input.js b/app/soapbox/components/birth_date_input.js index 3147c317e..b07c54515 100644 --- a/app/soapbox/components/birth_date_input.js +++ b/app/soapbox/components/birth_date_input.js @@ -34,18 +34,14 @@ class EditProfile extends ImmutablePureComponent { value: PropTypes.instanceOf(Date), }; - isDateValid = date => { - const { minAge } = this.props; - const allowedDate = new Date(); - allowedDate.setDate(allowedDate.getDate() - minAge); - return date && allowedDate.setHours(0, 0, 0, 0) >= new Date(date).setHours(0, 0, 0, 0); - } - render() { - const { intl, value, onChange, supportsBirthDates, hint, required } = this.props; + const { intl, value, onChange, supportsBirthDates, hint, required, minAge } = this.props; if (!supportsBirthDates) return null; + const maxDate = new Date(); + maxDate.setDate(maxDate.getDate() - minAge); + return (
{hint && ( @@ -60,7 +56,7 @@ class EditProfile extends ImmutablePureComponent { wrapperClassName='react-datepicker-wrapper' onChange={onChange} placeholderText={intl.formatMessage(messages.birthDatePlaceholder)} - filterDate={this.isDateValid} + maxDate={maxDate} required={required} />
diff --git a/app/soapbox/features/auth_login/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js index 0bc68be30..52272f1f9 100644 --- a/app/soapbox/features/auth_login/components/registration_form.js +++ b/app/soapbox/features/auth_login/components/registration_form.js @@ -325,7 +325,7 @@ class RegistrationForm extends ImmutablePureComponent { error={passwordMismatch === true} required /> - {!birthDateRequired && + {birthDateRequired && Date: Tue, 25 Jan 2022 21:09:30 +0100 Subject: [PATCH 09/12] Birthdays: renames MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- ...{birth_date_input.js => birthday_input.js} | 12 +++---- .../components/registration_form.js | 28 ++++++++-------- app/soapbox/features/birthdays/account.js | 12 +++---- app/soapbox/features/edit_profile/index.js | 32 +++++++++---------- .../components/column_settings.js | 6 ++-- .../containers/column_settings_container.js | 2 +- app/soapbox/features/notifications/index.js | 2 +- .../ui/components/profile_info_panel.js | 18 +++++------ app/soapbox/utils/features.js | 2 +- app/styles/accounts.scss | 2 +- app/styles/components/profile-info-panel.scss | 2 +- 11 files changed, 59 insertions(+), 59 deletions(-) rename app/soapbox/components/{birth_date_input.js => birthday_input.js} (78%) diff --git a/app/soapbox/components/birth_date_input.js b/app/soapbox/components/birthday_input.js similarity index 78% rename from app/soapbox/components/birth_date_input.js rename to app/soapbox/components/birthday_input.js index b07c54515..cb1408d51 100644 --- a/app/soapbox/components/birth_date_input.js +++ b/app/soapbox/components/birthday_input.js @@ -9,14 +9,14 @@ import 'react-datepicker/dist/react-datepicker.css'; import { getFeatures } from 'soapbox/utils/features'; const messages = defineMessages({ - birthDatePlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birth date' }, + birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birth date' }, }); const mapStateToProps = state => { const features = getFeatures(state.get('instance')); return { - supportsBirthDates: features.birthDates, + supportsBirthdays: features.birthdays, minAge: state.getIn(['instance', 'pleroma', 'metadata', 'birthday_min_age']), }; }; @@ -28,16 +28,16 @@ class EditProfile extends ImmutablePureComponent { static propTypes = { hint: PropTypes.node, required: PropTypes.bool, - supportsBirthDates: PropTypes.bool, + supportsBirthdays: PropTypes.bool, minAge: PropTypes.number, onChange: PropTypes.func.isRequired, value: PropTypes.instanceOf(Date), }; render() { - const { intl, value, onChange, supportsBirthDates, hint, required, minAge } = this.props; + const { intl, value, onChange, supportsBirthdays, hint, required, minAge } = this.props; - if (!supportsBirthDates) return null; + if (!supportsBirthdays) return null; const maxDate = new Date(); maxDate.setDate(maxDate.getDate() - minAge); @@ -55,7 +55,7 @@ class EditProfile extends ImmutablePureComponent { dateFormat='d MMMM yyyy' wrapperClassName='react-datepicker-wrapper' onChange={onChange} - placeholderText={intl.formatMessage(messages.birthDatePlaceholder)} + placeholderText={intl.formatMessage(messages.birthdayPlaceholder)} maxDate={maxDate} required={required} /> diff --git a/app/soapbox/features/auth_login/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js index 52272f1f9..127916a19 100644 --- a/app/soapbox/features/auth_login/components/registration_form.js +++ b/app/soapbox/features/auth_login/components/registration_form.js @@ -14,7 +14,7 @@ import { accountLookup } from 'soapbox/actions/accounts'; import { register, verifyCredentials } from 'soapbox/actions/auth'; import { openModal } from 'soapbox/actions/modal'; import { getSettings } from 'soapbox/actions/settings'; -import BirthDateInput from 'soapbox/components/birth_date_input'; +import BirthdayInput from 'soapbox/components/birthday_input'; import ShowablePassword from 'soapbox/components/showable_password'; import CaptchaField from 'soapbox/features/auth_login/components/captcha'; import { @@ -47,7 +47,7 @@ const mapStateToProps = (state, props) => ({ needsApproval: state.getIn(['instance', 'approval_required']), supportsEmailList: getFeatures(state.get('instance')).emailList, supportsAccountLookup: getFeatures(state.get('instance')).accountLookup, - birthDateRequired: state.getIn(['instance', 'pleroma', 'metadata', 'birthday_required']), + birthdayRequired: state.getIn(['instance', 'pleroma', 'metadata', 'birthday_required']), }); export default @connect(mapStateToProps) @@ -63,7 +63,7 @@ class RegistrationForm extends ImmutablePureComponent { supportsEmailList: PropTypes.bool, supportsAccountLookup: PropTypes.bool, inviteToken: PropTypes.string, - birthDateRequired: PropTypes.bool, + birthdayRequired: PropTypes.bool, } static contextTypes = { @@ -132,9 +132,9 @@ class RegistrationForm extends ImmutablePureComponent { this.setState({ passwordMismatch: !this.passwordsMatch() }); } - onBirthDateChange = birthDate => { + onBirthdayChange = birthday => { this.setState({ - birthDate, + birthday, }); } @@ -206,7 +206,7 @@ class RegistrationForm extends ImmutablePureComponent { onSubmit = e => { const { dispatch, inviteToken } = this.props; - const { birthDate } = this.state; + const { birthday } = this.state; if (!this.passwordsMatch()) { this.setState({ passwordMismatch: true }); @@ -222,8 +222,8 @@ class RegistrationForm extends ImmutablePureComponent { params.set('token', inviteToken); } - if (birthDate) { - params.set('birthday', birthDate.toISOString().slice(0, 10)); + if (birthday) { + params.set('birthday', birthday.toISOString().slice(0, 10)); } }); @@ -259,8 +259,8 @@ class RegistrationForm extends ImmutablePureComponent { } render() { - const { instance, intl, supportsEmailList, birthDateRequired } = this.props; - const { params, usernameUnavailable, passwordConfirmation, passwordMismatch, birthDate } = this.state; + const { instance, intl, supportsEmailList, birthdayRequired } = this.props; + const { params, usernameUnavailable, passwordConfirmation, passwordMismatch, birthday } = this.state; const isLoading = this.state.captchaLoading || this.state.submissionLoading; return ( @@ -325,10 +325,10 @@ class RegistrationForm extends ImmutablePureComponent { error={passwordMismatch === true} required /> - {birthDateRequired && - } {instance.get('approval_required') && diff --git a/app/soapbox/features/birthdays/account.js b/app/soapbox/features/birthdays/account.js index 4a266cd8f..847e28de2 100644 --- a/app/soapbox/features/birthdays/account.js +++ b/app/soapbox/features/birthdays/account.js @@ -56,10 +56,10 @@ class Account extends ImmutablePureComponent { if (!account) return null; - const birthDate = account.getIn(['pleroma', 'birthday']); - if (!birthDate) return null; + const birthday = account.getIn(['pleroma', 'birthday']); + if (!birthday) return null; - const formattedBirthDate = intl.formatDate(birthDate, { day: 'numeric', month: 'short', year: 'numeric' }); + const formattedBirthday = intl.formatDate(birthday, { day: 'numeric', month: 'short', year: 'numeric' }); return (
@@ -72,13 +72,13 @@ class Account extends ImmutablePureComponent {
- {formattedBirthDate} + {formattedBirthday}
diff --git a/app/soapbox/features/edit_profile/index.js b/app/soapbox/features/edit_profile/index.js index 426af2a39..cf73ddbc4 100644 --- a/app/soapbox/features/edit_profile/index.js +++ b/app/soapbox/features/edit_profile/index.js @@ -14,7 +14,7 @@ import { updateNotificationSettings } from 'soapbox/actions/accounts'; import { patchMe } from 'soapbox/actions/me'; import snackbar from 'soapbox/actions/snackbar'; import { getSoapboxConfig } from 'soapbox/actions/soapbox'; -import BirthDateInput from 'soapbox/components/birth_date_input'; +import BirthdayInput from 'soapbox/components/birthday_input'; import Icon from 'soapbox/components/icon'; import { SimpleForm, @@ -50,7 +50,7 @@ const messages = defineMessages({ error: { id: 'edit_profile.error', defaultMessage: 'Profile update failed' }, bioPlaceholder: { id: 'edit_profile.fields.bio_placeholder', defaultMessage: 'Tell us about yourself.' }, displayNamePlaceholder: { id: 'edit_profile.fields.display_name_placeholder', defaultMessage: 'Name' }, - birthDatePlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birth date' }, + birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birth date' }, }); const makeMapStateToProps = () => { @@ -67,7 +67,7 @@ const makeMapStateToProps = () => { maxFields: state.getIn(['instance', 'pleroma', 'metadata', 'fields_limits', 'max_fields'], 4), verifiedCanEditName: soapbox.get('verifiedCanEditName'), supportsEmailList: features.emailList, - supportsBirthDates: features.birthDates, + supportsBirthdays: features.birthdays, }; }; @@ -99,7 +99,7 @@ class EditProfile extends ImmutablePureComponent { maxFields: PropTypes.number, verifiedCanEditName: PropTypes.bool, supportsEmailList: PropTypes.bool, - supportsBirthDates: PropTypes.bool, + supportsBirthdays: PropTypes.bool, }; state = { @@ -113,8 +113,8 @@ class EditProfile extends ImmutablePureComponent { const strangerNotifications = account.getIn(['pleroma', 'notification_settings', 'block_from_strangers']); const acceptsEmailList = account.getIn(['pleroma', 'accepts_email_list']); const discoverable = account.getIn(['source', 'pleroma', 'discoverable']); - const birthDate = account.getIn(['pleroma', 'birthday']); - const showBirthDate = account.getIn(['source', 'pleroma', 'show_birthday']); + const birthday = account.getIn(['pleroma', 'birthday']); + const showBirthday = account.getIn(['source', 'pleroma', 'show_birthday']); const initialState = account.withMutations(map => { map.merge(map.get('source')); @@ -124,8 +124,8 @@ class EditProfile extends ImmutablePureComponent { map.set('accepts_email_list', acceptsEmailList); map.set('hide_network', hidesNetwork(account)); map.set('discoverable', discoverable); - map.set('show_birthday', showBirthDate); - if (birthDate) map.set('birthDate', new Date(birthDate)); + map.set('show_birthday', showBirthday); + if (birthday) map.set('birthday', new Date(birthday)); unescapeParams(map, ['display_name', 'bio']); }); @@ -166,7 +166,7 @@ class EditProfile extends ImmutablePureComponent { hide_follows: state.hide_network, hide_followers_count: state.hide_network, hide_follows_count: state.hide_network, - birthday: state.birthDate?.toISOString().slice(0, 10), + birthday: state.birthday?.toISOString().slice(0, 10), show_birthday: state.show_birthday, }, this.getFieldParams().toJS()); } @@ -235,9 +235,9 @@ class EditProfile extends ImmutablePureComponent { }; } - handleBirthDateChange = birthDate => { + handleBirthdayChange = birthday => { this.setState({ - birthDate, + birthday, }); } @@ -256,7 +256,7 @@ class EditProfile extends ImmutablePureComponent { } render() { - const { intl, maxFields, account, verifiedCanEditName, supportsBirthDates, supportsEmailList } = this.props; + const { intl, maxFields, account, verifiedCanEditName, supportsBirthdays, supportsEmailList } = this.props; const verified = isVerified(account); const canEditName = verifiedCanEditName || !verified; @@ -285,10 +285,10 @@ class EditProfile extends ImmutablePureComponent { onChange={this.handleTextChange} rows={3} /> - } - value={this.state.birthDate} - onChange={this.handleBirthDateChange} + value={this.state.birthday} + onChange={this.handleBirthdayChange} />
@@ -344,7 +344,7 @@ class EditProfile extends ImmutablePureComponent { checked={this.state.discoverable} onChange={this.handleCheckboxChange} /> - {supportsBirthDates && } hint={} name='show_birthday' diff --git a/app/soapbox/features/notifications/components/column_settings.js b/app/soapbox/features/notifications/components/column_settings.js index 39dd79836..63093ec78 100644 --- a/app/soapbox/features/notifications/components/column_settings.js +++ b/app/soapbox/features/notifications/components/column_settings.js @@ -24,7 +24,7 @@ class ColumnSettings extends React.PureComponent { onClear: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired, supportsEmojiReacts: PropTypes.bool, - supportsBirthDates: PropTypes.bool, + supportsBirthdays: PropTypes.bool, }; onPushChange = (path, checked) => { @@ -40,7 +40,7 @@ class ColumnSettings extends React.PureComponent { } render() { - const { intl, settings, pushSettings, onChange, onClear, onClose, supportsEmojiReacts, supportsBirthDates } = this.props; + const { intl, settings, pushSettings, onChange, onClear, onClose, supportsEmojiReacts, supportsBirthdays } = this.props; const filterShowStr = ; const filterAdvancedStr = ; @@ -86,7 +86,7 @@ class ColumnSettings extends React.PureComponent {
- {supportsBirthDates && + {supportsBirthdays &&
diff --git a/app/soapbox/features/notifications/containers/column_settings_container.js b/app/soapbox/features/notifications/containers/column_settings_container.js index 05dc1f0eb..292c08961 100644 --- a/app/soapbox/features/notifications/containers/column_settings_container.js +++ b/app/soapbox/features/notifications/containers/column_settings_container.js @@ -24,7 +24,7 @@ const mapStateToProps = state => { settings: getSettings(state).get('notifications'), pushSettings: state.get('push_notifications'), supportsEmojiReacts: features.emojiReacts, - supportsBirthDates: features.birthDates, + supportsBirthdays: features.birthdays, }; }; diff --git a/app/soapbox/features/notifications/index.js b/app/soapbox/features/notifications/index.js index 29434fa65..b3afd7c2f 100644 --- a/app/soapbox/features/notifications/index.js +++ b/app/soapbox/features/notifications/index.js @@ -51,7 +51,7 @@ const mapStateToProps = state => { const settings = getSettings(state); const instance = state.get('instance'); const features = getFeatures(instance); - const showBirthdayReminders = settings.getIn(['notifications', 'birthdays', 'show']) && settings.getIn(['notifications', 'quickFilter', 'active']) === 'all' && features.birthDates; + const showBirthdayReminders = settings.getIn(['notifications', 'birthdays', 'show']) && settings.getIn(['notifications', 'quickFilter', 'active']) === 'all' && features.birthdays; const birthdays = showBirthdayReminders && state.getIn(['user_lists', 'birthday_reminders', state.get('me')]); return { diff --git a/app/soapbox/features/ui/components/profile_info_panel.js b/app/soapbox/features/ui/components/profile_info_panel.js index adf092155..f90cac95d 100644 --- a/app/soapbox/features/ui/components/profile_info_panel.js +++ b/app/soapbox/features/ui/components/profile_info_panel.js @@ -80,22 +80,22 @@ class ProfileInfoPanel extends ImmutablePureComponent { return badges; } - getBirthDate = () => { + getBirthday = () => { const { account, intl } = this.props; - const birthDate = account.getIn(['pleroma', 'birthday']); - if (!birthDate) return null; + const birthday = account.getIn(['pleroma', 'birthday']); + if (!birthday) return null; - const formattedBirthDate = intl.formatDate(birthDate, { day: 'numeric', month: 'long', year: 'numeric' }); + const formattedBirthday = intl.formatDate(birthday, { day: 'numeric', month: 'long', year: 'numeric' }); - const date = new Date(birthDate); + const date = new Date(birthday); const today = new Date(); const hasBirthday = date.getDate() === today.getDate() && date.getMonth() === today.getMonth(); if (hasBirthday) { return ( -
+
+
@@ -185,7 +185,7 @@ class ProfileInfoPanel extends ImmutablePureComponent { />
} - {this.getBirthDate()} + {this.getBirthday()} Date: Tue, 25 Jan 2022 17:08:20 -0600 Subject: [PATCH 10/12] "birth date" --> "birthday", move the toggle next to the picker --- app/soapbox/components/birthday_input.js | 5 ++-- app/soapbox/features/birthdays/account.js | 4 +-- app/soapbox/features/edit_profile/index.js | 30 +++++++++++-------- .../ui/components/profile_info_panel.js | 4 +-- 4 files changed, 23 insertions(+), 20 deletions(-) diff --git a/app/soapbox/components/birthday_input.js b/app/soapbox/components/birthday_input.js index cb1408d51..ad6e561ea 100644 --- a/app/soapbox/components/birthday_input.js +++ b/app/soapbox/components/birthday_input.js @@ -9,7 +9,7 @@ import 'react-datepicker/dist/react-datepicker.css'; import { getFeatures } from 'soapbox/utils/features'; const messages = defineMessages({ - birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birth date' }, + birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birthday' }, }); const mapStateToProps = state => { @@ -52,7 +52,6 @@ class EditProfile extends ImmutablePureComponent {
{ @@ -73,7 +73,7 @@ class Account extends ImmutablePureComponent {
diff --git a/app/soapbox/features/edit_profile/index.js b/app/soapbox/features/edit_profile/index.js index cf73ddbc4..9a425768b 100644 --- a/app/soapbox/features/edit_profile/index.js +++ b/app/soapbox/features/edit_profile/index.js @@ -50,7 +50,7 @@ const messages = defineMessages({ error: { id: 'edit_profile.error', defaultMessage: 'Profile update failed' }, bioPlaceholder: { id: 'edit_profile.fields.bio_placeholder', defaultMessage: 'Tell us about yourself.' }, displayNamePlaceholder: { id: 'edit_profile.fields.display_name_placeholder', defaultMessage: 'Name' }, - birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birth date' }, + birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birthday' }, }); const makeMapStateToProps = () => { @@ -285,11 +285,22 @@ class EditProfile extends ImmutablePureComponent { onChange={this.handleTextChange} rows={3} /> - } - value={this.state.birthday} - onChange={this.handleBirthdayChange} - /> + {supportsBirthdays && ( + <> + } + value={this.state.birthday} + onChange={this.handleBirthdayChange} + /> + } + hint={} + name='show_birthday' + checked={this.state.show_birthday} + onChange={this.handleCheckboxChange} + /> + + )}
@@ -344,13 +355,6 @@ class EditProfile extends ImmutablePureComponent { checked={this.state.discoverable} onChange={this.handleCheckboxChange} /> - {supportsBirthdays && } - hint={} - name='show_birthday' - checked={this.state.show_birthday} - onChange={this.handleCheckboxChange} - />} {supportsEmailList && } hint={} diff --git a/app/soapbox/features/ui/components/profile_info_panel.js b/app/soapbox/features/ui/components/profile_info_panel.js index f90cac95d..6b35c601e 100644 --- a/app/soapbox/features/ui/components/profile_info_panel.js +++ b/app/soapbox/features/ui/components/profile_info_panel.js @@ -98,7 +98,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
); @@ -107,7 +107,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
From 741e80d9ab16fecedc2585f6813da86987da2292 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Tue, 25 Jan 2022 23:37:40 -0800 Subject: [PATCH 11/12] Birthdays: Try to fix timezones MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/birthday_input.js | 5 +++-- .../features/auth_login/components/registration_form.js | 2 +- app/soapbox/features/edit_profile/index.js | 9 +++++++-- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/app/soapbox/components/birthday_input.js b/app/soapbox/components/birthday_input.js index cb1408d51..36473dac8 100644 --- a/app/soapbox/components/birthday_input.js +++ b/app/soapbox/components/birthday_input.js @@ -39,8 +39,8 @@ class EditProfile extends ImmutablePureComponent { if (!supportsBirthdays) return null; - const maxDate = new Date(); - maxDate.setDate(maxDate.getDate() - minAge); + let maxDate = new Date(); + maxDate = new Date(maxDate.getTime() - minAge * 1000 * 60 * 60 * 24 + maxDate.getTimezoneOffset() * 1000 * 60); return (
@@ -56,6 +56,7 @@ class EditProfile extends ImmutablePureComponent { wrapperClassName='react-datepicker-wrapper' onChange={onChange} placeholderText={intl.formatMessage(messages.birthdayPlaceholder)} + minDate={new Date('1900-01-01')} maxDate={maxDate} required={required} /> diff --git a/app/soapbox/features/auth_login/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js index 127916a19..dbda945a8 100644 --- a/app/soapbox/features/auth_login/components/registration_form.js +++ b/app/soapbox/features/auth_login/components/registration_form.js @@ -223,7 +223,7 @@ class RegistrationForm extends ImmutablePureComponent { } if (birthday) { - params.set('birthday', birthday.toISOString().slice(0, 10)); + params.set('birthday', new Date(birthday.getTime() - (birthday.getTimezoneOffset() * 60000)).toISOString().slice(0, 10)); } }); diff --git a/app/soapbox/features/edit_profile/index.js b/app/soapbox/features/edit_profile/index.js index cf73ddbc4..8fe4ddd2b 100644 --- a/app/soapbox/features/edit_profile/index.js +++ b/app/soapbox/features/edit_profile/index.js @@ -125,7 +125,10 @@ class EditProfile extends ImmutablePureComponent { map.set('hide_network', hidesNetwork(account)); map.set('discoverable', discoverable); map.set('show_birthday', showBirthday); - if (birthday) map.set('birthday', new Date(birthday)); + if (birthday) { + const date = new Date(birthday); + map.set('birthday', new Date(date.getTime() + (date.getTimezoneOffset() * 60000))); + } unescapeParams(map, ['display_name', 'bio']); }); @@ -166,7 +169,9 @@ class EditProfile extends ImmutablePureComponent { hide_follows: state.hide_network, hide_followers_count: state.hide_network, hide_follows_count: state.hide_network, - birthday: state.birthday?.toISOString().slice(0, 10), + birthday: state.birthday + ? new Date(state.birthday.getTime() - (state.birthday.getTimezoneOffset() * 60000)).toISOString().slice(0, 10) + : undefined, show_birthday: state.show_birthday, }, this.getFieldParams().toJS()); } From b1bc544a018ec004ec769c2db6e439d193ada244 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Wed, 26 Jan 2022 18:43:00 +0100 Subject: [PATCH 12/12] Birthdays: Use custom header MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/birthday_input.js | 63 ++++++++++++++++++++++++ app/styles/components/datepicker.scss | 1 + app/styles/forms.scss | 43 +++++++++++----- 3 files changed, 94 insertions(+), 13 deletions(-) diff --git a/app/soapbox/components/birthday_input.js b/app/soapbox/components/birthday_input.js index 36473dac8..d94700926 100644 --- a/app/soapbox/components/birthday_input.js +++ b/app/soapbox/components/birthday_input.js @@ -6,10 +6,15 @@ import { defineMessages, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; import 'react-datepicker/dist/react-datepicker.css'; +import IconButton from 'soapbox/components/icon_button'; import { getFeatures } from 'soapbox/utils/features'; const messages = defineMessages({ birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birth date' }, + previousMonth: { id: 'datepicker.previous_month', defaultMessage: 'Previous month' }, + nextMonth: { id: 'datepicker.next_month', defaultMessage: 'Next month' }, + previousYear: { id: 'datepicker.previous_year', defaultMessage: 'Previous year' }, + nextYear: { id: 'datepicker.next_year', defaultMessage: 'Next year' }, }); const mapStateToProps = state => { @@ -34,6 +39,63 @@ class EditProfile extends ImmutablePureComponent { value: PropTypes.instanceOf(Date), }; + renderHeader = ({ + decreaseMonth, + increaseMonth, + prevMonthButtonDisabled, + nextMonthButtonDisabled, + decreaseYear, + increaseYear, + prevYearButtonDisabled, + nextYearButtonDisabled, + date, + }) => { + const { intl } = this.props; + + return ( +
+
+ + {intl.formatDate(date, { month: 'long' })} + +
+
+ + {intl.formatDate(date, { year: 'numeric' })} + +
+
+ ); + } + render() { const { intl, value, onChange, supportsBirthdays, hint, required, minAge } = this.props; @@ -59,6 +121,7 @@ class EditProfile extends ImmutablePureComponent { minDate={new Date('1900-01-01')} maxDate={maxDate} required={required} + renderCustomHeader={this.renderHeader} />
diff --git a/app/styles/components/datepicker.scss b/app/styles/components/datepicker.scss index 76996ffda..dd74db173 100644 --- a/app/styles/components/datepicker.scss +++ b/app/styles/components/datepicker.scss @@ -33,6 +33,7 @@ .datepicker .react-datepicker { box-shadow: 0 0 6px 0 rgb(0 0 0 / 30%); + font-family: inherit; font-size: 12px; border: 0; border-radius: 10px; diff --git a/app/styles/forms.scss b/app/styles/forms.scss index 9c46a965f..64ab2fb4d 100644 --- a/app/styles/forms.scss +++ b/app/styles/forms.scss @@ -648,19 +648,8 @@ code { } .react-datepicker { - &__navigation { - display: flex; - height: 32px; - width: 32px; - margin: 0; - background: none; - line-height: 24px; - - &:hover, - &:active, - &:focus { - background: none; - } + &__header { + padding-top: 4px; } &__input-container { @@ -671,6 +660,34 @@ code { } } } + + &__years, + &__months { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 4px; + font-size: 16px; + } + + &__button { + width: 28px; + margin: 0; + padding: 4px; + background: transparent; + color: var(--primary-text-color); + + &:hover, + &:active, + &:focus { + background: none; + } + + .svg-icon { + height: 20px; + width: 20px; + } + } } }