Refactor API endpoints to use VITE_SERVER_PORT for environment config…

…uration
Bitbox-Connect · Nov 10, 2024 · c51940b · c51940b
1 parent 91d57a7
commit c51940b
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 23 deletions.
diff --git a/client/src/component/Blog.jsx b/client/src/component/Blog.jsx
@@ -26,6 +26,8 @@ BlogPage.propTypes = {
 };
 
 export default function BlogPage(props) {
+  const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";
+
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedCategory, setSelectedCategory] = useState("All");
   const [blogPosts, setBlogPosts] = useState([]);
@@ -63,7 +65,7 @@ export default function BlogPage(props) {
 
   const fetchData = async () => {
     try {
-      let response = await fetch("http://localhost:5000/api/blog/all-blog");
+      let response = await fetch(`${VITE_SERVER_PORT}/api/blog/all-blog`);
       let data = await response.json();
       setBlogPosts(data.blogs);
       console.log(data.blogs);
@@ -111,6 +113,8 @@ export default function BlogPage(props) {
 
   useEffect(() => {
     fetchData();
+
+    // eslint-disable-next-line
   }, []);
 
   return (
@@ -214,7 +218,7 @@ export default function BlogPage(props) {
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8">
           {filteredPosts.length > 0 ? (
             filteredPosts.map((blogPost) => {
-              const postUrl = `http://localhost:5000/api/blog/getById/${blogPost._id}`;
+              const  postUrl = `{VITE_SERVER_PORT}/api/blog/getById/${blogPost._id}`;
               return (
                 <div
                   className={`max-w-3xl mx-auto my-8 ${props.mode === 'light' ? 'bg-white' : 'bg-gray-800'} rounded-lg shadow-md overflow-hidden`}

diff --git a/client/src/component/Collab.jsx b/client/src/component/Collab.jsx
@@ -3,7 +3,7 @@ import { io } from "socket.io-client";
 import MonacoEditor from "@monaco-editor/react";
 
 // Adjust this to your Socket.IO server URL
-const SOCKET_SERVER_URL = "http://localhost:5000";
+const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";
 
 const Collab = () => {
   const [code, setCode] = useState("// Start coding collaboratively!\n");
@@ -12,7 +12,7 @@ const Collab = () => {
 
   // Initialize the Socket.IO client
   useEffect(() => {
-    const newSocket = io(SOCKET_SERVER_URL);
+    const newSocket = io(VITE_SERVER_PORT);
     setSocket(newSocket);
 
     newSocket.on("code_update", (newCode) => {

diff --git a/client/src/component/CreateBlog.jsx b/client/src/component/CreateBlog.jsx
@@ -7,6 +7,8 @@ import 'react-quill/dist/quill.snow.css';
 import { useNavigate } from 'react-router-dom';
 
 const CreateBlog = () => {
+    const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";
+
     const [formData, setFormData] = useState({
         id: '',
         title: '',
@@ -42,7 +44,7 @@ const CreateBlog = () => {
         const blogPost = { ...formData, id: uniqueId }; // Add the ID to formData
         console.log(blogPost)
         try {
-            const response = await axios.post('http://localhost:5000/api/blog/post-blog', blogPost, {
+            const response = await axios.post(`${VITE_SERVER_PORT}/api/blog/post-blog`, blogPost, {
                 headers: { 'Content-Type': 'application/json' }
             });
 

diff --git a/client/src/component/DiscussionForum.jsx b/client/src/component/DiscussionForum.jsx
@@ -1,13 +1,16 @@
+import PropTypes from 'prop-types';
 import { useState, useEffect } from 'react';
 
 const DiscussionForum = (props) => {
+    const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";
+
     const [questions, setQuestions] = useState([]);
 
     // Fetch questions from the backend API
     useEffect(() => {
         const fetchQuestions = async () => {
             try {
-                const response = await fetch('http://localhost:5000/api/discussion/getQuestion');
+                const response = await fetch(`${VITE_SERVER_PORT}/api/discussion/getQuestion`);
                 if (response.ok) {
                     const data = await response.json();
                     setQuestions(data);
@@ -20,6 +23,8 @@ const DiscussionForum = (props) => {
         };
 
         fetchQuestions();
+
+        // eslint-disable-next-line
     }, []);
 
     // Helper function to save a new question
@@ -31,7 +36,7 @@ const DiscussionForum = (props) => {
         };
 
         try {
-            const response = await fetch('http://localhost:5000/api/discussion/postQuestion', {
+            const response = await fetch(`${VITE_SERVER_PORT}/api/discussion/postQuestion`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -53,7 +58,7 @@ const DiscussionForum = (props) => {
     // Helper function to add an answer to a question
     const addAnswer = async (questionId, answerContent) => {
         try {
-            const response = await fetch(`http://localhost:5000/api/discussion/${questionId}/answer`, {
+            const response = await fetch(`${VITE_SERVER_PORT}/api/discussion/${questionId}/answer`, {
                 method: 'PUT',
                 headers: {
                     'Content-Type': 'application/json',
@@ -77,7 +82,7 @@ const DiscussionForum = (props) => {
     };
 
     // Function to render the Question Card
-    const renderQuestionCard = (question) => {
+    const renderQuestionCard = (question, props) => {
         return (
             <div
                 className={`${props.mode === 'dark' ? 'bg-gray-800 text-white' : 'bg-white text-gray-800'
@@ -129,6 +134,10 @@ const DiscussionForum = (props) => {
         );
     };
 
+    AnswerForm.propTypes = {
+        questionId: PropTypes.string.isRequired,
+    };
+
     // Function to render the Question Form
     const QuestionForm = () => {
         const [newQuestion, setNewQuestion] = useState('');
@@ -190,4 +199,8 @@ const DiscussionForum = (props) => {
     );
 };
 
+DiscussionForum.propTypes = {
+    mode: PropTypes.string.isRequired,
+};
+
 export default DiscussionForum;
diff --git a/client/src/component/EditProfile.jsx b/client/src/component/EditProfile.jsx
@@ -8,8 +8,7 @@ import userDummyImg from "../assets/images/User/User.png";
 import "../css/EditProfile.css";
 
 const EditProfile = (props) => {
-  const VITE_SERVER_PORT =
-    import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";
+  const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";
 
   const [profile, setProfile] = useState({
     name: "",

diff --git a/client/src/component/Footer.jsx b/client/src/component/Footer.jsx
@@ -7,6 +7,8 @@ import { useEffect, useState } from 'react';
 import VisitorCounter from './Footers/VisitorCount';
 
 const Footer = (props) => {
+    const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";
+
     const [email, setEmail] = useState("");
     const [name, setName] = useState("");
     const [message, setMessage] = useState("");
@@ -25,7 +27,7 @@ const Footer = (props) => {
         }
 
         try {
-            const response = await fetch("http://localhost:5000/api/profile/subscribe", {
+            const response = await fetch(`${VITE_SERVER_PORT}/api/profile/subscribe`, {
                 method: "POST",
                 headers: {
                     "Content-Type": "application/json",

diff --git a/client/src/component/Footers/VisitorCount.jsx b/client/src/component/Footers/VisitorCount.jsx
@@ -2,8 +2,10 @@ import { useEffect, useState } from "react";
 
 // Function to increment the visitor count
 async function incrementVisitorCount() {
+    const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";
+
     try {
-        const response = await fetch("http://localhost:5000/api/visitor/increment", {
+        const response = await fetch(`${VITE_SERVER_PORT}/api/visitor/increment`, {
             method: "POST",
         });
         const data = await response.json();
@@ -17,7 +19,7 @@ async function incrementVisitorCount() {
 // Function to get the current visitor count
 async function getVisitorCount() {
     try {
-        const response = await fetch("http://localhost:5000/api/visitor/count", {
+        const response = await fetch(`${VITE_SERVER_PORT}/api/visitor/count`, {
             method: "GET",
         });
         const data = await response.json();

diff --git a/client/src/component/Login.jsx b/client/src/component/Login.jsx
@@ -15,7 +15,7 @@ import { useAuth } from '../contexts/authContext';
 
 const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";
 
-const Login = ({ mode, showAlert, loggedin, setloggedin }) => {
+const Login = ({ mode, loggedin, setloggedin }) => {
 
   const [credentials, setCredentials] = useState({ email: "", password: "" });
   const [loading, setLoading] = useState(false);
@@ -61,7 +61,7 @@ const Login = ({ mode, showAlert, loggedin, setloggedin }) => {
 
       const json = await response.json();
       console.log(json);
-      
+
       if (json.success) {
         localStorage.setItem("token", json.authtoken);
         toast.success("Login Successfully!");
@@ -114,7 +114,7 @@ const Login = ({ mode, showAlert, loggedin, setloggedin }) => {
       toast.error("Google sign-in failed. Please try again.");
       setloggedin(false);
     }
-  };  
+  };
 
   return (
     <div className="min-h-screen flex items-center justify-center mt-14" data-aos="zoom-in" data-aos-duration="1800">
@@ -186,17 +186,17 @@ const Login = ({ mode, showAlert, loggedin, setloggedin }) => {
           <button className="submit" id="login-btn" type="submit" onClick={handleSubmit} disabled={loading}>
             {loading ? <Spin size="small" /> : "Login"}
           </button>
-          
+
 
 
           <button
             disabled={loggedin}
-            onClick={(e) => { 
+            onClick={(e) => {
               e.preventDefault();
               navigate("/login-otp")
             }}
             className={`w-full flex items-center justify-center mt-3 gap-x-3 py-2.5 border bg-[#6366f1] text-white rounded-full text-sm font-medium hover:bg-[#4a4cc5] transition duration-300`}>
-            
+
             Login with mobile
 
           </button>

diff --git a/client/src/component/Projects.jsx b/client/src/component/Projects.jsx
@@ -4,6 +4,8 @@ import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
 
 const Projects = ({ mode }) => {
+    const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";
+
     const navigate = useNavigate();
     const [projects, setProjects] = useState([]);  // State to store fetched projects
     const [loading, setLoading] = useState(true);  // State for loading state
@@ -13,7 +15,7 @@ const Projects = ({ mode }) => {
         // Fetch the data from the API when the component mounts
         const fetchProjects = async () => {
             try {
-                const response = await axios.get('http://localhost:5000/api/showcaseProjects/all-projects');
+                const response = await axios.get(`${VITE_SERVER_PORT}/api/showcaseProjects/all-projects`);
                 setProjects(response.data);  // Store the fetched projects in state
                 setLoading(false);  // Set loading to false after data is fetched
             } catch (err) {

diff --git a/client/src/component/ReadMoreBlog.jsx b/client/src/component/ReadMoreBlog.jsx
@@ -22,11 +22,13 @@ const images = [
 
 
 const ReadMoreBlog = (props) => {
+    const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";
+
     const { id } = useParams();
     const [blogPost, setBlogPost] = useState(null);
     const fetchData = async () => {
         try {
-            const response = await fetch(`http://localhost:5000/api/blog/getById/${id}`);
+            const response = await fetch(`${VITE_SERVER_PORT}/api/blog/getById/${id}`);
 
             const data = await response.json();
             setBlogPost(data.blog); // Set the retrieved blog post to state

diff --git a/client/src/component/UploadProject.jsx b/client/src/component/UploadProject.jsx
@@ -3,6 +3,8 @@ import PropTypes from "prop-types";
 import { useNavigate } from 'react-router-dom';
 
 const UploadProject = ({ mode }) => {
+    const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";
+
     const navigate = useNavigate();
     const [formData, setFormData] = useState({
         title: '',
@@ -32,7 +34,7 @@ const UploadProject = ({ mode }) => {
         e.preventDefault();
 
         try {
-            const response = await fetch('http://localhost:5000/api/showcaseProjects/post-project', {
+            const response = await fetch(`${VITE_SERVER_PORT}/api/showcaseProjects/post-project`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',