adjusted routes for HashRouter

MetinVn · Nov 7, 2024 · 99c79c1 · 99c79c1
1 parent d037162
commit 99c79c1
Show file tree

Hide file tree

Showing 15 changed files with 35 additions and 48 deletions.
diff --git a/src/components/Breadcrumb.jsx b/src/components/Breadcrumb.jsx
@@ -22,7 +22,7 @@ const DynamicBreadcrumb = () => {
       <Link
         title="Home page"
         aria-label="Home page"
-        to="/YouTube-Converter/"
+        to="/"
         className="text-green-500 underline w-fit hover:text-green-600 duration-300 text-sm md:text-base">
         Home
       </Link>

diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
@@ -31,20 +31,20 @@ const Dashboard = () => {
     {
       name: "Main Menu",
       description: "Convert Youtube links",
-      linkTo: "/YouTube-Converter/",
+      linkTo: "/",
     },
     {
       name: "Check out MP3 list",
       description: "Listen to your converted music",
-      linkTo: "/YouTube-Converter/music-list",
+      linkTo: "/music-list",
     },
   ];
 
   const dashboardBugReport = [
     {
       name: "Report a Bug",
       description: "Help us improve by reporting any issues.",
-      linkTo: "/YouTube-Converter/bug-report",
+      linkTo: "/bug-report",
     },
   ];
 

diff --git a/src/components/DisplayAlbum.jsx b/src/components/DisplayAlbum.jsx
@@ -102,7 +102,7 @@ const DisplayAlbum = ({ refreshMP3Link, loadingRefresh, setCurrentMP3, mp3List,
                           <li key={idx} className="text-gray-300 flex items-center space-x-2">
                             <span
                               onClick={() => setCurrentMP3(mp3)}
-                              className=" underline sm:no-underline cursor-pointer rounded">
+                              className="hover underline sm:no-underline cursor-pointer rounded">
                               {mp3.title || `Song ${mp3.id}`}
                             </span>
                           </li>

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -47,7 +47,7 @@ const Footer = () => {
                 </Link>
               </li>
               <li>
-                <Link to="/YouTube-Converter/credits" className="text-blue-400 hover:underline" title="Credits">
+                <Link to="/credits" className="text-blue-400 hover:underline" title="Credits">
                   Credits
                 </Link>
               </li>

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -19,7 +19,7 @@ const Header = () => {
       ) : isLoggedIn ? (
         <>
           <Dashboard />
-          <Link to={"/YouTube-Converter/account"}>
+          <Link to={"/account"}>
             <Button
               aria_label="Account"
               children={"Account"}
@@ -29,7 +29,7 @@ const Header = () => {
           </Link>
         </>
       ) : (
-        <Link to={"/YouTube-Converter/signin"}>
+        <Link to={"/signin"}>
           <Button
             aria_label="Sign in"
             children="Sign in"

diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
@@ -8,7 +8,7 @@ const Modal = ({ isOpen = false, onClose = () => {}, paragraph = "", description
   const navigate = useNavigate(null);
 
   const handleNavigate = () => {
-    navigate("/YouTube-Converter/signin");
+    navigate("/signin");
   };
 
   useEffect(() => {

diff --git a/src/components/ProtectedRoutes.jsx b/src/components/ProtectedRoutes.jsx
@@ -8,7 +8,7 @@ const ProtectedRoute = ({ element }) => {
 
   if (loadingUser) return <PageFallback />;
 
-  return isLoggedIn ? element : <Navigate to="/YouTube-Converter/login" />;
+  return isLoggedIn ? element : <Navigate to="/login" />;
 };
 
 export default ProtectedRoute;
diff --git a/src/database/music/refreshMP3.js b/src/database/music/refreshMP3.js
@@ -15,7 +15,6 @@ export async function refreshMP3(youtubeID, updatedFields) {
     const mp3Ref = doc(firestore, `users/${userId}/mp3s`, youtubeID);
 
     await updateDoc(mp3Ref, updatedFields);
-    console.log(`MP3 with ID ${youtubeID} updated successfully!`);
   } catch (error) {
     console.error("Failed to update MP3:", error.message);
   }

diff --git a/src/main.jsx b/src/main.jsx
@@ -31,23 +31,15 @@ root.render(
           <Header />
           <Suspense fallback={<PageFallback />}>
             <Routes>
-              <Route exact path="/YouTube-Converter/account" element={<ProtectedRoute element={<Account />} />} />
-              <Route
-                exact
-                path="/YouTube-Converter/music-list"
-                element={<ProtectedRoute element={<MP3Dashboard />} />}
-              />
-              <Route
-                exact
-                path="/YouTube-Converter/account/edit"
-                element={<ProtectedRoute element={<EditProfile />} />}
-              />
-              <Route exact path="/YouTube-Converter/bug-report" element={<ProtectedRoute element={<BugReport />} />} />
-              <Route exact index path="/YouTube-Converter/" element={<App />} />
-              <Route exact path="/YouTube-Converter/signin" element={<Signin />} />
-              <Route exact path="/YouTube-Converter/login" element={<Login />} />
-              <Route exact path="/YouTube-Converter/credits" element={<Credits />} />
-              <Route exact path="/YouTube-Converter/reset-password" element={<ForgotPassword />} />
+              <Route exact path="/account" element={<ProtectedRoute element={<Account />} />} />
+              <Route exact path="/music-list" element={<ProtectedRoute element={<MP3Dashboard />} />} />
+              <Route exact path="/account/edit" element={<ProtectedRoute element={<EditProfile />} />} />
+              <Route exact path="/bug-report" element={<ProtectedRoute element={<BugReport />} />} />
+              <Route exact index path="/" element={<App />} />
+              <Route exact path="/signin" element={<Signin />} />
+              <Route exact path="/login" element={<Login />} />
+              <Route exact path="/credits" element={<Credits />} />
+              <Route exact path="/reset-password" element={<ForgotPassword />} />
               <Route exact path="*" element={<ErrorPage />} />
             </Routes>
           </Suspense>

diff --git a/src/pages/Account.jsx b/src/pages/Account.jsx
@@ -31,7 +31,7 @@ const Profile = () => {
   const handleLogout = async () => {
     try {
       await signOutUser();
-      navigate("/YouTube-Converter/");
+      navigate("/");
     } catch (error) {
       console.error("Failed to log out. Please try again.", error);
     }
@@ -96,7 +96,7 @@ const Profile = () => {
             <Button
               aria_label="Edit profile"
               type="button"
-              onClick={() => navigate("/YouTube-Converter/account/edit")}
+              onClick={() => navigate("/account/edit")}
               children="Edit profile"
               className="px-4 py-2 sm:w-auto w-full bg-[#4CAF50] text-white rounded hover:bg-[#388E3C] transition duration-300"
             />

diff --git a/src/pages/EditAccount.jsx b/src/pages/EditAccount.jsx
@@ -56,7 +56,7 @@ const EditProfile = () => {
   };
 
   const handleCancel = () => {
-    navigate("/YouTube-Converter/account");
+    navigate("/account");
   };
 
   const isSaveButtonDisabled = !displayName || displayName === initialDisplayName;
@@ -143,7 +143,7 @@ const EditProfile = () => {
               type="submit"
               className="px-4 py-3 bg-[#4CAF50] text-white rounded-md hover:bg-[#388E3C] transition-colors duration-300"
             />
-            <Link to="/YouTube-Converter/reset-password" title="Reset password">
+            <Link to="/reset-password" title="Reset password">
               <span className="hover:underline text-sm text-gray-300">Forgot password?</span>
             </Link>
           </div>

diff --git a/src/pages/ErrorPage.jsx b/src/pages/ErrorPage.jsx
@@ -12,7 +12,7 @@ const ErrorPage = () => {
       <p className="text-lg text-gray-200 mb-6">This is not the page you're looking for.</p>
       <Link
         aria_label="Go Home"
-        to="/YouTube-Converter/"
+        to="/"
         className="rounded-lg bg-[#4CAF50] text-white px-6 py-2 hover:bg-[#388E3C] transition-colors">
         Go to Homepage
       </Link>

diff --git a/src/pages/ForgotPassword.jsx b/src/pages/ForgotPassword.jsx
@@ -16,7 +16,7 @@ const PasswordReset = () => {
       await sendPasswordResetEmail(auth, email);
       setMessage("Password reset email sent successfully! Check your inbox.");
       setTimeout(() => {
-        navigate("/YouTube-Converter/login");
+        navigate("/login");
       }, 2000);
     } catch (error) {
       setMessage(`Error: ${error.message}`);

diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
@@ -20,7 +20,7 @@ const Login = () => {
 
     try {
       await signInWithEmail(email, password);
-      navigate("/YouTube-Converter/account");
+      navigate("/account");
     } catch (error) {
       const message = getErrorMessage(error.message);
       console.log(error.message);
@@ -89,18 +89,14 @@ const Login = () => {
 
         <p className="mt-6 text-center text-gray-300">
           Forgot your password?{" "}
-          <Link
-            to="/YouTube-Converter/reset-password"
-            className="text-[#4CAF50] hover:text-[#388E3C] underline transition duration-200">
+          <Link to="/reset-password" className="text-[#4CAF50] hover:text-[#388E3C] underline transition duration-200">
             Reset it here
           </Link>
         </p>
 
         <p className="mt-6 text-center text-gray-300">
           Don't have an account?{" "}
-          <Link
-            to="/YouTube-Converter/signin"
-            className="text-[#4CAF50] hover:text-[#388E3C] underline transition duration-200">
+          <Link to="/signin" className="text-[#4CAF50] hover:text-[#388E3C] underline transition duration-200">
             Sign up
           </Link>
         </p>

diff --git a/src/pages/Signin.jsx b/src/pages/Signin.jsx
@@ -15,9 +15,11 @@ const Signin = () => {
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
 
-  if (!loadingUser && !isLoggedIn) {
-    navigate("/YouTube-Converter/account");
-  }
+  useEffect(() => {
+    if (!loadingUser && !isLoggedIn) {
+      navigate("/account");
+    }
+  }, [loadingUser, isLoggedIn]);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -27,7 +29,7 @@ const Signin = () => {
     try {
       await signUpWithEmail(email, password, displayName);
       alert("Verification email sent! Please check your inbox.");
-      navigate("/YouTube-Converter/login");
+      navigate("/login");
     } catch (error) {
       const message = getErrorMessage(error.message);
       setError(message);
@@ -101,9 +103,7 @@ const Signin = () => {
 
         <p className="mt-6 text-center text-gray-300">
           Already have an account?{" "}
-          <Link
-            to="/YouTube-Converter/login"
-            className="text-[#4CAF50] hover:text-[#388E3C] underline transition duration-200">
+          <Link to="/login" className="text-[#4CAF50] hover:text-[#388E3C] underline transition duration-200">
             Log in
           </Link>
         </p>
-Original file line number
+Diff line change
@@ Expand Up / @@ -47,7 +47,7 @@ const Footer = () => { @@
                     </Link>
                   </li>
                   <li>
-                    <Link to="/YouTube-Converter/credits" className="text-blue-400 hover:underline" title="Credits">
+                    <Link to="/credits" className="text-blue-400 hover:underline" title="Credits">
                       Credits
                     </Link>
                   </li>
@@ Expand Down @@