mirrors/catstodon
1
0
Fork 0
mirror of https://git.kescher.at/CatCatNya/catstodon.git synced 2024-11-22 12:58:06 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

[Glitch] Fix notifications re-rendering spuriously in web UI

Browse source 
Port f2a92c2d22 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2024-09-12 10:16:07 +02:00 committed by Claire
parent caaa412e6e
commit 2d31cdbc28
5 changed files with 30 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/javascript/flavours/glitch/features/notifications_v2/components/notification_mention.tsx
View file

@ -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;

3
app/javascript/flavours/glitch/features/notifications_v2/index.tsx
View file

@ -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';

4
app/javascript/flavours/glitch/features/ui/containers/modal_container.js
View file

@ -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 => ({

19
app/javascript/flavours/glitch/features/ui/containers/notifications_container.js
View file

@ -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) => ({

25
app/javascript/flavours/glitch/selectors/index.js
View file

@ -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([