Skip to content

Commit

Permalink
messages alignment fixed for old messages
Browse files Browse the repository at this point in the history
  • Loading branch information
@anshu4sharma
anshu4sharma committed May 8, 2023
1 parent 0eb9834 commit 0e70150
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 28 deletions.
48 changes: 47 additions & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@
"workbox-routing": "^6.5.4",
"workbox-strategies": "^6.5.4",
"workbox-streams": "^6.5.4",
"yup": "^0.32.11"
"yup": "^0.32.11",
"zustand": "^4.3.6"
},
"scripts": {
"start": "react-scripts start",
Expand Down
9 changes: 6 additions & 3 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,16 @@ import {
ProtectedAuthPages,
} from "./components/ProtectedPages";
import Loader from "./components/Loader";
import { Toaster } from "react-hot-toast";
import { Toaster } from "react-hot-toast";
import { decodeToken } from "react-jwt";
const Home = lazy(() => import("./pages/Home"));
const SignUp = lazy(() => import("./pages/SignUp"));
const LoginPage = lazy(() => import("./pages/LoginPage"));
const VerifyOtp = lazy(() => import("./pages/VerifyOtp"));
const socket = io(process.env.REACT_APP_SOCKET_URL);
const token = localStorage.getItem("authtoken");
function App() {
const myDecodedToken = decodeToken(token);
const [msg, setMsg] = useState("");
const [room, setRoom] = useState("");
const [msgRec, setmsgRec] = useState([]);
Expand All @@ -22,11 +25,11 @@ function App() {
const [Usrname, setmUserName] = useState(UserName);
const [userCount, setUserCount] = useState(0);
const sendMsg = async () => {
socket.emit("send_msg", { msg, Usrname });
socket.emit("send_msg", { msg, Usrname, id:myDecodedToken.id });
setMsg("");
};
const sendPvtMsg = async () => {
socket.emit("send_pvt_msg", { msg, room, Usrname });
socket.emit("send_pvt_msg", { msg, room, Usrname, id:myDecodedToken.id });
setMsg("");
};
useEffect(() => {
Expand Down
36 changes: 30 additions & 6 deletions src/components/ChatPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@ import React, { useEffect } from "react";
import { useRef } from "react";
import moment from "moment";
import { Container } from "@nextui-org/react";
import { decodeToken } from "react-jwt";
const token = localStorage.getItem("authtoken");
const ChatPage = ({ msgRec, pvtmsg, room }) => {
const myDecodedToken = decodeToken(token);
const msgref = useRef();
const scrolltoView = () => {
let windowHeight = window.innerHeight;
Expand Down Expand Up @@ -32,22 +35,43 @@ const ChatPage = ({ msgRec, pvtmsg, room }) => {
{room === ""
? msgRec?.map((data, index) => {
return (
<div className="upcoming-message" key={index}>
<span className="recMsgusername" style={{ fontSize: "12px" }}>{data?.Usrname}</span>
<div
className={
data?.id === myDecodedToken?.id
? "outgoing-msg"
: "upcoming-message"
}
key={index}
>
<span
className="recMsgusername"
style={{ fontSize: "12px" }}
>
{data?.Usrname}
</span>
<li> {data?.msg}</li>
<span className="messageTimestamp">
{moment(data?.timeStamp).format('LTS').toString()}
{moment(data?.timeStamp).format("LTS").toString()}
</span>
</div>
);
})
: pvtmsg?.map((data, index) => {
return (
<div className="upcoming-message" key={index}>
<span className="recMsgusername" style={{ fontSize: "12px" }}>{data?.Usrname}</span>
<div className={
data?.id === myDecodedToken?.id
? "outgoing-msg"
: "upcoming-message"
} key={index}>
<span
className="recMsgusername"
style={{ fontSize: "12px" }}
>
{data?.Usrname}
</span>
<li> {data?.msg}</li>
<span className="messageTimestamp">
{moment(data?.timeStamp).format('LTS').toString()}
{moment(data?.timeStamp).format("LTS").toString()}
</span>
</div>
);
Expand Down
33 changes: 16 additions & 17 deletions src/components/Navbar/NavbarReact.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,26 +30,25 @@ export default function NavbarReact({
const closeHandler = async () => {
setVisible(false);
};
const authtoken = localStorage.getItem("authtoken");
const fetchUserDetails = async () => {
const myDecodedToken = decodeToken(token);
try {
if (myDecodedToken.name) {
setmUserName(myDecodedToken.name);
} else {
throw Error("Invalid Token");
}
} catch (error) {
console.log("auth failed");
localStorage.clear();
navigate(0);
}
};
useEffect(() => {
if (authtoken !== undefined || null) {
const fetchUserDetails = async () => {
const myDecodedToken = decodeToken(token);
try {
if (myDecodedToken.name) {
setmUserName(myDecodedToken.name);
} else {
throw Error("Invalid Token");
}
} catch (error) {
console.log("auth failed");
localStorage.clear();
navigate(0);
}
};
if (token !== undefined || null) {
fetchUserDetails();
}
}, []);
}, [navigate, setmUserName]);
return (
<>
<Navbar variant={"sticky"}>
Expand Down

1 comment on commit 0e70150

@vercel
Copy link

@vercel vercel bot commented on 0e70150 May 8, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

anshuchat – ./

anshuchat-git-main-anshu0x.vercel.app
chat.anshusharma.me
anshuchat-anshu0x.vercel.app
anshu-chat.vercel.app

Please sign in to comment.