Skip to content

Commit

Permalink
MERGE:CHANGES
Browse files Browse the repository at this point in the history
  • Loading branch information
@ismail-kharrobi
ismail-kharrobi committed Nov 9, 2023
2 parents 04d9bc1 + a8d4cdb commit 2c70a86
Show file tree
Hide file tree
Showing 26 changed files with 856 additions and 558 deletions.
33 changes: 17 additions & 16 deletions backend/code/package-lock.json
View file

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

3 changes: 1 addition & 2 deletions backend/code/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
"@nestjs/swagger": "^7.1.12",
"@nestjs/throttler": "^5.0.0",
"@nestjs/websockets": "^10.2.6",
"@prisma/client": "^5.2.0",
"@prisma/client": "^5.5.2",
"@types/qrcode": "^1.5.4",
"bcrypt": "^5.1.1",
"bull": "^4.11.3",
Expand All @@ -51,7 +51,6 @@
"passport": "^0.6.0",
"passport-42": "^1.2.6",
"passport-jwt": "^4.0.1",
"prisma": "^5.2.0",
"qrcode": "^1.5.3",
"reflect-metadata": "^0.1.13",
"rxjs": "^7.8.1",
Expand Down
12 changes: 6 additions & 6 deletions frontend/code/src/Api/base.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import axios from "axios";
import { useNavigate } from 'react-router-dom';
import { useUserStore } from "../Stores/stores";
const useNavigateCustom = () => {
const navigate = useNavigate();
return navigate;
};
// import { useNavigate } from 'react-router-dom';
// import { useUserStore } from "../Stores/stores";
// const useNavigateCustom = () => {
// const navigate = useNavigate();
// return navigate;
// };
const api = axios.create({
baseURL: `${process.env.REACT_APP_API_ENDPOINT}`,
timeout: 10000,
Expand Down
55 changes: 34 additions & 21 deletions frontend/code/src/Components/Chat/Components/Conversation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export interface ChatPaceHolderProps {
isRead: boolean;
userImage: string;
id: string;
secondUserId: string;
}

export const CurrentUserMessage = ({
Expand Down Expand Up @@ -100,11 +101,35 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
const toggleChatRooms = useChatStore((state) => state.toggleChatRooms);

const [isModalOpen, setIsModalOpen] = useState(false);

const [isOnline, SetOnline] = useState(false);
const sockerStore = useSocketStore();
const handleConfirmation = () => {
setIsModalOpen(false);
};

useEffect(() => {
SetOnline(false);
const handleOnline = (userId: string) => {
currentUser.secondUserId === userId && SetOnline(true);
console.log(currentUser.id);

console.log("user online", userId);
};
const handleOffline = (userId: string) => {
currentUser.id === userId && SetOnline(false);
console.log("user offline", userId);
};

sockerStore.socket.on("friendOffline", handleOffline);
sockerStore.socket.on("friendOnline", handleOnline);

return () => {
sockerStore.socket.off("friendOffline", handleOffline);
sockerStore.socket.off("friendOnline", handleOnline);
};
// eslint-disable-next-line
}, [ChatState.selectedChatID]);

return (
<>
<div className="flex flex-row justify-between bg-[#1A1C26] p-3 border-b-2 border-black ">
Expand All @@ -129,14 +154,18 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
<div className="flex flex-col pl-2 ">
<p className="text-white font-poppins text-base font-medium leading-normal">
{selectedChatType === ChatType.Chat
? currentUser?.firstname
? currentUser?.name
: currentRoom?.isOwner
? currentRoom.name + " ♚"
: currentRoom?.name}
</p>
{selectedChatType === ChatType.Chat ? (
<p className="text-green-500 font-poppins text-sm font-medium leading-normal">
online
<p
className={`${
isOnline ? "text-green-500" : "text-red-500"
} font-poppins text-sm font-medium leading-normal`}
>
{isOnline ? "online" : "offline"}
</p>
) : (
<p className="text-gray-500 font-poppins text-sm font-medium leading-normal">
Expand Down Expand Up @@ -282,7 +311,6 @@ export const Conversation: React.FC<ConversationProps> = ({
}
};

const currentUser = useUserStore((state) => state);
const [inputValue, setInputValue] = useState("");
const [FailToSendMessage, setFail] = useState(false);
const [IsLoading, setLoading] = useState(true);
Expand Down Expand Up @@ -375,21 +403,6 @@ export const Conversation: React.FC<ConversationProps> = ({
toast.error("you are not authorized to send messages in this room");
chatState.setMessageAsFailed(res?.data.id);
} else {
// for debug
if (chatState.selectedChatType === ChatType.Chat) {
const message: Message = {
id: res.data.id,
avatar: {
thumbnail: currentUser.picture.thumbnail,
medium: currentUser.picture.medium,
large: currentUser.picture.large,
},
senderId: currentUser.id,
message: res.data.content,
time: res.data.time,
};
chatState.pushMessage(message);
}
}
});
};
Expand All @@ -411,8 +424,8 @@ export const Conversation: React.FC<ConversationProps> = ({
(chatState.currentMessages?.length as number) > 0 ? (
chatState.currentMessages?.map((message) => (
<CurrentUserMessage
isFailed={message.isFailed}
key={message.id}
isFailed={message.isFailed}
avatar={message.avatar}
message={message.message}
time={message.time}
Expand Down
119 changes: 94 additions & 25 deletions frontend/code/src/Components/Chat/Components/RecentChat.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { useState } from "react";
import { useEffect, useState } from "react";
import { ChatType, useChatStore } from "../Controllers/RoomChatControllers";
import { ChatPaceHolderProps } from "./Conversation";
import users, {
ChatIcon,
DmRoom,
Explore,
GroupChat,
RoomsIcon,
Expand All @@ -11,33 +12,88 @@ import users, {

import { NullPlaceHolder, RoomChatPlaceHolder } from "./RoomChatHelpers";
import { useModalStore } from "../Controllers/LayoutControllers";
import { fetchDmsCall } from "../Services/ChatServices";
import { formatTime } from "./tools/utils";

export const RecentConversations = () => {
const [MyUsers] = useState(users);
const [isLoading, setLoading] = useState(false);
const selectedChatType = useChatStore((state) => state.selectedChatType);
const ChatRoomsState = useChatStore((state) => state);

useEffect(() => {
const fetch = async () => {
setLoading(true);
await fetchDmsCall(0, 100).then((res) => {
setLoading(false);
if (res?.status !== 200 && res?.status !== 201) {
} else {
const rooms: DmRoom[] = [];
res.data.forEach(
(room: {
secondMemberId: string;
id: string;
last_message?: {
content?: string;
createdAt?: string;
};
name: string;

avatar: {
thumbnail: string;
medium: string;
large: string;
};
}) => {
rooms.push({
secondUserId: room.secondMemberId,
id: room.id,
name: room.name,
avatar: room.avatar,
last_message: {
content: room.last_message?.content,
createdAt: room.last_message?.createdAt,
},
});
}
);
// setIsLoading(false);
ChatRoomsState.fillRecentDms(rooms);
}
});
};
fetch();
// eslint-disable-next-line
}, [ChatRoomsState.selectedChatID, ChatRoomsState.selectedChatType]);

return selectedChatType === ChatType.Chat ? (
<div className="h-full flex flex-col ">
<OnlineNowUsers />
{MyUsers.length > 0 ? (
{ChatRoomsState.recentDms.length > 0 ? (
<div className="flex-grow overflow-y-auto no-scrollbar bg-[#1A1C26]">
{MyUsers.filter((friend) => friend.messages.length > 0).map(
// to change 0 to the last message here
(friend) => (
<ChatPlaceHolder
key={friend.id}
id={friend.id}
username={friend.name}
message={friend.messages[friend.messages.length - 1].message}
time={friend.messages[friend.messages.length - 1].time}
isMe={true}
isRead={true}
userImage={friend.image}
/>
)
)}
{ChatRoomsState.recentDms.map((friend) => (
<ChatPlaceHolder
key={friend.id}
secondUserId={friend.secondUserId}
id={friend.id}
username={friend.name}
message={friend.last_message?.content ?? "No Messages*"}
time={friend.last_message?.createdAt ?? ""}
isMe={true}
isRead={true}
userImage={friend.avatar.medium}
/>
))}
</div>
) : (
<NullPlaceHolder message="No Conversation Yet!, Be The First" />
<>
{isLoading === true ? (
<div className="text-center">
<span className="loading loading-spinner loading-lg "></span>
</div>
) : (
<NullPlaceHolder message="No Conversation Yet!, Be The First" />
)}
</>
)}
</div>
) : (
Expand All @@ -57,18 +113,31 @@ export const ChatPlaceHolder = ({
isRead,
userImage,
id,
secondUserId,
}: ChatPaceHolderProps) => {
const selectNewChat = useChatStore((state) => state.selectNewChatID);
const selectedChatID = useChatStore((state) => state.selectedChatID);
const chatState = useChatStore((state) => state);

return (
<div
onClick={() => selectNewChat(id)}
onClick={() => {
selectedChatID !== id && selectNewChat(id);
chatState.setCurrentDmUser({
// back here
secondUserId: secondUserId,
id: id,
name: username,
avatar: {
thumbnail: userImage,
medium: userImage,
large: userImage,
},
});
}}
className={`message-container flex px-4 py-5 hover:bg-[#272932] items-center ${
selectedChatID === id ? "bg-[#272932]" : "bg-[#1A1C26]"
}
`}
}`}
>
<div className="user-image flex-shrink-0 mr-2">
<img
Expand All @@ -82,8 +151,8 @@ export const ChatPlaceHolder = ({
<p className="text-white font-poppins text-sm md:text-base font-normal leading-normal ">
{username}
</p>
<p className="text-gray-400 font-poppins text-sm font-light leading-normal hidden md:block ">
{time} PM
<p className="text-gray-400 font-poppins text-xs font-light leading-normal">
{formatTime(time)}
</p>
</div>
<div className=" flex flex-row justify-between">
Expand Down
Loading

0 comments on commit 2c70a86

Please sign in to comment.