Add baseUrl and other assets

client/package-lock.json

@@ -16,7 +16,6 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
-        "dotenv": "^16.3.1",
         "formik": "^2.4.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -7465,22 +7464,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/dotenv": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
-      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/motdotla/dotenv?sponsor=1"
-      }
-    },
-    "node_modules/dotenv-expand": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
-      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
-    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -15202,8 +15185,6 @@
         "case-sensitive-paths-webpack-plugin": "^2.4.0",
         "css-loader": "^6.5.1",
         "css-minimizer-webpack-plugin": "^3.2.0",
-        "dotenv": "^10.0.0",
-        "dotenv-expand": "^5.1.0",
         "eslint": "^8.3.0",
         "eslint-config-react-app": "^7.0.1",
         "eslint-webpack-plugin": "^3.1.1",
@@ -15256,14 +15237,6 @@
         }
       }
     },
-    "node_modules/react-scripts/node_modules/dotenv": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
-      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

client/package.json

@@ -11,7 +11,6 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "dotenv": "^16.3.1",
     "formik": "^2.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

client/src/components/Friend.jsx

@@ -6,6 +6,8 @@ import { setFriends } from "state";
 import FlexBetween from "./FlexBetween";
 import ProfilePhoto from "./ProfilePhoto";
 
+const baseUrl = process.env.REACT_APP_BASE_URL;
+
 const Friend = ({ friendId, userName, subtitle, profilePicturePath }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -21,16 +23,13 @@ const Friend = ({ friendId, userName, subtitle, profilePicturePath }) => {
   const isFriend = friends.find((friend) => friend._id === friendId);
 
   const handleFriend = async () => {
-    const response = await fetch(
-      `http:/localhost:3001/users/${_id}/${friendId}`,
-      {
-        method: "PATCH",
-        headers: {
-          Authorization: `Bearer ${token}`,
-          "Content-Type": "application/json",
-        },
-      }
-    );
+    const response = await fetch(`${baseUrl}/users/${_id}/${friendId}`, {
+      method: "PATCH",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+    });
     const data = await response.json();
     dispatch(setFriends({ friends: data }));
   };

client/src/components/ProfilePhoto.jsx

@@ -1,5 +1,7 @@
 import { Box } from "@mui/material";
 
+const baseUrl = process.env.REACT_APP_BASE_URL;
+
 const ProfilePhoto = ({ image, size = "60px" }) => {
   return (
     <Box width={size} height={size}>
@@ -11,7 +13,7 @@ const ProfilePhoto = ({ image, size = "60px" }) => {
         width={size}
         height={size}
         alt="profile"
-        src={`http://localhost:3001/assets/${image}`}
+        src={`${baseUrl}/assets/${image}`}
       />
     </Box>
   );

client/src/scenes/loginPage/Form.jsx

@@ -16,6 +16,8 @@ import { setLogin } from "state";
 import Dropzone from "react-dropzone";
 import FlexBetween from "components/FlexBetween";
 
+const baseUrl = process.env.REACT_APP_BASE_URL;
+
 const registerSchema = yup.object().shape({
   firstName: yup.string().required("First name is required"),
   lastName: yup.string().required("Last name is required"),
@@ -62,13 +64,10 @@ const Form = () => {
     }
     formData.append("profilePicturePath", values.profilePicture.name);
 
-    const savedUserResponse = await fetch(
-      "http://localhost:3001/auth/register",
-      {
-        method: "POST",
-        body: formData,
-      }
-    );
+    const savedUserResponse = await fetch(`${baseUrl}/auth/register`, {
+      method: "POST",
+      body: formData,
+    });
 
     const savedUser = await savedUserResponse.json();
     onSubmitProps.resetForm();
@@ -79,14 +78,11 @@ const Form = () => {
   };
 
   const login = async (values, onSubmitProps) => {
-    const loggedInUserResponse = await fetch(
-      "http://localhost:3001/auth/login",
-      {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(values),
-      }
-    );
+    const loggedInUserResponse = await fetch(`${baseUrl}/auth/login`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(values),
+    });
 
     const loggedInUser = await loggedInUserResponse.json();
     onSubmitProps.resetForm();

client/src/scenes/profilePage/index.jsx

@@ -8,6 +8,8 @@ import PostWidget from "scenes/widgets/PostWidget";
 import FeedWidget from "scenes/widgets/FeedWidget";
 import UserWidget from "scenes/widgets/UserWidget";
 
+const baseUrl = process.env.REACT_APP_BASE_URL;
+
 const ProfilePage = () => {
   const [user, setUser] = useState(null);
   const { userId } = useParams();
@@ -15,7 +17,7 @@ const ProfilePage = () => {
   const isNotMobile = useMediaQuery("(min-width: 1000px)");
 
   const getUser = async () => {
-    const response = await fetch(`http://localhost:3001/users/${userId}`, {
+    const response = await fetch(`${baseUrl}/users/${userId}`, {
       method: "GET",
       headers: {
         Authorization: `Bearer ${token}`,

client/src/scenes/widgets/AdsWidget.jsx

@@ -2,6 +2,8 @@ import { Typography, useTheme } from "@mui/material";
 import FlexBetween from "components/FlexBetween";
 import WidgetWrapper from "components/WidgetWrapper";
 
+const baseUrl = process.env.REACT_APP_BASE_URL;
+
 const AdsWidget = () => {
   const { palette } = useTheme();
   const dark = palette.neutral.dark;
@@ -20,7 +22,7 @@ const AdsWidget = () => {
         width="100%"
         height="auto"
         alt="ads"
-        src="https://localhpst:3001/assets/ads.jpeg"
+        src={`${baseUrl}/assets/ads.jpeg`}
         style={{ borderRadius: "0.75rem", margin: "0.75rem 0" }}
       ></img>
       <FlexBetween>

client/src/scenes/widgets/ContentWidget.jsx

@@ -12,6 +12,8 @@ import { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { setPosts } from "state";
 
+const baseUrl = process.env.REACT_APP_BASE_URL;
+
 const ContentWidget = ({
   postId,
   userId,
@@ -34,7 +36,7 @@ const ContentWidget = ({
   const main = palette.neutral.main;
 
   const handleLike = async () => {
-    const response = await fetch(`http://localhost:3001/posts/${postId}/like`, {
+    const response = await fetch(`${baseUrl}/posts/${postId}/like`, {
       method: "PATCH",
       headers: {
         Authorization: `Bearer ${token}`,
@@ -63,7 +65,7 @@ const ContentWidget = ({
           height="auto"
           alt="post"
           style={{ borderRadius: "0.75rem", marginTop: "0.75rem" }}
-          src={`http://localhost:3001/assets/${contentPicturePath}`}
+          src={`${baseUrl}/assets/${contentPicturePath}`}
         />
       )}
       <FlexBetween mt="0.25rem">

client/src/scenes/widgets/FeedWidget.jsx

@@ -3,13 +3,15 @@ import { useDispatch, useSelector } from "react-redux";
 import { setPosts } from "state";
 import ContentWidget from "./ContentWidget";
 
+const baseUrl = process.env.REACT_APP_BASE_URL;
+
 const FeedWidget = ({ userId, isProfile = false }) => {
   const dispatch = useDispatch();
   const posts = useSelector((state) => state.posts);
   const token = useSelector((state) => state.token);
 
   const getPosts = async () => {
-    const response = await fetch(`http://localhost:3001/posts`, {
+    const response = await fetch(`${baseUrl}/posts`, {
       method: "GET",
       headers: {
         Authorization: `Bearer ${token}`,
@@ -20,7 +22,7 @@ const FeedWidget = ({ userId, isProfile = false }) => {
   };
 
   const getUserPosts = async () => {
-    const response = await fetch(`http://localhost:3001/posts/${userId}`, {
+    const response = await fetch(`${baseUrl}/posts/${userId}`, {
       method: "GET",
       headers: {
         Authorization: `Bearer ${token}`,

client/src/scenes/widgets/FriendList.jsx

@@ -5,6 +5,8 @@ import { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { setFriends } from "state";
 
+const baseUrl = process.env.REACT_APP_BASE_URL;
+
 const FriendList = ({ userId }) => {
   const dispatch = useDispatch();
   const { palette } = useTheme();
@@ -12,15 +14,12 @@ const FriendList = ({ userId }) => {
   const friends = useSelector((state) => state.user.friends);
 
   const getFriends = async () => {
-    const response = await fetch(
-      `http://localhost:3001/users/${userId}/friends`,
-      {
-        method: "GET",
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      }
-    );
+    const response = await fetch(`${baseUrl}/users/${userId}/friends`, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
     const data = await response.json();
     dispatch(setFriends({ friends: data }));
   };

client/src/scenes/widgets/PostWidget.jsx

@@ -25,6 +25,8 @@ import { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { setPosts } from "state";
 
+const baseUrl = process.env.REACT_APP_BASE_URL;
+
 const PostWidget = ({ profilePicturePath }) => {
   const dispatch = useDispatch();
   const [isImageDropzoneOpen, setIsImageDropzoneOpen] = useState(false);
@@ -46,7 +48,7 @@ const PostWidget = ({ profilePicturePath }) => {
       formData.append("contentPicturePath", image.name);
     }
 
-    const response = await fetch(`http://localhost:3001/posts`, {
+    const response = await fetch(`${baseUrl}/posts`, {
       method: "POST",
       headers: {
         Authorization: `Bearer ${token}`,

client/src/scenes/widgets/UserWidget.jsx

@@ -12,6 +12,8 @@ import { useSelector } from "react-redux";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
+const baseUrl = process.env.REACT_APP_BASE_URL;
+
 const UserWidget = ({ userId, profilePicturePath }) => {
   const [user, setUser] = useState(null);
   const { palette } = useTheme();
@@ -22,7 +24,7 @@ const UserWidget = ({ userId, profilePicturePath }) => {
   const main = palette.neutral.main;
 
   const getUser = async () => {
-    const response = await fetch(`http://localhost:3001/users/${userId}`, {
+    const response = await fetch(`${baseUrl}/users/${userId}`, {
       method: "GET",
       headers: { Authorization: `Bearer ${token}` },
     });