Update app layout

dhkatz · Mar 17, 2022 · 2a154f7 · 2a154f7
1 parent 286e620
commit 2a154f7
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 36 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -7,14 +7,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-	"@ballona-discovery/editor": "^0.1.0",
+    "@ballona-discovery/editor": "^0.1.0",
     "bootstrap": "^5.1.3",
     "classnames": "^2.3.1",
     "react": "^17.0.2",
     "react-bootstrap": "^2.2.1",
     "react-contenteditable": "^3.3.6",
     "react-dom": "^17.0.2",
-    "react-draggable": "^4.4.4",
+    "react-firebase-hooks": "^5.0.3",
     "react-router-dom": "^6.2.2",
     "styled-components": "^5.3.3"
   },

diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
@@ -1,25 +1,19 @@
 import React from 'react';
 
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import { Container } from 'react-bootstrap';
 
-import { Navigation } from './components/Navigation';
-import { Login } from './views';
+import { Dashboard, Login } from './views';
+import { Layout } from './Layout';
 
 function App() {
 	return (
 		<Router>
-			<Container>
-				<header>
-					<Navigation />
-				</header>
-				<main>
-					<Routes>
-						<Route path={'/login'} element={<Login />} />
-					</Routes>
-				</main>
-				<footer>Footer</footer>
-			</Container>
+			<Routes>
+				<Route path="/" element={<Layout />}>
+					<Route path="login" element={<Login />} />
+					<Route path="dashboard/*" element={<Dashboard />} />
+				</Route>
+			</Routes>
 		</Router>
 	);
 }

diff --git a/packages/app/src/Layout.tsx b/packages/app/src/Layout.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Container } from 'react-bootstrap';
+import { Outlet } from 'react-router-dom';
+
+import { Navigation } from './components';
+
+export const Layout = () => {
+	return (
+		<Container>
+			<header>
+				<Navigation />
+			</header>
+			<main>
+				<Outlet />
+			</main>
+			<footer>Footer</footer>
+		</Container>
+	);
+};
diff --git a/packages/app/src/components/Editor.tsx b/packages/app/src/components/Editor.tsx
diff --git a/packages/app/src/components/Navigation.tsx b/packages/app/src/components/Navigation.tsx
@@ -20,7 +20,9 @@ export const Navigation = () => {
 					<Nav.Link>Tours</Nav.Link>
 				</Nav>
 				<Nav className={'ml-auto float-lg-right'}>
-					<Nav.Link>Dashboard</Nav.Link>
+					<Nav.Link as={NavLink} to={'/dashboard'}>
+						Dashboard
+					</Nav.Link>
 					<Nav.Link as={NavLink} to={'/login'}>
 						Login
 					</Nav.Link>

diff --git a/packages/app/src/components/index.ts b/packages/app/src/components/index.ts
@@ -0,0 +1 @@
+export * from './Navigation';
diff --git a/packages/app/src/views/dashboard/Dashboard.tsx b/packages/app/src/views/dashboard/Dashboard.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+
+export const Dashboard = () => {
+	return (
+		<div>
+			<h1>Dashboard</h1>
+			<Routes>
+				<Route path="/" element={<h1>Hello!</h1>} />
+			</Routes>
+		</div>
+	);
+};
diff --git a/packages/app/src/views/dashboard/index.ts b/packages/app/src/views/dashboard/index.ts
@@ -0,0 +1,3 @@
+export * from './Dashboard';
+export * from './Editor';
+export * from './Panels';
diff --git a/packages/app/src/views/index.ts b/packages/app/src/views/index.ts
@@ -1 +1,2 @@
 export * from './Login';
+export * from './Dashboard';
diff --git a/yarn.lock b/yarn.lock
@@ -3616,11 +3616,6 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
-clsx@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
-  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
-
 cmd-shim@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-4.1.0.tgz#b3a904a6743e9fede4148c6f3800bf2a08135bdd"
@@ -9012,7 +9007,7 @@ prop-types-extra@^1.1.0:
     react-is "^16.3.2"
     warning "^4.0.0"
 
-prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.1, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.7.1, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -9266,13 +9261,10 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
-react-draggable@^4.4.4:
-  version "4.4.4"
-  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.4.tgz#5b26d9996be63d32d285a426f41055de87e59b2f"
-  integrity sha512-6e0WdcNLwpBx/YIDpoyd2Xb04PB0elrDrulKUgdrIlwuYvxh5Ok9M+F8cljm8kPXXs43PmMzek9RrB1b7mLMqA==
-  dependencies:
-    clsx "^1.1.1"
-    prop-types "^15.6.0"
+react-firebase-hooks@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/react-firebase-hooks/-/react-firebase-hooks-5.0.3.tgz#3125a382d6b72deee776fe1df9e0c8173cf36d5d"
+  integrity sha512-0+V2XwInZJNjW8B2cm+U21Hlv4xnp/1tJqIoDg2rjyWzKTQ9VoLPQ9PAt+fMqPumjLz5uCIREY7YqGSSjc439Q==
 
 react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0:
   version "16.13.1"