Update dependencies and API calls

.github/workflows/frontend-build-deploy.yml

@@ -78,6 +78,7 @@ jobs:
         if git diff-index --quiet HEAD --; then
           echo "No changes to commit"
         else
-          git commit -m "Update files"
+          commit_message="Update files - $(date +'%Y%m%d%H%M%S')"
+          git commit -m "$commit_message"
           git push origin main
         fi

api/index.js

@@ -7,10 +7,15 @@ const userRoute = require("./routes/users");
 const postRoute = require("./routes/posts");
 const categoryRoute = require("./routes/categories");
 const multer = require("multer");
+const cors = require('cors');
 const path = require("path");
-const __dirname = process.cwd();
 
 dotenv.config();
+
+app.use(cors({
+  origin: process.env.CLIENT_URL,
+  credentials: true
+}));
 app.use(express.json());
 app.use("/images", express.static(path.join(__dirname, "/images")));
 

api/package.json

@@ -4,6 +4,7 @@
   "main": "index.js",
   "dependencies": {
     "bcrypt": "^5.1.1",
+    "cors": "^2.8.5",
     "dotenv": "^16.3.2",
     "express": "^4.18.2",
     "mongoose": "^8.1.0",

client/package.json

@@ -37,7 +37,6 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://localhost:5000/api/",
   "devDependencies": {
     "faker": "^6.6.6"
   }

client/src/__tests__/Register.test.js

@@ -1,7 +1,7 @@
 import { render, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import faker from 'faker';
-import axios from 'axios';
+import API from '../utils/axios';
 import Register from './Register'; // import your Register component
 import { BrowserRouter } from 'react-router-dom';
 
@@ -14,7 +14,7 @@ test('should register with valid credentials', async () => {
   const password = faker.internet.password();
 
   // Mock the axios post call
-  axios.post.mockResolvedValue({ data: {} });
+  API.post.mockResolvedValue({ data: {} });
 
   // Render the Register component
   const { getByLabelText, getByRole, getByText } = render(
@@ -32,7 +32,7 @@ test('should register with valid credentials', async () => {
   fireEvent.click(getByRole('button', { name: /register/i }));
 
   // Wait for the form to be submitted and the axios post call to be made
-  await waitFor(() => expect(axios.post).toHaveBeenCalledWith("/auth/register", { username, email, password }));
+  await waitFor(() => expect(API.post).toHaveBeenCalledWith("/auth/register", { username, email, password }));
 
   // Add any additional assertions you want here
 });

client/src/components/sidebar/Sidebar.jsx

@@ -1,14 +1,14 @@
-import axios from "axios";
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
+import API from "../../utils/axios";
 import "./sidebar.css";
 
 export default function Sidebar() {
   const [cats, setCats] = useState([]);
 
   useEffect(() => {
     const getCats = async () => {
-      const res = await axios.get("/categories");
+      const res = await API.get("/categories");
       setCats(res.data);
     };
     getCats();

client/src/components/singlePost/SinglePost.jsx

@@ -1,10 +1,10 @@
-import axios from "axios";
 import { useContext, useEffect, useState } from "react";
 import { useLocation } from "react-router";
 import { Link } from "react-router-dom";
 import { Context } from "../../context/Context";
 import "./singlePost.css";
 import SinglePostSkeleton from "../SinglePostSkeleton/SinglePostSkeleton";
+import API from "../../utils/axios";
 
 export default function SinglePost() {
   const location = useLocation();
@@ -19,7 +19,7 @@ export default function SinglePost() {
 
   useEffect(() => {
     const getPost = async () => {
-      const res = await axios.get("/posts/" + path);
+      const res = await API.get("/posts/" + path);
       setPost(res.data);
       setTitle(res.data.title);
       setDesc(res.data.desc);
@@ -30,7 +30,7 @@ export default function SinglePost() {
 
   const handleDelete = async () => {
     try {
-      await axios.delete(`/posts/${post._id}`, {
+      await API.delete(`/posts/${post._id}`, {
         data: { username: user.username },
       });
       window.location.replace("/");
@@ -39,7 +39,7 @@ export default function SinglePost() {
 
   const handleUpdate = async () => {
     try {
-      await axios.put(`/posts/${post._id}`, {
+      await API.put(`/posts/${post._id}`, {
         username: user.username,
         title,
         desc,

client/src/index.js

@@ -1,13 +1,17 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 import App from "./App";
 import { ContextProvider } from "./context/Context";
+import { removeLogsInProduction } from "./utils/remove-logs-in-production";
 
-ReactDOM.render(
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
   <React.StrictMode>
     <ContextProvider>
       <App />
     </ContextProvider>
   </React.StrictMode>,
-  document.getElementById("root")
 );
+
+removeLogsInProduction();

client/src/pages/home/Home.jsx

@@ -3,16 +3,16 @@ import Header from "../../components/header/Header";
 import Posts from "../../components/posts/Posts";
 import Sidebar from "../../components/sidebar/Sidebar";
 import "./home.css";
-import axios from "axios";
 import { useLocation } from "react-router";
+import API from "../../utils/axios";
 
 export default function Home() {
   const [posts, setPosts] = useState([]);
   const { search } = useLocation();
 
   useEffect(() => {
     const fetchPosts = async () => {
-      const res = await axios.get("/posts" + search);
+      const res = await API.get("/posts" + search);
       setPosts(res.data);
     };
     fetchPosts();

client/src/pages/login/Login.jsx

@@ -1,8 +1,8 @@
-import axios from "axios";
-import { useContext, useRef } from "react";
+import API from "../../utils/axios";
 import { Link } from "react-router-dom";
 import { Context } from "../../context/Context";
 import "./login.css";
+import { useContext, useRef } from "react";
 
 export default function Login() {
   const userRef = useRef();
@@ -13,7 +13,7 @@ export default function Login() {
     e.preventDefault();
     dispatch({ type: "LOGIN_START" });
     try {
-      const res = await axios.post("/auth/login", {
+      const res = await API.post("/auth/login", {
         username: userRef.current.value,
         password: passwordRef.current.value,
       });

client/src/pages/register/Register.jsx

@@ -1,7 +1,7 @@
-import axios from "axios";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import "./register.css";
+import API from "../../utils/axios";
 
 export default function Register() {
   const [username, setUsername] = useState("");
@@ -13,7 +13,7 @@ export default function Register() {
     e.preventDefault();
     setError(false);
     try {
-      const res = await axios.post("/auth/register", {
+      const res = await API.post("/auth/register", {
         username,
         email,
         password,

client/src/pages/settings/Settings.jsx

@@ -2,7 +2,7 @@ import "./settings.css";
 import Sidebar from "../../components/sidebar/Sidebar";
 import { useContext, useEffect, useState } from "react";
 import { Context } from "../../context/Context";
-import axios from "axios";
+import API from "../../utils/axios";
 
 export default function Settings() {
   const [file, setFile] = useState(null);
@@ -34,7 +34,7 @@ export default function Settings() {
       data.append("file", file);
       updatedUser.profilePic = filename;
       try {
-        await axios.post("/upload", data);
+        await API.post("/upload", data);
       } catch (err) {
         console.log('err uploading file', err);
       }
@@ -50,7 +50,7 @@ export default function Settings() {
     e.preventDefault();
     dispatch({ type: "UPDATE_START" });
     try {
-      const res = await axios.put("/users/" + user._id, updatedUser);
+      const res = await API.put("/users/" + user._id, updatedUser);
       setSuccess(true);
       dispatch({ type: "UPDATE_SUCCESS", payload: res.data });
     } catch (err) {

client/src/pages/write/Write.jsx

@@ -1,7 +1,7 @@
 import { useContext, useState } from "react";
 import "./write.css";
-import axios from "axios";
 import { Context } from "../../context/Context";
+import API from "../../utils/axios";
 
 export default function Write() {
   const [title, setTitle] = useState("");
@@ -23,11 +23,11 @@ export default function Write() {
       data.append("file", file);
       newPost.photo = filename;
       try {
-        await axios.post("/upload", data);
+        await API.post("/upload", data);
       } catch (err) {}
     }
     try {
-      const res = await axios.post("/posts", newPost);
+      const res = await API.post("/posts", newPost);
       window.location.replace("/post/" + res.data._id);
     } catch (err) {}
   };

client/src/utils/axios.js

@@ -0,0 +1,8 @@
+import axios from 'axios';
+
+const API = axios.create({
+	baseURL: process.env.REACT_APP_API_URL,
+	withCredentials: true,
+});
+
+export default API;

client/src/utils/remove-logs-in-production.js

@@ -0,0 +1,8 @@
+export const removeLogsInProduction = () => {
+	if (process.env.NODE_ENV !== "development") {
+		console.log = () => { };
+		console.debug = () => { };
+		console.info = () => { };
+		console.warn = () => { };
+	}
+};