Merge pull request #596 from anyproto/feature/notifications

Feature/JS-4018: New notifications

src/json/text.json

@@ -1728,6 +1728,12 @@
 
 	"notificationJoinSuccessText": "<b>%s</b> has requested to join <b>\"%s\"</b> space",
 
+	"notificationLeaveSuccessText": "<b>%s</b> wants to leave <b>\"%s\"</b> space",
+
+	"notificationApproveSuccessText": "Your request to join <b>\"%s\"</b> space has been approved with <b>%s</b> access rights. The space will be available in your account soon.",
+
+	"notificationRemoveSuccessText": "You were removed from <b>\"%s\"</b> space",
+
 	"notificationButtonSpace": "Go to Space",
 	"notificationButtonRequest": "View request",
 

src/ts/component/notification/index.tsx

@@ -1,16 +1,11 @@
 import * as React from 'react';
 import $ from 'jquery';
 import { observer } from 'mobx-react';
-import { Icon } from 'Component';
-import { I, C, UtilRouter } from 'Lib';
-import { notificationStore, popupStore } from 'Store';
+import { Icon, Title, Label, Button } from 'Component';
+import { I, C, UtilRouter, translate } from 'Lib';
+import { notificationStore, popupStore, commonStore } from 'Store';
 import Constant from 'json/constant.json';
 
-import NotificationImport from './import';
-import NotificationExport from './export';
-import NotificationGallery from './gallery';
-import NotificationJoin from './join';
-
 const Notification = observer(class Notification extends React.Component<I.NotificationComponent, {}> {
 
 	_isMounted = false;
@@ -26,27 +21,29 @@ const Notification = observer(class Notification extends React.Component<I.Notif
 
 	render () {
 		const { item, style } = this.props;
-		const { id, type } = item;
+		const { space } = commonStore;
+		const { id, type, payload, title, text } = item;
+		const { errorCode, spaceId } = payload;
+
+		let buttons = [];
 
-		let content = null;
 		switch (type) {
+			case I.NotificationType.Gallery:
+			case I.NotificationType.Export:
 			case I.NotificationType.Import: {
-				content = <NotificationImport {...this.props} onButton={this.onButton} />;
-				break;
-			};
-
-			case I.NotificationType.Export: {
-				content = <NotificationExport {...this.props} onButton={this.onButton} />;
-				break;
-			};
-
-			case I.NotificationType.Gallery: {
-				content = <NotificationGallery {...this.props} onButton={this.onButton} />;
+				if (!errorCode && (spaceId != space)) {
+					buttons = buttons.concat([
+						{ id: 'space', text: translate('notificationButtonSpace') }
+					]);
+				};
 				break;
 			};
 
 			case I.NotificationType.Join: {
-				content = <NotificationJoin {...this.props} onButton={this.onButton} />;
+				buttons = buttons.concat([
+					{ id: 'space', text: translate('notificationButtonSpace') },
+					{ id: 'request', text: translate('notificationButtonRequest') }
+				]);
 				break;
 			};
 		};
@@ -59,7 +56,18 @@ const Notification = observer(class Notification extends React.Component<I.Notif
 				style={style}
 			>
 				<Icon className="delete" onClick={this.onDelete} />
-				<div className="content">{content}</div>
+				<div className="content">
+					{title ? <Title text={title} /> : ''}
+					{text ? <Label text={text} /> : ''}
+
+					{buttons.length ? (
+						<div className="buttons">
+							{buttons.map((item: any, i: number) => (
+								<Button key={i} color="blank" className="c28" {...item} onClick={e => this.onButton(e, item.id)} />
+							))}
+						</div>
+					) : ''}
+				</div>
 			</div>
 		);
 	};

src/ts/interface/notification.ts

@@ -6,6 +6,9 @@ export enum NotificationType {
 	Export	 = 'export',
 	Gallery	 = 'galleryImport',
 	Join	 = 'requestToJoin',
+	Leave	 = 'requestToLeave',
+	Approve	 = 'participantRequestApproved',
+	Remove	 = 'participantRemove',
 };
 
 export enum NotificationStatus {
@@ -41,6 +44,5 @@ export interface NotificationPayloadImport {
 export interface NotificationComponent {
 	item: Notification;
 	style?: any;
-	onButton?: (e: any, action: string) => void;
 	resize?: () => void;
 };

src/ts/lib/api/mapper.ts

@@ -46,6 +46,9 @@ export const Mapper = {
 		if (v == V.EXPORT)			 t = 'export';
 		if (v == V.GALLERYIMPORT)	 t = 'galleryImport';
 		if (v == V.REQUESTTOJOIN)	 t = 'requestToJoin';
+		if (v == V.REQUESTTOLEAVE)	 t = 'requestToLeave';
+		if (v == V.PARTICIPANTREQUESTAPPROVED)	 t = 'participantRequestApproved';
+		if (v == V.PARTICIPANTREMOVE) t = 'participantRemove';
 
 		return t;
 	},
@@ -491,8 +494,8 @@ export const Mapper = {
 			if (field) {
 				switch (type) {
 
-					case 'import':
-					case 'galleryImport': {
+					case I.NotificationType.Import:
+					case I.NotificationType.Gallery: {
 						payload = Object.assign(payload, {
 							processId: field.getProcessid(),
 							errorCode: field.getErrorcode(),
@@ -506,15 +509,17 @@ export const Mapper = {
 						break;
 					};
 
-					case 'export': {
+					case I.NotificationType.Export: {
 						payload = Object.assign(payload, {
 							errorCode: field.getErrorcode(),
 							exportType: field.getExporttype(),
 						});
 						break;
 					};
 
-					case 'requestToJoin': {
+					case I.NotificationType.Join: 
+					case I.NotificationType.Leave: 
+					case I.NotificationType.Remove: {
 						payload = Object.assign(payload, {
 							spaceId: field.getSpaceid(),
 							identity: field.getIdentity(),
@@ -524,6 +529,14 @@ export const Mapper = {
 						break;
 					};
 
+					case I.NotificationType.Approve: {
+						payload = Object.assign(payload, {
+							spaceId: field.getSpaceid(),
+        					permissions: field.getPermissions(),
+						});
+						break;
+					};
+
 				};
 			};
 

src/ts/model/notification.ts

@@ -31,14 +31,16 @@ class Notification implements I.Notification {
 	};
 
 	fillContent () {
-		const { importType, errorCode, name, spaceId, identityName } = this.payload;
+		const { importType, errorCode, name, spaceId, identityName, permissions } = this.payload;
 		const space = spaceId ? UtilObject.getSpaceviewBySpaceId(spaceId) : null;
 		const lang = errorCode ? 'error' : 'success';
 		const et = UtilCommon.enumKey(I.NotificationType, this.type);
 
 		this.title = translate(UtilCommon.toCamelCase(`notification-${et}-${lang}-title`));
 		this.text = translate(UtilCommon.toCamelCase(`notification-${et}-${lang}-text`));
 
+		console.log(this);
+
 		switch (this.type) {
 			case I.NotificationType.Import: {
 				if ((importType == I.ImportType.Notion) && (errorCode == Errors.Code.NO_OBJECTS_TO_IMPORT)) {
@@ -58,12 +60,25 @@ class Notification implements I.Notification {
 				break;
 			};
 
-			case I.NotificationType.Join: {
+			case I.NotificationType.Join: 
+			case I.NotificationType.Leave: {
 				this.title = '';
 				this.text = UtilCommon.sprintf(this.text, identityName, space?.name);
 				break;
 			};
 
+			case I.NotificationType.Approve: {
+				this.title = '';
+				this.text = UtilCommon.sprintf(this.text, space?.name, translate(`participantPermissions${permissions}`));
+				break;
+			};
+
+			case I.NotificationType.Remove: {
+				this.title = '';
+				this.text = UtilCommon.sprintf(this.text, space?.name);
+				break;
+			};
+
 		};
 	};