[Glitch] Fix notifications re-rendering spuriously in web UI
Port f2a92c2d22
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/2843/head
parent
caaa412e6e
commit
2d31cdbc28
|
@ -1,5 +1,7 @@
|
|||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { isEqual } from 'lodash';
|
||||
|
||||
import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
|
||||
import ReplyIcon from '@/material-icons/400-24px/reply-fill.svg?react';
|
||||
import { me } from 'flavours/glitch/initial_state';
|
||||
|
@ -47,7 +49,7 @@ export const NotificationMention: React.FC<{
|
|||
status.get('visibility') === 'direct',
|
||||
status.get('in_reply_to_account_id') === me,
|
||||
] as const;
|
||||
});
|
||||
}, isEqual);
|
||||
|
||||
let labelRenderer = mentionLabelRenderer;
|
||||
|
||||
|
|
|
@ -4,6 +4,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|||
|
||||
import { Helmet } from 'react-helmet';
|
||||
|
||||
import { isEqual } from 'lodash';
|
||||
import { useDebouncedCallback } from 'use-debounce';
|
||||
|
||||
import DoneAllIcon from '@/material-icons/400-24px/done_all.svg?react';
|
||||
|
@ -62,7 +63,7 @@ export const Notifications: React.FC<{
|
|||
multiColumn?: boolean;
|
||||
}> = ({ columnId, multiColumn }) => {
|
||||
const intl = useIntl();
|
||||
const notifications = useAppSelector(selectNotificationGroups);
|
||||
const notifications = useAppSelector(selectNotificationGroups, isEqual);
|
||||
const dispatch = useAppDispatch();
|
||||
const isLoading = useAppSelector((s) => s.notificationGroups.isLoading);
|
||||
const hasMore = notifications.at(-1)?.type === 'gap';
|
||||
|
|
|
@ -3,10 +3,12 @@ import { connect } from 'react-redux';
|
|||
import { openModal, closeModal } from '../../../actions/modal';
|
||||
import ModalRoot from '../components/modal_root';
|
||||
|
||||
const defaultProps = {};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
ignoreFocus: state.getIn(['modal', 'ignoreFocus']),
|
||||
type: state.getIn(['modal', 'stack', 0, 'modalType'], null),
|
||||
props: state.getIn(['modal', 'stack', 0, 'modalProps'], {}),
|
||||
props: state.getIn(['modal', 'stack', 0, 'modalProps'], defaultProps),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
|
|
|
@ -4,24 +4,11 @@ import { connect } from 'react-redux';
|
|||
|
||||
import { NotificationStack } from 'react-notification';
|
||||
|
||||
import { dismissAlert } from '../../../actions/alerts';
|
||||
import { getAlerts } from '../../../selectors';
|
||||
|
||||
const formatIfNeeded = (intl, message, values) => {
|
||||
if (typeof message === 'object') {
|
||||
return intl.formatMessage(message, values);
|
||||
}
|
||||
|
||||
return message;
|
||||
};
|
||||
import { dismissAlert } from 'flavours/glitch/actions/alerts';
|
||||
import { getAlerts } from 'flavours/glitch/selectors';
|
||||
|
||||
const mapStateToProps = (state, { intl }) => ({
|
||||
notifications: getAlerts(state).map(alert => ({
|
||||
...alert,
|
||||
action: formatIfNeeded(intl, alert.action, alert.values),
|
||||
title: formatIfNeeded(intl, alert.title, alert.values),
|
||||
message: formatIfNeeded(intl, alert.message, alert.values),
|
||||
})),
|
||||
notifications: getAlerts(state, { intl }),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
|
|
|
@ -7,14 +7,16 @@ import { me } from '../initial_state';
|
|||
|
||||
export { makeGetAccount } from "./accounts";
|
||||
|
||||
const getFilters = (state, { contextType }) => {
|
||||
if (!contextType) return null;
|
||||
const getFilters = createSelector([state => state.get('filters'), (_, { contextType }) => contextType], (filters, contextType) => {
|
||||
if (!contextType) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const serverSideType = toServerSideType(contextType);
|
||||
const now = new Date();
|
||||
const serverSideType = toServerSideType(contextType);
|
||||
|
||||
return state.get('filters').filter((filter) => filter.get('context').includes(serverSideType) && (filter.get('expires_at') === null || filter.get('expires_at') > now));
|
||||
};
|
||||
return filters.filter(filter => filter.get('context').includes(serverSideType) && (filter.get('expires_at') === null || filter.get('expires_at') > now));
|
||||
});
|
||||
|
||||
export const makeGetStatus = () => {
|
||||
return createSelector(
|
||||
|
@ -74,10 +76,21 @@ const ALERT_DEFAULTS = {
|
|||
style: false,
|
||||
};
|
||||
|
||||
export const getAlerts = createSelector(state => state.get('alerts'), alerts =>
|
||||
const formatIfNeeded = (intl, message, values) => {
|
||||
if (typeof message === 'object') {
|
||||
return intl.formatMessage(message, values);
|
||||
}
|
||||
|
||||
return message;
|
||||
};
|
||||
|
||||
export const getAlerts = createSelector([state => state.get('alerts'), (_, { intl }) => intl], (alerts, intl) =>
|
||||
alerts.map(item => ({
|
||||
...ALERT_DEFAULTS,
|
||||
...item,
|
||||
action: formatIfNeeded(intl, item.action, item.values),
|
||||
title: formatIfNeeded(intl, item.title, item.values),
|
||||
message: formatIfNeeded(intl, item.message, item.values),
|
||||
})).toArray());
|
||||
|
||||
export const makeGetNotification = () => createSelector([
|
||||
|
|
Loading…
Reference in New Issue