Add BASE_URL and apply on all other pages

src/components/Affirmation.jsx

@@ -1,13 +1,14 @@
+import "dotenv";
 import BorderColorSharpIcon from "@mui/icons-material/BorderColorSharp";
 import { useNavigate } from "react-router-dom";
 
 const Affirmation = ({ affirmation, id, currentGroup, affirmationsData }) => {
   const navigate = useNavigate();
-
+  const BASE_URL = import.meta.env.BASE_URL;
   const handleEditAffirmationClick = (e) => {
     let editEl = e.target.closest("li");
     let editId = editEl.getAttribute("id");
-    navigate("/edit", {
+    navigate(`${BASE_URL}edit`, {
       state: {
         affirmationId: editId,
       },

src/components/AffirmationParams.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import "dotenv";
 import { toast } from "react-toastify";
 import ShortUniqueId from "short-unique-id";
 import { motion, easeInOut } from "framer-motion";
@@ -24,7 +25,9 @@ const uid = new ShortUniqueId();
 
 const AffirmationParams = () => {
   const navigate = useNavigate();
-
+  const BASE_URL = import.meta.env.BASE_URL;
+  const PUBLIC_URL = `https://bretpeters3n.github.io/affirmations-vite/`;
+  // console.log(PUBLIC_URL);
   const [affirmationsData, setAffirmationsData] = useState(
     requestAndSaveAffirmationsData()
   );
@@ -71,7 +74,7 @@ const AffirmationParams = () => {
     });
     setCurrentGroup(affirmationsData[0].groups[0].group);
     postAffirmationsData(affirmationsData);
-    navigate("/current");
+    navigate(`${BASE_URL}current`);
     console.log("this is after the 'navigate' that is being skipped");
   };
 
@@ -110,11 +113,11 @@ const AffirmationParams = () => {
 
   const handleShareAffirmationsClick = () => {
     const groupKey = requestCurrentGroupKey(affirmationsData, currentGroup);
-    const PAGE_PATH = `/affirmations-vite/shared?query=`;
+    const PAGE_PATH = `shared?query=`;
     let affParams = affirmationsData[0].groups[groupKey];
     const affParamArray = [affParams].flat();
     const affParamArrayString = JSON.stringify(affParamArray);
-    setUrlFormatted(`${BASE_URL}${PAGE_PATH}${affParamArrayString}`);
+    setUrlFormatted(`${PUBLIC_URL}${PAGE_PATH}${affParamArrayString}`);
     setShowShareModal(true);
   };
 

src/components/AffirmationResults.jsx

@@ -1,4 +1,5 @@
 import { useNavigate } from "react-router-dom";
+import "dotenv";
 import SouthIcon from "@mui/icons-material/South";
 import MyButton from "./MyButton";
 import AffGroupListResults from "./AffGroupListResults";
@@ -9,10 +10,10 @@ const AffirmationResults = ({
   affirmations,
 }) => {
   const navigate = useNavigate();
-
+  const BASE_URL = import.meta.env.BASE_URL;
   const handleAddAffirmationClick = () => {
     // console.log("add");
-    navigate("/add", {
+    navigate(`${BASE_URL}add`, {
       state: {
         currentGroup: currentGroup,
         affirmationsData: affirmationsData,

src/pages/AddAffirmation.jsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
+import "dotenv";
 import MyButton from "../components/MyButton";
 import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
@@ -13,7 +14,7 @@ import ShortUniqueId from "short-unique-id";
 
 const AddAffirmation = () => {
   const navigate = useNavigate();
-
+  const BASE_URL = import.meta.env.BASE_URL;
   const location = useLocation();
 
   const uid = new ShortUniqueId();
@@ -44,12 +45,12 @@ const AddAffirmation = () => {
       toast.success(`Affirmation '${newAffirmation.affirmation}' added!`, {
         position: "bottom-center",
       });
-      navigate("/current");
+      navigate(`${BASE_URL}current`);
     }
   };
 
   const handleCancelAddAffirmationClick = () => {
-    navigate("/current");
+    navigate(`${BASE_URL}current`);
   };
 
   return (

src/pages/DisplayAffirmations.jsx

@@ -1,3 +1,4 @@
+import "dotenv";
 import { Splide, SplideSlide, SplideTrack } from "@splidejs/react-splide";
 import { useNavigate } from "react-router-dom";
 import {
@@ -8,14 +9,14 @@ import MyButton from "../components/MyButton";
 
 const DisplayAffirmations = () => {
   const navigate = useNavigate();
-
+  const BASE_URL = import.meta.env.BASE_URL;
   const affirmationsData = requestAndSaveAffirmationsData();
   const currentGroup = affirmationsData[0].currentGroup;
   const affirmations = requestGroupAffirmations(affirmationsData, currentGroup);
 
   const handleAddAffirmationClick = () => {
     // console.log("add");
-    navigate("/add", {
+    navigate(`${BASE_URL}`, {
       state: {
         currentGroup: currentGroup,
         affirmationsData: affirmationsData,

src/pages/EditAffirmation.jsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
+import "dotenv";
 import MyButton from "../components/MyButton";
 import Modal from "../components/Modal";
 import { toast } from "react-toastify";
@@ -12,7 +13,7 @@ import {
 
 const EditAffirmation = () => {
   const navigate = useNavigate();
-
+  const BASE_URL = import.meta.env.BASE_URL;
   const location = useLocation();
 
   const [showModal, setShowModal] = useState(false);
@@ -43,7 +44,7 @@ const EditAffirmation = () => {
       position: "bottom-center",
     });
     postAffirmationsData(affirmationsData);
-    navigate("/current");
+    navigate(`${BASE_URL}current`);
   };
 
   function handleConfirmEditAffirmationClick() {
@@ -55,21 +56,21 @@ const EditAffirmation = () => {
       toast.info(`No changes were made 🧐 Try again?`, {
         position: "bottom-center",
       });
-      navigate("/current");
+      navigate(`${BASE_URL}current`);
     } else {
       affirmationsData[0].groups[groupKey].affirmations[id].affirmation =
         updatedAffirmation;
       postAffirmationsData(affirmationsData);
       toast.success(`Update to '${updatedAffirmation}', success!`, {
         position: "bottom-center",
       });
-      navigate("/current");
+      navigate(`${BASE_URL}current`);
     }
   }
 
   function handleCancelEditAffirmationClick() {
     // this one is done until you add MODAL or TOAST
-    navigate("/current");
+    navigate(`${BASE_URL}current`);
   }
 
   return (

src/pages/SharedAffirmations.jsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import "dotenv";
 import Modal from "../components/Modal";
 import MyButton from "../components/MyButton";
 import { toast } from "react-toastify";
@@ -17,7 +18,7 @@ const uid = new ShortUniqueId();
 
 const SharedAffirmations = (props) => {
   const navigate = useNavigate();
-
+  const BASE_URL = import.meta.env.BASE_URL;
   const [showImportedGroupModal, setShowImportedGroupModal] = useState(false);
   const [showRenameGroupModal, setShowRenameGroupModal] = useState(false);
 
@@ -46,7 +47,7 @@ const SharedAffirmations = (props) => {
   };
 
   const handleAboutThisSiteClick = () => {
-    navigate("/about");
+    navigate(`${BASE_URL}about`);
   };
 
   const handleCreateNewGroup = () => {
@@ -66,7 +67,7 @@ const SharedAffirmations = (props) => {
       affirmationsData[0].groups.push(sharedAffirmationsOBJ[0]);
       affirmationsData[0].groups[id].id = uid.rnd();
       postAffirmationsData(affirmationsData);
-      navigate("/");
+      navigate(`${BASE_URL}`);
       toast.success(`Group '${newGroupName}' added. Enjoy!`, {
         position: "bottom-center",
       });