Skip to content

Commit 03ef814

Browse files
abhishek-udataneniabhishek-udataneni
committed
basic chat app with server side included
1 parent 96b5623 commit 03ef814

20 files changed

Lines changed: 819 additions & 97 deletions

File tree

‎assets/profile_pic.jpg‎

3.82 KB
Loading

‎package-lock.json‎

Lines changed: 411 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@material-ui/core": "^4.11.0",
7+
"@material-ui/icons": "^4.9.1",
68
"chance": "^1.0.18",
9+
"classnames": "^2.2.6",
710
"react": "^16.8.6",
811
"react-dom": "^16.8.6",
912
"react-redux": "^7.0.3",

‎public/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1111
-->
1212
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
13+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400">
14+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
1315
<!--
1416
Notice the use of %PUBLIC_URL% in the tags above.
1517
It will be replaced with the URL of the `public` folder during the build.

‎src/App.css‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
1+
/* @import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
22
33
* {
44
box-sizing: border-box;
@@ -7,31 +7,31 @@
77
}
88
body {
99
font-family: "Press Start 2P";
10-
}
11-
#container {
10+
} */
11+
/* #container {
1212
display: grid;
1313
grid-template-columns: 1fr 3fr;
1414
grid-template-areas: "sidebar main";
1515
width: 100vw;
1616
height: 100vh;
17-
}
18-
#main {
17+
} */
18+
/* #main {
1919
grid-area: main;
20-
}
21-
#new-message {
20+
} */
21+
/* #new-message {
2222
position: fixed;
2323
bottom: 0;
2424
width: 100%;
2525
padding: 5px;
2626
margin-left: 0px;
2727
border-top: 1px solid #3f3f3f;
28-
}
29-
#messages-list {
28+
} */
29+
/* #messages-list {
3030
padding: 5px 0 0 5px;
31-
}
32-
#sidebar {
31+
} */
32+
/* #sidebar {
3333
grid-area: sidebar;
3434
padding: 5px 0 0 5px;
3535
border-right: 1px solid #3f3f3f;
3636
height: 100%;
37-
}
37+
} */

‎src/App.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
import React from 'react';
22
import './App.css';
3-
import {Sidebar} from "./containers/Sidebar";
43
import {MessagesList} from "./containers/MessagesList";
54
import {AddMessage} from "./containers/AddMessage";
65
function App() {
76
return (
87
<div id="container">
9-
<Sidebar />
108
<section id="main">
119
<MessagesList />
1210
<AddMessage />
1311
</section>
14-
Hello from the otherside
1512
</div>
1613
);
1714
}

‎src/actions/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,13 @@ export const addMessage = (message,author) =>{
1212
}
1313
)}
1414

15+
export const editMessage = (message,id) =>{
16+
return ({
17+
type: types.EDIT_MESSAGE,
18+
message,
19+
id,
20+
}
21+
)}
1522
export const addUser = (name)=>({
1623
type: types.ADD_USER,
1724
id:nextUserId+1,

‎src/components/AddMessage.js‎

Lines changed: 100 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,110 @@
1-
import React from "react";
1+
import React, {useState} from "react";
22
import propTypes from "prop-types";
3+
import SendRoundedIcon from '@material-ui/icons/SendRounded';
4+
import { IconButton, Input, Grid } from '@material-ui/core';
35

6+
import { makeStyles } from '@material-ui/core/styles'
47

8+
const useStyles = makeStyles(theme => ({
9+
root: {
10+
width: '100%',
11+
},
12+
input: {
13+
'&::placeholder': {
14+
textOverflow: 'ellipsis !important',
15+
color: "black",
16+
opacity: 1,
17+
},
18+
},
19+
backDropRoot: {
20+
backgroundColor: 'inherit',
21+
},
22+
footer: {
23+
position: 'fixed',
24+
height: `${theme.spacing(6)}`,
25+
bottom: 8,
26+
left: 0,
27+
width: '100%',
28+
zIndex: 1,
29+
},inputContainer :{
30+
width: "90%",
31+
backgroundColor:theme.palette.primary.light,
32+
padding: "8px auto",
33+
margin: "auto",
34+
borderRadius: "25px"
35+
},
536

6-
const AddMessage = (props) => {
7-
let input;
37+
textArea: {
38+
paddingLeft: '15px',
39+
textAlign: 'left',
40+
},
41+
messageBoxIcon: {
42+
marginTop: '.35rem',
43+
marginRight: '.7rem',
44+
},
45+
sendIcon: {
46+
color: '#ffffff',
47+
},
48+
InputFieldContainer: {
49+
paddingRight: '15px',
50+
display: "flex",
51+
},
52+
}));
53+
54+
855

56+
const AddMessage = (props) => {
57+
let classes = useStyles();
58+
let [userInput,changeName] = useState("");
59+
let handleInputChange = (e) => {
60+
changeName(e.target.value);
61+
}
962
return (
10-
<section id="new-message">
11-
<input onKeyPress={(e) =>{
12-
if(e.key === "Enter"){
13-
props.dispatch(input.value,"Me");
14-
input.value = ""
15-
}
16-
}} type="text" ref={(node) =>{input = node}} />
17-
</section>
63+
<div className={classes.footer}>
64+
<form onSubmit={event => {
65+
event.preventDefault();
66+
props.addMessage(userInput,"out_going");
67+
changeName("")
68+
}}>
69+
<Grid className={classes.inputContainer} container spacing={1}>
70+
<Grid
71+
className={classes.InputFieldContainer}
72+
item
73+
xs={10}
74+
sm={11}
75+
md={11}
76+
>
77+
<Input
78+
classes={{
79+
input: classes.input,
80+
}}
81+
fullWidth
82+
disableUnderline
83+
className={classes.textArea}
84+
type="text"
85+
placeholder="Type your message.."
86+
value={userInput}
87+
onChange={handleInputChange}
88+
autoFocus
89+
{...props}
90+
/>
91+
</Grid>
92+
<Grid item xs={2} sm={1} md={1}>
93+
<IconButton
94+
className={classes.messageBoxIcon}
95+
type="submit"
96+
>
97+
<SendRoundedIcon className={classes.sendIcon} fontSize="small" />
98+
</IconButton>
99+
</Grid>
100+
</Grid>
101+
</form>
102+
103+
</div>
104+
18105
)
19106
}
20107

21-
AddMessage.propTypes = {
22-
dispatch: propTypes.func.isRequired
23-
}
24108

25-
export default AddMessage;
109+
110+
export default AddMessage;

‎src/components/EditDialog.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from 'react';
2+
import Button from '@material-ui/core/Button';
3+
import TextField from '@material-ui/core/TextField';
4+
import Dialog from '@material-ui/core/Dialog';
5+
import DialogActions from '@material-ui/core/DialogActions';
6+
import DialogContent from '@material-ui/core/DialogContent';
7+
import DialogContentText from '@material-ui/core/DialogContentText';
8+
import DialogTitle from '@material-ui/core/DialogTitle';
9+
import Link from '@material-ui/core/Link';
10+
11+
12+
export default function EditDialog(props) {
13+
const [open, setOpen] = React.useState(false);
14+
const [message, setMessage] = React.useState("");
15+
const handleClickOpen = () => {
16+
setOpen(true);
17+
};
18+
19+
const handleClose = () => {
20+
setOpen(false);
21+
};
22+
23+
const handleChange = (e) => {
24+
setMessage(e.target.value)
25+
}
26+
const handleOkayClick = () => {
27+
props.editMessage(message, props.id);
28+
setOpen(false);
29+
}
30+
return (
31+
<>
32+
<Link component="button" variant="body2" onClick={handleClickOpen}
33+
style={{
34+
position: "absolute",
35+
bottom: "4px",
36+
right: "16px",
37+
color: "#0e0000"
38+
}}
39+
> Edit </Link>
40+
41+
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
42+
<DialogTitle id="form-dialog-title">Change Text</DialogTitle>
43+
<DialogContent>
44+
<DialogContentText>
45+
Please Edit your message in the below text-area and click okay.
46+
</DialogContentText>
47+
<TextField
48+
autoFocus
49+
margin="dense"
50+
id="name"
51+
label="Edit Message"
52+
type="email"
53+
fullWidth
54+
name="message"
55+
value={message}
56+
onChange={handleChange}
57+
/>
58+
</DialogContent>
59+
<DialogActions>
60+
<Button onClick={handleClose} color="primary">
61+
Cancel
62+
</Button>
63+
<Button onClick={handleOkayClick} color="primary">
64+
Okay
65+
</Button>
66+
</DialogActions>
67+
</Dialog>
68+
</>
69+
);
70+
}

‎src/components/Message.js‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,30 @@
1-
import React from "react";
2-
import propTypes from "prop-types";
1+
import React, { useState, useEffect } from "react";
2+
import MessageUi from './MessageUi';
33

4-
const Message = ({message,author}) => {
4+
const Message = React.memo(({message,author, id}) => {
5+
const [currentTime,setCurrentTime] = useState(null);
6+
7+
const getCurrentTime = () => {
8+
const time = new Date().toLocaleTimeString('en-US', {
9+
hour: '2-digit',
10+
minute: '2-digit',
11+
});
12+
return time;
13+
};
14+
15+
useEffect(() => {
16+
setCurrentTime(getCurrentTime());
17+
}, []);
18+
console.log(id)
519
return (
6-
<div>
7-
{author}: {message}
8-
</div>
20+
<>
21+
<MessageUi currentTime={currentTime} id={id} author={author} question={message} />
22+
</>
923
);
10-
}
24+
})
1125

1226
// Message.PropTypes = {
1327
// message: PropTypes.string.isRequired,
1428
// author: PropTypes.string.isRequired
1529
// }
16-
export default Message;
30+
export default (Message);

0 commit comments

Comments
 (0)