Setup Routing (Hash-based SPA)

[yuvraj-rathod-1202]

🧩 Feature / Task

Implement client-side routing logic for the Single Page Application (SPA) using hash URLs. This allows different "pages" (e.g., login, dashboard) to be displayed without full page reloads, providing a smoother user experience.

---

✅ Acceptance Criteria

• Navigating to #login, #dashboard, #upload, etc., correctly displays the content for that "page".
• The URL hash changes when navigating between sections/pages.
• A default route (e.g., #home or no hash) loads the main index.html content.
• The routing logic correctly hides/shows content based on the hash.

---

🚧 Steps To Do

1. Create scripts/ui/routing.js.
2. In scripts/ui/routing.js, add an event listener for the hashchange event on the window object.
3. Create a mapping between hash values (e.g., '#login') and the corresponding content to be displayed (e.g., a specific div in index.html or loading content from other HTML files via fetch, though the prompt suggests individual HTML files for each page, implying simple redirection or full page loads if not using SPA strictly). Correction: Given separate HTML files for each page, hash-based routing will likely mean loading content into a main container or managing visibility of different page sections loaded into index.html or simply redirecting browser to different public/*.html files.
4. For a true SPA experience, consider having one index.html and loading content dynamically into a main content area based on the hash. If using multiple HTML files, this issue would involve more traditional navigation links that point to /login.html, /dashboard.html, etc.
5. If truly hash-based SPA, ensure index.html can dynamically load and display content from other HTML partials or hide/show major sections based on the hash.

Self-correction based on detailed folder structure: The provided folder structure (public/login.html, public/dashboard.html etc.) suggests that these are separate HTML files and standard browser navigation might be intended, not a pure SPA with a single index.html and dynamic content loading. However, "Setup Routing (Hash-based SPA)" implies SPA. Let's assume the intent is to manage different "views" within a potentially single main HTML entry point or to provide a client-side navigation experience even with separate files.

Revised Steps (assuming multiple HTML files for views, and routing for navigation between them, possibly enhancing user experience):

1. In scripts/ui/routing.js, define functions to navigate to different "pages" (e.g., goToLogin(), goToDashboard()). These functions will use window.location.href = '/login.html' or window.location.hash = '#login' depending on the final SPA decision.
2. If the project is a multi-page app (MPA) but wants "SPA-like" hash navigation within a page, then for pages like index.html, dashboard.html, etc., define sections that are shown/hidden based on a hash.
3. Given the file structure, the most straightforward interpretation of "Hash-based SPA" might involve having index.html as the primary entry and using JavaScript to fetch and insert content from the other public/*.html files or to simply manage visible sections if all content is within index.html and just hidden/shown.
   • Option A (Simpler, likely intended with multiple HTML files): Navigation links simply point to /login.html, /dashboard.html, etc. The "hash-based" part might refer to internal anchors (#section1) within a given page. This would make it less of a full SPA.
   • Option B (More true SPA): index.html is the only main HTML file. login.html, signup.html, etc., become content partials. scripts/ui/routing.js then loads these partials into a main content div based on window.location.hash.

Let's proceed with Option B as it aligns more with "SPA" in the description, but acknowledge the multiple HTML files might suggest a simpler approach. If index.html is the only SPA container, the other HTML files become templates.

1. Modify index.html to have a main content area (<div id="app-content">).
2. In scripts/ui/routing.js:
   • Create a router function that listens for window.onhashchange.
   • Define a mapping for routes: '/': 'home-content', '#login': 'login-content', '#signup': 'signup-content', etc.
   • Fetch the HTML content for the target route (e.g., fetch('/login.html').then(response => response.text())) and inject it into #app-content.
   • Handle initial page load based on window.location.hash.

---

📁 Related Files / Areas

• public/index.html (main entry point)
• public/login.html, public/signup.html, public/dashboard.html, public/upload.html, public/profile.html (as content sources/templates)
• scripts/ui/routing.js
• scripts/main.js (for router initialization)

---

🧩 Priority

Priority: 🔴 High

---

🔗 Dependencies

Depends on: #26

---

🖼️ Reference

• SPA routing concepts