Skip to content

Commit

Permalink
change after review part II
Browse files Browse the repository at this point in the history
  • Loading branch information
@dzonidoo
dzonidoo committed Jun 4, 2024
1 parent a56070a commit 2d41bc7
Show file tree
Hide file tree
Showing 9 changed files with 193 additions and 177 deletions.
197 changes: 99 additions & 98 deletions assets/components/NotificationList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,28 @@ import {Tooltip} from 'bootstrap';
import {formatDate, gettext} from 'utils';
import {isTouchDevice} from '../utils';
import NotificationListItem from './NotificationListItem';
import {postNotificationSchedule} from 'user-profile/actions';
import {IUser} from 'interfaces';

interface IState {
displayItems: boolean;
connected: boolean;
}

class NotificationList extends React.Component<any, IState> {
interface IProps {
items: any;
count: number;
fullUser: IUser;
notifications: Array<any>;
loading: boolean;
clearNotification(id: IUser['_id']): void;
clearAll(): void;
loadNotifications(): void;
resumeNotifications(): void;
}

const NOTIFICATION_ARIA_LABEL = 'Notifications';

class NotificationList extends React.Component<IProps, IState> {
static propTypes: any;
tooltip: any;
elem: any;
Expand Down Expand Up @@ -75,92 +89,9 @@ class NotificationList extends React.Component<any, IState> {
}

render() {
const notificationPopUp = () => {
if (this.props.fullUser.notification_schedule?.pauseFrom != '' && this.props.fullUser.notification_schedule?.pauseFrom != '') {
return (
<div className="notif__list dropdown-menu dropdown-menu-right show">
<div className='notif__list__header d-flex'>
<span className='notif__list__header-headline ms-3'>{gettext('Notifications')}</span>
</div>

<div className='d-flex flex-column gap-2 p-3'>
<div className='nh-container nh-container__text--alert p-2'>
{gettext('All notifications are paused until {{pauseTo}}', {pauseTo: formatDate(this.props.fullUser.notification_schedule?.pauseTo)})}
</div>

<button
type="button"
className="nh-button nh-button--small nh-button--tertiary"
onClick={() => {
postNotificationSchedule(this.props.user, {pauseFrom: '', pauseTo: ''}).then(() =>
this.props.updateUserNotificationPause()
);
}}
>
{gettext('Resume all notifications')}
</button>
</div>
</div>
);
} else {
if (this.props.count === 0) {
return (
<div className="notif__list dropdown-menu dropdown-menu-right show">
<div className='notif__list__header d-flex'>
<span className='notif__list__header-headline ms-3'>{gettext('Notifications')}</span>
</div>

<div className='notif__list__message'>
{gettext('No new notifications!')}
</div>
</div>
);
} else {
<div className="notif__list dropdown-menu dropdown-menu-right show">
<div className='notif__list__header d-flex'>
<span className='notif__list__header-headline ms-3'>{gettext('Notifications')}</span>

<button
type="button"
className="button-pill ms-auto me-3"
onClick={this.props.clearAll}
>
{gettext('Clear All')}
</button>
</div>

<div className='p-3'>
<div className='nh-container nh-container__text--info p-2'>
{gettext('All notifications are set to be paused from {{pauseFrom}} to {{pauseTo}}', {pauseFrom: formatDate(this.props.fullUser.notification_schedule?.pauseFrom), pauseTo: formatDate(this.props.fullUser.notification_schedule?.pauseTo)})}
</div>
</div>

{this.props.loading ? (
<div className='notif__list__message'>
{gettext('Loading...')}
</div>
) : (
this.props.notifications.map((notification: any) => (
<NotificationListItem
key={get(this.props.items, `${notification.item}._id`, 'test')}
item={get(
this.props.items,
`${notification.item}`,
get(notification, 'data.item', {})
)}
notification={notification}
clearNotification={this.props.clearNotification}
/>
))
)}
</div>;
}
}
};

return (
<div className="navbar-notifications__inner">
<h3 className="a11y-only">Notification Bell</h3>
<h3 className="a11y-only">{gettext('{{label}}', {label: NOTIFICATION_ARIA_LABEL})}</h3>
{this.props.count > 0 &&
<div className="navbar-notifications__badge">
{this.props.count}
Expand All @@ -175,24 +106,94 @@ class NotificationList extends React.Component<any, IState> {
ref={(elem: any) => this.elem = elem}
title={gettext('Notifications')}
>
<h3 className="a11y-only">{gettext('Notification bell')}</h3>
<h3 className="a11y-only">{gettext('{{label}}', {label: NOTIFICATION_ARIA_LABEL})}</h3>
<i className='icon--alert' onClick={this.toggleDisplay} />
</span>

{this.state.displayItems && notificationPopUp()}
{this.state.displayItems
&& (() => {
if (this.props.fullUser.notification_schedule?.pauseFrom != '' && this.props.fullUser.notification_schedule?.pauseTo != '') {
return (
<div className="notif__list dropdown-menu dropdown-menu-right show">
<div className='notif__list__header d-flex'>
<span className='notif__list__header-headline ms-3'>{gettext('Notifications')}</span>
</div>

<div className='d-flex flex-column gap-2 p-3'>
<div className='nh-container nh-container__text--alert p-2'>
{gettext('All notifications are paused until {{date}}', {date: formatDate(this.props.fullUser.notification_schedule?.pauseTo)})}
</div>

<button
type="button"
className="nh-button nh-button--small nh-button--tertiary"
onClick={() => {
this.props.resumeNotifications();
}}
>
{gettext('Resume all notifications')}
</button>
</div>
</div>
);
} else {
if (this.props.count === 0) {
return (
<div className="notif__list dropdown-menu dropdown-menu-right show">
<div className='notif__list__header d-flex'>
<span className='notif__list__header-headline ms-3'>{gettext('Notifications')}</span>
</div>

<div className='notif__list__message'>
{gettext('No new notifications!')}
</div>
</div>
);
} else {
<div className="notif__list dropdown-menu dropdown-menu-right show">
<div className='notif__list__header d-flex'>
<span className='notif__list__header-headline ms-3'>{gettext('Notifications')}</span>

<button
type="button"
className="button-pill ms-auto me-3"
onClick={this.props.clearAll}
>
{gettext('Clear All')}
</button>
</div>

<div className='p-3'>
<div className='nh-container nh-container__text--info p-2'>
{gettext('All notifications are set to be paused from {{pauseFrom}} to {{pauseTo}}', {pauseFrom: formatDate(this.props.fullUser.notification_schedule.pauseFrom), pauseTo: formatDate(this.props.fullUser.notification_schedule.pauseTo)})}
</div>
</div>

{this.props.loading ? (
<div className='notif__list__message'>
{gettext('Loading...')}
</div>
) : (
this.props.notifications.map((notification: any) => (
<NotificationListItem
key={get(this.props.items, `${notification.item}._id`, 'test')}
item={get(
this.props.items,
`${notification.item}`,
get(notification, 'data.item', {})
)}
notification={notification}
clearNotification={this.props.clearNotification}
/>
))
)}
</div>;
}
}})()
}

Check failure on line 193 in assets/components/NotificationList.tsx

View workflow job for this annotation

GitHub Actions / client 

Expected indentation of 16 spaces but found 20
</div>
);
}
}

NotificationList.propTypes = {
items: PropTypes.object,
count: PropTypes.number,
notifications: PropTypes.array,
clearNotification: PropTypes.func,
clearAll: PropTypes.func,
loadNotifications: PropTypes.func,
loading: PropTypes.bool,
};

export default NotificationList;
10 changes: 10 additions & 0 deletions assets/helpers/notification.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import {IUser} from 'interfaces';
import server from 'server';
import {gettext, notify} from 'utils';

export function postNotificationSchedule(userId: string, schedule: Omit<IUser['notification_schedule'], 'last_run_time'>, message: string):Promise<void> {
return server.post(`/users/${userId}/notification_schedules`, schedule)
.then(() => {
notify.success(gettext(message));
});
}
18 changes: 6 additions & 12 deletions assets/notifications/actions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,19 +115,13 @@ export function pushNotification(push: any): any {
};
}

export function updateUserNotificationPause() {
export function updateFullUser() {
return (dispatch: any, getState: any) => {
const fullUser = getState().fullUser;
return dispatch(fetchUser(fullUser._id));
};
}

export function fetchUser(id: any) {
return function (dispatch: any) {
return server.get(`/users/${id}`)
.then((data: IUser) => {
dispatch(getUser(data));
})
.catch((error: any) => errorHandler(error, dispatch));
return server.get(`/users/${fullUser._id}`)
.then((data: IUser) => {

Check failure on line 122 in assets/notifications/actions.ts

View workflow job for this annotation

GitHub Actions / client 

Expected indentation of 12 spaces but found 8
dispatch(getUser(data));

Check failure on line 123 in assets/notifications/actions.ts

View workflow job for this annotation

GitHub Actions / client 

Expected indentation of 16 spaces but found 12
})

Check failure on line 124 in assets/notifications/actions.ts

View workflow job for this annotation

GitHub Actions / client 

Expected indentation of 12 spaces but found 8
.catch((error: any) => errorHandler(error, dispatch));

Check failure on line 125 in assets/notifications/actions.ts

View workflow job for this annotation

GitHub Actions / client 

Expected indentation of 12 spaces but found 8
};
}
17 changes: 10 additions & 7 deletions assets/notifications/components/NotificationsApp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,12 @@ import {
deleteNotification,
deleteAllNotifications,
loadNotifications,
updateUserNotificationPause,
updateFullUser,
} from '../actions';

import NotificationList from 'components/NotificationList';
import {postNotificationSchedule} from 'helpers/notification';
import {gettext} from 'utils';

class NotificationsApp extends React.Component<any, any> {
static propTypes: any;
Expand All @@ -28,15 +30,17 @@ class NotificationsApp extends React.Component<any, any> {
loadNotifications={this.props.loadNotifications}
loading={this.props.loading}
fullUser={this.props.fullUser}
user={this.props.user}
updateUserNotificationPause={this.props.updateUserNotificationPause}
resumeNotifications={() => {
postNotificationSchedule(this.props.fullUser._id, {pauseFrom: '', pauseTo: ''}, gettext('Notifications resumed')).then(() =>
this.props.resumeNotifications()
);
}}
/>,
];
}
}

NotificationsApp.propTypes = {
user: PropTypes.string,
fullUser: PropTypes.object,
items: PropTypes.object,
notifications: PropTypes.arrayOf(PropTypes.object),
Expand All @@ -48,7 +52,6 @@ NotificationsApp.propTypes = {
};

const mapStateToProps = (state: any) => ({
user: state.user,
fullUser: state.fullUser,
items: state.items,
notifications: state.notifications,
Expand All @@ -60,8 +63,8 @@ const mapDispatchToProps = (dispatch: any) => ({
clearNotification: (id: any) => dispatch(deleteNotification(id)),
clearAll: () => dispatch(deleteAllNotifications()),
loadNotifications: () => dispatch(loadNotifications()),
updateUserNotificationPause: () => (
dispatch(updateUserNotificationPause())
resumeNotifications: () => (
dispatch(updateFullUser())
),
});

Expand Down
26 changes: 3 additions & 23 deletions assets/user-profile/actions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {getLocale} from '../utils';
import {reloadMyTopics as reloadMyAgendaTopics} from '../agenda/actions';
import {reloadMyTopics as reloadMyWireTopics} from '../wire/actions';
import {IUserProfileUpdates} from 'interfaces/user';
import {postNotificationSchedule} from 'helpers/notification';

export const GET_TOPICS = 'GET_TOPICS';
export function getTopics(topics: any) {
Expand Down Expand Up @@ -350,32 +351,11 @@ export function moveTopic(topicId: any, folder: ITopicFolder | null) {
};
}

export function updateUserNotificationSchedules(schedule: Omit<IUser['notification_schedule'], 'last_run_time'>) {
export function updateUserNotificationSchedule(schedule: Omit<IUser['notification_schedule'], 'last_run_time'>, message: string) {
return (dispatch: any, getState: any) => {
const user = getState().user;

return server.post(`/users/${user._id}/notification_schedules`, schedule)
.then(() => {
notify.success(gettext('Global schedule updated'));
dispatch(fetchUser(user._id));
dispatch(closeModal());
})
.catch((error) => errorHandler(error, dispatch, setError(error)));
};
}

export function postNotificationSchedule(userId: string, schedule: Omit<IUser['notification_schedule'], 'last_run_time'>):Promise<void> {
return server.post(`/users/${userId}/notification_schedules`, schedule)
.then(() => {
notify.success(gettext('pause notification updated'));
});
}

export function updateUserNotificationPause(schedule: Omit<IUser['notification_schedule'], 'last_run_time'>) {
return (dispatch: any, getState: any) => {
const user = getState().user;

return postNotificationSchedule(user._id, schedule)
return postNotificationSchedule(user._id, schedule, message)
.then(() => {
dispatch(fetchUser(user._id));
dispatch(closeModal());
Expand Down
Loading

0 comments on commit 2d41bc7

Please sign in to comment.