Skip to content

Commit bbeff45

Browse files
Dauphin-davlon01Dauphin-davlon01
committed
added functionality for communication (messaging)
1 parent 0ccd6b0 commit bbeff45

24 files changed

+2891
-106
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,30 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@chakra-ui/icons": "^2.1.1",
7+
"@chakra-ui/react": "^2.8.2",
8+
"@emotion/react": "^11.11.4",
9+
"@emotion/styled": "^11.11.5",
10+
"@fortawesome/fontawesome-svg-core": "^6.5.2",
11+
"@fortawesome/free-brands-svg-icons": "^6.5.2",
12+
"@fortawesome/free-regular-svg-icons": "^6.5.2",
13+
"@fortawesome/free-solid-svg-icons": "^6.5.2",
14+
"@fortawesome/react-fontawesome": "^0.2.2",
615
"@testing-library/jest-dom": "^5.17.0",
716
"@testing-library/react": "^13.4.0",
817
"@testing-library/user-event": "^13.5.0",
918
"axios": "^1.6.8",
1019
"firebase": "^10.8.0",
20+
"framer-motion": "^11.2.6",
1121
"jsonwebtoken": "^9.0.2",
1222
"jwt-decode": "^4.0.0",
1323
"react": "^18.2.0",
1424
"react-dom": "^18.2.0",
1525
"react-icons": "^5.1.0",
1626
"react-router-dom": "^6.22.3",
1727
"react-scripts": "^5.0.1",
28+
"react-scrollable-feed": "^2.0.2",
29+
"socket.io-client": "^4.7.5",
1830
"web-vitals": "^2.1.4"
1931
},
2032
"scripts": {

‎public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1616
-->
1717
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
1819
<!--
1920
Notice the use of %PUBLIC_URL% in the tags above.
2021
It will be replaced with the URL of the `public` folder during the build.

‎src/App.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,16 @@
3636
transform: rotate(360deg);
3737
}
3838
}
39+
40+
::-webkit-scrollbar{
41+
width: 0px
42+
}
43+
44+
::-webkit-scrollbar-thumb{
45+
background: rgba(136, 136, 136, 0.281)
46+
}
47+
48+
/* Hnald on hover */
49+
::-webkit-scrollbar-thumb:hover{
50+
background: #555
51+
}

‎src/components/ChatPage.jsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from "react";
2+
import { Box } from "@chakra-ui/react";
3+
import { useUser } from "../contexts/UserProvider";
4+
import MyChats from "./miscellanuous/MyChats";
5+
import ChatBox from "./miscellanuous/ChatBox";
6+
import SideDrawer from "./miscellanuous/SideDrawer";
7+
8+
const ChatPage = () => {
9+
const { auth } = useUser();
10+
11+
const user = auth.user;
12+
13+
return (
14+
<div style={{ width: "100%" }}>
15+
{user && <SideDrawer />}
16+
<Box
17+
display="flex"
18+
justifyContent="space-between"
19+
w="100%"
20+
h="91.5vh"
21+
p="10px"
22+
>
23+
{user && <MyChats />}
24+
{user && <ChatBox />}
25+
</Box>
26+
</div>
27+
);
28+
};
29+
30+
export default ChatPage;

‎src/components/LoginPage.jsx‎

Lines changed: 40 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,30 +6,40 @@
66
77
*/
88

9-
import React from 'react';
10-
import './LoginPage.css'; // Make sure to create an appropriate CSS file for styling
9+
import React from "react";
10+
import "./LoginPage.css"; // Make sure to create an appropriate CSS file for styling
1111
import { Link, useNavigate } from "react-router-dom";
12-
import { useState } from 'react';
13-
import useAuth from '../hooks/useAuth';
12+
import { useState } from "react";
13+
import useAuth from "../hooks/useAuth";
14+
import { useUser } from "../contexts/UserProvider";
1415

1516
const LoginBox = () => {
1617
const navigate = useNavigate();
18+
19+
/*
1720
const { login } = useAuth();
1821
22+
*/
23+
24+
const { auth } = useUser();
25+
26+
console.log(auth);
27+
28+
const login = auth.login;
29+
1930
const [formData, setFormData] = useState({
20-
email: '',
21-
password: ''
31+
email: "",
32+
password: "",
2233
});
2334

24-
const [errorMessage, setErrorMessage] = useState('');
35+
const [errorMessage, setErrorMessage] = useState("");
2536
const [showPassword, setShowPassword] = useState(false);
2637

27-
2838
const handleChange = (e) => {
2939
const { name, value } = e.target;
30-
setFormData(prevState => ({
40+
setFormData((prevState) => ({
3141
...prevState,
32-
[name]: value
42+
[name]: value,
3343
}));
3444
};
3545

@@ -42,17 +52,19 @@ const LoginBox = () => {
4252
try {
4353
await login(lowerCaseEmail, password);
4454
// Redirect or perform other actions upon successful login
45-
navigate('/');
55+
navigate("/");
4656
} catch (error) {
4757
// Error Message for Password
4858
if (error.response && error.response.status === 401) {
49-
setErrorMessage('Incorrect password.');
50-
// Error Message for Email
59+
setErrorMessage("Incorrect password.");
60+
// Error Message for Email
5161
} else if (error.response && error.response.status === 404) {
52-
setErrorMessage('The email you entered is not connected to an account.');
62+
setErrorMessage(
63+
"The email you entered is not connected to an account."
64+
);
5365
} else {
54-
// Handle other errors
55-
console.error('Login error:', error);
66+
// Handle other errors
67+
console.error("Login error:", error);
5668
}
5769
}
5870
};
@@ -64,12 +76,20 @@ const LoginBox = () => {
6476
return (
6577
<div className="login-box">
6678
<div className="options">
67-
<Link to="/registration"><button className="signup-btn">Sign Up</button></Link>
79+
<Link to="/registration">
80+
<button className="signup-btn">Sign Up</button>
81+
</Link>
6882
</div>
6983
<h2>Login</h2>
7084
{errorMessage && <p className="error-message">{errorMessage}</p>}
7185
<form onSubmit={handleSubmit}>
72-
<input onChange={handleChange} type="text" name="email" value={formData.email} placeholder="ScarletMail" />
86+
<input
87+
onChange={handleChange}
88+
type="text"
89+
name="email"
90+
value={formData.email}
91+
placeholder="ScarletMail"
92+
/>
7393
<div className="password-input">
7494
<input
7595
onChange={handleChange}
@@ -84,7 +104,8 @@ const LoginBox = () => {
84104
className="password-toggle"
85105
onClick={togglePasswordVisibility}
86106
/>
87-
</div> <button type='submit'>Sign In</button>
107+
</div>{" "}
108+
<button type="submit">Sign In</button>
88109
</form>
89110
</div>
90111
);

‎src/components/NavBar.jsx‎

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { Link } from 'react-router-dom';
2-
import React, { useState } from 'react';
3-
import './Navbar.css'; // Assuming you have a CSS file for styling
4-
import logo from './logo.png';
5-
import { useNavigate } from 'react-router-dom';
1+
import { Link } from "react-router-dom";
2+
import React, { useState } from "react";
3+
import "./Navbar.css"; // Assuming you have a CSS file for styling
4+
import logo from "./logo.png";
5+
import { useNavigate } from "react-router-dom";
66

7-
const Navbar = ({userId, onLogout, isAuthenticated}) => {
7+
const Navbar = ({ userId, onLogout, isAuthenticated }) => {
88
const navigate = useNavigate();
99
const [menuOpen, setMenuOpen] = useState(false);
1010

@@ -13,9 +13,9 @@ const Navbar = ({userId, onLogout, isAuthenticated}) => {
1313
};
1414

1515
const handleLogOut = () => {
16-
onLogout()
17-
navigate('/login')
18-
}
16+
onLogout();
17+
navigate("/login");
18+
};
1919

2020
return (
2121
<nav className="navbar-container">
@@ -24,17 +24,26 @@ const Navbar = ({userId, onLogout, isAuthenticated}) => {
2424
<img src={logo} alt="logo" /> {/* Use the imported logo */}
2525
</Link>
2626
</div>
27-
<div className={`navbar-menu ${menuOpen ? 'active' : ''}`}>
28-
{!isAuthenticated()?
29-
<ul>
30-
<li><Link to="/registration">Registration</Link></li>
31-
<li><Link to="/login">Login</Link></li>
32-
</ul> :
33-
<ul>
34-
<li><Link to={`/profile/${userId}`}>Profile</Link></li>
35-
<li><button onClick= {handleLogOut}>Log Out</button></li>
36-
</ul>
37-
}
27+
<div className={`navbar-menu ${menuOpen ? "active" : ""}`}>
28+
{!isAuthenticated() ? (
29+
<ul>
30+
<li>
31+
<Link to="/registration">Registration</Link>
32+
</li>
33+
<li>
34+
<Link to="/login">Login</Link>
35+
</li>
36+
</ul>
37+
) : (
38+
<ul>
39+
<li>
40+
<Link to={`/profile/${userId}`}>Profile</Link>
41+
</li>
42+
<li>
43+
<button onClick={handleLogOut}>Log Out</button>
44+
</li>
45+
</ul>
46+
)}
3847
</div>
3948
<button className="menu-toggle" onClick={toggleMenu}>
4049
<span></span>

‎src/components/UserAvatar/UserListItem.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react'
2+
import { useUser } from '../../contexts/UserProvider'
3+
import { Avatar, Box, Text } from '@chakra-ui/react'
4+
5+
const UserListItem = ({user, handleFunction}) => {
6+
7+
return (
8+
<Box
9+
onClick={handleFunction}
10+
cursor = "pointer"
11+
bg="#E8E8E8"
12+
_hover = {{
13+
background: "#38B2AC",
14+
color: "white"
15+
}}
16+
w = "100%"
17+
display = "flex"
18+
alignItems = "center"
19+
color="black"
20+
px={3}
21+
py={2}
22+
mb={2}
23+
borderRadius = "lg"
24+
>
25+
<Avatar
26+
mr={2}
27+
size="sm"
28+
cursor="pointer"
29+
name={`${user.data.firstname} ${user.data.lastname}`}
30+
src={user.data.image}
31+
/>
32+
<Box>
33+
<Text>{`${user.data.firstname} ${user.data.lastname}`}</Text>
34+
<Text fontSize="xs">
35+
<b>Email : </b>
36+
{user.data.email}
37+
</Text>
38+
</Box>
39+
</Box>
40+
)
41+
}
42+
43+
export default UserListItem

‎src/components/miscellanuous/ChatBox.jsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from "react";
2+
import { useUser } from "../../contexts/UserProvider";
3+
import { Box } from "@chakra-ui/react";
4+
import SingleChat from "./SingleChat";
5+
6+
const ChatBox = () => {
7+
const { selectedChat } = useUser();
8+
9+
return (
10+
<Box
11+
display={{ base: selectedChat ? "flex" : "none", md: "flex" }}
12+
alignItems="center"
13+
flexDir="column"
14+
p={3}
15+
bg="white"
16+
w={{ base: "100%", md: "68%" }}
17+
borderRadius="lg"
18+
borderWidth="1px"
19+
>
20+
<SingleChat />
21+
</Box>
22+
);
23+
};
24+
25+
export default ChatBox;

‎src/components/miscellanuous/ChatLoading.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Skeleton, Stack } from '@chakra-ui/react'
2+
import React from 'react'
3+
4+
const ChatLoading = () => {
5+
return (
6+
<Stack>
7+
<Skeleton height="45px" />
8+
<Skeleton height="45px" />
9+
<Skeleton height="45px" />
10+
<Skeleton height="45px" />
11+
<Skeleton height="45px" />
12+
<Skeleton height="45px" />
13+
<Skeleton height="45px" />
14+
<Skeleton height="45px" />
15+
<Skeleton height="45px" />
16+
<Skeleton height="45px" />
17+
</Stack>
18+
)
19+
}
20+
21+
export default ChatLoading

0 commit comments

Comments
 (0)