diff --git a/frontend/src/components/AddDetails.jsx b/frontend/src/components/AddDetails.jsx index 819a021..21537ad 100644 --- a/frontend/src/components/AddDetails.jsx +++ b/frontend/src/components/AddDetails.jsx @@ -138,7 +138,7 @@ const AddDetails = () => { e.preventDefault(); setLoading(true); try { - const response = await axios.post("/user/addDetails", formData, { + const response = await axios.post("/api/user/addDetails", formData, { withCredentials: true, }); Toast({ diff --git a/frontend/src/components/AddUsername.jsx b/frontend/src/components/AddUsername.jsx index f77cdf8..583b453 100644 --- a/frontend/src/components/AddUsername.jsx +++ b/frontend/src/components/AddUsername.jsx @@ -41,7 +41,7 @@ const AddUsername = () => { e.preventDefault(); setLoading(true); try { - const response = await axios.post("/user/addusername", formData, { + const response = await axios.post("/api/user/addusername", formData, { withCredentials: true, }); setLoading(false); diff --git a/frontend/src/components/Login.jsx b/frontend/src/components/Login.jsx index c03f02a..23a1bf4 100644 --- a/frontend/src/components/Login.jsx +++ b/frontend/src/components/Login.jsx @@ -30,7 +30,7 @@ const LoginPage = () => { const result = await signInWithPopup(auth, googleProvider); const user = result.user; const response = await axios.post( - "/user/google", + "/api/user/google", { email: user.email, displayName: user.displayName, @@ -85,7 +85,7 @@ const LoginPage = () => { const result = await signInWithPopup(auth, githubProvider); const user = result.user; const response = await axios.post( - "/user/github", + "/api/user/github", { email: user.email, displayName: user.displayName, @@ -137,7 +137,7 @@ const LoginPage = () => { setLoading(true); try { const response = await axios.post( - "/user/login", + "/api/user/login", { email, password }, { withCredentials: true } ); diff --git a/frontend/src/components/Posts.jsx b/frontend/src/components/Posts.jsx index e94d038..2bb6cf9 100644 --- a/frontend/src/components/Posts.jsx +++ b/frontend/src/components/Posts.jsx @@ -39,7 +39,7 @@ const Posts = () => { collegeId = selectedCommunity; } const response = await axios.post( - "/post/fetch", + "/api/post/fetch", { page: page, collegeId, @@ -81,7 +81,7 @@ const Posts = () => { useEffect(() => { const fetchCommunities = async () => { try { - const response = await axios.get("/post/communities", { + const response = await axios.get("/api/post/communities", { withCredentials: true, }); setCommunities(response.data.college); @@ -99,7 +99,7 @@ const Posts = () => { useEffect(() => { const fetchAllCommunities = async () => { try { - const response = await axios.get("/post/allcommunities", { + const response = await axios.get("/api/post/allcommunities", { withCredentials: true, }); setAllCommunities(response.data.college); @@ -119,7 +119,7 @@ const Posts = () => { const handleLike = async (postId) => { try { - await axios.post("/post/like", { postId }, { withCredentials: true }); + await axios.post("/api/post/like", { postId }, { withCredentials: true }); setPosts((prevPosts) => prevPosts.map((post) => { if (post.post_id === postId) { @@ -135,7 +135,7 @@ const Posts = () => { const handleCreatePost = async ({ title, content, community }) => { const response = await axios.post( - "/post/create", + "/api/post/create", { title: title, content: content, diff --git a/frontend/src/components/Register.jsx b/frontend/src/components/Register.jsx index b4dc89c..9f15972 100644 --- a/frontend/src/components/Register.jsx +++ b/frontend/src/components/Register.jsx @@ -160,7 +160,7 @@ const RegisterForm = () => { try { registerSchema.parse(formData); setErrors({}); - const response = await axios.post("/user/register", formData, { + const response = await axios.post("/api/user/register", formData, { withCredentials: true, }); toast({ @@ -183,7 +183,9 @@ const RegisterForm = () => { return ( - Register + + Register + {/* */}
diff --git a/frontend/src/components/SearchBar.jsx b/frontend/src/components/SearchBar.jsx index 4ab0978..45ca6d3 100644 --- a/frontend/src/components/SearchBar.jsx +++ b/frontend/src/components/SearchBar.jsx @@ -21,7 +21,7 @@ const SearchBar = () => { const fetchSuggestions = async (value) => { try { const response = await axios.post( - "/post/search", + "/api/post/search", { query: value }, { withCredentials: true } ); @@ -69,7 +69,7 @@ const SearchBar = () => { const handleSearchSubmit = async () => { try { const response = await axios.post( - "/post/search", + "/api/post/search", { query: searchTerm }, { withCredentials: true } ); diff --git a/frontend/src/components/SinglePost.jsx b/frontend/src/components/SinglePost.jsx index 8dcef82..18b017f 100644 --- a/frontend/src/components/SinglePost.jsx +++ b/frontend/src/components/SinglePost.jsx @@ -25,7 +25,7 @@ const SinglePost = () => { useEffect(() => { const fetchPost = async () => { try { - const response = await axios.get(`/post/fetch/${id}`, { + const response = await axios.get(`/api/post/fetch/${id}`, { withCredentials: true, }); setPost(response.data.post); @@ -39,7 +39,7 @@ const SinglePost = () => { const checkIfLiked = async () => { try { const response = await axios.post( - `/post/liked`, + `/api/post/liked`, { postId: id }, { withCredentials: true } ); @@ -58,7 +58,11 @@ const SinglePost = () => { const handleLike = async (postId) => { if (postLiked) { try { - await axios.post("/post/unlike", { postId }, { withCredentials: true }); + await axios.post( + "/api/post/unlike", + { postId }, + { withCredentials: true } + ); setPost((prevPost) => ({ ...prevPost, likes: prevPost.likes - 1 })); setPostLiked(false); } catch (error) { @@ -66,7 +70,11 @@ const SinglePost = () => { } } else { try { - await axios.post("/post/like", { postId }, { withCredentials: true }); + await axios.post( + "/api/post/like", + { postId }, + { withCredentials: true } + ); setPost((prevPost) => ({ ...prevPost, likes: prevPost.likes + 1 })); setPostLiked(true); } catch (error) { diff --git a/frontend/src/components/chatroomui/chatroom.jsx b/frontend/src/components/chatroomui/chatroom.jsx index 7f5fff3..ffc1d22 100644 --- a/frontend/src/components/chatroomui/chatroom.jsx +++ b/frontend/src/components/chatroomui/chatroom.jsx @@ -10,28 +10,27 @@ const Chatroom = () => { const [allMsg, setAllMsg] = useState([]); const [prevMsg, setPrevMsg] = useState([]); const [myMsg, setMyMsg] = useState(""); - const messageEndRef = useRef(null); - const {loading, userDeatils} = useUser(); - - - const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket('ws://localhost:8080'); + const messageEndRef = useRef(null); + const { loading, userDeatils } = useUser(); + const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket( + "ws://localhost:8080" + ); useEffect(() => { const fetchChatHistory = async () => { try { - const response = await axios.get(`/chat/history/${roomId}`, { + const response = await axios.get(`/api/chat/history/${roomId}`, { withCredentials: true, }); - setPrevMsg(response.data); - + setPrevMsg(response.data); const tosend = { type: "joinRoom", data: { userId: userId, roomId: roomId, - } + }, }; sendJsonMessage(tosend); } catch (error) { @@ -40,21 +39,26 @@ const Chatroom = () => { }; fetchChatHistory(); - }, [roomId, userId, sendJsonMessage]); + }, [roomId, userId, sendJsonMessage]); useEffect(() => { if (lastJsonMessage !== null) { if (lastJsonMessage.type === "error") { alert("Room not connected..."); - } else if (lastJsonMessage.type === "newMessage" && lastJsonMessage.data.roomId === roomId) { + } else if ( + lastJsonMessage.type === "newMessage" && + lastJsonMessage.data.roomId === roomId + ) { const data = lastJsonMessage.data.message; - if (data.senderId !== userId) { - setAllMsg(prev => [...prev, { - senderId: data.senderId, - message: data.content, - at: data.timestamp, - }]); + setAllMsg((prev) => [ + ...prev, + { + senderId: data.senderId, + message: data.content, + at: data.timestamp, + }, + ]); } } } @@ -81,41 +85,45 @@ const Chatroom = () => { data: { roomId: roomId, userId: userId, - message: myMsg - } + message: myMsg, + }, }; sendJsonMessage(tosend); - - setAllMsg(prev => [...prev, { - senderId: "you", - message: myMsg, - at: new Date().toISOString(), - }]); - setMyMsg(""); + setAllMsg((prev) => [ + ...prev, + { + senderId: "you", + message: myMsg, + at: new Date().toISOString(), + }, + ]); + setMyMsg(""); }; // Format date const formatDate = (isoString) => { const date = new Date(isoString); - return new Intl.DateTimeFormat('en-US', { - weekday: 'short', - hour: 'numeric', - minute: 'numeric', - hour12: true + return new Intl.DateTimeFormat("en-US", { + weekday: "short", + hour: "numeric", + minute: "numeric", + hour12: true, }).format(date); }; const constatus = { - [ReadyState.CONNECTING]: 'Connecting', - [ReadyState.OPEN]: 'Open', - [ReadyState.CLOSING]: 'Closing', - [ReadyState.CLOSED]: 'Closed', - [ReadyState.UNINSTANTIATED]: 'Uninstantiated', + [ReadyState.CONNECTING]: "Connecting", + [ReadyState.OPEN]: "Open", + [ReadyState.CLOSING]: "Closing", + [ReadyState.CLOSED]: "Closed", + [ReadyState.UNINSTANTIATED]: "Uninstantiated", }[readyState]; // Combine and sort messages - const combinedMessages = [...prevMsg, ...allMsg].sort((a, b) => new Date(a.at) - new Date(b.at)); + const combinedMessages = [...prevMsg, ...allMsg].sort( + (a, b) => new Date(a.at) - new Date(b.at) + ); return (
@@ -137,14 +145,22 @@ const Chatroom = () => {
-
{(data.senderId === "you" || data.senderId === userId) ? "You" : (data.senderId || data.id)}
+
+ {data.senderId === "you" || data.senderId === userId + ? "You" + : data.senderId || data.id} +
{data.message || data.content}
-
Sent at: {formatDate(data.at) || formatDate(data.timestamp)}
+
+ Sent at: {formatDate(data.at) || formatDate(data.timestamp)} +
)) ) : ( @@ -168,7 +184,6 @@ const Chatroom = () => { > Send -
diff --git a/frontend/src/components/chatroomui/createRoom1.jsx b/frontend/src/components/chatroomui/createRoom1.jsx index b4f8827..c6aa54e 100644 --- a/frontend/src/components/chatroomui/createRoom1.jsx +++ b/frontend/src/components/chatroomui/createRoom1.jsx @@ -1,137 +1,149 @@ -import axios from 'axios'; -import React, { useEffect, useState } from 'react'; -import { useUser } from '../../hook/useUser'; -import { Navigate, useNavigate } from 'react-router-dom'; -import { useToast } from '@chakra-ui/react'; +import axios from "axios"; +import React, { useEffect, useState } from "react"; +import { useUser } from "../../hook/useUser"; +import { Navigate, useNavigate } from "react-router-dom"; +import { useToast } from "@chakra-ui/react"; const Createroom1 = () => { - const [users, setUsers] = useState([]); - const { loading, userDetails } = useUser(); - const [socket, setSocket] = useState(null); - const [currentRoomId, setCurrentRoomId] = useState(null); - const navigate = useNavigate(); - const toast = useToast(); + const [users, setUsers] = useState([]); + const { loading, userDetails } = useUser(); + const [socket, setSocket] = useState(null); + const [currentRoomId, setCurrentRoomId] = useState(null); + const navigate = useNavigate(); + const toast = useToast(); - useEffect(() => { - localStorage.removeItem("roomId"); - localStorage.removeItem("userId"); + useEffect(() => { + localStorage.removeItem("roomId"); + localStorage.removeItem("userId"); - const fetchUsers = async () => { - try { - const response = await axios.get('/user/all', { withCredentials: true }); - setUsers(response.data); - } catch (error) { - console.error("Error fetching users:", error); - } - }; - - fetchUsers(); + const fetchUsers = async () => { + try { + const response = await axios.get("/api/user/all", { + withCredentials: true, + }); + setUsers(response.data); + } catch (error) { + console.error("Error fetching users:", error); + } + }; - const newSocket = new WebSocket("ws://localhost:8080"); - setSocket(newSocket); + fetchUsers(); - newSocket.addEventListener("message", (event) => { - const data = JSON.parse(event.data); - console.log("Message from server:", data); + const newSocket = new WebSocket("ws://localhost:8080"); + setSocket(newSocket); - switch (data.type) { - case 'roomCreated': - console.log("Room Created:", data.data.roomId); - setCurrentRoomId(data.data.roomId); - localStorage.setItem("roomId", data.data.roomId); - localStorage.setItem("userId", userDetails.user_id); - break; - case 'roomJoined': - console.log("Joined Room:", data.data.roomId); - setCurrentRoomId(data.data.roomId); - localStorage.setItem("roomId", data.data.roomId); - localStorage.setItem("userId", userDetails.user_id); - break; - case 'newMessage': - console.log("New Message:", data.data.message); - break; - case 'newClientJoined': - console.log(data.data.message); - break; - case 'clientDisconnected': - console.log(data.data.message); - break; - default: - console.error("Unknown message type:", data.type); - } - }); + newSocket.addEventListener("message", (event) => { + const data = JSON.parse(event.data); + console.log("Message from server:", data); - return () => { - newSocket.close(); - }; - }, [userDetails?.user_id]); + switch (data.type) { + case "roomCreated": + console.log("Room Created:", data.data.roomId); + setCurrentRoomId(data.data.roomId); + localStorage.setItem("roomId", data.data.roomId); + localStorage.setItem("userId", userDetails.user_id); + break; + case "roomJoined": + console.log("Joined Room:", data.data.roomId); + setCurrentRoomId(data.data.roomId); + localStorage.setItem("roomId", data.data.roomId); + localStorage.setItem("userId", userDetails.user_id); + break; + case "newMessage": + console.log("New Message:", data.data.message); + break; + case "newClientJoined": + console.log(data.data.message); + break; + case "clientDisconnected": + console.log(data.data.message); + break; + default: + console.error("Unknown message type:", data.type); + } + }); - const handleChange = async (targetUserId) => { - if (!socket || socket.readyState !== WebSocket.OPEN) { - console.error("WebSocket is not connected."); - return; - } - - await socket.send( - JSON.stringify({ - type: "createRoom", - data: { - userId: userDetails.user_id, - targetUserId, - }, - }) - ); - console.log("Room creation request sent to server."); + return () => { + newSocket.close(); }; + }, [userDetails?.user_id]); - if (currentRoomId) { - toast({ - title: "Room Creation Successful.", - description: "You are being redirected to chatroom.", - status: "success", - duration: 3000, - isClosable: true, - }); - navigate('/room/chatting'); + const handleChange = async (targetUserId) => { + if (!socket || socket.readyState !== WebSocket.OPEN) { + console.error("WebSocket is not connected."); + return; } - if (loading) return
Loading...
; - if (!userDetails) { - - return ; - - } + await socket.send( + JSON.stringify({ + type: "createRoom", + data: { + userId: userDetails.user_id, + targetUserId, + }, + }) + ); + console.log("Room creation request sent to server."); + }; + + if (currentRoomId) { + toast({ + title: "Room Creation Successful.", + description: "You are being redirected to chatroom.", + status: "success", + duration: 3000, + isClosable: true, + }); + navigate("/room/chatting"); + } + if (loading) return ( -
-
-

Choose a User to Create a Room

-
- {users.map((user) => { - if (user.user_id === userDetails.user_id || user.username === null) return null; +
+ Loading... +
+ ); + if (!userDetails) { + return ; + } - return ( -
handleChange(user.user_id)} - className="flex items-center p-4 bg-white/20 rounded-lg shadow-md hover:bg-white/30 transition duration-200 cursor-pointer" - > -
- {user.username.charAt(0).toUpperCase()} -
-
{user.username}
-
- ); - })} + return ( +
+
+

+ Choose a User to Create a Room +

+
+ {users.map((user) => { + if (user.user_id === userDetails.user_id || user.username === null) + return null; + + return ( +
handleChange(user.user_id)} + className="flex items-center p-4 bg-white/20 rounded-lg shadow-md hover:bg-white/30 transition duration-200 cursor-pointer" + > +
+ {user.username.charAt(0).toUpperCase()} +
+
+ {user.username}
- {currentRoomId && ( -
-

Room created with ID: {currentRoomId}

-
- )} -
+
+ ); + })}
- ); + {currentRoomId && ( +
+

+ Room created with ID: {currentRoomId} +

+
+ )} +
+
+ ); }; export { Createroom1 }; diff --git a/frontend/src/components/chatroomui/main.jsx b/frontend/src/components/chatroomui/main.jsx index eb76ffd..2ee5027 100644 --- a/frontend/src/components/chatroomui/main.jsx +++ b/frontend/src/components/chatroomui/main.jsx @@ -5,7 +5,6 @@ import { chatRoomApi } from "../contexts/chatRoomApi"; import axios from "axios"; import { useUser } from "../../hook/useUser"; - function Createroom() { //@ts-ignore const { @@ -16,13 +15,13 @@ function Createroom() { roomId, setRoomId, } = useContext(chatRoomApi); - const [users,setUsers] = useState([]); - useEffect(() => { - const user = axios.get('/user/all', { - withCredentials: true, - }) - setUsers(user); - }, []); + const [users, setUsers] = useState([]); + useEffect(() => { + const user = axios.get("/api/user/all", { + withCredentials: true, + }); + setUsers(user); + }, []); const [tempRoomId, setTempRoomId] = useState(""); const navigate = useNavigate(); const submit = () => { @@ -47,7 +46,6 @@ function Createroom() { if (data.type == "roomJoined") { setTempRoomId(data.data.roomId); } - }); }; return ( @@ -75,16 +73,11 @@ function Createroom() { )}
*/} Choose from below users to create a Room -
- {users.map((user) => { - return ( -
- {user} -
- ) - })} -
- +
+ {users.map((user) => { + return
{user}
; + })} +
); } @@ -123,7 +116,7 @@ function Joinroom() { function Mainbuttons() { const navigate = useNavigate(); - const {loading, userDetatails} = useUser(); + const { loading, userDetatails } = useUser(); const createroom = () => { console.log("creating the rooms"); @@ -138,7 +131,6 @@ function Mainbuttons() { return
Loading...
; } if (!userDetatails) { - return ; } return ( diff --git a/frontend/src/hook/useUser.jsx b/frontend/src/hook/useUser.jsx index 1c71f69..2656d4a 100644 --- a/frontend/src/hook/useUser.jsx +++ b/frontend/src/hook/useUser.jsx @@ -7,7 +7,7 @@ export const useUser = () => { async function getDetails() { try { - const res = await axios.get("/user/me", { + const res = await axios.get("/api/user/me", { withCredentials: true, }); setUserDetails(res.data); diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index b692794..35c73b7 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -1,8 +1,5 @@ import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App.jsx"; -import axios from "axios"; - -axios.defaults.baseURL = "http://localhost:3000/api"; ReactDOM.createRoot(document.getElementById("root")).render(); diff --git a/frontend/vite.config.js b/frontend/vite.config.js index 0b98b5a..625d80e 100644 --- a/frontend/vite.config.js +++ b/frontend/vite.config.js @@ -1,11 +1,21 @@ import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import tailwindcss from "tailwindcss"; + export default defineConfig({ -plugins: [react()], + plugins: [react()], css: { - postcss: { - plugins: [tailwindcss()], - }, + postcss: { + plugins: [tailwindcss()], + }, }, -}); \ No newline at end of file + server: { + proxy: { + "/api": { + target: "http://localhost:3000/api", // Set target to http://localhost:3000/api + changeOrigin: true, + rewrite: (path) => path.replace(/^\/api/, ""), // Optional: remove '/api' from the path + }, + }, + }, +});