Merge pull request #8 from atlp-rwanda/ch-setup-react-187584854

Deliver - [ch-setup-react-router-#187584858]

package.json

@@ -17,6 +17,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-redux": "^9.1.2",
+    "react-router-dom": "^6.24.0",
     "sass": "^1.77.6",
     "save-dev": "0.0.1-security"
   },

src/App.tsx

@@ -1,10 +1,12 @@
+/* eslint-disable linebreak-style */
 import React from 'react';
-import LandingPage from './pages/LandingPage';
+import { BrowserRouter as Router } from 'react-router-dom';
+import AppRouter from './router';
 
 const App: React.FC = () => (
-  <div>
-    <LandingPage />
-  </div>
+  <Router>
+    <AppRouter />
+  </Router>
 );
 
-export default App;
+export default App;

src/components/layout/Footer.tsx

@@ -0,0 +1,17 @@
+/* eslint-disable linebreak-style */
+import React from 'react';
+
+const getYear = (): number => new Date().getFullYear();
+
+const Footer: React.FC = () => (
+  <footer>
+    <p>
+      &copy;
+      {getYear()}
+      {' '}
+      Ninja E-Commerce Store
+    </p>
+  </footer>
+);
+
+export default Footer;

src/components/layout/Header.tsx

@@ -0,0 +1,17 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Header: React.FC = () => (
+  <header>
+    <nav>
+      <ul>
+        <li><Link to="/">Home</Link></li>
+        <li><Link to="/login">Login</Link></li>
+      </ul>
+    </nav>
+  </header>
+);
+
+export default Header;

src/index.tsx

@@ -1,8 +1,13 @@
+/* eslint-disable linebreak-style */
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { store } from './store/store';
 import App from './App';
 
 const root = createRoot(document.getElementById('root')!);
-root.render(<Provider store={store}><App /></Provider>);
+root.render(
+  <Provider store={store}>
+    <App />
+  </Provider>
+);

src/pages/LandingPage.tsx

@@ -2,6 +2,8 @@ import React, { useEffect } from 'react';
 import { useAppDispatch, useAppSelector } from '../store/store';
 import { loadWelcomeMessage } from '../store/features/welcomeSlice';
 import { IWelcomeMessage } from '../utils/types/store';
+import Header from '../components/layout/Header';
+import Footer from '../components/layout/Footer';
 import '../styles/LandingPage.scss';
 
 const LandingPage: React.FC = () => {
@@ -13,11 +15,15 @@ const LandingPage: React.FC = () => {
   }, [dispatch]);
 
   return (
-    <div className="landingPage">
-      <h1>
-        {welcomeMessage.message}
-      </h1>
-    </div>
+    <>
+      <Header />
+      <div className="landingPage">
+        <h1>
+          {welcomeMessage.message}
+        </h1>
+      </div>
+      <Footer />
+    </>
   );
 };
 

src/pages/Login.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Header from '../components/layout/Header';
+
+const Login: React.FC = () => (
+  <>
+    <Header />
+    <main>
+      <h2>Login Page</h2>
+      <p>Please login to continue.</p>
+    </main>
+  </>
+);
+
+export default Login;

src/pages/NotFound.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const NotFound: React.FC = () => (
+  <main>
+    <h1> 404 -Not found </h1>
+    <p> The page you are looking for does not exist. </p>
+  </main>
+);
+
+export default NotFound;

src/router.tsx

@@ -0,0 +1,21 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable arrow-body-style */
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+import LandingPage from './pages/LandingPage';
+import Login from './pages/Login';
+import NotFound from './pages/NotFound';
+
+const AppRouter: React.FC = () => {
+  return (
+    <div>
+      <Routes>
+        <Route path="/" element={<LandingPage />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </div>
+  );
+};
+
+export default AppRouter;