From 5bf82f0680ad22ed2a22c8e3284f9747956c226e Mon Sep 17 00:00:00 2001
From: sankhadip-roy <sankhadiproy23@gmail.com>
Date: Fri, 25 Oct 2024 21:20:02 +0530
Subject: [PATCH] api link update

---
 frontend/src/components/Login.jsx       | 171 +++++++++++----------
 frontend/src/components/OnlineUsers.jsx |  83 ++++++-----
 frontend/src/components/Signup.jsx      | 189 +++++++++++++-----------
 3 files changed, 240 insertions(+), 203 deletions(-)

diff --git a/frontend/src/components/Login.jsx b/frontend/src/components/Login.jsx
index 0fae113..b206a98 100644
--- a/frontend/src/components/Login.jsx
+++ b/frontend/src/components/Login.jsx
@@ -1,83 +1,102 @@
 import React, { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import axios from 'axios';
-import { useRecoilState } from 'recoil';
-import { userloggedin } from '../atom/userAtom';
+import axios from "axios";
+import { useRecoilState } from "recoil";
+import { userloggedin } from "../atom/userAtom";
 
 export default function Login() {
-    const [name, setName] = useState("");
-    const [password, setPassword] = useState("");
-    const [user, setUser] = useRecoilState(userloggedin);
-    const navigate = useNavigate();
+  const [name, setName] = useState("");
+  const [password, setPassword] = useState("");
+  const [user, setUser] = useRecoilState(userloggedin);
+  const navigate = useNavigate();
 
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        await axios.post("http://localhost:3001/login", { name, password })
-            .then(result => {
-                if (result.data.stat === "Success") {
-                    // console.log(result); //log
-                    setUser(result.data.name);
-                    // localStorage.setItem('user', JSON.stringify(user)); // locally storing the logged in user
-                    navigate("/");
-                    alert('Login successful: ' + result.data.name); //using result.data.name instead of user because useRecoilState is a asyncronous function taking time in updating the user variable
-                } else {
-                    alert("Invalid credentials. Please try again.");
-                }
-            })
-            .catch(err => {
-                console.error(err);
-                alert("An error occurred. Please try again.");
-            });
-    }
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    await axios
+      .post(
+        "https://sankha-chatappb-serveit.codecult.tech/login",
+        //.post("http://localhost:3001/login", //for local development
+        {
+          name,
+          password,
+        }
+      )
+      .then((result) => {
+        if (result.data.stat === "Success") {
+          // console.log(result); //log
+          setUser(result.data.name);
+          // localStorage.setItem('user', JSON.stringify(user)); // locally storing the logged in user
+          navigate("/");
+          alert("Login successful: " + result.data.name); //using result.data.name instead of user because useRecoilState is a asyncronous function taking time in updating the user variable
+        } else {
+          alert("Invalid credentials. Please try again.");
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+        alert("An error occurred. Please try again.");
+      });
+  };
 
-    return (
-        <div className="flex items-center justify-center min-h-screen bg-gray-100">
-            <div className="px-8 py-6 mt-4 text-left bg-white shadow-lg rounded-lg">
-                <h3 className="text-2xl font-bold text-center text-gray-800">Login to your account</h3>
-                <form onSubmit={handleSubmit}>
-                    <div className="mt-4">
-                        <div>
-                            <label className="block text-sm font-medium text-gray-700" htmlFor="name">
-                                Username
-                            </label>
-                            <input
-                                type="text"
-                                placeholder="Enter Username"
-                                name="name"
-                                value={name}
-                                onChange={(e) => setName(e.target.value)}
-                                className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600"
-                                required
-                            />
-                        </div>
-                        <div className="mt-4">
-                            <label className="block text-sm font-medium text-gray-700" htmlFor="password">
-                                Password
-                            </label>
-                            <input
-                                type="password"
-                                placeholder="Enter Password"
-                                name="password"
-                                value={password}
-                                onChange={(e) => setPassword(e.target.value)}
-                                className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600"
-                                required
-                            />
-                        </div>
-                        <div className="flex items-baseline justify-between">
-                            <button
-                                type="submit"
-                                className="px-6 py-2 mt-4 text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50"
-                            >
-                                Login
-                            </button>
-                            <Link to="/register" className="text-sm text-blue-600 hover:underline">
-                                Don't have an account?
-                            </Link>
-                        </div>
-                    </div>
-                </form>
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <div className="px-8 py-6 mt-4 text-left bg-white shadow-lg rounded-lg">
+        <h3 className="text-2xl font-bold text-center text-gray-800">
+          Login to your account
+        </h3>
+        <form onSubmit={handleSubmit}>
+          <div className="mt-4">
+            <div>
+              <label
+                className="block text-sm font-medium text-gray-700"
+                htmlFor="name"
+              >
+                Username
+              </label>
+              <input
+                type="text"
+                placeholder="Enter Username"
+                name="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600"
+                required
+              />
             </div>
-        </div>
-    );
-}
\ No newline at end of file
+            <div className="mt-4">
+              <label
+                className="block text-sm font-medium text-gray-700"
+                htmlFor="password"
+              >
+                Password
+              </label>
+              <input
+                type="password"
+                placeholder="Enter Password"
+                name="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600"
+                required
+              />
+            </div>
+            <div className="flex items-baseline justify-between">
+              <button
+                type="submit"
+                className="px-6 py-2 mt-4 text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50"
+              >
+                Login
+              </button>
+              <Link
+                to="/register"
+                className="text-sm text-blue-600 hover:underline"
+              >
+                Don't have an account?
+              </Link>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/OnlineUsers.jsx b/frontend/src/components/OnlineUsers.jsx
index 1fea643..05da825 100644
--- a/frontend/src/components/OnlineUsers.jsx
+++ b/frontend/src/components/OnlineUsers.jsx
@@ -1,51 +1,54 @@
 import { io } from "socket.io-client";
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo } from "react";
 import { useRecoilState } from "recoil";
 import { onlineUsersData } from "../atom/onlineUsersAtom";
 
-const socket = io.connect("http://localhost:3001");
+// const socket = io.connect("http://localhost:3001"); //for local development
+const socket = io.connect("https://sankha-chatappb-serveit.codecult.tech"); //for production
 
 const OnlineUsers = React.memo(() => {
-    const [onlineUsersList, setOnlineUsersList] = useRecoilState(onlineUsersData);
+  const [onlineUsersList, setOnlineUsersList] = useRecoilState(onlineUsersData);
 
-    useEffect(() => {
-        socket.on("online-users", (data) => {
-            setOnlineUsersList(data);
-        });
-        return () => {
-            socket.off("online-users"); //run before component removed from the ui
-        };
-    }, [onlineUsersList]); //tracking onlineUsers array
+  useEffect(() => {
+    socket.on("online-users", (data) => {
+      setOnlineUsersList(data);
+    });
+    return () => {
+      socket.off("online-users"); //run before component removed from the ui
+    };
+  }, [onlineUsersList]); //tracking onlineUsers array
 
-    const memoizedUsers = useMemo(() => {
-        return onlineUsersList.map((user, index) => (
-            <div key={index} className="">
-                {index + 1}.&nbsp;
-                <span>{user}</span>
-            </div>
-        ));
-    }, [onlineUsersList]);
+  const memoizedUsers = useMemo(() => {
+    return onlineUsersList.map((user, index) => (
+      <div key={index} className="">
+        {index + 1}.&nbsp;
+        <span>{user}</span>
+      </div>
+    ));
+  }, [onlineUsersList]);
 
-    return (
-        <>
-            <div>
-                <h3 className="font-bold pb-2">Online Users Socket Id [{Math.floor(onlineUsersList.length / 2)}]</h3>
-                <div className="rounded-md  overflow-y-auto max-h-64" style={{
-                    border: '1px solid black',
-                    padding: '10px'
-                }}>
-                    {
-                        onlineUsersList.length === 0 ? (<div>Fetching ...</div>) :
-                            (
-                                <div>
-                                    {memoizedUsers}
-                                </div>
-                            )
-                    }
-                </div>
-            </div>
-        </>
-    )
+  return (
+    <>
+      <div>
+        <h3 className="font-bold pb-2">
+          Online Users Socket Id [{Math.floor(onlineUsersList.length / 2)}]
+        </h3>
+        <div
+          className="rounded-md  overflow-y-auto max-h-64"
+          style={{
+            border: "1px solid black",
+            padding: "10px",
+          }}
+        >
+          {onlineUsersList.length === 0 ? (
+            <div>Fetching ...</div>
+          ) : (
+            <div>{memoizedUsers}</div>
+          )}
+        </div>
+      </div>
+    </>
+  );
 });
 
-export default OnlineUsers;
\ No newline at end of file
+export default OnlineUsers;
diff --git a/frontend/src/components/Signup.jsx b/frontend/src/components/Signup.jsx
index 3e981c3..fec1381 100644
--- a/frontend/src/components/Signup.jsx
+++ b/frontend/src/components/Signup.jsx
@@ -1,94 +1,109 @@
 import React, { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import axios from 'axios';
+import axios from "axios";
 
 export default function Signup() {
-    const [name, setName] = useState("");
-    const [email, setEmail] = useState("");
-    const [password, setPassword] = useState("");
-    const navigate = useNavigate();
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const navigate = useNavigate();
 
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        const response = await axios.post("http://localhost:3001/register", { name, email, password })
-            .then(result => {
-                console.log(result);
-                localStorage.setItem('userData', JSON.stringify(result.data));
-                // navigate("/login");
-            })
-            .catch(err => {
-                console.error(err);
-                alert("An error occurred. Please try again." + err);
-            });
-        // localStorage.setItem('userData', JSON.stringify(response));
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const response = await axios
+      .post(
+        "https://sankha-chatappb-serveit.codecult.tech/register",
+        // .post("http://localhost:3001/register", //for local development
+        { name, email, password }
+      )
+      .then((result) => {
+        console.log(result);
+        localStorage.setItem("userData", JSON.stringify(result.data));
+        // navigate("/login");
+      })
+      .catch((err) => {
+        console.error(err);
+        alert("An error occurred. Please try again." + err);
+      });
+    // localStorage.setItem('userData', JSON.stringify(response));
+  };
 
-    }
-
-    return (
-        <div className="flex items-center justify-center min-h-screen bg-gray-100">
-            <div className="px-8 py-6 mt-4 text-left bg-white shadow-lg rounded-lg w-full max-w-md">
-                <h3 className="text-2xl font-bold text-center text-gray-800 mb-4">Create an account</h3>
-                <form onSubmit={handleSubmit}>
-                    <div className="mt-4">
-                        <div className="mb-4">
-                            <label className="block text-sm font-medium text-gray-700" htmlFor="name">
-                                Name
-                            </label>
-                            <input
-                                type="text"
-                                placeholder="Enter Name"
-                                name="name"
-                                value={name}
-                                onChange={(e) => setName(e.target.value)}
-                                className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600"
-                                required
-                            />
-                        </div>
-                        <div className="mb-4">
-                            <label className="block text-sm font-medium text-gray-700" htmlFor="email">
-                                Email
-                            </label>
-                            <input
-                                type="email"
-                                placeholder="Enter Email"
-                                name="email"
-                                value={email}
-                                onChange={(e) => setEmail(e.target.value)}
-                                className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600"
-                                required
-                            />
-                        </div>
-                        <div className="mb-6">
-                            <label className="block text-sm font-medium text-gray-700" htmlFor="password">
-                                Password
-                            </label>
-                            <input
-                                type="password"
-                                placeholder="Enter Password"
-                                name="password"
-                                value={password}
-                                onChange={(e) => setPassword(e.target.value)}
-                                className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600"
-                                required
-                            />
-                        </div>
-                        <div className="flex flex-col items-center">
-                            <button
-                                type="submit"
-                                className="w-full px-6 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50 mb-4"
-                            >
-                                Sign Up
-                            </button>
-                            <p className="text-sm text-gray-600">
-                                Already have an account?{" "}
-                                <Link to="/login" className="text-blue-600 hover:underline">
-                                    Log in
-                                </Link>
-                            </p>
-                        </div>
-                    </div>
-                </form>
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <div className="px-8 py-6 mt-4 text-left bg-white shadow-lg rounded-lg w-full max-w-md">
+        <h3 className="text-2xl font-bold text-center text-gray-800 mb-4">
+          Create an account
+        </h3>
+        <form onSubmit={handleSubmit}>
+          <div className="mt-4">
+            <div className="mb-4">
+              <label
+                className="block text-sm font-medium text-gray-700"
+                htmlFor="name"
+              >
+                Name
+              </label>
+              <input
+                type="text"
+                placeholder="Enter Name"
+                name="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600"
+                required
+              />
+            </div>
+            <div className="mb-4">
+              <label
+                className="block text-sm font-medium text-gray-700"
+                htmlFor="email"
+              >
+                Email
+              </label>
+              <input
+                type="email"
+                placeholder="Enter Email"
+                name="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600"
+                required
+              />
+            </div>
+            <div className="mb-6">
+              <label
+                className="block text-sm font-medium text-gray-700"
+                htmlFor="password"
+              >
+                Password
+              </label>
+              <input
+                type="password"
+                placeholder="Enter Password"
+                name="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600"
+                required
+              />
+            </div>
+            <div className="flex flex-col items-center">
+              <button
+                type="submit"
+                className="w-full px-6 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50 mb-4"
+              >
+                Sign Up
+              </button>
+              <p className="text-sm text-gray-600">
+                Already have an account?{" "}
+                <Link to="/login" className="text-blue-600 hover:underline">
+                  Log in
+                </Link>
+              </p>
             </div>
-        </div>
-    );
-}
\ No newline at end of file
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}