Skip to content

Commit

Permalink
Merge pull request #450 from HarperDB/aakers/simplify-routing-layouts
Browse files Browse the repository at this point in the history
Simplify routing layout(s)
  • Loading branch information
BboyAkers authored Dec 17, 2024
2 parents 74a066b + 5df7c0e commit ecb3ffd
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 92 deletions.
65 changes: 65 additions & 0 deletions src/components/auth/AuthLayout.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { Outlet } from 'react-router';
import { Col, Container, Row } from 'reactstrap';

function AuthLayout({ children }) {
return (
<Container fluid="xs" className="h-100">
<Row xs="1" sm="2" className="h-100">
<Col className="p-5 auth-studio-info d-none d-sm-flex justify-content-center align-items-center">
<div className="auth-studio-info-container">
<h1 className="auth-title">HarperDB Studio</h1>
<span className="mb-4 auth-subtitle d-inline-block">Manage all your HarperDB instances.</span>
<ul className="auth-info-list-items">
<li>
<h3 className="item-title">Manage All Instances</h3>
<span className="item-subtitle">Set access, cluster, monitor, and more.</span>
</li>
<li>
<h3 className="item-title">Embedded API Server</h3>
<span className="item-subtitle">HarperDB components give you unlimited application flexibility.</span>
</li>
<li>
<h3 className="item-title">Fully Managed Cloud & 5G Instances</h3>
<span className="item-subtitle">Go from zero to code in minutes.</span>
</li>
<li>
<h3 className="item-title">Deploy Anywhere</h3>
<div className="mt-3">
<a
href="https://hub.docker.com/r/harperdb/harperdb"
target="_blank"
rel="noreferrer"
className="deploy-subitem"
>
Docker
</a>
<a
href="https://www.npmjs.com/package/harperdb"
target="_blank"
rel="noreferrer"
className="deploy-subitem"
>
npm
</a>
<a
href="https://docs.harperdb.io/docs/deployments/install-harperdb"
target="_blank"
rel="noreferrer"
className="deploy-subitem"
>
all options
</a>
</div>
</li>
</ul>
</div>
</Col>
<Col className="p-5 d-flex justify-content-center align-items-center auth-form-container">
<Outlet />
</Col>
</Row>
</Container>
);
}

export default AuthLayout;
118 changes: 26 additions & 92 deletions src/components/layouts/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import useInterval from 'use-interval';
import { positions, useAlert } from 'react-alert';
import { ErrorBoundary } from 'react-error-boundary';
import queryString from 'query-string';
import { Col, Container, Row } from 'reactstrap';

import appState from '../../functions/state/appState';
import usePersistedUser from '../../functions/state/persistedUser';
Expand All @@ -28,6 +27,7 @@ import init from '../../functions/app/init';
import refreshUser from '../../functions/app/refreshUser';
import changeFavIcon from '../../functions/app/changeFavIcon';
import getAkamaiRegions from '../../functions/api/lms/getAkamaiRegions';
import AuthLayout from '../auth/AuthLayout';

const TopNav = lazy(() => import(/* webpackChunkName: "topnav" */ '../TopNav'));
const SignUp = lazy(() => import(/* webpackChunkName: "signUp" */ '../auth/SignUp'));
Expand Down Expand Up @@ -138,103 +138,37 @@ function App() {
</Suspense>
{fetchingUser ? (
<div className="vh-100">
<Loader header="signing in" spinner />
<Loader header="Signing in..." spinner />
</div>
) : loggedIn ? (
<main id="app-container">
<ErrorBoundary FallbackComponent={ErrorFallback}>
<Suspense
fallback={
<div className="auth-centered-container">
<Loader header=" " spinner />
</div>
}
>
{/* can we put instance routes in here, each in a suspense tag (since they're lazily loaded) */}
) : (
<main id={loggedIn ? 'app-container' : ''} className={!loggedIn ? 'auth-container' : ''}>
<ErrorBoundary FallbackComponent={loggedIn ? ErrorFallback : ErrorFallbackAuth}>
<Suspense fallback={<Loader header="Loading..." spinner />}>
<Routes>
<Route element={isMaintenance ? <Maintenance /> : <UpdatePassword />} path="/update-password" />
<Route element={isMaintenance ? <Maintenance /> : <Profile />} path="/profile/*" />
<Route element={isMaintenance ? <Maintenance /> : <ValidatedRoute auth={auth} />}>
<Route element={<Instance />} path="/o/:customer_id/i/:compute_stack_id/*" />
<Route element={<Instances />} path="/o/:customer_id/instances/:action?/:purchaseStep?" />
<Route element={<Organization />} path="/o/:customer_id/*" />
</Route>
<Route element={isMaintenance ? <Maintenance /> : <Organizations />} path="/:list?/:action?" />
<Route element={<Navigate to="/" replace />} />
{loggedIn ? (
<>
<Route element={isMaintenance ? <Maintenance /> : <UpdatePassword />} path="/update-password" />
<Route element={isMaintenance ? <Maintenance /> : <Profile />} path="/profile/*" />
<Route element={isMaintenance ? <Maintenance /> : <ValidatedRoute auth={auth} />}>
<Route element={<Instance />} path="/o/:customer_id/i/:compute_stack_id/*" />
<Route element={<Instances />} path="/o/:customer_id/instances/:action?/:purchaseStep?" />
<Route element={<Organization />} path="/o/:customer_id/*" />
</Route>
<Route element={isMaintenance ? <Maintenance /> : <Organizations />} path="/:list?/:action?" />
<Route element={<Navigate to="/" replace />} />
</>
) : (
<Route element={<AuthLayout />}>
<Route element={<SignIn />} path="/" />
<Route element={config.maintenance ? <Maintenance /> : <SignUp />} path="/sign-up" />
<Route element={isMaintenance ? <Maintenance /> : <ResetPassword />} path="/reset-password" />
<Route path="*" element={<Navigate to={`/?redirect=${pathname}${search}`} replace />} />
</Route>
)}
</Routes>
</Suspense>
</ErrorBoundary>
</main>
) : (
<main className="auth-container">
<ErrorBoundary FallbackComponent={ErrorFallbackAuth}>
<Suspense fallback={<Loader header=" " spinner />}>
<Container fluid="xs" className="h-100">
<Row xs="1" sm="2" className="h-100">
<Col className="p-5 auth-studio-info d-none d-sm-flex justify-content-center align-items-center">
<div className="auth-studio-info-container">
<h1 className="auth-title">HarperDB Studio</h1>
<span className="mb-4 auth-subtitle d-inline-block">Manage all your HarperDB instances.</span>
<ul className="auth-info-list-items">
<li>
<h3 className="item-title">Manage All Instances</h3>
<span className="item-subtitle">Set access, cluster, monitor, and more.</span>
</li>
<li>
<h3 className="item-title">Embedded API Server</h3>
<span className="item-subtitle">
HarperDB components give you unlimited application flexibility.
</span>
</li>
<li>
<h3 className="item-title">Fully Managed Cloud & 5G Instances</h3>
<span className="item-subtitle">Go from zero to code in minutes.</span>
</li>
<li>
<h3 className="item-title">Deploy Anywhere</h3>
<div className="mt-3">
<a
href="https://hub.docker.com/r/harperdb/harperdb"
target="_blank"
rel="noreferrer"
className="deploy-subitem"
>
Docker
</a>
<a
href="https://www.npmjs.com/package/harperdb"
target="_blank"
rel="noreferrer"
className="deploy-subitem"
>
npm
</a>
<a
href="https://docs.harperdb.io/docs/deployments/install-harperdb"
target="_blank"
rel="noreferrer"
className="deploy-subitem"
>
all options
</a>
</div>
</li>
</ul>
</div>
</Col>
<Col className="p-5 d-flex justify-content-center align-items-center auth-form-container">
<Routes>
<Route element={<SignIn />} path="/" />
<Route element={config.maintenance ? <Maintenance /> : <SignUp />} path="/sign-up" />
<Route element={isMaintenance ? <Maintenance /> : <ResetPassword />} path="/reset-password" />
<Route path="*" element={<Navigate to={`/?redirect=${pathname}${search}`} replace />} />
</Routes>
</Col>
</Row>
</Container>
</Suspense>
</ErrorBoundary>
</main>
)}
<div id="app-bg-color" />
<div className="version">
Expand Down

0 comments on commit ecb3ffd

Please sign in to comment.