Skip to content

Commit e7572e3

Browse files
bestinbthomasbestinbthomas
committed
Change notification to react-toast-notification
1 parent e3ef5a0 commit e7572e3

File tree

8 files changed

+84
-119
lines changed

8 files changed

+84
-119
lines changed

‎package.json‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,9 @@
7272
"@types/jest": "^23.3.10",
7373
"@types/node": "10.11.7",
7474
"@types/pako": "^1.0.0",
75-
"@types/react": "^16.4.16",
75+
"@types/react": "^16.9.19",
7676
"@types/react-bootstrap": "^0.32.15",
77-
"@types/react-dom": "^16.0.9",
77+
"@types/react-dom": "^16.9.5",
7878
"@types/react-flags-select": "^1.1.2",
7979
"@types/react-google-recaptcha": "^0.10.0",
8080
"@types/react-paginate": "^6.2.0",
@@ -106,7 +106,6 @@
106106
"jest-css-modules": "^1.1.0",
107107
"lint-staged": "^8.1.0",
108108
"mini-css-extract-plugin": "^0.4.4",
109-
"pnotify": "4.0.0-alpha.2",
110109
"postcss": "^7.0.5",
111110
"postcss-browser-reporter": "^0.5.0",
112111
"postcss-import": "^12.0.0",
@@ -135,17 +134,19 @@
135134
"dependencies": {
136135
"@types/commonmark": "^0.27.3",
137136
"@types/react-router-dom": "^5.1.3",
137+
"@types/react-toast-notifications": "^2.4.0",
138138
"bootstrap": "^4.2.1",
139139
"classnames": "^2.2.6",
140140
"codecharacter-renderer": "^2.3.1",
141141
"commonmark": "^0.28.1",
142142
"copy-webpack-plugin": "^5.0.0",
143+
"nvm": "0.0.4",
143144
"pako": "^1.0.10",
144-
"react": "^16.5.2",
145+
"react": "^16.12.0",
145146
"react-ace": "^6.2.0",
146147
"react-bootstrap": "^0.32.4",
147148
"react-country-flag": "^1.0.1",
148-
"react-dom": "^16.5.2",
149+
"react-dom": "^16.12.0",
149150
"react-flags-select": "^1.1.10",
150151
"react-ga": "^2.7.0",
151152
"react-google-recaptcha": "^1.0.5",
@@ -160,6 +161,7 @@
160161
"react-router-redux": "^4.0.8",
161162
"react-spinners": "^0.5.1",
162163
"react-split-pane": "^0.1.84",
164+
"react-toast-notifications": "^2.4.0",
163165
"redux": "^4.0.1",
164166
"redux-actions": "^2.6.1",
165167
"redux-persist": "^5.10.0",

‎src/app/components/SocketHandler.tsx‎

Lines changed: 51 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -2,111 +2,102 @@ import { SOCKET_BASE_URL } from 'app/../config/config';
22
import * as SocketHandlerInterfaces from 'app/types/SocketHandler';
33
import * as React from 'react';
44
import * as io from 'socket.io-client';
5+
import { useToasts } from 'react-toast-notifications';
56

6-
export class SocketHandler extends React.Component<SocketHandlerInterfaces.Props, {}> {
7-
private socket: SocketIOClient.Socket;
8-
constructor(props: SocketHandlerInterfaces.Props) {
9-
super(props);
10-
this.socket = io.connect(SOCKET_BASE_URL, {
11-
reconnection: true,
12-
reconnectionDelay: 1000,
13-
transports: ['websocket'],
14-
});
15-
}
7+
export const SocketHandler = (props: SocketHandlerInterfaces.Props) => {
8+
const { addToast } = useToasts();
9+
const socket: SocketIOClient.Socket = io.connect(SOCKET_BASE_URL, {
10+
reconnection: true,
11+
reconnectionDelay: 1000,
12+
transports: ['websocket'],
13+
});
1614

17-
public componentDidMount() {
15+
React.useEffect(() => {
1816
const {
1917
sendCompileError,
2018
sendCompileSuccess,
2119
sendExecuteError,
2220
sendExecuteSuccess,
23-
sendInfo,
24-
sendSuccess,
25-
sendError,
2621
sendDebugRunSuccess,
2722
sendDebugRunError,
28-
} = this.props;
23+
} = props;
2924

30-
this.socket.on('Info', (message: string) => {
31-
sendInfo(message);
25+
socket.on('Info', (message: string) => {
26+
addToast(message, { appearance: 'info', autoDismiss: true });
3227
});
3328

34-
this.socket.on('Success', (message: string) => {
35-
sendSuccess(message);
29+
socket.on('Success', (message: string) => {
30+
addToast(message, { appearance: 'success', autoDismiss: true });
3631
});
3732

38-
this.socket.on('Error', (message: string) => {
39-
sendError(message);
33+
socket.on('Error', (message: string) => {
34+
addToast(message, { appearance: 'error', autoDismiss: true });
4035
});
4136

42-
this.socket.on('connect', () => {
43-
sendSuccess('Connected to Server!');
37+
socket.on('connect', () => {
38+
addToast('Connected to Server!', { appearance: 'success', autoDismiss: true });
4439
});
4540

46-
this.socket.on('Compile Info', (message: string) => {
47-
sendInfo(message);
41+
socket.on('Compile Info', (message: string) => {
42+
addToast(message, { appearance: 'info', autoDismiss: true });
4843
});
4944

50-
this.socket.on('Compile Success', () => {
51-
sendSuccess('Compiled Successfully!');
45+
socket.on('Compile Success', () => {
46+
addToast('Compiled Successfully!', { appearance: 'success', autoDismiss: true });
5247
sendCompileSuccess();
5348
});
5449

55-
this.socket.on('Compile Error', (message: string) => {
56-
sendError(`Compile Error: ${message}`);
57-
sendCompileError('');
50+
socket.on('Compile Error', (message: string) => {
51+
addToast(`Compile Error: ${message}`, { appearance: 'error', autoDismiss: true }),
52+
sendCompileError('');
5853
});
5954

60-
this.socket.on('Compile Error Log', (log: string) => {
61-
sendError('Compile Error');
62-
sendCompileError(log);
55+
socket.on('Compile Error Log', (log: string) => {
56+
addToast('Compile Error', { appearance: 'error', autoDismiss: true }), sendCompileError(log);
6357
});
6458

65-
this.socket.on('Match Info', (message: string) => {
66-
sendInfo(message);
59+
socket.on('Match Info', (message: string) => {
60+
addToast(message, { appearance: 'info', autoDismiss: true });
6761
});
6862

69-
this.socket.on('Match Error', (message: string) => {
70-
sendError(message);
71-
sendExecuteError(message);
63+
socket.on('Match Error', (message: string) => {
64+
addToast(message, { appearance: 'error', autoDismiss: true }), sendExecuteError(message);
7265
});
7366

74-
this.socket.on('Match Result Success', (result: string) => {
75-
sendSuccess(result);
67+
socket.on('Match Result Success', (result: string) => {
68+
addToast(result, { appearance: 'success', autoDismiss: true });
7669
});
7770

78-
this.socket.on('Match Result Error', (result: string) => {
79-
sendError(result);
71+
socket.on('Match Result Error', (result: string) => {
72+
addToast(result, { appearance: 'error', autoDismiss: true });
8073
});
8174

82-
this.socket.on('Match Success', (matchLogs: string) => {
83-
sendSuccess('Match Executed Successfully!');
75+
socket.on('Match Success', (matchLogs: string) => {
76+
addToast('Match Executed Successfully!', { appearance: 'success', autoDismiss: true });
8477
sendExecuteSuccess(matchLogs);
8578
});
8679

87-
this.socket.on('Debug Run Info', (message: string) => {
88-
sendInfo(message);
80+
socket.on('Debug Run Info', (message: string) => {
81+
addToast(message, { appearance: 'info', autoDismiss: true });
8982
});
9083

91-
this.socket.on('Debug Run Success', (stackTrace: string) => {
84+
socket.on('Debug Run Success', (stackTrace: string) => {
9285
sendDebugRunSuccess(stackTrace);
9386
});
9487

95-
this.socket.on('Debug Run Error', (message: string) => {
96-
sendError(`Debug Run Error: ${message}`);
97-
sendDebugRunError();
88+
socket.on('Debug Run Error', (message: string) => {
89+
addToast(`Debug Run Error: ${message}`, { appearance: 'error', autoDismiss: true }),
90+
sendDebugRunError();
9891
});
9992

100-
this.socket.on('disconnect', () => {
101-
sendError('Disconnected');
93+
socket.on('disconnect', () => {
94+
addToast('Disconnected', { appearance: 'error', autoDismiss: true });
10295
});
103-
}
10496

105-
public componentWillUnmount() {
106-
this.socket.disconnect();
107-
}
97+
return () => {
98+
socket.disconnect();
99+
};
100+
}, []);
108101

109-
public render() {
110-
return null;
111-
}
112-
}
102+
return null;
103+
};

‎src/app/containers/SocketHandler.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { NotificationActions, SubmissionActions } from 'app/actions';
1+
import { SubmissionActions } from 'app/actions';
22
import { SocketHandler } from 'app/components/SocketHandler';
33
import { RootState } from 'app/reducers';
44
import * as SocketHandlerInterfaces from 'app/types/SocketHandler';
@@ -16,11 +16,8 @@ const mapDispatchToProps = (dispatch: Dispatch) => {
1616
sendDebugRunError: () => dispatch(SubmissionActions.handleDebugRunError()),
1717
sendDebugRunSuccess: (stackTrace: string) =>
1818
dispatch(SubmissionActions.handleDebugRunSuccess(stackTrace)),
19-
sendError: (message: string) => dispatch(NotificationActions.error(message)),
2019
sendExecuteError: (error: string) => dispatch(SubmissionActions.handleExecuteError(error)),
2120
sendExecuteSuccess: (logs: string) => dispatch(SubmissionActions.handleExecuteSuccess(logs)),
22-
sendInfo: (message: string) => dispatch(NotificationActions.info(message)),
23-
sendSuccess: (message: string) => dispatch(NotificationActions.success(message)),
2421
};
2522
};
2623

‎src/app/index.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,23 @@ import * as React from 'react';
1010
import { hot } from 'react-hot-loader';
1111
// @ts-ignore
1212
import { Sugar } from 'react-preloaders';
13+
import { ToastProvider } from 'react-toast-notifications';
1314
import { BrowserRouter, Route, Switch } from 'react-router-dom';
1415

1516
initializeRendererAssets();
1617

1718
/* tslint:disable-next-line:variable-name */
1819
export const App = hot(module)(() => (
1920
<BrowserRouter>
20-
<Switch>
21-
<Route exact path={Routes.ROOT} component={Dashboard} />
22-
<Route exact path={Routes.LOGIN} component={Login} />
23-
<Route exact path={Routes.REGISTER} component={Register} />
24-
<Route exact path={Routes.LEADERBOARD} component={Leaderboard} />
25-
<Route exact path={Routes.USER_PROFILE_MODEL} component={UserProfileModal} />
26-
</Switch>
27-
<Sugar background="#484848" color="white" />
21+
<ToastProvider placement="bottom-right">
22+
<Switch>
23+
<Route exact path={Routes.ROOT} component={Dashboard} />
24+
<Route exact path={Routes.LOGIN} component={Login} />
25+
<Route exact path={Routes.REGISTER} component={Register} />
26+
<Route exact path={Routes.LEADERBOARD} component={Leaderboard} />
27+
<Route exact path={Routes.USER_PROFILE_MODEL} component={UserProfileModal} />
28+
</Switch>
29+
<Sugar background="#484848" color="white" />
30+
</ToastProvider>
2831
</BrowserRouter>
2932
));

‎src/app/reducers/Notification.ts‎

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,6 @@ import { NotificationActions } from 'app/actions';
22
import * as NotificationInterfaces from 'app/types/Notification';
33

44
// @ts-ignore
5-
import PNotify from 'pnotify/dist/es/PNotify';
6-
import 'pnotify/dist/es/PNotifyButtons';
7-
import 'pnotify/dist/PNotifyBrightTheme.css';
8-
9-
const stackBottomRight = {
10-
...PNotify.defaultStack,
11-
dir1: 'up',
12-
dir2: 'left',
13-
};
14-
15-
const pnotifyOptions = (title: string) => {
16-
return {
17-
title,
18-
addclass: 'stack-bottomright',
19-
buttons: {
20-
closer: true,
21-
sticker: true,
22-
},
23-
delay: 5000,
24-
stack: stackBottomRight,
25-
text: false,
26-
};
27-
};
285

296
const notificationInitialState: NotificationInterfaces.NotificationStoreState = {
307
loading: false,
@@ -37,17 +14,17 @@ export const notificationReducer = (
3714
) => {
3815
switch (action.type) {
3916
case NotificationActions.Type.INFO: {
40-
PNotify.info(pnotifyOptions(action.payload.message));
17+
// addToast(action.payload.message, { appearance: 'info' });
4118
return state;
4219
}
4320

4421
case NotificationActions.Type.SUCCESS: {
45-
PNotify.success(pnotifyOptions(action.payload.message));
22+
// addToast(action.payload.message, { appearance: 'success' });
4623
return state;
4724
}
4825

4926
case NotificationActions.Type.ERROR: {
50-
PNotify.error(pnotifyOptions(action.payload.message));
27+
// addToast(action.payload.message, { appearance: 'error' });
5128
return state;
5229
}
5330

‎src/app/styles/Authentication.module.css‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,8 @@
107107
overflow-y: hidden !important;
108108
}
109109

110-
.stage-form{
111-
width:390px;
112-
110+
.stage-form {
111+
width: 390px;
113112
}
114113

115114
.avatar-img {
@@ -147,7 +146,6 @@
147146
margin-top: 3% !important;
148147
}
149148

150-
151149
.login-error {
152150
background-color: #fee5d4;
153151
padding: 9px;
@@ -246,11 +244,13 @@
246244
cursor: pointer;
247245
}
248246

249-
.left-arrow:active ,.left-arrow:focus {
247+
.left-arrow:active,
248+
.left-arrow:focus {
250249
transform: scale(0.9);
251250
}
252251

253-
.right-arrow:active , .right-arrow:focus{
252+
.right-arrow:active,
253+
.right-arrow:focus {
254254
transform: scale(0.9);
255255
}
256256

@@ -352,8 +352,6 @@
352352
border-radius: 5px;
353353
}
354354

355-
356-
357355
.multi-steps > li.is-active:before,
358356
.multi-steps > li.is-active ~ li:before {
359357
content: counter(stepNum);
@@ -409,7 +407,7 @@
409407
.multi-steps li.is-active {
410408
color: #4630eb;
411409
}
412-
.multi-steps li:active:before{
410+
.multi-steps li:active:before {
413411
transform: scale(0.9);
414412
}
415413

‎src/app/types/SocketHandler.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@ export interface DispatchProps {
55
sendCompileSuccess: () => void;
66
sendDebugRunError: () => void;
77
sendDebugRunSuccess: (stackTrace: string) => void;
8-
sendError: (message: string) => void;
9-
sendInfo: (message: string) => void;
10-
sendSuccess: (message: string) => void;
118
}
129

1310
export type Props = DispatchProps;

‎src/assets/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta charset="utf-8">
4+
<meta charset="utf-8" />
55
<script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>
6-
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
7-
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
6+
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet" />
7+
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
88
<title>Code Character</title>
99
</head>
1010
<body>

0 commit comments

Comments
 (0)