Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@dharunvs
dharunvs committed Aug 24, 2021
1 parent 4163ea1 commit a752bcf
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 36 deletions.
3 changes: 2 additions & 1 deletion client/src/components/DMMessageElement/DMMessageElement.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
function DMMessageElement({ object }) {
if (object.createdAt !== null) {
var datetime = object.createdAt.toDate().toLocaleTimeString().split(" ");
var timestamp = datetime[0].slice(0, 5) + " " + datetime[1];
var time = datetime[0].split(":");
var timestamp = time[0] + ":" + time[1] + " " + datetime[1];
} else {
var timestamp = "";
}
Expand Down
77 changes: 45 additions & 32 deletions client/src/pages/DM/DM.css
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.People {
width: 100%;
width: 100vw;
height: 90vh;
overflow-y: scroll;
}

.peopleContainer {
.DMContainer {
width: 1000px;
height: 80vh;
border-radius: 20px;
Expand All @@ -19,7 +19,6 @@
background-color: white;
border-radius: 20px;
overflow: hidden;
border: 4px solid white;
}

.DMTab h1 {
Expand Down Expand Up @@ -51,49 +50,27 @@
}

.People .yourchats {
width: 39%;
width: 38%;
height: 100%;
}

.People .DMmessages {
width: 59%;
height: 100%;
border: 4px solid white;
}

/*
.DMList {
width: 90%;
width: 100%;
margin: auto;
height: 70vh;
overflow-y: scroll;
overflow-x: hidden;
list-style: none;
}
} */

.DMList li {
margin: 10px;
padding: 12px;
display: flex;
align-items: center;
border-radius: 10px;
background-color: var(--lightviolet);
}

.DMList li .profileImageContainer {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: gray;
margin-right: 15px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid var(--violet);
}

.DMList li .profileImageContainer img {
width: 40px;
height: 40px;
.DMList {
border-top: 1px solid var(--lightgray);
}

.chatHeader {
Expand Down Expand Up @@ -274,6 +251,39 @@
background-color: var(--lightgray);
}

/* DMAddedPeopleElement */
/* DMAddedPeopleElement */
/* DMAddedPeopleElement */
/* DMAddedPeopleElement */

.DMAddedPeopleElement {
width: 100%;
display: flex;
align-items: center;
padding: 10px;
transition: background-color 200ms ease-in-out;
border-bottom: 1px solid var(--lightgray);
}

.DMAddedPeopleElement .DMAddedPeopleElementImageContainer {
width: 40px;
height: 40px;
margin-right: 10px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}

.DMAddedPeopleElement .DMAddedPeopleElementImageContainer img {
width: inherit;
height: inherit;
}
.DMAddedPeopleElement:hover {
background-color: var(--lightgray);
}

/* DMMessageElement */
/* DMMessageElement */
/* DMMessageElement */
Expand All @@ -282,6 +292,8 @@
.DMMessages {
height: 82%;
border-bottom: 1px solid var(--lightgray);
padding: 0;
margin: 0;
overflow: scroll;
display: flex;
flex-direction: column;
Expand All @@ -302,6 +314,7 @@

.DMMessageElementSent {
align-self: flex-end;
transform: translateX(10px);
}

.DMMessageElementSent p,
Expand Down
98 changes: 95 additions & 3 deletions client/src/pages/DM/DM.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ function DM() {
.doc(localStorage.getItem("DMChatId"))
.collection("Messages")
.orderBy("createdAt")
.limit(25)
.limit(1000)
);
}
}
Expand Down Expand Up @@ -256,10 +256,100 @@ function DM() {
);
}

function DMAddedPeopleElement({ userId }) {
const [addedPeopleText, setAddedPeopleText] = useState("");
// const [username, setUsername] = useState("");
// const [profilePic, setProfilePic] = useState("");

// useEffect(() => {
// let unmounted = false;
// if (userId !== "") {
// fb.firestore
// .collection("users")
// .doc(userId)
// .get()
// .then((doc) => {
// if (!unmounted) {
// setUsername(doc.data().username);
// } else {
// console.log("");
// }
// });

// try {
// fb.storage
// .ref()
// .child(`profileImages/${userId}.jpeg`)
// .getDownloadURL()
// .then((data) => {
// if (!unmounted) {
// setProfilePic(data);
// } else {
// console.log("");
// }
// });
// } catch {
// console.log("");
// }
// }

// return () => {
// unmounted = true;
// };
// }, []);

const DMAddedPeopleElementClick = () => {
const content = {
DMuserId: userId,
currentUserId: localStorage.getItem("userId"),
};

localStorage.setItem("DMUserId", content.DMuserId);
if (localStorage.getItem("userId") !== "") {
fb.firestore
.collection("users")
.doc(localStorage.getItem("userId"))
.get()
.then((doc) => {
for (var i in doc.data().DMUidList) {
if (content.DMuserId === doc.data().DMUidList[i].userId) {
localStorage.setItem(
"DMChatId",
doc.data().DMUidList[i].chatId
);
}
}
})
.then(() => {
window.location.reload();
});
}

setAddChat(false);
};

return (
<div
className="DMAddedPeopleElement"
key={userId}
onClick={DMAddedPeopleElementClick}
>
<div className="DMAddedPeopleElementImageContainer">
{/* {profilePic !== "" && <img src={profilePic} alt={username} />} */}
</div>
<div>
{/* <p>{username}</p> */}
{/* <p>{addedPeopleText}</p> */}
<p>{userId}</p>
</div>
</div>
);
}

return (
<>
<div className="People">
<div className="peopleContainer">
<div className="DMContainer">
<div className="DMTab yourchats">
<h1>
Your chats
Expand All @@ -274,7 +364,9 @@ function DM() {
</h1>
<ul className="DMList">
{DMAdded.length > 0 &&
DMAdded.map((value, key) => <li key={key}>{value}</li>)}
DMAdded.map((value, key) => {
return <DMAddedPeopleElement userId={value} key={key} />;
})}
</ul>
</div>

Expand Down

0 comments on commit a752bcf

Please sign in to comment.