add general routes

cmglezpdev · Jul 19, 2022 · a1fde09 · a1fde09
1 parent a87008d
commit a1fde09
Show file tree

Hide file tree

Showing 39 changed files with 183 additions and 121 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+/assets
 
 # testing
 /coverage

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "musify",
+  "name": "hero-app",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/assets/dc-arrow.jpg b/public/assets/dc-arrow.jpg
diff --git a/public/assets/dc-batman.jpg b/public/assets/dc-batman.jpg
diff --git a/public/assets/dc-black.jpg b/public/assets/dc-black.jpg
diff --git a/public/assets/dc-blue.jpg b/public/assets/dc-blue.jpg
diff --git a/public/assets/dc-flash.jpg b/public/assets/dc-flash.jpg
diff --git a/public/assets/dc-green.jpg b/public/assets/dc-green.jpg
diff --git a/public/assets/dc-martian.jpg b/public/assets/dc-martian.jpg
diff --git a/public/assets/dc-robin.jpg b/public/assets/dc-robin.jpg
diff --git a/public/assets/dc-superman.jpg b/public/assets/dc-superman.jpg
diff --git a/public/assets/dc-wonder.jpg b/public/assets/dc-wonder.jpg
diff --git a/public/assets/marvel-captain.jpg b/public/assets/marvel-captain.jpg
diff --git a/public/assets/marvel-cyclops.jpg b/public/assets/marvel-cyclops.jpg
diff --git a/public/assets/marvel-daredevil.jpg b/public/assets/marvel-daredevil.jpg
diff --git a/public/assets/marvel-hawkeye.jpg b/public/assets/marvel-hawkeye.jpg
diff --git a/public/assets/marvel-hulk.jpg b/public/assets/marvel-hulk.jpg
diff --git a/public/assets/marvel-iron.jpg b/public/assets/marvel-iron.jpg
diff --git a/public/assets/marvel-silver.jpg b/public/assets/marvel-silver.jpg
diff --git a/public/assets/marvel-spider.jpg b/public/assets/marvel-spider.jpg
diff --git a/public/assets/marvel-thor.jpg b/public/assets/marvel-thor.jpg
diff --git a/public/assets/marvel-wolverine.jpg b/public/assets/marvel-wolverine.jpg
diff --git a/public/index.html b/public/index.html
@@ -25,6 +25,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/HeroesApp.jsx b/src/HeroesApp.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { AppRouter } from './routers/AppRouter'
+
+export const HeroesApp = () => {
+  return (
+    <div>
+        <AppRouter /> 
+    </div>
+  )
+}
diff --git a/src/components/dc/DcScreem.jsx b/src/components/dc/DcScreem.jsx
@@ -0,0 +1,6 @@
+
+export const DcScreem = () => {
+  return (
+    <div>DcScreem</div>
+  )
+}
diff --git a/src/components/login/LoginScreen.jsx b/src/components/login/LoginScreen.jsx
@@ -0,0 +1,6 @@
+
+export const LoginScreen = () => {
+  return (
+    <div>LoginScreen</div>
+  )
+}
diff --git a/src/components/marvel/MarvelScreen.jsx b/src/components/marvel/MarvelScreen.jsx
@@ -0,0 +1,6 @@
+
+export const MarvelScreen = () => {
+  return (
+    <div>MarverScreen</div>
+  )
+}
diff --git a/src/components/search/SearchScreen.jsx b/src/components/search/SearchScreen.jsx
@@ -0,0 +1,6 @@
+
+export const SearchScreen = () => {
+  return (
+    <div>SearchScreen</div>
+  )
+}
diff --git a/src/components/ui/NavBar.jsx b/src/components/ui/NavBar.jsx
@@ -0,0 +1,55 @@
+import { Link, NavLink } from 'react-router-dom';
+
+
+export const Navbar = () => {
+
+    const handleLogout = () => {
+        console.log("Logout");
+    }
+
+    return (
+        <nav className="navbar navbar-expand-sm navbar-dark bg-dark">
+
+            <Link 
+                className="navbar-brand" 
+                to="/"
+            >
+                Asociaciones
+            </Link>
+
+            <div className="navbar-collapse">
+                <div className="navbar-nav">
+
+                    <NavLink 
+                        className={ ({ isActive }) => `nav-item nav-link ${isActive ? 'active' : ''}` }
+                        to="/marvel"
+                    >
+                        Marvel
+                    </NavLink>
+
+                    <NavLink 
+                        className={ ({ isActive }) => `nav-item nav-link ${isActive ? 'active' : ''}` } 
+                        to="/dc"
+                    >
+                        DC
+                    </NavLink>
+                </div>
+            </div>
+
+            <div className="navbar-collapse collapse w-100 order-3 dual-collapse2 d-flex justify-content-end">
+                <ul className="navbar-nav ml-auto">
+                    <span className='nav-link nav-item text-info' >
+                        Carlos Manuel
+                    </span>
+
+                    <button 
+                        className="nav-item nav-link btn" 
+                        onClick={handleLogout}
+                    >
+                        Logout
+                    </button>
+                </ul>
+            </div>
+        </nav>
+    )
+}
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.js b/src/index.js
@@ -1,17 +1,8 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import { createRoot } from 'react-dom/client';
+import { HeroesApp } from './HeroesApp';
+
+const root = createRoot(document.getElementById('root'));
+
+root.render(<HeroesApp />);
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
diff --git a/src/routers/AppRouter.js b/src/routers/AppRouter.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import { Routes, Route, BrowserRouter } from 'react-router-dom';
+import { DcScreem } from '../components/dc/DcScreem';
+import { LoginScreen } from '../components/login/LoginScreen';
+import { MarvelScreen } from '../components/marvel/MarvelScreen';
+import { SearchScreen } from '../components/search/SearchScreen';
+import { Navbar } from '../components/ui/NavBar';
+
+export const AppRouter = () => {
+  return (
+    <BrowserRouter>
+        <Navbar />
+
+        <Routes>
+            <Route path="/" element={<MarvelScreen />} />
+            <Route path="/marvel" element={<MarvelScreen />} />
+            <Route path="/dc" element={<DcScreem />} />
+            <Route path="/search" element={<SearchScreen />} />
+            <Route path="/login" element={<LoginScreen />} />
+
+        </Routes>
+    </BrowserRouter>
+  )
+}
diff --git a/src/setupTests.js b/src/setupTests.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,7 @@ @@
     /node_modules
     /.pnp
     .pnp.js
+    /assets
     # testing
     /coverage
@@ Expand Down @@