Skip to content

Commit 2ce5f51

Browse files
bestinbthomaskumaran-14
bestinbthomas
authored and
kumaran-14
committed
Change notification to react-toast-notification
- Ignore variable-name rule for functional sockethandler component
1 parent 8bbbfa3 commit 2ce5f51

File tree

7 files changed

+76
-108
lines changed

7 files changed

+76
-108
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: 52 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,104 @@
11
import { SOCKET_BASE_URL } from 'app/../config/config';
22
import * as SocketHandlerInterfaces from 'app/types/SocketHandler';
33
import * as React from 'react';
4+
import { useToasts } from 'react-toast-notifications';
45
import * as io from 'socket.io-client';
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+
// tslint:disable-next-line: variable-name
8+
export const SocketHandler = (props: SocketHandlerInterfaces.Props) => {
9+
const { addToast } = useToasts();
10+
const socket: SocketIOClient.Socket = io.connect(SOCKET_BASE_URL, {
11+
reconnection: true,
12+
reconnectionDelay: 1000,
13+
transports: ['websocket'],
14+
});
1615

17-
public componentDidMount() {
16+
React.useEffect(() => {
1817
const {
1918
sendCompileError,
2019
sendCompileSuccess,
2120
sendExecuteError,
2221
sendExecuteSuccess,
23-
sendInfo,
24-
sendSuccess,
25-
sendError,
2622
sendDebugRunSuccess,
2723
sendDebugRunError,
28-
} = this.props;
24+
} = props;
2925

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

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

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

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

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

50-
this.socket.on('Compile Success', () => {
51-
sendSuccess('Compiled Successfully!');
46+
socket.on('Compile Success', () => {
47+
addToast('Compiled Successfully!', { appearance: 'success', autoDismiss: true });
5248
sendCompileSuccess();
5349
});
5450

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

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

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

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

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

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

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

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

91-
this.socket.on('Debug Run Success', (stackTrace: string) => {
85+
socket.on('Debug Run Success', (stackTrace: string) => {
9286
sendDebugRunSuccess(stackTrace);
9387
});
9488

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

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

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

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

‎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
@@ -11,19 +11,22 @@ import { hot } from 'react-hot-loader';
1111
// @ts-ignore
1212
import { Sugar } from 'react-preloaders';
1313
import { BrowserRouter, Route, Switch } from 'react-router-dom';
14+
import { ToastProvider } from 'react-toast-notifications';
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/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: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
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>
66
<link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
77
<title>Code Character</title>

0 commit comments

Comments
 (0)