diff --git a/services/web/frontend/js/features/project-list/components/notifications/groups/common.tsx b/services/web/frontend/js/features/project-list/components/notifications/groups/common.tsx index 1a08f7eed5..2a63fe6dd9 100644 --- a/services/web/frontend/js/features/project-list/components/notifications/groups/common.tsx +++ b/services/web/frontend/js/features/project-list/components/notifications/groups/common.tsx @@ -1,4 +1,3 @@ -import { Fragment } from 'react' import { useTranslation, Trans } from 'react-i18next' import { Button } from 'react-bootstrap' import Notification from '../notification' @@ -12,9 +11,27 @@ import { Notification as NotificationType } from '../../../../../../../types/pro import { User } from '../../../../../../../types/user' function Common() { + const notifications = getMeta('ol-notifications', []) as NotificationType[] + if (!notifications.length) { + return null + } + + return ( + <> + {notifications.map((notification, index) => ( + + ))} + + ) +} + +type CommonNotificationProps = { + notification: NotificationType +} + +function CommonNotification({ notification }: CommonNotificationProps) { const { t } = useTranslation() const { samlInitPath } = getMeta('ol-ExposedSettings') as ExposedSettings - const notifications = getMeta('ol-notifications', []) as NotificationType[] const user = getMeta('ol-user', []) as Pick const { isLoading, isSuccess, error, runAsync } = useAsync< never, @@ -25,245 +42,216 @@ function Common() { // 404 probably means the invite has already been accepted and deleted. Treat as success const accepted = isSuccess || error?.response?.status === 404 - const handleAcceptInvite = (projectId: number | string, token: string) => { + function handleAcceptInvite() { + const { + messageOpts: { projectId, token }, + } = notification runAsync( postJSON(`/project/${projectId}/invite/token/${token}/accept`) ).catch(console.error) } - if (!notifications.length) { - return null - } + const { _id: id, templateKey, messageOpts, html } = notification return ( <> - {notifications.map( - ({ _id: id, templateKey, messageOpts, html }, index) => ( - - {templateKey === 'notification_project_invite' ? ( - id && handleDismiss(id)} - > - - {accepted ? ( - }} - values={{ projectName: messageOpts.projectName }} - /> - ) : ( - }} - values={{ - userName: messageOpts.userName, - projectName: messageOpts.projectName, - }} - /> - )} - - - {accepted ? ( - - ) : ( - - )} - - - ) : templateKey === 'wfh_2020_upgrade_offer' ? ( - id && handleDismiss(id)} - > - - Important notice: Your free WFH2020 upgrade came to an end on - June 30th 2020. We're still providing a number of special - initiatives to help you continue collaborating throughout - 2020. - - - - - - ) : templateKey === 'notification_ip_matched_affiliation' ? ( - id && handleDismiss(id)} - > - - ]} // eslint-disable-line react/jsx-key - values={{ - institutionName: messageOpts.university_name, - }} - /> -
- {messageOpts.ssoEnabled ? ( - <> - ]} // eslint-disable-line react/jsx-key - /> -
- {t('link_institutional_email_get_started')}{' '} - - {t('find_out_more_nt')} - - - ) : ( - <> - ]} // eslint-disable-line react/jsx-key - values={{ - institutionName: messageOpts.university_name, - }} - /> -
- {t('add_email_to_claim_features')} - - )} - - - - - - ) : templateKey === 'notification_tpds_file_limit' ? ( - id && handleDismiss(id)} - > - - Error: Your project {messageOpts.projectName} has gone over - the 2000 file limit using an integration (e.g. Dropbox or - GitHub)
- Please decrease the size of your project to prevent further - errors. - - - - - - ) : templateKey === - 'notification_dropbox_duplicate_project_names' ? ( - id && handleDismiss(id)} - > - -

- ]} // eslint-disable-line react/jsx-key - values={{ projectName: messageOpts.projectName }} - /> -

-

- ]} // eslint-disable-line react/jsx-key - />{' '} - - {t('learn_more')} - - . -

- - - ) : templateKey === - 'notification_dropbox_unlinked_due_to_lapsed_reconfirmation' ? ( - id && handleDismiss(id)} - > - - ]} // eslint-disable-line react/jsx-key - />{' '} - {user.features?.dropbox ? ( - ]} - /> - ) : ( - t('confirm_affiliation_to_relink_dropbox') - )}{' '} - - {t('learn_more')} - - - + {templateKey === 'notification_project_invite' ? ( + id && handleDismiss(id)}> + + {accepted ? ( + }} + values={{ projectName: messageOpts.projectName }} + /> ) : ( - id && handleDismiss(id)} - > - {html} - + }} + values={{ + userName: messageOpts.userName, + projectName: messageOpts.projectName, + }} + /> )} - - ) + + + {accepted ? ( + + ) : ( + + )} + + + ) : templateKey === 'wfh_2020_upgrade_offer' ? ( + id && handleDismiss(id)}> + + Important notice: Your free WFH2020 upgrade came to an end on June + 30th 2020. We're still providing a number of special initiatives to + help you continue collaborating throughout 2020. + + + + + + ) : templateKey === 'notification_ip_matched_affiliation' ? ( + id && handleDismiss(id)}> + + ]} // eslint-disable-line react/jsx-key + values={{ + institutionName: messageOpts.university_name, + }} + /> +
+ {messageOpts.ssoEnabled ? ( + <> + ]} // eslint-disable-line react/jsx-key + /> +
+ {t('link_institutional_email_get_started')}{' '} + + {t('find_out_more_nt')} + + + ) : ( + <> + ]} // eslint-disable-line react/jsx-key + values={{ + institutionName: messageOpts.university_name, + }} + /> +
+ {t('add_email_to_claim_features')} + + )} + + + + + + ) : templateKey === 'notification_tpds_file_limit' ? ( + id && handleDismiss(id)} + > + + Error: Your project {messageOpts.projectName} has gone over the 2000 + file limit using an integration (e.g. Dropbox or GitHub)
+ Please decrease the size of your project to prevent further errors. + + + + + + ) : templateKey === 'notification_dropbox_duplicate_project_names' ? ( + id && handleDismiss(id)} + > + +

+ ]} // eslint-disable-line react/jsx-key + values={{ projectName: messageOpts.projectName }} + /> +

+

+ ]} // eslint-disable-line react/jsx-key + />{' '} + + {t('learn_more')} + + . +

+ + + ) : templateKey === + 'notification_dropbox_unlinked_due_to_lapsed_reconfirmation' ? ( + id && handleDismiss(id)}> + + ]} // eslint-disable-line react/jsx-key + />{' '} + {user.features?.dropbox ? ( + ]} + /> + ) : ( + t('confirm_affiliation_to_relink_dropbox') + )}{' '} + + {t('learn_more')} + + + + ) : ( + id && handleDismiss(id)}> + {html} + )} )