136 | 143 |

144 | {messages?.map((message, index) => ( 145 | setSelectedMessage(message.messageId)} 153 | isFirstMessage={ 154 | index !== 0 && index + 1 !== messages.length 155 | ? message.sender !== messages[index - 1].sender && 156 | message.sender === messages[index + 1].sender 157 | : index === 0 158 | ? true 159 | : index + 1 === messages.length 160 | ? message.sender !== messages[index - 1].sender 161 | : false 162 | } 163 | isLastMessage={ 164 | index !== 0 && index + 1 !== messages.length 165 | ? message.sender !== messages[index + 1].sender && 166 | message.sender === messages[index - 1].sender 167 | : index + 1 === messages.length 168 | ? true 169 | : index === 0 170 | ? message.sender !== messages[index + 1].sender 171 | : false 172 | } 173 | /> 174 | ))} 175 |

176 |

177 |

178 | 184 |

185 |

186 | ); 187 | }); 188 | -------------------------------------------------------------------------------- /src/components/LeftSide.tsx: -------------------------------------------------------------------------------- 1 | import { signOut } from "firebase/auth"; 2 | import { useEffect, useState, memo, useRef } from "react"; 3 | import emptyProfile from "../assets/empty-profile.png"; 4 | import { auth, db } from "../core/firebaseConfig"; 5 | import { 6 | collection, 7 | DocumentData, 8 | onSnapshot, 9 | orderBy, 10 | query, 11 | QueryDocumentSnapshot, 12 | QuerySnapshot, 13 | Timestamp, 14 | where, 15 | } from "firebase/firestore"; 16 | import { chatRoom } from "../core/types"; 17 | import MessageView from "./MessageView"; 18 | import Popup from "reactjs-popup"; 19 | import "reactjs-popup/dist/index.css"; 20 | import AddUser from "./AddUser"; 21 | import { motion } from "framer-motion"; 22 | import { PopupActions } from "reactjs-popup/dist/types"; 23 | function timeConverter(UNIX_timestamp: Timestamp): string { 24 | const a = new Date(UNIX_timestamp.seconds * 1000); 25 | return ( 26 | a.getHours().toLocaleString("en-US", { 27 | minimumIntegerDigits: 2, 28 | useGrouping: false, 29 | }) + 30 | " : " + 31 | a.getMinutes().toLocaleString("en-US", { 32 | minimumIntegerDigits: 2, 33 | useGrouping: false, 34 | }) 35 | ); 36 | } 37 | type Props = { 38 | picture?: string; 39 | userId?: string; 40 | displayName: string; 41 | selectedChatRoom: string; 42 | setSelectedChatRoom: (a: string) => void; 43 | setOpen: (b: boolean) => void; 44 | }; 45 | 46 | export default memo(function LeftSide({ 47 | picture, 48 | userId, 49 | selectedChatRoom, 50 | setSelectedChatRoom, 51 | setOpen, 52 | displayName, 53 | }: Props) { 54 | const [searchValue, setSearchValue] = useState(""); 55 | const [chatRooms, setChatRooms] = useState(); 56 | const refPopup = useRef(null); 57 | useEffect(() => { 58 | if (userId) { 59 | const q = query( 60 | collection(db, "chats"), 61 | where("userIds", "array-contains", userId), 62 | orderBy("updatedAt") 63 | ); 64 | const unsubscribe = onSnapshot( 65 | q, 66 | (querySnapshot: QuerySnapshot) => { 67 | const chatRooms: chatRoom[] = []; 68 | querySnapshot.forEach((doc: QueryDocumentSnapshot) => { 69 | chatRooms.push(doc.data() as chatRoom); 70 | }); 71 | setChatRooms(chatRooms.reverse()); 72 | } 73 | ); 74 | return unsubscribe; 75 | } 76 | }, [userId]); 77 | return ( 78 | 84 |

85 |

86 |

{ 88 | setSelectedChatRoom(""); 89 | setOpen(false); 90 | }} 91 | className="flex items-center space-x-2 cursor-pointer" 92 | > 93 | profile

98 |

99 |

Messages

100 |

signOut(auth)} 102 | className="bg-green hover:bg-opacity-50 text-white font-medium px-3 py-2 rounded-lg cursor-pointer active:scale-95 transition" 103 | > 104 | Sign out 105 |

106 |

107 |

108 |

109 | You logged in as 110 | {displayName} 111 |

112 |

113 |

114 | 120 | 132 |

133 | Add a new friend 134 |

135 |

136 | } 137 | > 138 | refPopup.current?.close()} 140 | userId={userId || ""} 141 | /> 142 | 143 |

144 |

145 | 159 | setSearchValue(e.target.value)} 163 | /> 164 |

165 |

167 | {!chatRooms && 168 | [1, 2, 3, 4].map((item) => ( 169 |

173 |

174 |

175 |

176 |

177 |

178 |

179 |

180 |

181 |

182 | ))} 183 | {chatRooms?.map((item: chatRoom) => ( 184 | 197 | ))} 198 |

199 | 200 | ); 201 | }); 202 | -------------------------------------------------------------------------------- /src/pages/Login.tsx: -------------------------------------------------------------------------------- 1 | import whatsappscreen from "../assets/whatsappscreen.png"; 2 | import whatsapplogo from "../assets/whatsapplogo2.png"; 3 | import google from "../assets/google.png"; 4 | import { useEffect, useState } from "react"; 5 | import { Link, useNavigate } from "react-router-dom"; 6 | import { auth, db } from "../core/firebaseConfig"; 7 | import { 8 | GoogleAuthProvider, 9 | onAuthStateChanged, 10 | signInWithEmailAndPassword, 11 | signInWithPopup, 12 | } from "firebase/auth"; 13 | import { LoginType } from "../core/types"; 14 | import { 15 | addDoc, 16 | collection, 17 | doc, 18 | getDoc, 19 | serverTimestamp, 20 | setDoc, 21 | updateDoc, 22 | } from "firebase/firestore"; 23 | 24 | export default function Login() { 25 | const navigate = useNavigate(); 26 | const [data, setData] = useState({ email: "", password: "" }); 27 | const [error, setError] = useState(""); 28 | const [loading, setLoading] = useState(false); 29 | const onChange = (e: React.ChangeEvent) => { 30 | setData((prevData) => ({ ...prevData, [e.target.name]: e.target.value })); 31 | }; 32 | const submitHandler = (e: React.FormEvent) => { 33 | e.preventDefault(); 34 | setError(""); 35 | setLoading(true); 36 | signInWithEmailAndPassword(auth, data.email, data.password) 37 | .catch((e) => setError(e.code)) 38 | .finally(() => setLoading(false)); 39 | }; 40 | const signInWithGoogleHandler = () => { 41 | const provider = new GoogleAuthProvider(); 42 | signInWithPopup(auth, provider).then((result) => { 43 | getDoc(doc(db, "users", result.user.uid)) 44 | .then((res) => { 45 | if (!res.exists()) { 46 | const userData = { 47 | fName: result.user.displayName?.split(" ")[0], 48 | lName: result.user.displayName?.split(" ")[1], 49 | birthday: null, 50 | email: result.user.email, 51 | uid: result.user.uid, 52 | picture: result.user.photoURL, 53 | search: [ 54 | result.user.displayName?.split(" ")[0].toLowerCase(), 55 | result.user.displayName?.split(" ")[1].toLowerCase(), 56 | result.user.email?.toLowerCase(), 57 | result.user.displayName, 58 | ], 59 | }; 60 | setDoc(doc(db, "users", result.user.uid), userData); 61 | addDoc(collection(db, "chats"), { 62 | createdAt: serverTimestamp(), 63 | lastMessage: "", 64 | updatedAt: serverTimestamp(), 65 | userIds: [result.user.uid, "rmbJQucAbjQvll9pV341OB8hxnx2"], 66 | id: "", 67 | }).then((docRef) => { 68 | updateDoc(doc(db, "chats", docRef.id), { id: docRef.id }); 69 | addDoc(collection(db, "messages"), { 70 | chatId: docRef.id, 71 | message: 72 | "Hello i'm Islem medjahdi, I'm a computer science student in Algeria - Algiers, If you have any questions, let me know and don't forget to check my portfolio : https://islem-medjahdi-portfolio.vercel.app/", 73 | sender: "rmbJQucAbjQvll9pV341OB8hxnx2", 74 | type: "text", 75 | createdAt: serverTimestamp(), 76 | }).then((docRef) => { 77 | updateDoc(doc(db, "messages", docRef.id), { 78 | messageId: docRef.id, 79 | }); 80 | }); 81 | updateDoc(doc(db, "chats", docRef.id), { 82 | updatedAt: serverTimestamp(), 83 | lastMessage: 84 | "Hello i'm Islem medjahdi, I'm a computer science student in Algeria - Algiers, If you have any questions, let me know and don't forget to check my portfolio : https://islem-medjahdi-portfolio.vercel.app/", 85 | }); 86 | }); 87 | } 88 | }) 89 | .catch((e) => console.log(e)); 90 | }); 91 | }; 92 | useEffect(() => { 93 | const unsub = onAuthStateChanged(auth, (currentUser) => { 94 | if (currentUser) { 95 | navigate("/", { replace: true }); 96 | } 97 | }); 98 | return unsub; 99 | }, [navigate]); 100 | return ( 101 |

102 | 165 |

166 |

167 | Social media shared today, tomorrow or by location 168 |

169 |

170 |

171 |

176 |

177 |

178 |

179 | ); 180 | } 181 | -------------------------------------------------------------------------------- /src/pages/Signup.tsx: -------------------------------------------------------------------------------- 1 | import google from "../assets/google.png"; 2 | import whatsappscreen from "../assets/whatsappscreen.png"; 3 | import whatsapplogo from "../assets/whatsapplogo2.png"; 4 | import { useEffect, useRef, useState } from "react"; 5 | import { Calendar } from "@hassanmojab/react-modern-calendar-datepicker"; 6 | import "@hassanmojab/react-modern-calendar-datepicker/lib/DatePicker.css"; 7 | import { Link, useNavigate } from "react-router-dom"; 8 | import { db, auth } from "../core/firebaseConfig"; 9 | import { 10 | createUserWithEmailAndPassword, 11 | onAuthStateChanged, 12 | } from "firebase/auth"; 13 | import { 14 | addDoc, 15 | collection, 16 | doc, 17 | serverTimestamp, 18 | setDoc, 19 | updateDoc, 20 | } from "firebase/firestore"; 21 | import { BirthdayDate, SignUpType } from "../core/types"; 22 | 23 | export default function Signup() { 24 | const navigate = useNavigate(); 25 | const [openCalendar, setOpenCalendar] = useState(false); 26 | const calendarRef = useRef(null); 27 | const [error, setError] = useState(""); 28 | const [loading, setLoading] = useState(false); 29 | const [data, setData] = useState({ 30 | fName: "", 31 | lName: "", 32 | email: "", 33 | password: "", 34 | confirmPassword: "", 35 | birthday: { day: 5, month: 6, year: 2002 }, 36 | }); 37 | useEffect(() => { 38 | document.addEventListener("click", (e) => { 39 | if (!calendarRef.current?.contains(e.target as Node)) { 40 | setOpenCalendar(false); 41 | } 42 | }); 43 | return document.removeEventListener("click", (e) => { 44 | if (!calendarRef.current?.contains(e.target as Node)) { 45 | setOpenCalendar(false); 46 | } 47 | }); 48 | }, []); 49 | const onChange = (e: React.ChangeEvent): void => { 50 | setData((prevData) => ({ ...prevData, [e.target.name]: e.target.value })); 51 | }; 52 | const dateChangeHandler = (date: BirthdayDate) => { 53 | setData({ ...data, birthday: date }); 54 | setOpenCalendar(false); 55 | }; 56 | const submitHandler = (e: React.FormEvent) => { 57 | e.preventDefault(); 58 | setLoading(true); 59 | setError(""); 60 | const { fName, lName, email, password, confirmPassword, birthday } = data; 61 | if (fName.trim() === "") { 62 | setError("First name can not be empty"); 63 | setLoading(false); 64 | } else if (lName.trim() === "") { 65 | setLoading(false); 66 | setError("Last name can not be empty"); 67 | } else if (password !== confirmPassword) { 68 | setError("Password missmatch"); 69 | setLoading(false); 70 | } else { 71 | createUserWithEmailAndPassword(auth, email, password) 72 | .then((user) => { 73 | const userData = { 74 | fName, 75 | lName, 76 | birthday, 77 | email, 78 | uid: user.user.uid, 79 | picture: "", 80 | search: [ 81 | lName.toLowerCase(), 82 | fName.toLowerCase(), 83 | email.toLowerCase(), 84 | fName.toLowerCase() + " " + lName.toLowerCase(), 85 | ], 86 | }; 87 | setDoc(doc(db, "users", user.user.uid), userData); 88 | addDoc(collection(db, "chats"), { 89 | createdAt: serverTimestamp(), 90 | lastMessage: "", 91 | updatedAt: serverTimestamp(), 92 | userIds: [user.user.uid, "rmbJQucAbjQvll9pV341OB8hxnx2"], 93 | id: "", 94 | }).then((docRef) => { 95 | updateDoc(doc(db, "chats", docRef.id), { id: docRef.id }); 96 | addDoc(collection(db, "messages"), { 97 | chatId: docRef.id, 98 | message: 99 | "Hello i'm Islem medjahdi, I'm a computer science student in Algeria - Algiers, If you have any questions, let me know and don't forget to check my portfolio : https://islem-medjahdi-portfolio.vercel.app/", 100 | sender: "rmbJQucAbjQvll9pV341OB8hxnx2", 101 | type: "text", 102 | createdAt: serverTimestamp(), 103 | }).then((docRef) => { 104 | updateDoc(doc(db, "messages", docRef.id), { 105 | messageId: docRef.id, 106 | }); 107 | }); 108 | updateDoc(doc(db, "chats", docRef.id), { 109 | updatedAt: serverTimestamp(), 110 | message: 111 | "Hello i'm Islem medjahdi, I'm a computer science student in Algeria - Algiers, If you have any questions, let me know and don't forget to check my portfolio : https://islem-medjahdi-portfolio.vercel.app/", 112 | }); 113 | }); 114 | }) 115 | .catch((e) => setError(e.code)) 116 | .finally(() => setLoading(false)); 117 | } 118 | }; 119 | useEffect(() => { 120 | const unsub = onAuthStateChanged(auth, (currentUser) => { 121 | if (currentUser) { 122 | navigate("/", { replace: true }); 123 | } 124 | }); 125 | return unsub; 126 | }, [navigate]); 127 | return ( 128 |

129 |

130 |

131 | Social media shared today, tomorrow or by location 132 |

133 |

134 |

135 |

140 |

141 |

142 |

143 |

144 |

149 |

150 |

151 |

152 | Create account 153 |

154 |

155 |

156 | First name 157 | 162 |

163 |

164 | Last name 165 | 170 |

171 |

172 |

173 |

174 | Email 175 | 181 |

182 |

183 | 184 | Date of birth (MM/DD/YY) 185 | 186 |

187 | {`${data.birthday.day} / ${data.birthday.month} / ${data.birthday.year} `} 188 |

189 | 204 | {openCalendar && ( 205 |

206 | 213 |

214 | )} 215 |

216 |

217 |

218 |

219 |

220 |

221 | Password 222 | 228 |

229 |

230 | Confirm Password 231 | 237 |

238 |

239 |

240 | 247 | 256 |

257 | {error && ( 258 |

{error}

259 | )} 260 |

261 |

262 |

You already have an account?

263 | 267 | Log in 268 | 269 |

270 |

271 |

272 | ); 273 | } 274 | --------------------------------------------------------------------------------

115 | Account login 116 |

167 | Social media shared today, tomorrow or by location 168 |

131 | Social media shared today, tomorrow or by location 132 |

152 | Create account 153 |