IntroductionFrontendRoot

[Root] page.tsx

This is where all the magic begins for Kundima. When you first visit on https://admin.kundima.co.zw first this page checks the url that is entered by the user in the browser if url starts with admin “admin.kundima.co.zw” then it knows that the user want’s to access the Admin Console If url doesn’t have a subdomain kundima.co.zw it knows that the user want’s to access the normal Console.

So depending on the url the app know what the user wants and renders it… Below is the code for that Logic with explanation on how it works

 
'use client';
import { useEffect, useState } from 'react';
import AdminConsole from "./pages/adminConsole/page";
import ConsolePage from './pages/console/page';
import AuthenticationPage from './pages/authentication/admin/page';
 
export default function Home() {
  const [pageToShow, setPageToShow] = useState(<AuthenticationPage />);
 
  useEffect(() => {
    // Check the current hostname
    const hostname = window.location.hostname;
 
    // Determine which page to show based on the hostname
    if (hostname.startsWith('admin')) {
      setPageToShow(<AdminConsole />);
    } else {
      setPageToShow(<AdminConsole />);
    }
  }, []);
 
  return (
    <div>
      {pageToShow}
    </div>
  );
}

1. React Hooks

  • useState:

    • Initializes the state variable pageToShow with the <AuthenticationPage /> component.
    • This acts as the default page displayed before the hostname check occurs.

  • useEffect:

    • Runs once after the component has mounted.
    • Dynamically determines the hostname using window.location.hostname and updates the pageToShow state to render the appropriate page.

2. Dynamic Page Selection Logic

  • The hostname is retrieved using window.location.hostname.
  • Based on the hostname:
    • If it starts with 'admin', <AdminConsole /> is set as the page to show.
    • The else condition redundantly sets the same page (<AdminConsole />), which appears to be an oversight.

Rendering

The return statement renders the pageToShow component inside a <div>.

  • Initially, it displays <AuthenticationPage />.
  • Once the useEffect logic executes, the state updates, and the correct page is rendered.

Improvements and Fixes

  1. Fix Redundant Logic
    The current logic redundantly sets <AdminConsole /> in both the if and else conditions. Update the else block to display a different component, such as <ConsolePage />.

Fixed Logic Example:

if (hostname.startsWith('admin')) {
  setPageToShow(<AdminConsole />);
} else {
  setPageToShow(<ConsolePage />);
}
  1. Avoid Flicker with Default State
    The initial state shows <AuthenticationPage /> before useEffect runs, which could cause a flicker. Instead, initialize the state as null and show a loader until the correct component is determined.

Improved Code Example:

const [pageToShow, setPageToShow] = useState(null);
 
useEffect(() => {
  const hostname = window.location.hostname;
  if (hostname.startsWith('admin')) {
    setPageToShow(<AdminConsole />);
  } else {
    setPageToShow(<ConsolePage />);
  }
}, []);
 
return <div>{pageToShow || <div>Loading...</div>}</div>;
  1. Consider a Routing Library
    For larger applications, using a routing library like React Router or Next.js’s built-in routing can make managing routes easier and more scalable.
IntroductionLayout