Skip to content

Commit b7f34cb

Browse files
committed
Prettier applied
1 parent ba14977 commit b7f34cb

File tree

23 files changed

+521
-371
lines changed

23 files changed

+521
-371
lines changed

public/dist/index.html

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Simple Chat Application</title>
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
11+
/>
12+
</head>
313

4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8-
<title>Simple Chat Application</title>
9-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
10-
</head>
11-
12-
<body>
13-
<div id="app"></div>
14-
<script src="main.js"></script>
15-
</body>
16-
17-
</html>
14+
<body>
15+
<div id="app"></div>
16+
<script src="main.js"></script>
17+
</body>
18+
</html>

public/src/App.js

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
1-
import { useState } from 'react';
1+
import { useState } from "react"
22

3-
// components
4-
import Header from './components/layout/Header';
5-
import Content from './components/Content';
6-
import Footer from './components/layout/Footer';
7-
import Login from './components/login/Login';
3+
// components
4+
import Header from "./components/layout/Header"
5+
import Content from "./components/Content"
6+
import Footer from "./components/layout/Footer"
7+
import Login from "./components/login/Login"
88

99
// css
10-
import './css/style.css'
10+
import "./css/style.css"
1111

1212
const App = () => {
13-
1413
// Initialize the initial state and its modifier function
15-
const [appData, setAppData] = useState(
16-
{
17-
showContent: false,
18-
showBackButton: false
19-
})
14+
const [appData, setAppData] = useState({
15+
showContent: false,
16+
showBackButton: false,
17+
})
2018

21-
// toggle the message panel
19+
// toggle the message panel
2220
const toggleBackButton = (showBackButton) => {
2321
setAppData({ ...appData, showBackButton })
2422
}
@@ -30,14 +28,23 @@ const App = () => {
3028
const { showContent, userInfo, showBackButton } = appData
3129
return (
3230
<div className="container">
33-
{ /* including the Title and other components */}
31+
{/* including the Title and other components */}
3432
<Header userInfo={userInfo} />
35-
{(showContent == false) ? <Login onSuccessLogin={onSuccessLogin} /> : <Content userInfo={userInfo} showBackButton={showBackButton} toggleBackButton={toggleBackButton} />}
33+
{showContent == false ? (
34+
<Login onSuccessLogin={onSuccessLogin} />
35+
) : (
36+
<Content
37+
userInfo={userInfo}
38+
showBackButton={showBackButton}
39+
toggleBackButton={toggleBackButton}
40+
/>
41+
)}
3642
<Footer
3743
showBackButton={showBackButton}
38-
toggleBackButton={toggleBackButton} />
44+
toggleBackButton={toggleBackButton}
45+
/>
3946
</div>
40-
);
47+
)
4148
}
4249

43-
export default App;
50+
export default App

public/src/components/Constants.js

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
// list of all the constants
22
const Constants = () => {
3-
4-
const url = 'http://localhost:3000/services'
3+
const url = "http://localhost:3000/services"
54
return {
6-
75
// all the URLs
86
url,
97
login: `${url}/login`,
@@ -13,36 +11,48 @@ const Constants = () => {
1311
saveReadStatus: `${url}/updateroomreadstatus`,
1412

1513
// the Content-Type
16-
header: { 'Content-Type': 'application/json' },
14+
header: { "Content-Type": "application/json" },
1715

1816
// HTTP verbs
1917
method: {
20-
"POST": "POST",
21-
"GET": "GET",
22-
"PUT": "PUT"
18+
POST: "POST",
19+
GET: "GET",
20+
PUT: "PUT",
2321
},
2422

25-
2623
// initialize
2724
// theWeek: makeFormattedWeek(),
2825

2926
formatDates: (dateReceived) => {
3027
const theWeek = makeFormattedWeek()
31-
if (theWeek[dateReceived.substring(0, dateReceived.indexOf('T'))]) {
32-
let formattedDate = theWeek[dateReceived.substring(0, dateReceived.indexOf('T'))]
33-
return (formattedDate == 'Today') ? dateReceived.substr(dateReceived.indexOf('T') + 1, 5) : formattedDate
28+
if (theWeek[dateReceived.substring(0, dateReceived.indexOf("T"))]) {
29+
let formattedDate =
30+
theWeek[dateReceived.substring(0, dateReceived.indexOf("T"))]
31+
return formattedDate == "Today"
32+
? dateReceived.substr(dateReceived.indexOf("T") + 1, 5)
33+
: formattedDate
3434
} else {
35-
return `${new Date(dateReceived).getDate()}/${new Date(dateReceived).getMonth() + 1}/${new Date(dateReceived).getFullYear()}`
35+
return `${new Date(dateReceived).getDate()}/${
36+
new Date(dateReceived).getMonth() + 1
37+
}/${new Date(dateReceived).getFullYear()}`
3638
}
37-
}
39+
},
3840
}
3941
}
4042

4143
function makeFormattedWeek() {
4244
const theWeek = {}
4345

4446
// list of day names
45-
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
47+
const days = [
48+
"Sunday",
49+
"Monday",
50+
"Tuesday",
51+
"Wednesday",
52+
"Thursday",
53+
"Friday",
54+
"Saturday",
55+
]
4656

4757
for (let i = 0; i < 7; i++) {
4858
// reset today
@@ -53,12 +63,12 @@ function makeFormattedWeek() {
5363

5464
// format previous date as per the need
5565
let prevDateStr = new Date(prevDate).toISOString()
56-
prevDateStr = prevDateStr.substring(0, prevDateStr.indexOf('T'))
66+
prevDateStr = prevDateStr.substring(0, prevDateStr.indexOf("T"))
5767

5868
// fill the object accordingly
59-
theWeek[prevDateStr] = (i == 0) ? 'Today' : days[new Date(prevDate).getDay()]
69+
theWeek[prevDateStr] = i == 0 ? "Today" : days[new Date(prevDate).getDay()]
6070
}
6171
return theWeek
6272
}
6373

64-
export default Constants;
74+
export default Constants

public/src/components/Content.js

Lines changed: 35 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
1-
import { useEffect, useState } from 'react';
2-
import { io } from 'socket.io-client'
1+
import { useEffect, useState } from "react"
2+
import { io } from "socket.io-client"
33

44
// components
5-
import RoomPanel from './rooms/RoomPanel'
6-
import MessagesPanel from './conversation/MessagesPanel'
5+
import RoomPanel from "./rooms/RoomPanel"
6+
import MessagesPanel from "./conversation/MessagesPanel"
77

88
const Content = (props) => {
9-
109
// Initialize the initial data and its modifier
11-
const [contentData, setContentData] = useState(
12-
{
13-
showMessagePanel: true,
14-
showRoomPanel: true,
15-
onlineRooms: []
16-
})
10+
const [contentData, setContentData] = useState({
11+
showMessagePanel: true,
12+
showRoomPanel: true,
13+
onlineRooms: [],
14+
})
1715

1816
const socket = io()
1917
useEffect(() => {
@@ -25,35 +23,35 @@ const Content = (props) => {
2523

2624
// connect to the socket
2725
const onConnect = () => {
28-
socket.on('connect', () => {
29-
console.log('Socket connected FROM React...')
26+
socket.on("connect", () => {
27+
console.log("Socket connected FROM React...")
3028
// emit all the room ids where the user belongs to see him / her as active
31-
socket.emit('onlineUser', props.userInfo.userId)
32-
});
29+
socket.emit("onlineUser", props.userInfo.userId)
30+
})
3331
}
3432

3533
// when a user is online
3634
const onUserOnline = () => {
37-
socket.on('onlineUser', (data) => {
35+
socket.on("onlineUser", (data) => {
3836
if (data && data.length > 0) {
39-
console.log('these rooms should be shown as online', data)
37+
console.log("these rooms should be shown as online", data)
4038
notifyOnlineRooms(data)
4139
}
4240
})
4341
}
4442

4543
// when a new message arrives through socket
4644
const onMessageArrival = () => {
47-
socket.on('message', (data) => {
48-
console.log('data value arrives from socket', data)
45+
socket.on("message", (data) => {
46+
console.log("data value arrives from socket", data)
4947
fillRoomInfoFromSocket(data)
50-
});
48+
})
5149
}
5250

5351
// when the socket disconnects
54-
socket.on('disconnect', () => {
55-
console.log('SOCKET is disconnected.. .!!')
56-
});
52+
socket.on("disconnect", () => {
53+
console.log("SOCKET is disconnected.. .!!")
54+
})
5755

5856
const toggleMessagePanel = (showMessagePanel, showRoomPanel) => {
5957
if (window.innerWidth < 500) {
@@ -79,7 +77,13 @@ const Content = (props) => {
7977
}
8078

8179
const { userInfo } = props
82-
let { showMessagePanel, showRoomPanel, selectedRoomId, newMessageFromSocket, onlineRooms } = contentData
80+
let {
81+
showMessagePanel,
82+
showRoomPanel,
83+
selectedRoomId,
84+
newMessageFromSocket,
85+
onlineRooms,
86+
} = contentData
8387

8488
if (window.innerWidth < 500 && props.showBackButton == false) {
8589
showMessagePanel = false
@@ -94,17 +98,19 @@ const Content = (props) => {
9498
onlineRooms={onlineRooms}
9599
newMessageFromSocket={newMessageFromSocket}
96100
selectedRoomId={selectedRoomId}
97-
setSelectedRoomId={setSelectedRoomId} />
101+
setSelectedRoomId={setSelectedRoomId}
102+
/>
98103

99104
<MessagesPanel
100105
showMessagePanel={showMessagePanel}
101106
selectedRoomId={selectedRoomId}
102107
newMessageFromSocket={newMessageFromSocket}
103108
notifyOnlineRooms={notifyOnlineRooms}
104109
socket={socket}
105-
userInfo={userInfo} />
110+
userInfo={userInfo}
111+
/>
106112
</div>
107-
);
108-
};
113+
)
114+
}
109115

110-
export default Content;
116+
export default Content

public/src/components/Loading.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@ export default (props) => {
44
<div className="loading-div">
55
<img src="images/loading.gif" className="loading-gif" />
66
</div>
7-
);
7+
)
88
}

public/src/components/connectBackend.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// dependenciees
2-
import axios from 'axios'
2+
import axios from "axios"
33

44
const connectBackend = async (config) => {
55
return await axios(config)
Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
// Constants
2-
import Constants from '../Constants'
2+
import Constants from "../Constants"
33

44
const Message = ({ msgBody, timeSent, senderId, userInfo }) => {
55
const allConstants = Constants()
66
return (
7-
<div className={(senderId == userInfo.userId) ? "msg my-msg" : "msg room-msg"}>{msgBody}
7+
<div
8+
className={senderId == userInfo.userId ? "msg my-msg" : "msg room-msg"}
9+
>
10+
{msgBody}
811
<span className="time-sent">{allConstants.formatDates(timeSent)}</span>
912
</div>
10-
);
11-
};
13+
)
14+
}
1215

13-
export default Message;
16+
export default Message

0 commit comments

Comments
 (0)