diff --git a/frontend/components/rightPane.jsx b/frontend/components/rightPane.tsx
similarity index 95%
rename from frontend/components/rightPane.jsx
rename to frontend/components/rightPane.tsx
index faf4abf..58dccef 100644
--- a/frontend/components/rightPane.jsx
+++ b/frontend/components/rightPane.tsx
@@ -7,13 +7,15 @@ import Image from "next/image";
import SettingsPopup from "./settingsPopup";
import React, { useState } from "react";
import { useRouter } from "next/router";
+import { SettingsPopupProps } from "../interface/interface";
export default function RightPane({
+ onClose,
soundEnabled,
setSoundEnabled,
notificationsEnabled,
setNotificationsEnabled,
-}) {
+}:SettingsPopupProps) {
const [showSettings, setShowSettings] = useState(false);
const router = useRouter();
const hoverEffectClasses ="hover:scale-125 hover:cursor-pointer transition-transform duration-300 ease-in-out";
diff --git a/frontend/components/settingsPopup.jsx b/frontend/components/settingsPopup.tsx
similarity index 91%
rename from frontend/components/settingsPopup.jsx
rename to frontend/components/settingsPopup.tsx
index 0f0a242..f9b49aa 100644
--- a/frontend/components/settingsPopup.jsx
+++ b/frontend/components/settingsPopup.tsx
@@ -7,6 +7,8 @@ import {
MdClose,
MdAudiotrack,
} from "react-icons/md";
+import { SettingsPopupProps } from "../interface/interface";
+
const SettingsPopup = ({
onClose,
@@ -14,12 +16,12 @@ const SettingsPopup = ({
setSoundEnabled,
notificationsEnabled,
setNotificationsEnabled,
-}) => {
- const popupRef = useRef();
+}: SettingsPopupProps) => {
+ const popupRef = useRef
(null);
useEffect(() => {
- function handleClickOutside(event) {
- if (popupRef.current && !popupRef.current.contains(event.target)) {
+ function handleClickOutside(event:MouseEvent) {
+ if (popupRef.current && !popupRef.current.contains(event.target as Node)) {
onClose();
}
}
diff --git a/frontend/components/topicDropdown.jsx b/frontend/components/topicDropdown.tsx
similarity index 72%
rename from frontend/components/topicDropdown.jsx
rename to frontend/components/topicDropdown.tsx
index e955bfa..37d9d08 100644
--- a/frontend/components/topicDropdown.jsx
+++ b/frontend/components/topicDropdown.tsx
@@ -1,50 +1,52 @@
"use client";
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
import { fetchProjects } from "../services/api/projectsApi";
-import { useEffect, useRef } from "react";
+import { Project,TopicDropdownProps} from "../interface/interface";
-export const TopicDropdown = ({ topic, setTopic,login }) => {
- const popupRef = useRef();
+export const TopicDropdown: React.FC = ({ topic, setTopic, login }) => {
+ const popupRef = useRef(null);
const [isOpen, setIsOpen] = useState(false);
- const [projects, setProjects] = useState([]);
- const projectList = projects.filter(
- (project) => project.Category === "Projects",
- );
+ const [projects, setProjects] = useState([]);
+
+ const projectList = projects.filter((project) => project.Category === "Projects");
const eventList = projects.filter((project) => project.Category === "Events");
const toggleDropdown = () => {
setIsOpen(!isOpen);
};
- const handleClick = (e) => {
- const content = e.target.textContent;
+ const handleClick = (event: React.MouseEvent) => {
+ event.preventDefault(); // Prevent default link behavior
+ const content = event.currentTarget.textContent || ""; // Get text content safely
setTopic(content);
- if(!login){
+ setIsOpen(false);
+ if (!login) {
window.location.href = `/chat_bot?topic=${encodeURIComponent(content)}`;
}
};
useEffect(() => {
- async function fetchProjectsData() {
+ const fetchProjectsData = async () => {
const data = await fetchProjects();
- if (data!=null){
- setProjects(data);
- }else{
- setProjects([]);
- }
- }
+ setProjects(data || []); // Handle null response
+ };
+
fetchProjectsData();
- }, []);
+ }, []);
useEffect(() => {
- function handleClickOutside(event) {
- if (popupRef.current && !popupRef.current.contains(event.target)) {
- setIsOpen(false);
+ const handleClickOutside = (event: MouseEvent) => {
+ if (popupRef.current && !popupRef.current.contains(event.target as Node)) {
+ setIsOpen(false);
+
}
- }
+ };
document.addEventListener("mousedown", handleClickOutside);
- return () => document.removeEventListener("mousedown", handleClickOutside);
- }, [popupRef, isOpen]);
+ return () => document.removeEventListener("mousedown",
+ handleClickOutside);
+ }, [popupRef]);
+ // No need for isOpen in dependency array
+
return (
{
{`${topic}`}
{
-
+
Projects
{projectList.map((project, index) => (
@@ -94,7 +96,7 @@ export const TopicDropdown = ({ topic, setTopic,login }) => {
-
+
Events
{eventList.map((event, index) => (
diff --git a/frontend/components/topicSelectionModal.jsx b/frontend/components/topicSelectionModal.tsx
similarity index 65%
rename from frontend/components/topicSelectionModal.jsx
rename to frontend/components/topicSelectionModal.tsx
index b210bc5..1921a4c 100644
--- a/frontend/components/topicSelectionModal.jsx
+++ b/frontend/components/topicSelectionModal.tsx
@@ -1,18 +1,21 @@
import React from "react";
+import { TopicSelectionModalProps } from "../interface/interface";
-const TopicSelectionModal = ({ onClose }) => {
+
+const TopicSelectionModal: React.FC = ({ onClose }) => {
return (
Please select a topic from the left pane.
Close
-
+
);
};
-export default TopicSelectionModal;
\ No newline at end of file
+
+export default TopicSelectionModal;
diff --git a/frontend/components/usernameInput.jsx b/frontend/components/usernameInput.jsx
deleted file mode 100644
index 4805abd..0000000
--- a/frontend/components/usernameInput.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-
;
\ No newline at end of file
diff --git a/frontend/components/usernameInput.tsx b/frontend/components/usernameInput.tsx
new file mode 100644
index 0000000..18428e5
--- /dev/null
+++ b/frontend/components/usernameInput.tsx
@@ -0,0 +1,27 @@
+import React, { useState, ChangeEvent } from 'react';
+import { UsernameInputProps } from '../interface/interface';
+
+
+const UsernameInput: React.FC
= ({ value, onChange }) => {
+ const handleInputChange = (event: ChangeEvent) => {
+ onChange(event.target.value);
+ };
+
+ return (
+
+ );
+};
+
+export default UsernameInput;
diff --git a/frontend/context/userContext.js b/frontend/context/userContext.js
deleted file mode 100644
index f1ee3f2..0000000
--- a/frontend/context/userContext.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { createContext, useState } from "react";
-
-export const UserContext = createContext();
-
-export const UserProvider = ({ children }) => {
- const [userName, setUserName] = useState(null);
- return (
-
- {children}
-
- );
-};
diff --git a/frontend/context/userContext.tsx b/frontend/context/userContext.tsx
new file mode 100644
index 0000000..1e16ce0
--- /dev/null
+++ b/frontend/context/userContext.tsx
@@ -0,0 +1,16 @@
+import React, { createContext, useState, ReactNode } from "react";
+import { UserContextType, UserProviderProps } from "../interface/interface";
+
+
+export const UserContext = createContext(undefined);
+
+export const UserProvider: React.FC = ({ children }) => {
+ const [userName, setUserName] = useState(null);
+
+ return (
+
+ {children}
+
+
+ );
+};
\ No newline at end of file
diff --git a/frontend/global.d.ts b/frontend/global.d.ts
new file mode 100644
index 0000000..ce579d2
--- /dev/null
+++ b/frontend/global.d.ts
@@ -0,0 +1,5 @@
+declare module "*.mp3" {
+ const src: string;
+ export default src;
+ }
+
\ No newline at end of file
diff --git a/frontend/hooks/useLeaveChat.jsx b/frontend/hooks/useLeaveChat.jsx
deleted file mode 100644
index 3c85cb1..0000000
--- a/frontend/hooks/useLeaveChat.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useEffect } from "react";
-import getSessionUserId from "../utils/session/getSessionUserId";
-import removeSessionUserId from "../utils/session/removeSessionUserId";
-import { leaveChat } from "../services/api/leaveChatApi";
-
-const useLeaveChat=(router)=>{
- useEffect(() => {
- const leaveChatOnNavigation = () => {
- leaveChat(getSessionUserId());
- removeSessionUserId();
- };
- const handleBeforeUnload = (e) => {
- 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;
\ No newline at end of file
diff --git a/frontend/hooks/useLeaveChat.tsx b/frontend/hooks/useLeaveChat.tsx
new file mode 100644
index 0000000..2b514ea
--- /dev/null
+++ b/frontend/hooks/useLeaveChat.tsx
@@ -0,0 +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 = () => {
+ 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;
diff --git a/frontend/hooks/useLoadSettings.jsx b/frontend/hooks/useLoadSettings.jsx
deleted file mode 100644
index 1eecb9b..0000000
--- a/frontend/hooks/useLoadSettings.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import {useEffect} from 'react';
-
-const useLoadSetting=(setSoundEnabled,setNotificationsEnabled)=>{
- useEffect(() => {
- const savedSoundEnabled = localStorage.getItem("soundEnabled");
- const savedNotificationsEnabled = localStorage.getItem(
- "notificationsEnabled",
- );
-
- if (savedSoundEnabled !== null) {
- setSoundEnabled(JSON.parse(savedSoundEnabled));
- }
- if (savedNotificationsEnabled !== null) {
- setNotificationsEnabled(JSON.parse(savedNotificationsEnabled));
- }
- }, []);
-}
-export default useLoadSetting;
\ No newline at end of file
diff --git a/frontend/hooks/useLoadSettings.tsx b/frontend/hooks/useLoadSettings.tsx
new file mode 100644
index 0000000..990e8f7
--- /dev/null
+++ b/frontend/hooks/useLoadSettings.tsx
@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+import { UseLoadSettingProps } from '../interface/interface';
+
+const useLoadSetting = ({ setSoundEnabled, setNotificationsEnabled }: UseLoadSettingProps) => {
+ useEffect(() => {
+ const savedSoundEnabled = localStorage.getItem("soundEnabled");
+ const savedNotificationsEnabled = localStorage.getItem("notificationsEnabled");
+
+ if (savedSoundEnabled !== null) {
+ setSoundEnabled(JSON.parse(savedSoundEnabled));
+ }
+
+ if (savedNotificationsEnabled !== null) {
+ setNotificationsEnabled(JSON.parse(savedNotificationsEnabled));
+ }
+ }, [setSoundEnabled, setNotificationsEnabled]);
+};
+
+export default useLoadSetting;
+
diff --git a/frontend/hooks/useSettings.jsx b/frontend/hooks/useSettings.jsx
deleted file mode 100644
index 2f9a7ff..0000000
--- a/frontend/hooks/useSettings.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useEffect } from "react";
-
-const useSettings=(soundEnabled,notificationsEnabled)=>{
- useEffect(() => {
- localStorage.setItem("soundEnabled", JSON.stringify(soundEnabled));
- }, [soundEnabled]);
-
- useEffect(() => {
- localStorage.setItem(
- "notificationsEnabled",
- JSON.stringify(notificationsEnabled),
- );
- }, [notificationsEnabled]);
-}
-export default useSettings;
\ No newline at end of file
diff --git a/frontend/hooks/useSettings.tsx b/frontend/hooks/useSettings.tsx
new file mode 100644
index 0000000..344eb49
--- /dev/null
+++ b/frontend/hooks/useSettings.tsx
@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { UseSettingsProps } from "../interface/interface";
+
+const useSettings = ({ soundEnabled, notificationsEnabled }: UseSettingsProps) => {
+ useEffect(() => {
+ localStorage.setItem("soundEnabled", JSON.stringify(soundEnabled));
+ }, [soundEnabled]);
+
+ useEffect(() => {
+ localStorage.setItem("notificationsEnabled", JSON.stringify(notificationsEnabled));
+ }, [notificationsEnabled]);
+};
+
+export default useSettings;
diff --git a/frontend/hooks/useVisibilityChange.jsx b/frontend/hooks/useVisibilityChange.jsx
deleted file mode 100644
index 89d2b7e..0000000
--- a/frontend/hooks/useVisibilityChange.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useEffect } from "react";
-
-const useVisibilityChange=(setUnreadCount)=>{
- useEffect(() => {
- const handleVisibilityChange = () => {
- if (!document.hidden) {
- setUnreadCount(0);
- }
- };
- window.addEventListener("visibilitychange", handleVisibilityChange);
- window.addEventListener("focus", handleVisibilityChange);
- return () => {
- window.removeEventListener("visibilitychange", handleVisibilityChange);
- window.removeEventListener("focus", handleVisibilityChange);
- };
- }, []);
-}
-export default useVisibilityChange;
\ No newline at end of file
diff --git a/frontend/hooks/useVisibilityChange.tsx b/frontend/hooks/useVisibilityChange.tsx
new file mode 100644
index 0000000..1cbc47b
--- /dev/null
+++ b/frontend/hooks/useVisibilityChange.tsx
@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { UseVisibilityChangeProps } from '../interface/interface';
+
+
+
+const useVisibilityChange = ({ setUnreadCount }: UseVisibilityChangeProps) => {
+ useEffect(() => {
+ const handleVisibilityChange = () => {
+ if (!document.hidden) {
+ setUnreadCount(0);
+ }
+ };
+
+ window.addEventListener('visibilitychange', handleVisibilityChange);
+ window.addEventListener('focus', handleVisibilityChange);
+
+ return () => {
+ window.removeEventListener('visibilitychange', handleVisibilityChange);
+ window.removeEventListener('focus', handleVisibilityChange);
+ };
+ }, [setUnreadCount]);
+};
+
+export default useVisibilityChange;
diff --git a/frontend/hooks/useWebSocketForChatBot.jsx b/frontend/hooks/useWebSocketForChatBot.tsx
similarity index 89%
rename from frontend/hooks/useWebSocketForChatBot.jsx
rename to frontend/hooks/useWebSocketForChatBot.tsx
index 6349eac..957c19e 100644
--- a/frontend/hooks/useWebSocketForChatBot.jsx
+++ b/frontend/hooks/useWebSocketForChatBot.tsx
@@ -8,8 +8,9 @@ import { handleWebSocketError } from "../utils/websocket/handleWebSocketError";
import processWebSocketMessage from "../utils/websocket/processWebSocketMessage";
import { buildWebSocketURL } from "../services/url-builder/url-builder";
import { initializeWebSocketConnection } from "../services/api/api";
+import { useWebsocketForChatbotProps } from "../interface/interface";
-const useWebsocketForChatbot=(socketRef,setMessages,router)=>{
+const useWebsocketForChatbot=({socketRef,setMessages,router}:useWebsocketForChatbotProps)=>{
useEffect(() => {
const username = getSessionUser();
if (!username || username === "null" || username === "undefined") {
@@ -31,16 +32,18 @@ const useWebsocketForChatbot=(socketRef,setMessages,router)=>{
//todo-> toast connected to server
};
const handleMessage = (event) =>
- processWebSocketMessage(event, setMessages, () => router.push("/"), true);
+ processWebSocketMessage({event, setMessages, navigateToLogin:() => router.push("/"), isChatbot:true});
const handleClose = (event) =>
handleWebSocketClose(event, () => router.push("/"));
const handleError = handleWebSocketError;
const socket = initializeWebSocketConnection(
url,
+ {
handleOpen,
handleMessage,
handleClose,
handleError,
+ }
);
socketRef.current = socket;
diff --git a/frontend/hooks/useWebsocket.jsx b/frontend/hooks/useWebsocket.tsx
similarity index 82%
rename from frontend/hooks/useWebsocket.jsx
rename to frontend/hooks/useWebsocket.tsx
index dcae442..fc852f8 100644
--- a/frontend/hooks/useWebsocket.jsx
+++ b/frontend/hooks/useWebsocket.tsx
@@ -1,4 +1,4 @@
-import { useEffect} from "react";
+import { MutableRefObject, useEffect} from "react";
import getSessionUser from "../utils/session/getSessionUser";
import getSessionUserId from "../utils/session/getSessionUserId";
import handleWebSocketClose from "../utils/websocket/handleWebSocketClose";
@@ -7,8 +7,26 @@ import processWebSocketMessage from "../utils/websocket/processWebSocketMessage"
import { buildWebSocketURL } from "../services/url-builder/url-builder";
import { initializeWebSocketConnection } from "../services/api/api";
import playSound from "../utils/playSound";
+import { Message } from "../interface/interface"
+import { NextRouter } from "next/router";
-const useWebsocket=(soundEnabled,channel,socketRef,setMessages,router,setUnreadCount)=>{
+interface UseWebSocketProps {
+ soundEnabled: boolean,
+ channel: string,
+ socketRef: MutableRefObject,
+ setMessages: React.Dispatch>,
+ router: NextRouter,
+ setUnreadCount: React.Dispatch>
+}
+
+const useWebsocket=({
+ soundEnabled,
+ channel,
+ socketRef,
+ setMessages,
+ router,
+ setUnreadCount,
+}: UseWebSocketProps)=>{
useEffect(() => {
const username = getSessionUser();
if (!username || username === "null" || username === "undefined") {
@@ -20,27 +38,29 @@ const useWebsocket=(soundEnabled,channel,socketRef,setMessages,router,setUnreadC
//todo-> toast connected to server
};
const handleMessage = (event) =>
- processWebSocketMessage(
+ processWebSocketMessage({
event,
setMessages,
- () => router.push("/"),
- false,
+ navigateToLogin:() => router.push("/"),
+ isChatbot:false,}
);
const handleClose = (event) =>
handleWebSocketClose(event, () => router.push("/"));
const handleError = handleWebSocketError;
const socket = initializeWebSocketConnection(
url,
+ {
handleOpen,
handleMessage,
handleClose,
handleError,
+ }
);
socketRef.current = socket;
socket.addEventListener("message", (event) => {
try {
- let data = "";
+ let data:any = "";
if (
event.data != "Message send successful" &&
event.data != "Welcome to MDG Chat!"
@@ -83,6 +103,7 @@ const useWebsocket=(soundEnabled,channel,socketRef,setMessages,router,setUnreadC
username: data.sender,
timestamp: parseFloat(data.timestamp),
avatar: data.url,
+ userID: data.userID,
},
]);
if (soundEnabled) playSound(isSent);
diff --git a/frontend/interface/interface.ts b/frontend/interface/interface.ts
new file mode 100644
index 0000000..a4c1c19
--- /dev/null
+++ b/frontend/interface/interface.ts
@@ -0,0 +1,299 @@
+import React, { Dispatch, MutableRefObject, ReactNode, SetStateAction, useEffect, useState } from "react";
+import { useRouter } from 'next/navigation';
+import alertServerError from "../utils/alerts/alertServerError";
+
+export interface SettingsPopupProps {
+ onClose: () => void;
+ soundEnabled: boolean;
+ setSoundEnabled: (enabled: boolean) => void;
+ notificationsEnabled: boolean;
+ setNotificationsEnabled: (enabled: boolean) => void;
+ }
+
+export interface RightPaneProps extends SettingsPopupProps {}
+
+ interface IconProps {
+ src: string;
+ alt: string;
+ onClick?: () => void;
+ }
+
+export interface LayoutProps {
+ children: React.ReactNode;
+ home: boolean;
+}
+
+export interface TopicDropdownProps {
+ topic: string;
+ setTopic: (topic: string) => void;
+ login: boolean;
+ }
+
+export interface Project {
+ Category: string;
+ Name: string;
+ ShortDesc: string;
+ LongDesc: string;
+ ImageLink: string;
+ AppStoreLink: string;
+ GithubLink: string;
+ PlayStoreLink: string;
+ }
+
+ export interface TopicSelectionModalProps {
+ onClose: () => void;
+ }
+
+ export interface UsernameInputProps {
+ value: string;
+ onChange: (value: string) => void;
+ }
+
+export interface NavbarProps{
+ currentPage: string;
+ currentTopic:string;
+ }
+
+export interface ModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ children: React.ReactNode;
+ }
+
+ export interface BoxProps {
+ channel: "public" | "private" | "chatbot";
+ }
+
+export interface MailProps {
+ isOpen?: boolean;
+ onClose: () => void;
+ channel: "public" | "private" | "chatbot";
+ }
+ export interface ProjectListProps {
+ projects: Project[];
+ category: string;
+ heightDecrease?: boolean;
+ }
+
+ export interface ProjectCardProps {
+ name: string;
+ shortDesc: string;
+ ImageLink: string;
+ Github?: string;
+ PlayStore?: string;
+ AppStore?: string;
+ }
+
+ export interface LoginModalProps {
+ onClose: () => void;
+ redirect: string;
+ }
+
+ export interface ChatBotLoginModalProps {
+ onClose: () => void; // Function to close the modal
+ }
+ export type Topic = "SELECT A TOPIC" | "Option 1" | "Option 2" | string ;
+
+ export interface Message {
+ isSent: boolean;
+ avatar?: string;
+ username: string;
+ text: string;
+ timestamp: number;
+ userID: string;
+ }
+ export interface ChatContainerProps {
+ messages: Message[]; // Assuming messages are serialized JSON strings
+ messagesEndRef: React.RefObject; // Ref to scroll to the bottom
+ }
+
+
+
+
+
+ export interface UserContextType {
+ userName: string | null;
+ setUserName: React.Dispatch>;
+ }
+
+ export interface UserProviderProps {
+ children: React.ReactNode;
+ }
+
+ export interface UseLoadSettingProps {
+ setSoundEnabled: React.Dispatch>;
+ setNotificationsEnabled: React.Dispatch>;
+}
+
+ export interface UseSettingsProps {
+ soundEnabled: boolean;
+ notificationsEnabled: boolean;
+ }
+
+ export interface UseVisibilityChangeProps {
+ setUnreadCount: Dispatch>
+}
+
+export interface UseWebsocketProps {
+ soundEnabled: boolean;
+ channel: string;
+ socketRef: React.MutableRefObject;
+ setMessages: React.Dispatch>;
+ router: any;
+ setUnreadCount: React.Dispatch>;
+}
+
+export interface useWebsocketForChatbotProps {
+ socketRef: MutableRefObject;
+ setMessages: Dispatch>;
+ router: any;
+}
+
+interface UseLoadSettingHook {
+ (setSoundEnabled: (enabled: boolean) => void, setNotificationsEnabled: (enabled: boolean) => void): void;
+}
+
+interface UseSettingsHook {
+ (soundEnabled: boolean, notificationsEnabled: boolean): void;
+}
+
+interface UseWebsocketForChatbotHook {
+ (
+ socketRef: React.MutableRefObject,
+ setMessages: React.Dispatch>,
+ router: typeof useRouter,
+ messagesEndRef: React.MutableRefObject
+ ): void;
+}
+
+interface UseVisibilityChangeHook {
+ (setUnreadCount: React.Dispatch>): void;
+}
+
+interface UseLeaveChatHook {
+ (router: typeof useRouter, socketRef: React.MutableRefObject): void;
+}
+
+interface ChatbotContainerProps {
+ messages: Message[];
+ messagesEndRef: React.MutableRefObject;
+}
+
+export interface ProcessWebSocketMessageProps {
+ event: MessageEvent;
+ setMessages: React.Dispatch>;
+ navigateToLogin: () => void;
+ isChatbot: boolean;
+}
+
+export interface DataFromServer {
+ userID?: string;
+ Message?: string;
+ Delete?: string;
+}
+
+
+
+
+
+export interface WebSocketHandlers {
+ onOpen: (event: Event) => void;
+ onMessage: (event: MessageEvent) => void;
+ onClose: (event: CloseEvent) => void;
+ onError: (event: Event) => void;
+}
+
+
+export type AlertSameUserProps = (reason: string, navigate: NavigateFunction) => void;
+export type AlertBadRequestProps = (reason: string, navigate: NavigateFunction) => void;
+export type AlertServerErrorProps = (reason: string, navigate: NavigateFunction) => void;
+
+export interface WebSocketURLParams {
+ userId: string;
+ username: string;
+ channel: string;
+ topic?: string;
+}
+
+export interface URLBuilderParams {
+ host: string;
+ port: string;
+ protocol: string;
+}
+
+export interface LeaveChatURLParams {
+ userID: string;
+}
+
+export interface ChatContainerProps {
+ messages: Message[]; // An array of message objects
+ messagesEndRef: React.RefObject; // A ref for auto-scrolling to the bottom of the chat
+}
+
+export interface AvatarListProps {
+ AvatarList: string[]; // List of avatar image paths/URLs
+}
+
+export interface ChatInputBoxProps {
+ socketRef: React.MutableRefObject;
+}
+
+
+
+export type CheckAndPromptSessionChange = (
+ currentUser: string,
+ newUsername: string,
+ onSessionChange: () => void
+) => Promise;
+
+export type GetSessionUser = () => string | null;
+export type GetSessionUserId = () => string | null;
+export type SetSessionUser = (username: string) => void;
+export type RemoveSessionUserId = () => void;
+
+export interface LeaveChatResponse {
+ // Define the expected properties of the response here
+ success: boolean;
+ message?: string;
+}
+
+// Define the return type of the fetchProjects function
+export type FetchProjectsResponse = Project[]; // Array of projects
+
+// Define the interface for a project
+export interface Project {
+ id: string; // Adjust the type as per your actual API response
+ name: string; // Example property
+ description?: string; // Optional property
+ // Add more properties as needed based on your project data structure
+}
+
+// Define the interface for the subscribe response
+export interface SubscribeResponse {
+ code: number;
+ message: string;
+}
+
+// Define the parameters for the subscribe function
+export interface SubscribeParams {
+ email: string;
+ username: string;
+ userId: string;
+ channel: string;
+ timestamp: number;
+}
+
+// Define an interface for the environment variables
+export interface BackendEnvironment {
+ NEXT_PUBLIC_BACKEND_HOST: string;
+ NEXT_PUBLIC_BACKEND_PORT: string;
+ NEXT_PUBLIC_BACKEND_ENVIRONMENT: 'development' | 'production';
+}
+
+// Create a type for the optional topic parameter
+
+export type NavigateFunction = (path: string) => void;
+
+export type AlertBannedUser = (reason: string, navigate: NavigateFunction) => void;
+
+export type AlertAbnormalCloseProps = (reason: string, navigate: NavigateFunction) => void;
diff --git a/frontend/next-env.d.ts b/frontend/next-env.d.ts
new file mode 100644
index 0000000..4f11a03
--- /dev/null
+++ b/frontend/next-env.d.ts
@@ -0,0 +1,5 @@
+///
);
}
+
+export default App;
diff --git a/frontend/pages/chat.jsx b/frontend/pages/chat.tsx
similarity index 83%
rename from frontend/pages/chat.jsx
rename to frontend/pages/chat.tsx
index 9afbf65..7cb1552 100644
--- a/frontend/pages/chat.jsx
+++ b/frontend/pages/chat.tsx
@@ -10,21 +10,24 @@ import useSettings from "../hooks/useSettings";
import useWebsocket from "../hooks/useWebsocket";
import useLeaveChat from "../hooks/useLeaveChat";
import useVisibilityChange from "../hooks/useVisibilityChange";
+import { Message } from "../interface/interface";
+
+
export default function Home(){
- const [messages, setMessages] = useState([]);
- const [unreadCount, setUnreadCount] = useState(0);
- const [soundEnabled, setSoundEnabled] = useState(true);
- const [notificationsEnabled, setNotificationsEnabled] = useState(true);
- const router = useRouter()
- const {channel}=router.query;
- const socketRef = useRef(null);
- const messagesEndRef = useRef(null);
+ const [messages, setMessages] = useState([]);
+ const [unreadCount, setUnreadCount] = useState(0);
+ const [soundEnabled, setSoundEnabled] = useState(true);
+ const [notificationsEnabled, setNotificationsEnabled] = useState(true);
+ const router = useRouter();
+ const {channel}=router.query as { channel?: string };;
+ const socketRef = useRef(null);
+ const messagesEndRef = useRef(null);
- useLoadSetting(setSoundEnabled,setNotificationsEnabled);
- useSettings(soundEnabled,notificationsEnabled);
- useWebsocket(soundEnabled,channel,socketRef,setMessages,router,setUnreadCount)
+ useLoadSetting({setSoundEnabled,setNotificationsEnabled});
+ useSettings({soundEnabled,notificationsEnabled});
+ useWebsocket({soundEnabled,channel,socketRef,setMessages,router,setUnreadCount})
useLeaveChat(router);
- useVisibilityChange(setUnreadCount);
+ useVisibilityChange({setUnreadCount});
useEffect(() => {}, [messages]);
diff --git a/frontend/pages/chat_bot.jsx b/frontend/pages/chat_bot.tsx
similarity index 87%
rename from frontend/pages/chat_bot.jsx
rename to frontend/pages/chat_bot.tsx
index c88924f..0798206 100644
--- a/frontend/pages/chat_bot.jsx
+++ b/frontend/pages/chat_bot.tsx
@@ -1,4 +1,4 @@
-+"use client";
+"use client";
import ChatInputBox from "../components/chat/chatInputBox";
import Box from "../components/mdgBox";
import { useState, useEffect, useRef } from "react";
@@ -11,25 +11,25 @@ import useWebsocketForChatbot from "../hooks/useWebSocketForChatBot";
import useVisibilityChange from "../hooks/useVisibilityChange";
import useLeaveChat from "../hooks/useLeaveChat";
+
export default function Home() {
const [messages, setMessages] = useState([]);
const [unreadCount, setUnreadCount] = useState(0);
const [soundEnabled, setSoundEnabled] = useState(true);
const [notificationsEnabled, setNotificationsEnabled] = useState(true);
- const [topic, setTopic] = useState("Appetizer");
+ const [topic, setTopic] = useState("Appetizer");
const router = useRouter();
const socketRef = useRef(null);
const messagesEndRef = useRef(null);
- useLoadSetting(setSoundEnabled,setNotificationsEnabled);
- useSettings(soundEnabled,notificationsEnabled);
- useWebsocketForChatbot(socketRef,setMessages,router);
- useVisibilityChange(setUnreadCount);
+ useLoadSetting({setSoundEnabled,setNotificationsEnabled});
+ useSettings({soundEnabled,notificationsEnabled});
+ useWebsocketForChatbot({socketRef,setMessages,router});
+ useVisibilityChange({setUnreadCount});
useLeaveChat(router);
- useEffect(() => {
- setTopic(router.query.topic ?? "Appetizer");
- }, [router.query]);
+ useEffect(() => setTopic(router.query.topic as string ?? "Appetizer"), [router.query]);
+
useEffect(() => {}, [messages]);
diff --git a/frontend/pages/index.jsx b/frontend/pages/index.tsx
similarity index 88%
rename from frontend/pages/index.jsx
rename to frontend/pages/index.tsx
index d09a811..77ea60b 100644
--- a/frontend/pages/index.jsx
+++ b/frontend/pages/index.tsx
@@ -7,11 +7,11 @@ import LoginModal from "../components/chat/loginModal";
import ChatBotLoginModal from "../components/chatbot/chatbotLoginModal";
export default function Home() {
- const [isModalOpen, setIsModalOpen] = useState(false);
- const [isChatBotModalOpen, setISChatBotModalOpen] = useState(false);
- const [redirect, setRedirect] = useState("");
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [isChatBotModalOpen, setISChatBotModalOpen] = useState(false);
+ const [redirect, setRedirect] = useState("");
- const openModal = (redirect) => {
+ const openModal = (redirect:string) => {
setIsModalOpen(true);
setRedirect(redirect);
};
@@ -45,14 +45,14 @@ export default function Home() {
{isModalOpen && (
)}
{isChatBotModalOpen && (
-
+
)}
@@ -76,7 +76,7 @@ export default function Home() {
onClick={goToChatbot}
>
-
@@ -85,7 +85,7 @@ export default function Home() {
onClick={goToPrivateChat}
>
-
@@ -94,7 +94,7 @@ export default function Home() {
onClick={goToPublicChat}
>
-
diff --git a/frontend/services/api/api.js b/frontend/services/api/api.js
deleted file mode 100644
index 58a88a8..0000000
--- a/frontend/services/api/api.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export function initializeWebSocketConnection(
- url,
- onOpen,
- onMessage,
- onClose,
- onError,
-) {
- const socket = new WebSocket(url);
- socket.onopen = onOpen;
- socket.onmessage = onMessage;
- socket.onclose = onClose;
- socket.onerror = onError;
- return socket;
-}
\ No newline at end of file
diff --git a/frontend/services/api/api.ts b/frontend/services/api/api.ts
new file mode 100644
index 0000000..516175c
--- /dev/null
+++ b/frontend/services/api/api.ts
@@ -0,0 +1,20 @@
+interface WebSocketHandlers {
+ handleOpen: (event: Event) => void;
+ handleMessage: (event: MessageEvent) => void;
+ handleClose: (event: CloseEvent) => void;
+ handleError: (event: Event) => void;
+}
+
+export function initializeWebSocketConnection(
+ url: string,
+ handlers: WebSocketHandlers
+): WebSocket {
+ const socket = new WebSocket(url);
+
+ socket.onopen = handlers.handleOpen;
+ socket.onmessage = handlers.handleMessage;
+ socket.onclose = handlers.handleClose;
+ socket.onerror = handlers.handleError;
+
+ return socket;
+}
diff --git a/frontend/services/api/leaveChatApi.js b/frontend/services/api/leaveChatApi.js
deleted file mode 100644
index 9452cef..0000000
--- a/frontend/services/api/leaveChatApi.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import axios from "axios";
-import { leaveChatURLbuildr } from "../url-builder/url-builder";
-
-export async function leaveChat(userID) {
- if (userID) {
- try {
- const url = leaveChatURLbuildr(userID);
- const response = await axios.post(url, {});
- } catch (error) {
- // console.error("Error in leaving chat:", error)
- }
- }
-}
\ No newline at end of file
diff --git a/frontend/services/api/leaveChatApi.ts b/frontend/services/api/leaveChatApi.ts
new file mode 100644
index 0000000..2a4a120
--- /dev/null
+++ b/frontend/services/api/leaveChatApi.ts
@@ -0,0 +1,17 @@
+import axios from "axios";
+import { leaveChatURLbuildr } from "../url-builder/url-builder";
+import { LeaveChatResponse } from "../../interface/interface";
+
+export async function leaveChat(userID: string): Promise {
+ if (userID) {
+ try {
+ const url = leaveChatURLbuildr(userID);
+ const response = await axios.post(url, {});
+
+ return response.data; // Assuming the API returns a response with the properties defined in LeaveChatResponse
+ } catch (error) {
+ console.error("Error in leaving chat:", error);
+ return undefined; // Or handle the error as needed
+ }
+ }
+}
diff --git a/frontend/services/api/projectsApi.js b/frontend/services/api/projectsApi.js
deleted file mode 100644
index b7365cd..0000000
--- a/frontend/services/api/projectsApi.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import axios from "axios";
-import { projectURLbuildr } from "../url-builder/url-builder";
-export const fetchProjects = async () => {
- try {
- const url = projectURLbuildr();
- const res = await axios.get(url);
- return res.data;
- } catch (error) {
- //todo -> enable sentry logger here
- }
-};
\ No newline at end of file
diff --git a/frontend/services/api/projectsApi.ts b/frontend/services/api/projectsApi.ts
new file mode 100644
index 0000000..fb8905e
--- /dev/null
+++ b/frontend/services/api/projectsApi.ts
@@ -0,0 +1,17 @@
+import axios from "axios";
+import { projectURLbuildr } from "../url-builder/url-builder";
+
+import { FetchProjectsResponse, Project } from "../../interface/interface";
+
+export const fetchProjects = async (): Promise => {
+ try {
+ const url = projectURLbuildr();
+ const res = await axios.get(url);
+ return res.data;
+ } catch (error) {
+ console.error("Error fetching projects:", error);
+ // todo -> enable sentry logger here
+ return undefined; // Handle error as needed
+ }
+};
+
diff --git a/frontend/services/api/subscribeApi.js b/frontend/services/api/subscribeApi.js
deleted file mode 100644
index 2767e0c..0000000
--- a/frontend/services/api/subscribeApi.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import axios from "axios";
-import { subscribeURLbuildr } from "../url-builder/url-builder";
-
-const subscribe = async (email, username, userId, channel, timestamp) => {
- const url = subscribeURLbuildr();
- try {
- const response = await axios.post(
- url,
- {
- email: email,
- username: username,
- userId: userId,
- channel: channel,
- timestamp: timestamp,
- },
- {
- headers: {
- "Content-Type": "multipart/form-data",
- },
- },
- );
-
- if (response.status === 200) {
- return response.data;
- }
- } catch (error) {
- throw error.response.data;
- }
-};
-export default subscribe;
\ No newline at end of file
diff --git a/frontend/services/api/subscribeApi.ts b/frontend/services/api/subscribeApi.ts
new file mode 100644
index 0000000..e362411
--- /dev/null
+++ b/frontend/services/api/subscribeApi.ts
@@ -0,0 +1,45 @@
+import axios from "axios";
+import { subscribeURLbuildr } from "../url-builder/url-builder";
+
+import { SubscribeResponse ,SubscribeParams } from "../../interface/interface";
+
+
+// Convert the subscribe function to TypeScript
+const subscribe = async ({
+ email,
+ username,
+ userId,
+ channel,
+ timestamp,
+}: SubscribeParams): Promise => {
+ const url = subscribeURLbuildr();
+
+ try {
+ const response = await axios.post(
+ url,
+ {
+ email,
+ username,
+ userId,
+ channel,
+ timestamp,
+ },
+ {
+ headers: {
+ "Content-Type": "multipart/form-data",
+ },
+ }
+ );
+
+ if (response.status === 200) {
+ return response.data;
+ } else {
+ throw new Error("Subscription failed");
+ }
+ } catch (error: any) {
+ // Here, we throw a new error with a message from the server if available
+ throw new Error(error.response?.data?.message || "An error occurred during subscription");
+ }
+};
+
+export default subscribe;
diff --git a/frontend/services/url-builder/url-builder.js b/frontend/services/url-builder/url-builder.js
deleted file mode 100644
index 991266f..0000000
--- a/frontend/services/url-builder/url-builder.js
+++ /dev/null
@@ -1,53 +0,0 @@
-export function buildWebSocketURL(userId, username, channel, topic) {
- const host = process.env.NEXT_PUBLIC_BACKEND_HOST;
- const port = process.env.NEXT_PUBLIC_BACKEND_PORT;
- const protocol =
- process.env.NEXT_PUBLIC_BACKEND_ENVIRONMENT === "development"
- ? "ws"
- : "wss";
- const baseUrl = `${protocol}://${host}:${port}/chat`;
- const params = new URLSearchParams({
- channel: channel || "public",
- name: username,
- userID: userId || "0",
- topic: topic || null,
- });
- return `${baseUrl}?${params.toString()}`;
-}
-
-export function projectURLbuildr() {
- const host = process.env.NEXT_PUBLIC_BACKEND_HOST;
- const port = process.env.NEXT_PUBLIC_BACKEND_PORT;
- const protocol =
- process.env.NEXT_PUBLIC_BACKEND_ENVIRONMENT === "development"
- ? "http"
- : "https";
- const baseUrl = `${protocol}://${host}:${port}/projects`;
- return baseUrl;
-}
-
-export function leaveChatURLbuildr(userID) {
- const host = process.env.NEXT_PUBLIC_BACKEND_HOST;
- const port = process.env.NEXT_PUBLIC_BACKEND_PORT;
- const protocol =
- process.env.NEXT_PUBLIC_BACKEND_ENVIRONMENT === "development"
- ? "http"
- : "https";
- const baseUrl = `${protocol}://${host}:${port}/chat/leave`;
- const params = new URLSearchParams({
- userID: userID,
- });
-
- return `${baseUrl}?${params.toString()}`;
-}
-
-export function subscribeURLbuildr() {
- const host = process.env.NEXT_PUBLIC_BACKEND_HOST;
- const port = process.env.NEXT_PUBLIC_BACKEND_PORT;
- const protocol =
- process.env.NEXT_PUBLIC_BACKEND_ENVIRONMENT === "development"
- ? "http"
- : "https";
- const baseUrl = `${protocol}://${host}:${port}/subscribe`;
- return baseUrl;
-}
\ No newline at end of file
diff --git a/frontend/services/url-builder/url-builder.ts b/frontend/services/url-builder/url-builder.ts
new file mode 100644
index 0000000..a5940a9
--- /dev/null
+++ b/frontend/services/url-builder/url-builder.ts
@@ -0,0 +1,74 @@
+
+import { BackendEnvironment , Topic } from "../../interface/interface";
+// Function to build WebSocket URL
+export function buildWebSocketURL(
+ userId: string,
+ username: string,
+ channel: string,
+ topic?: Topic
+): string {
+ const env: BackendEnvironment = {
+ NEXT_PUBLIC_BACKEND_HOST: process.env.NEXT_PUBLIC_BACKEND_HOST || 'localhost',
+ NEXT_PUBLIC_BACKEND_PORT: process.env.NEXT_PUBLIC_BACKEND_PORT || '1323',
+ NEXT_PUBLIC_BACKEND_ENVIRONMENT: process.env.NEXT_PUBLIC_BACKEND_ENVIRONMENT as 'development' | 'production',
+ };
+
+ const protocol = env.NEXT_PUBLIC_BACKEND_ENVIRONMENT === "development" ? "ws" : "wss";
+ const baseUrl = `${protocol}://${env.NEXT_PUBLIC_BACKEND_HOST}:${env.NEXT_PUBLIC_BACKEND_PORT}/chat`;
+
+ const params = new URLSearchParams({
+ channel: channel || "public",
+ name: username,
+ userID: userId || "0",
+ topic: topic || '',
+ });
+
+ return `${baseUrl}?${params.toString()}`;
+}
+
+
+// Function to build project URL
+export function projectURLbuildr(): string {
+ const env: BackendEnvironment = {
+ NEXT_PUBLIC_BACKEND_HOST: process.env.NEXT_PUBLIC_BACKEND_HOST || 'localhost',
+ NEXT_PUBLIC_BACKEND_PORT: process.env.NEXT_PUBLIC_BACKEND_PORT || '1323',
+ NEXT_PUBLIC_BACKEND_ENVIRONMENT: process.env.NEXT_PUBLIC_BACKEND_ENVIRONMENT as 'development' | 'production',
+ };
+
+ const protocol = env.NEXT_PUBLIC_BACKEND_ENVIRONMENT === "development" ? "http" : "https";
+ const baseUrl = `${protocol}://${env.NEXT_PUBLIC_BACKEND_HOST}:${env.NEXT_PUBLIC_BACKEND_PORT}/projects`;
+
+ return baseUrl;
+}
+
+// Function to build leave chat URL
+export function leaveChatURLbuildr(userID: string): string {
+ const env: BackendEnvironment = {
+ NEXT_PUBLIC_BACKEND_HOST: process.env.NEXT_PUBLIC_BACKEND_HOST || 'localhost',
+ NEXT_PUBLIC_BACKEND_PORT: process.env.NEXT_PUBLIC_BACKEND_PORT || '1323',
+ NEXT_PUBLIC_BACKEND_ENVIRONMENT: process.env.NEXT_PUBLIC_BACKEND_ENVIRONMENT as 'development' | 'production',
+ };
+
+ const protocol = env.NEXT_PUBLIC_BACKEND_ENVIRONMENT === "development" ? "http" : "https";
+ const baseUrl = `${protocol}://${env.NEXT_PUBLIC_BACKEND_HOST}:${env.NEXT_PUBLIC_BACKEND_PORT}/chat/leave`;
+
+ const params = new URLSearchParams({
+ userID: userID,
+ });
+
+ return `${baseUrl}?${params.toString()}`;
+}
+
+
+// Function to build subscribe URL
+export function subscribeURLbuildr(): string {
+ const env: BackendEnvironment = {
+ NEXT_PUBLIC_BACKEND_HOST: process.env.NEXT_PUBLIC_BACKEND_HOST || 'localhost',
+ NEXT_PUBLIC_BACKEND_PORT: process.env.NEXT_PUBLIC_BACKEND_PORT || '1323',
+ NEXT_PUBLIC_BACKEND_ENVIRONMENT: process.env.NEXT_PUBLIC_BACKEND_ENVIRONMENT as 'development' | 'production',
+ };
+
+ const protocol = env.NEXT_PUBLIC_BACKEND_ENVIRONMENT === "development" ? "http" : "https";
+ const baseUrl = `${protocol}://${env.NEXT_PUBLIC_BACKEND_HOST}:${env.NEXT_PUBLIC_BACKEND_PORT}/subscribe`;
+ return baseUrl;
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..09d1f3f
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": false,
+ "noEmit": true,
+ "incremental": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve"
+ },
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx"
+, "context/userContext.ts" ],
+ "exclude": [
+ "node_modules"
+ ]
+}
diff --git a/frontend/utils/alerts/alertAbnormalClose.js b/frontend/utils/alerts/alertAbnormalClose.js
deleted file mode 100644
index 84d6ecd..0000000
--- a/frontend/utils/alerts/alertAbnormalClose.js
+++ /dev/null
@@ -1,23 +0,0 @@
-"use client";
-import Swal from "sweetalert2";
-
-export default function alertAbnormalClose(reason, navigateToLogin) {
- try {
- Swal.fire({
- title: "Connection lost",
- text: `Please try again or with a different username ${reason}`,
- icon: "warning",
-
- iconColor: "#3670F5",
- confirmButtonColor: "#3670F5",
- confirmButtonText: "OK",
- didOpen: (popup) => {
- popup.style.borderRadius = "1rem";
- },
- }).then((result) => {
- try {
- if (result.isConfirmed) navigateToLogin();
- } catch (error) {}
- });
- } catch (error) {}
- }
\ No newline at end of file
diff --git a/frontend/utils/alerts/alertAbnormalClose.ts b/frontend/utils/alerts/alertAbnormalClose.ts
new file mode 100644
index 0000000..48f33eb
--- /dev/null
+++ b/frontend/utils/alerts/alertAbnormalClose.ts
@@ -0,0 +1,32 @@
+"use client";
+import Swal from 'sweetalert2';
+import { Dispatch, SetStateAction } from 'react'; // Import types for state setters
+import { AlertAbnormalCloseProps } from '../../interface/interface';
+import { navigateToLogin } from '../websocket/handleWebSocketClose';
+
+const alertAbnormalClose: AlertAbnormalCloseProps = async (reason, navigate) => { // Make the function async
+ try {
+ const result = await Swal.fire({ // Corrected line
+ title: "Connection lost",
+ text: `Please try again or with a different username. Reason: ${reason}`,
+ icon: "warning",
+ iconColor: "#3670F5",
+ confirmButtonColor: "#3670F5",
+ confirmButtonText: "OK",
+ didOpen: (popup: HTMLElement) => {
+ popup.style.borderRadius = "1rem";
+ },
+ });
+
+ if (result.isConfirmed) {
+ navigate("/");
+ }
+ } catch (error) {
+ // More specific error handling here, e.g., log the error
+ console.error("Error in SweetAlert:", error);
+ }
+
+ return null; // This component doesn't render anything directly, it's just a function
+};
+
+export default alertAbnormalClose;
diff --git a/frontend/utils/alerts/alertBadRequest.js b/frontend/utils/alerts/alertBadRequest.ts
similarity index 56%
rename from frontend/utils/alerts/alertBadRequest.js
rename to frontend/utils/alerts/alertBadRequest.ts
index 8f1d643..f003dd5 100644
--- a/frontend/utils/alerts/alertBadRequest.js
+++ b/frontend/utils/alerts/alertBadRequest.ts
@@ -1,7 +1,8 @@
"use client";
import Swal from "sweetalert2";
-
-export default function alertBadRequest(reason, navigateToLogin) {
+import { navigateToLogin } from "../websocket/handleWebSocketClose";
+import { AlertBadRequestProps } from "../../interface/interface";
+const alertBadRequest: AlertBadRequestProps = (reason, navigate) => {
try {
Swal.fire({
title: "Bad request",
@@ -11,13 +12,15 @@ export default function alertBadRequest(reason, navigateToLogin) {
iconColor: "#3670F5",
confirmButtonColor: "#3670F5",
confirmButtonText: "OK",
- didOpen: (popup) => {
+ didOpen: (popup: HTMLElement) => {
popup.style.borderRadius = "1rem";
},
}).then((result) => {
try {
- if (result.isConfirmed) navigateToLogin();
+ if (result.isConfirmed) navigate("/");
} catch (error) {}
});
} catch (error) {}
- }
\ No newline at end of file
+ }
+
+ export default alertBadRequest;
\ No newline at end of file
diff --git a/frontend/utils/alerts/alertBannedUser.js b/frontend/utils/alerts/alertBannedUser.ts
similarity index 59%
rename from frontend/utils/alerts/alertBannedUser.js
rename to frontend/utils/alerts/alertBannedUser.ts
index ac5adb6..27af9a4 100644
--- a/frontend/utils/alerts/alertBannedUser.js
+++ b/frontend/utils/alerts/alertBannedUser.ts
@@ -1,7 +1,8 @@
"use client";
import Swal from "sweetalert2";
-
-export default function alertBannedUser(reason, navigateToLogin) {
+import {NavigateFunction , AlertBannedUser } from "../../interface/interface";
+import { navigateToLogin } from "../websocket/handleWebSocketClose";
+const alertBannedUser: AlertBannedUser = (reason, navigate) => {
try {
Swal.fire({
title: "You have been banned",
@@ -11,7 +12,7 @@ export default function alertBannedUser(reason, navigateToLogin) {
confirmButtonColor: "#3670F5",
iconColor: "#3670F5",
confirmButtonText: "OK",
- didOpen: (popup) => {
+ didOpen: (popup: HTMLElement) => {
popup.style.borderRadius = "1rem";
},
customClass: {
@@ -19,8 +20,10 @@ export default function alertBannedUser(reason, navigateToLogin) {
},
}).then((result) => {
try {
- if (result.isConfirmed) navigateToLogin();
+ if (result.isConfirmed) navigate("/");
} catch (error) {}
});
} catch (error) {}
- }
\ No newline at end of file
+ }
+
+export default alertBannedUser;
\ No newline at end of file
diff --git a/frontend/utils/alerts/alertSameUsername.js b/frontend/utils/alerts/alertSameUsername.ts
similarity index 59%
rename from frontend/utils/alerts/alertSameUsername.js
rename to frontend/utils/alerts/alertSameUsername.ts
index 6f0fc5d..c2decae 100644
--- a/frontend/utils/alerts/alertSameUsername.js
+++ b/frontend/utils/alerts/alertSameUsername.ts
@@ -1,7 +1,8 @@
"use client";
import Swal from "sweetalert2";
-
-export default function alertSameUsername(reason, navigateToLogin) {
+import { navigateToLogin } from "../websocket/handleWebSocketClose";
+import {AlertSameUserProps } from "../../interface/interface";
+const alertSameUsername: AlertSameUserProps = (reason, navigate) => {
try {
Swal.fire({
title: "Username already exists",
@@ -12,13 +13,15 @@ export default function alertSameUsername(reason, navigateToLogin) {
imageAlt: "Username Taken",
confirmButtonColor: "#3670F5",
confirmButtonText: "OK",
- didOpen: (popup) => {
+ didOpen: (popup:HTMLElement) => {
popup.style.borderRadius = "1rem";
},
}).then((result) => {
try {
- if (result.isConfirmed) navigateToLogin();
+ if (result.isConfirmed) navigate("/");
} catch (error) {}
});
} catch (error) {}
- }
\ No newline at end of file
+ }
+
+ export default alertSameUsername;
\ No newline at end of file
diff --git a/frontend/utils/alerts/alertServerError.js b/frontend/utils/alerts/alertServerError.ts
similarity index 56%
rename from frontend/utils/alerts/alertServerError.js
rename to frontend/utils/alerts/alertServerError.ts
index 981350f..338b400 100644
--- a/frontend/utils/alerts/alertServerError.js
+++ b/frontend/utils/alerts/alertServerError.ts
@@ -1,7 +1,8 @@
"use client";
import Swal from "sweetalert2";
-
-export default function alertServerError(reason, navigateToLogin) {
+import { AlertServerErrorProps } from "../../interface/interface";
+import { navigateToLogin } from "../websocket/handleWebSocketClose";
+const alertServerError: AlertServerErrorProps = (reason, navigate) => {
try {
Swal.fire({
title: "Server error",
@@ -11,13 +12,15 @@ export default function alertServerError(reason, navigateToLogin) {
iconColor: "#3670F5",
confirmButtonColor: "#3670F5",
confirmButtonText: "OK",
- didOpen: (popup) => {
+ didOpen: (popup:HTMLElement) => {
popup.style.borderRadius = "1rem";
},
}).then((result) => {
try {
- if (result.isConfirmed) navigateToLogin();
+ if (result.isConfirmed) navigate("/");
} catch (error) {}
});
} catch (error) {}
- }
\ No newline at end of file
+ }
+
+ export default alertServerError;
\ No newline at end of file
diff --git a/frontend/utils/alerts/checkAndPromptSessionChange.js b/frontend/utils/alerts/checkAndPromptSessionChange.js
deleted file mode 100644
index ca356ba..0000000
--- a/frontend/utils/alerts/checkAndPromptSessionChange.js
+++ /dev/null
@@ -1,49 +0,0 @@
-"use client";
-import Swal from "sweetalert2";
-
-export default async function checkAndPromptSessionChange(
- currentUsername,
- inputUsername,
- onConfirm,
- ) {
- if (currentUsername && currentUsername !== inputUsername) {
- try {
- const result = await Swal.fire({
- title: "Change Username?",
- text: `You already have a running session with the username "${currentUsername}". Do you want to change your username?`,
- icon: "question",
- iconColor: "#3670F5",
-
- showCancelButton: true,
- confirmButtonColor: "3670F5",
- cancelButtonColor: "#d33",
- confirmButtonText: "Yes, change it!",
- });
-
- if (result.isConfirmed && inputUsername.length < 20) {
- onConfirm();
- return true;
- } else {
- if (inputUsername.length > 20) {
- Swal.fire({
- title: "Username too long",
- text: `Please choose a username with less than 20 characters`,
- icon: "warning",
-
- iconColor: "#3670F5",
- confirmButtonColor: "3670F5",
- confirmButtonText: "OK",
- didOpen: (popup) => {
- popup.style.borderRadius = "1rem";
- },
- });
- }
- return false;
- }
- } catch (error) {
- console.error("Error with SweetAlert2:", error);
- return false;
- }
- }
- return false;
- }
\ No newline at end of file
diff --git a/frontend/utils/alerts/checkAndPromptSessionChange.ts b/frontend/utils/alerts/checkAndPromptSessionChange.ts
new file mode 100644
index 0000000..05a8a7b
--- /dev/null
+++ b/frontend/utils/alerts/checkAndPromptSessionChange.ts
@@ -0,0 +1,58 @@
+"use client";
+import Swal, { SweetAlertResult } from "sweetalert2";
+
+// Interface for the function parameters
+interface CheckAndPromptSessionChangeProps {
+ currentUser: string | null;
+ username: string | null;
+ onConfirm: () => void;
+}
+
+// Function to check and prompt session change using SweetAlert2
+export default async function checkAndPromptSessionChange({
+ currentUser,
+ username,
+ onConfirm,
+}: CheckAndPromptSessionChangeProps): Promise {
+ // Check if the current username exists and differs from the input username
+ if (currentUser && currentUser !== username) {
+ try {
+ const result: SweetAlertResult = await Swal.fire({
+ title: "Change Username?",
+ text: `You already have a running session with the username "${currentUser}". Do you want to change your username?`,
+ icon: "question",
+ iconColor: "#3670F5",
+ showCancelButton: true,
+ confirmButtonColor: "#3670F5",
+ cancelButtonColor: "#d33",
+ confirmButtonText: "Yes, change it!",
+ });
+
+ // If the user confirms and the new username is less than 20 characters
+ if (result.isConfirmed && username.length < 20) {
+ onConfirm();
+ return true;
+ } else {
+ // If the input username exceeds the length limit, display a warning
+ if (username.length > 20) {
+ Swal.fire({
+ title: "Username too long",
+ text: `Please choose a username with less than 20 characters`,
+ icon: "warning",
+ iconColor: "#3670F5",
+ confirmButtonColor: "#3670F5",
+ confirmButtonText: "OK",
+ didOpen: (popup: HTMLElement) => {
+ popup.style.borderRadius = "1rem";
+ },
+ });
+ }
+ return false;
+ }
+ } catch (error) {
+ console.error("Error with SweetAlert2:", error);
+ return false;
+ }
+ }
+ return false;
+}
diff --git a/frontend/utils/chatbot_formatting/formatChatbotUserText.js b/frontend/utils/chatbot_formatting/formatChatbotUserText.ts
similarity index 50%
rename from frontend/utils/chatbot_formatting/formatChatbotUserText.js
rename to frontend/utils/chatbot_formatting/formatChatbotUserText.ts
index 93fb920..6d6e5de 100644
--- a/frontend/utils/chatbot_formatting/formatChatbotUserText.js
+++ b/frontend/utils/chatbot_formatting/formatChatbotUserText.ts
@@ -1,4 +1,4 @@
-export default function formatChatbotUserText(message) {
+export default function formatChatbotUserText(message: string): string | undefined {
if (message.split(":")[0] === "You") {
return message.split(":")[1];
}
diff --git a/frontend/utils/chatbot_formatting/getIsSentForChatBot.js b/frontend/utils/chatbot_formatting/getIsSentForChatBot.ts
similarity index 59%
rename from frontend/utils/chatbot_formatting/getIsSentForChatBot.js
rename to frontend/utils/chatbot_formatting/getIsSentForChatBot.ts
index 41ec026..e57ddbc 100644
--- a/frontend/utils/chatbot_formatting/getIsSentForChatBot.js
+++ b/frontend/utils/chatbot_formatting/getIsSentForChatBot.ts
@@ -1,4 +1,4 @@
-export default function getIsSentForChatBot(message) {
+export default function getIsSentForChatBot(message: string): boolean {
if (message.split(":")[0] === "You") {
return true;
} else {
diff --git a/frontend/utils/chatbot_formatting/parseMessageText.jsx b/frontend/utils/chatbot_formatting/parseMessageText.tsx
similarity index 73%
rename from frontend/utils/chatbot_formatting/parseMessageText.jsx
rename to frontend/utils/chatbot_formatting/parseMessageText.tsx
index 5b64f54..0235889 100644
--- a/frontend/utils/chatbot_formatting/parseMessageText.jsx
+++ b/frontend/utils/chatbot_formatting/parseMessageText.tsx
@@ -1,17 +1,18 @@
"use client";
+import React from "react";
-export default function parseMessageText(text) {
- const replaceURLs = (message) => {
+export default function parseMessageText(text: string): JSX.Element {
+ const replaceURLs = (message: string): string => {
const urlRegex =
/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
return message.replace(urlRegex, (url) => `${url} `);
};
- const replaceBoldText = (message) => {
+ const replaceBoldText = (message: string): string => {
return message.replace(/\*\*(.*?)\*\*/g, "$1 ");
};
- const replaceCodeText = (message) => {
+ const replaceCodeText = (message: string): string => {
return message.replace(
/`(.*?)`/g,
'$1',
diff --git a/frontend/utils/getTimestampFromDate.js b/frontend/utils/getTimestampFromDate.js
deleted file mode 100644
index 67afced..0000000
--- a/frontend/utils/getTimestampFromDate.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default function getTimestampFromDate(dateString) {
- const date = new Date(dateString);
- const timestamp = Math.floor(date.getTime() / 1000);
- return timestamp;
- }
\ No newline at end of file
diff --git a/frontend/utils/getTimestampFromDate.ts b/frontend/utils/getTimestampFromDate.ts
new file mode 100644
index 0000000..e46f260
--- /dev/null
+++ b/frontend/utils/getTimestampFromDate.ts
@@ -0,0 +1,5 @@
+export default function getTimestampFromDate(dateString: string): number {
+ const date = new Date(dateString);
+ const timestamp = Math.floor(date.getTime() / 1000);
+ return timestamp;
+}
diff --git a/frontend/utils/playSound.js b/frontend/utils/playSound.ts
similarity index 69%
rename from frontend/utils/playSound.js
rename to frontend/utils/playSound.ts
index fba1100..08bb7d8 100644
--- a/frontend/utils/playSound.js
+++ b/frontend/utils/playSound.ts
@@ -2,13 +2,14 @@ import notif from "../assets/sounds/notif.mp3";
import notifRecieve from "../assets/sounds/notif-recieve.mp3";
import { useCallback } from "react";
-const playSound = (soundEnabled)=>{
- useCallback(
- (isSent) => {
+const playSound = (soundEnabled: boolean): void => {
+ useCallback(
+ (isSent: boolean) => {
const sound = isSent ? new Audio(notif) : new Audio(notifRecieve);
sound.play();
},
[soundEnabled],
);
}
-export default playSound;
\ No newline at end of file
+
+export default playSound;
diff --git a/frontend/utils/session/getAvatar.js b/frontend/utils/session/getAvatar.js
deleted file mode 100644
index 3590906..0000000
--- a/frontend/utils/session/getAvatar.js
+++ /dev/null
@@ -1,10 +0,0 @@
-"use client";
-
-export default async function getAvatar() {
- let avatarId = sessionStorage.getItem("avatarId");
- if (avatarId == null || isNaN(avatarId) || avatarId < 0 || avatarId > 14) {
- avatarId = Math.floor(Math.random() * 15);
- sessionStorage.setItem("avatarId", avatarId);
- }
- return avatarId;
- }
\ No newline at end of file
diff --git a/frontend/utils/session/getAvatar.ts b/frontend/utils/session/getAvatar.ts
new file mode 100644
index 0000000..74b6e57
--- /dev/null
+++ b/frontend/utils/session/getAvatar.ts
@@ -0,0 +1,15 @@
+"use client";
+
+export default async function getAvatar() {
+
+ let avatarIdString = sessionStorage.getItem("avatarId");
+ let avatarId: number;
+
+ if (avatarIdString === null || isNaN(Number(avatarIdString)) || Number(avatarIdString) < 0 || Number(avatarIdString) > 14) {
+ avatarId = Math.floor(Math.random() * 15);
+ sessionStorage.setItem("avatarId", avatarId.toString());
+ } else {
+ avatarId = Number(avatarIdString);
+ }
+ return avatarId;
+ }
\ No newline at end of file
diff --git a/frontend/utils/session/getSessionUser.js b/frontend/utils/session/getSessionUser.ts
similarity index 100%
rename from frontend/utils/session/getSessionUser.js
rename to frontend/utils/session/getSessionUser.ts
diff --git a/frontend/utils/session/getSessionUserId.js b/frontend/utils/session/getSessionUserId.ts
similarity index 100%
rename from frontend/utils/session/getSessionUserId.js
rename to frontend/utils/session/getSessionUserId.ts
diff --git a/frontend/utils/session/removeSessionUserId.js b/frontend/utils/session/removeSessionUserId.ts
similarity index 52%
rename from frontend/utils/session/removeSessionUserId.js
rename to frontend/utils/session/removeSessionUserId.ts
index 24c9730..517de64 100644
--- a/frontend/utils/session/removeSessionUserId.js
+++ b/frontend/utils/session/removeSessionUserId.ts
@@ -1,5 +1,5 @@
"use client";
-export default function removeSessionUserId() {
+export default function removeSessionUserId():void {
sessionStorage.removeItem("userID");
}
\ No newline at end of file
diff --git a/frontend/utils/session/setSessionUser.js b/frontend/utils/session/setSessionUser.ts
similarity index 100%
rename from frontend/utils/session/setSessionUser.js
rename to frontend/utils/session/setSessionUser.ts
diff --git a/frontend/utils/websocket/handleWebSocketClose.js b/frontend/utils/websocket/handleWebSocketClose.js
deleted file mode 100644
index 2880c73..0000000
--- a/frontend/utils/websocket/handleWebSocketClose.js
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-import {
- isUserBanned,
- isSameUsername,
- isBadRequest,
- isServerError,
- isAbnormalClose,
- } from "./websocketHelpers";
-import alertBannedUser from "../alerts/alertBannedUser";
-import alertSameUsername from "../alerts/alertSameUsername";
-import alertBadRequest from "../alerts/alertBadRequest";
-import alertServerError from "../alerts/alertServerError";
-import alertAbnormalClose from "../alerts/alertAbnormalClose";
-
-export default function handleWebSocketClose(event, navigateToLogin) {
- if (isUserBanned(event.code)) {
- alertBannedUser(event.reason, navigateToLogin);
- }
- if (isSameUsername(event.code)) {
- alertSameUsername(event.reason, navigateToLogin);
- }
- if (isBadRequest(event.code)) {
- alertBadRequest(event.reason, navigateToLogin);
- }
- if (isServerError(event.code)) {
- alertServerError(event.reason, navigateToLogin);
- }
- if (isAbnormalClose(event.code)) {
- alertAbnormalClose(event.reason, navigateToLogin);
- }
- }
\ No newline at end of file
diff --git a/frontend/utils/websocket/handleWebSocketClose.ts b/frontend/utils/websocket/handleWebSocketClose.ts
new file mode 100644
index 0000000..bd85615
--- /dev/null
+++ b/frontend/utils/websocket/handleWebSocketClose.ts
@@ -0,0 +1,49 @@
+"use client";
+import {
+ isUserBanned,
+ isSameUsername,
+ isBadRequest,
+ isServerError,
+ isAbnormalClose,
+} from "./websocketHelpers";
+import alertBannedUser from "../alerts/alertBannedUser";
+import alertSameUsername from "../alerts/alertSameUsername"; // Ensure all alert imports are correctly defined
+import alertBadRequest from "../alerts/alertBadRequest";
+import alertServerError from "../alerts/alertServerError";
+import alertAbnormalClose from "../alerts/alertAbnormalClose";
+import {useNavigate} from "react-router-dom";
+// Define the type for the WebSocket close event
+interface WebSocketCloseEvent {
+ code: number;
+ reason: string;
+}
+
+
+export function navigateToLogin(): void {
+ const navigate = useNavigate(); // Import the useNavigate hook from react-router-dom
+ navigate("/"); // Adjust the path as needed
+}
+
+// Define the type for the navigate function
+type NavigateFunction = (path: string) => void;
+
+export default function handleWebSocketClose(
+ event: WebSocketCloseEvent,
+ navigateToLogin: NavigateFunction
+): void {
+ if (isUserBanned(event.code)) {
+ alertBannedUser(event.reason, navigateToLogin);
+ }
+ if (isSameUsername(event.code)) {
+ alertSameUsername(event.reason, navigateToLogin);
+ }
+ if (isBadRequest(event.code)) {
+ alertBadRequest(event.reason, navigateToLogin);
+ }
+ if (isServerError(event.code)) {
+ alertServerError(event.reason, navigateToLogin);
+ }
+ if (isAbnormalClose(event.code)) {
+ alertAbnormalClose(event.reason, navigateToLogin);
+ }
+}
diff --git a/frontend/utils/websocket/handleWebSocketError.js b/frontend/utils/websocket/handleWebSocketError.ts
similarity index 100%
rename from frontend/utils/websocket/handleWebSocketError.js
rename to frontend/utils/websocket/handleWebSocketError.ts
diff --git a/frontend/utils/websocket/processWebSocketMessage.js b/frontend/utils/websocket/processWebSocketMessage.ts
similarity index 53%
rename from frontend/utils/websocket/processWebSocketMessage.js
rename to frontend/utils/websocket/processWebSocketMessage.ts
index 5438017..5938093 100644
--- a/frontend/utils/websocket/processWebSocketMessage.js
+++ b/frontend/utils/websocket/processWebSocketMessage.ts
@@ -1,14 +1,11 @@
"use client";
+import { DataFromServer, Message, ProcessWebSocketMessageProps } from "../../interface/interface";
import alertBannedUser from "../alerts/alertBannedUser";
export default function processWebSocketMessage(
- event,
- setMessages,
- navigateToLogin,
- isChatbot,
- ) {
+{ event, setMessages, navigateToLogin, isChatbot }: ProcessWebSocketMessageProps) {
if (isChatbot) {
- const userIdRegex = /\buserID\b/;
+ const userIdRegex = /\buserID\b/;
if (userIdRegex.test(event.data)) {
handleUserID(JSON.parse(event.data));
}
@@ -36,25 +33,23 @@ export default function processWebSocketMessage(
console.error("Error parsing or handling the message:", error);
}
- function handleUserID(data) {
+ function handleUserID(data: DataFromServer) {
if (data.userID) {
- sessionStorage.setItem("userID", data.userID);
+ sessionStorage.setItem("userID", data.userID);
}
- }
-
- function handleBannedUser(data, navigateToLogin) {
+ }
+
+ function handleBannedUser(data: DataFromServer, navigateToLogin: () => void) {
if (data.Message && data.Message === "You are banned now") {
- alertBannedUser(data.Message);
- navigateToLogin();
- return true;
+ alertBannedUser(data.Message,navigateToLogin);
+ navigateToLogin();
+ return true;
}
return false;
- }
-
- function handleDeleteMessage(data, setMessages) {
- const deleteTimestamp = parseFloat(data.Delete);
- setMessages((prevMessages) =>
- prevMessages.filter((message) => message.timestamp !== deleteTimestamp),
- );
- }
- }
\ No newline at end of file
+ }
+
+ function handleDeleteMessage(data: DataFromServer, setMessages: React.Dispatch>) {
+ const deleteTimestamp = parseFloat(data.Delete!);
+ setMessages((prevMessages) => prevMessages.filter((message) => message.timestamp !== deleteTimestamp));
+ }
+}
\ No newline at end of file
diff --git a/frontend/utils/websocket/websocketHelpers.js b/frontend/utils/websocket/websocketHelpers.ts
similarity index 100%
rename from frontend/utils/websocket/websocketHelpers.js
rename to frontend/utils/websocket/websocketHelpers.ts
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..10a3adc
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,42 @@
+{
+ "name": "echofy",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "dependencies": {
+ "react": "^18.3.1"
+ }
+ },
+ "node_modules/js-tokens": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+ "license": "MIT"
+ },
+ "node_modules/loose-envify": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+ "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+ "license": "MIT",
+ "dependencies": {
+ "js-tokens": "^3.0.0 || ^4.0.0"
+ },
+ "bin": {
+ "loose-envify": "cli.js"
+ }
+ },
+ "node_modules/react": {
+ "version": "18.3.1",
+ "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+ "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+ "license": "MIT",
+ "dependencies": {
+ "loose-envify": "^1.1.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ }
+ }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..e1f4bc9
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+ "dependencies": {
+ "react": "^18.3.1"
+ }
+}
diff --git a/semantic.yml b/semantic.yml
new file mode 100644
index 0000000..e69de29