Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TS migration #96

Open
wants to merge 35 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
a050da3
chore: converts into tsx from jsx and added typs in some files
mohitvermax Aug 1, 2024
5f43232
fix: fixes closing of dropdown on selecting a project and added types
mohitvermax Aug 1, 2024
b5065d2
chore:userContext.js Done
kitretsu2809 Aug 2, 2024
ad09388
chore:components,context,pages Done
kitretsu2809 Aug 3, 2024
5c322dd
rfac: added typescript
mohitvermax Aug 3, 2024
d5bd604
chore:hooks done
kitretsu2809 Aug 3, 2024
41a90f8
resolved merge conflicts
kitretsu2809 Aug 3, 2024
2bc1b5e
resolved merge conflicts
kitretsu2809 Aug 3, 2024
035962f
Final commit
kitretsu2809 Aug 10, 2024
63a5d26
chore:Collected Interfeces and Modified FC
kitretsu2809 Aug 15, 2024
c2adcd2
chore:context,hooks,pages,api,utils declared seperately interfaces
kitretsu2809 Aug 15, 2024
d18c520
fix:chat_bot and websocket
kitretsu2809 Aug 15, 2024
f7761c3
fix:websocket
kitretsu2809 Aug 15, 2024
3ad70ff
Fix:errors fixed
kitretsu2809 Aug 16, 2024
fa9ee50
fix:WebSocket Issue
kitretsu2809 Aug 18, 2024
2d30b9e
fix:db localhost was changed
kitretsu2809 Aug 18, 2024
22f6503
fix: url-builder updated:
kitretsu2809 Aug 20, 2024
45d81e0
merge: with kitretsu
kitretsu2809 Aug 20, 2024
870ddd0
Fix:more fixes
kitretsu2809 Sep 1, 2024
e0964e7
Fix:more fixes
kitretsu2809 Sep 24, 2024
0e79cd3
Fix:more fixes
kitretsu2809 Sep 24, 2024
5b97a78
Fix:more fixes
kitretsu2809 Sep 24, 2024
de01a41
Fix:more fixes
kitretsu2809 Sep 24, 2024
e6f3161
Fix:more fixes
kitretsu2809 Sep 24, 2024
20414f0
Fix:NavigateToLogin Fixed
kitretsu2809 Sep 27, 2024
9af4f13
Update comments for clarity and consistency in code
kitretsu2809 Sep 29, 2024
365e743
useWebSocketForChatBot Errors fixed
kitretsu2809 Sep 29, 2024
3b2b92a
Fix:Uncommented useLeavechat
kitretsu2809 Sep 30, 2024
0993bc7
rfac: revert all backend changes
Aaditya-G Oct 25, 2024
09a1d53
Fix:topicDorpdown and channelswitching
kitretsu2809 Oct 26, 2024
c2a34a5
Merge branch 'feat/typescript' of https://github.com/mdgspace/echofy …
kitretsu2809 Oct 26, 2024
1976638
Fix:index.tsx redirect props
kitretsu2809 Oct 26, 2024
b3a29bd
chore: remove debug console logs
kitretsu2809 Oct 27, 2024
9e830f3
chore:ChatBotButton Disabled
kitretsu2809 Oct 29, 2024
b933b7f
Revert "chore:ChatBotButton Disabled"
kitretsu2809 Oct 29, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix:more fixes
  • Loading branch information
kitretsu2809 committed Sep 24, 2024
commit 0e79cd3ef71edc525a0488970cbbc806b521d074
143 changes: 70 additions & 73 deletions frontend/components/chat/chatContainer.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from "react";
import React, { useState, useEffect } from "react";
import Echofy from "../../assets/logo.svg";
import Image from "next/image";
import moment from "moment";
import Avatar1 from "../../assets/avatars/avatar_1.svg";
import Avatar2 from "../../assets/avatars/avatar_2.svg";
import Avatar3 from "../../assets/avatars/avatar_3.svg";
@@ -16,35 +16,31 @@ import Avatar12 from "../../assets/avatars/avatar_12.svg";
import Avatar13 from "../../assets/avatars/avatar_13.svg";
import Avatar14 from "../../assets/avatars/avatar_14.svg";
import Avatar15 from "../../assets/avatars/avatar_15.svg";
import parseMessageText from "../../utils/chatbot_formatting/parseMessageText";
import getAvatar from "../../utils/session/getAvatar";
import { ChatContainerProps, Message } from "../../interface/interface";

import {Message ,ChatContainerProps } from "../../interface/interface"
export default function ChatContainer({ messages, messagesEndRef }: ChatContainerProps): React.JSX.Element {
const [filteredMessage, setFilteredMessage] = useState<Message[]>([]);

const AvatarList = [
Avatar1,
Avatar2,
Avatar3,
Avatar4,
Avatar5,
Avatar6,
Avatar7,
Avatar8,
Avatar9,
Avatar10,
Avatar11,
Avatar12,
Avatar13,
Avatar14,
Avatar15,
];

const ChatContainer: React.FC<ChatContainerProps> = ({ messages, messagesEndRef }) => {
const [Avatar, setAvatar] = useState<string>(Avatar1);

const formatTime = (timestamp: number) => {
const date = new Date(timestamp * 1000);
return moment(date).format("hh:mm A");
};
const AvatarList = [
Avatar1,
Avatar2,
Avatar3,
Avatar4,
Avatar5,
Avatar6,
Avatar7,
Avatar8,
Avatar9,
Avatar10,
Avatar11,
Avatar12,
Avatar13,
Avatar14,
Avatar15,
];
const [Avatar, setAvatar] = useState<string>(Avatar1.src);

useEffect(() => {
if (messagesEndRef.current) {
@@ -53,65 +49,66 @@ const ChatContainer: React.FC<ChatContainerProps> = ({ messages, messagesEndRef

async function loadAvatar() {
const AvatarId = await getAvatar();
const selectedAvatar = AvatarList[AvatarId];
setAvatar(selectedAvatar);
const Avatar = AvatarList[AvatarId];
setAvatar(Avatar.src);
}

loadAvatar();
}, [messages]);

useEffect(() => {
const filterMessages = () => {
const newMessages = messages.filter((message) => {
// message is already an object, no need to parse it
return !(message.userID && message.userID.startsWith("chatbot"));
});
return newMessages;
};
const newFilteredMessages = filterMessages();
setFilteredMessage(newFilteredMessages as Message[]);
}, [messages]);

return (
<div className="h-[85vh]">
<ul>
{messages?.map((message: Message, index: number) => (
<li
key={index}
className={`flex items-start ${message.isSent ? "justify-end" : "justify-start"} mb-4 mx-6 `}
>
<div
className={`relative flex font-Lato text-base ${message.isSent ? "flex-row-reverse" : ""}`}
{filteredMessage?.map((message, index) => {
return (
<li
key={index}
className={`flex items-start ${message.isSent ? "justify-end" : "justify-start"} mb-4 mx-6`}
>
<div className="flex flex-col">
<div
className={`flex flex-row gap-2 items-center ${message.isSent ? "flex-row-reverse" : ""}`}
>
<div className="flex-shrink-0 w-12 h-12">
<Image
src={message.avatar || Avatar}
width="48"
height="48"
alt=""
className="rounded-full"
/>
</div>
<div className="text-txt-mdg-username">
{message.username}
</div>
</div>
<div className={`relative flex font-Lato text-base ${message.isSent ? "flex-row-reverse" : ""}`}>
<div className="flex flex-col">
<div
className={`w-[max-content] min-w-[4vw] max-w-[50vw] px-4 py-2 mx-2 ${
message.isSent
? "bg-customBlue text-white rounded-l-[32px] rounded-br-[32px] mr-6"
: " bg-white text-semiblack rounded-r-[32px] rounded-bl-[32px] ml-12"
} break-words`}
>
<div className="py-2">{message.text}</div>
<div className={`flex flex-row gap-2 items-center ${message.isSent ? "flex-row-reverse" : ""}`}>
<div className="flex-shrink-0 w-12 h-12">
<Image
src={message.isSent ? Avatar : Echofy.src}
width="48"
height="48"
alt=""
/>
</div>
<div className="text-txt-mdg-username">{message.username}</div>
</div>
<div
className={`text-xs text-bg-gray w-[95%] mt-2 flex ${message.isSent ? "justify-start ml-6" : "justify-end"}`}
>
{formatTime(message.timestamp)}
<div className="flex flex-col">
<div
className={`w-[max-content] min-w-[4vw] max-w-[50vw] px-4 py-2 mx-2 ${
message.isSent
? "bg-customBlue text-white rounded-l-[32px] rounded-br-[32px] mr-6"
: " bg-white text-semiblack rounded-r-[32px] rounded-bl-[32px] ml-12"
} break-words`}
>
<div className="py-2 whitespace-pre-wrap text-Lato">
{message.isSent ? message.text : parseMessageText(message.text)}
</div>
</div>
</div>
</div>
</div>
</div>
</li>
))}
</li>
);
})}
</ul>
<div ref={messagesEndRef} />
</div>
);
};

export default ChatContainer;
}
13 changes: 6 additions & 7 deletions frontend/components/chat/loginModal.tsx
Original file line number Diff line number Diff line change
@@ -7,7 +7,6 @@ import removeSessionUserId from "../../utils/session/removeSessionUserId";
import checkAndPromptSessionChange from "../../utils/alerts/checkAndPromptSessionChange";
import { toast } from "react-toastify"; // Assuming you're using react-toastify
import {LoginModalProps} from "../../interface/interface"

const LoginModal: React.FC<LoginModalProps> = ({ onClose, redirect }) => {
const popupRef = useRef<HTMLDivElement>(null);
const [username, setUsername] = useState("");
@@ -58,14 +57,14 @@ const LoginModal: React.FC<LoginModalProps> = ({ onClose, redirect }) => {
if (currentUser === username) {
router.push(`/chat?${queryParams.toString()}`);
} else {
const hasChanged = await checkAndPromptSessionChange(
currentUser,
username,
() => {
const hasChanged = await checkAndPromptSessionChange({
currentUsername: currentUser,
inputUsername: username,
onConfirm: () => {
removeSessionUserId();
setSessionUser(username);
}
);
},
});
if (hasChanged) {
router.push(`/chat?${queryParams.toString()}`);
}
11 changes: 6 additions & 5 deletions frontend/components/chatbot/chatbotLoginModal.tsx
Original file line number Diff line number Diff line change
@@ -47,14 +47,15 @@ const LoginModal: React.FC<LoginModalProps> = ({ onClose, redirect }) => {
if (currentUser === username) {
router.push(`/chat?${new URLSearchParams(query).toString()}`);
} else {
const hasChanged = await checkAndPromptSessionChange(
currentUser,
username,
() => {
const hasChanged = await checkAndPromptSessionChange({
currentUsername: currentUser,
inputUsername: username,
onConfirm: () => {
removeSessionUserId();
setSessionUser(username);
},
);
});

if (hasChanged) {
router.push(`/chat?${new URLSearchParams(query).toString()}`);
}
49 changes: 29 additions & 20 deletions frontend/hooks/useLeaveChat.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,35 @@
// useLeaveChat.ts
import { useEffect } from "react";
import getSessionUserId from "../utils/session/getSessionUserId";
import removeSessionUserId from "../utils/session/removeSessionUserId";
import { leaveChat } from "../services/api/leaveChatApi";
import { NextRouter } from "next/router";

const useLeaveChat=(router:NextRouter)=>{
useEffect(() => {
const leaveChatOnNavigation = () => {
leaveChat(getSessionUserId());
removeSessionUserId();
};
const handleBeforeUnload = (e:BeforeUnloadEvent) => {
leaveChat(getSessionUserId());
};

router.events.on("routeChangeStart", leaveChatOnNavigation);
window.addEventListener("beforeunload", handleBeforeUnload);

return () => {
router.events.off("routeChangeStart", leaveChatOnNavigation);
window.removeEventListener("beforeunload", handleBeforeUnload);
};
}, [router]);
}
export default useLeaveChat;
const useLeaveChat = (router: NextRouter) => {
useEffect(() => {
const leaveChatOnNavigation = () => {
const userId = getSessionUserId();
if (userId) {
leaveChat(userId);
removeSessionUserId();
}
};

const handleBeforeUnload = (e: BeforeUnloadEvent) => {
const userId = getSessionUserId();
if (userId) {
leaveChat(userId);
}
};

router.events.on("routeChangeStart", leaveChatOnNavigation);
window.addEventListener("beforeunload", handleBeforeUnload);

return () => {
router.events.off("routeChangeStart", leaveChatOnNavigation);
window.removeEventListener("beforeunload", handleBeforeUnload);
};
}, [router]);
};

export default useLeaveChat;
4 changes: 2 additions & 2 deletions frontend/hooks/useLoadSettings.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { useEffect } from 'react';
import { UseLoadSettingProps } from '../interface/interface';


const useLoadSetting = (setSoundEnabled, setNotificationsEnabled) => {
const useLoadSetting = ({ setSoundEnabled, setNotificationsEnabled }: UseLoadSettingProps) => {
useEffect(() => {
const savedSoundEnabled = localStorage.getItem("soundEnabled");
const savedNotificationsEnabled = localStorage.getItem("notificationsEnabled");
@@ -18,3 +17,4 @@ const useLoadSetting = (setSoundEnabled, setNotificationsEnabled) => {
};

export default useLoadSetting;

5 changes: 3 additions & 2 deletions frontend/hooks/useSettings.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { useEffect } from "react";
import { UseSettingsProps } from "../interface/interface";
function useSettings(soundEnabled, notificationsEnabled) {

const useSettings = ({ soundEnabled, notificationsEnabled }: UseSettingsProps) => {
useEffect(() => {
localStorage.setItem("soundEnabled", JSON.stringify(soundEnabled));
}, [soundEnabled]);

useEffect(() => {
localStorage.setItem("notificationsEnabled", JSON.stringify(notificationsEnabled));
}, [notificationsEnabled]);
}
};

export default useSettings;
14 changes: 13 additions & 1 deletion frontend/interface/interface.ts
Original file line number Diff line number Diff line change
@@ -95,6 +95,7 @@ export interface MailProps {
username: string;
text: string;
timestamp: number;
userID: string;
}
export interface ChatContainerProps {
messages: Message[]; // Assuming messages are serialized JSON strings
@@ -241,4 +242,15 @@ export interface ChatInputBoxProps {
export interface LoginModalProps {
onClose: () => void;
redirect: string;
}
}

export type CheckAndPromptSessionChange = (
currentUser: string,
newUsername: string,
onSessionChange: () => void
) => Promise<boolean>;

export type GetSessionUser = () => string | null;
export type GetSessionUserId = () => string | null;
export type SetSessionUser = (username: string) => void;
export type RemoveSessionUserId = () => void;
19 changes: 11 additions & 8 deletions frontend/package-lock.json

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

3 changes: 2 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
@@ -27,7 +27,8 @@
"tailwindcss": "^3.3.3"
},
"devDependencies": {
"@types/react": "18.3.3",
"@types/node": "^22.6.1",
"@types/react": "^18.3.3",
"typescript": "5.5.4"
}
}
Loading