Skip to content

Commit

Permalink
sidebar nav to handle more pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@jbolda
jbolda committed Dec 29, 2024
1 parent 47ac673 commit 7f557fd
Show file tree
Hide file tree
Showing 3 changed files with 413 additions and 144 deletions.
298 changes: 156 additions & 142 deletions src/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@ import { ThemeSupa } from '@supabase/auth-ui-shared';
import { type SupabaseClient } from '@supabase/supabase-js';
import React from 'react';
import { RouterProvider } from 'react-aria-components';
import { Routes, Route, Link } from 'react-router-dom';
import { Routes as RoutesList, Route, Link } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { useSelector } from 'starfx/react';

import { Footer } from './components/Footer.tsx';
import { Header } from './components/Header.tsx';
import Sidebar from './components/Sidebar.tsx';
import Examples from './pages/examples';
import Homepage from './pages/homepage';
import TransactionsOverview from './pages/transactions/index.tsx';
import { schema } from './store/schema.ts';
import { schema, type Settings as SettingsStore } from './store/schema.ts';

const Settings = React.lazy(() => import('./pages/settings'));
const Financial = React.lazy(() => import('./pages/flow'));
Expand All @@ -34,158 +34,172 @@ const FinancialIndependence = React.lazy(
const Importing = React.lazy(() => import('./pages/importing'));
const Taxes = React.lazy(() => import('./pages/taxes'));

const FeatureFlag = ({ flag, children }) => {
function FeatureFlag({
flag,
children
}: {
flag: boolean;
children: React.ReactNode;
}) {
if (flag) return children;
return <NoMatch />;
};
}

function AppWrapper({ children }: { children: React.ReactNode }) {
const navigate = useNavigate();

return <RouterProvider navigate={navigate}>{children} </RouterProvider>;
}

const App = ({
function App({
supabase
}: {
supabase: SupabaseClient<any, 'public', any> | null;
}) => {
}) {
const settings = useSelector(schema.settings.select);
const auth = useSelector(schema.auth.select);
let navigate = useNavigate();

return (
<RouterProvider navigate={navigate}>
<div className="min-h-full">
<div className="flex flex-col h-screen">
<Header settings={settings} />
<AppWrapper>
<Sidebar />

<main className="py-10 lg:pl-56">
<div className="px-4 sm:px-6 lg:px-8">
<Routes supabase={supabase} settings={settings} />
</div>
</main>

<main className="flex-grow -mt-32">
<div className="mx-auto container pb-12">
<div className="rounded-lg bg-white px-1 py-6 shadow sm:px-5">
<Routes>
<Route index element={<Homepage />} />
<Route path="examples" element={<Examples />} />
<Route
path="auth"
element={
supabase && !auth.user ? (
<Auth
supabaseClient={supabase}
appearance={{ theme: ThemeSupa }}
/>
) : (
<div>Logged in!</div>
)
}
/>
<Route
path="settings"
element={
<React.Suspense fallback={<>...</>}>
<Settings />
</React.Suspense>
}
/>
<Route
path="flow"
element={
<FeatureFlag flag={settings.flow}>
<React.Suspense fallback={<>...</>}>
<Financial />
</React.Suspense>
</FeatureFlag>
}
/>
<Route
path="accounts"
element={
<React.Suspense fallback={<>...</>}>
<AccountsContainer />
</React.Suspense>
}
>
<Route
index
element={
<React.Suspense fallback={<>...</>}>
<Accounts />
</React.Suspense>
}
/>
<Route
path="set"
element={
<React.Suspense fallback={<>...</>}>
<AccountInput />
</React.Suspense>
}
/>
</Route>
<Route
path="transactions"
element={
<React.Suspense fallback={<>...</>}>
<TransactionsContainer />
</React.Suspense>
}
>
<Route
index
element={
<React.Suspense fallback={<>...</>}>
<TransactionsOverview />
</React.Suspense>
}
/>
<Route
path="set"
element={
<React.Suspense fallback={<>...</>}>
<TransactionInput />
</React.Suspense>
}
/>
</Route>
<Route
path="planning"
element={
<React.Suspense fallback={<>...</>}>
<Planning />
</React.Suspense>
}
/>
<Route
path="financialindependence"
element={
<React.Suspense fallback={<>...</>}>
<FinancialIndependence />
</React.Suspense>
}
/>
<Route
path="import"
element={
<React.Suspense fallback={<>...</>}>
<Importing />
</React.Suspense>
}
/>
<Route
path="taxes"
element={
<React.Suspense fallback={<>...</>}>
<Taxes />
</React.Suspense>
}
/>
<Footer settings={settings} />
</AppWrapper>
);
}

<Route path="*" element={<NoMatch />} />
</Routes>
</div>
</div>
</main>
function Routes({
supabase,
settings
}: {
supabase: SupabaseClient<any, 'public', any> | null;
settings: SettingsStore;
}) {
const auth = useSelector(schema.auth.select);
return (
<RoutesList>
<Route index element={<Homepage />} />
<Route path="examples" element={<Examples />} />
<Route
path="auth"
element={
supabase && !auth.user ? (
<Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} />
) : (
<div>Logged in!</div>
)
}
/>
<Route
path="settings"
element={
<React.Suspense fallback={<>...</>}>
<Settings />
</React.Suspense>
}
/>
<Route
path="flow"
element={
<FeatureFlag flag={settings.flow}>
<React.Suspense fallback={<>...</>}>
<Financial />
</React.Suspense>
</FeatureFlag>
}
/>
<Route
path="accounts"
element={
<React.Suspense fallback={<>...</>}>
<AccountsContainer />
</React.Suspense>
}
>
<Route
index
element={
<React.Suspense fallback={<>...</>}>
<Accounts />
</React.Suspense>
}
/>
<Route
path="set"
element={
<React.Suspense fallback={<>...</>}>
<AccountInput />
</React.Suspense>
}
/>
</Route>
<Route
path="transactions"
element={
<React.Suspense fallback={<>...</>}>
<TransactionsContainer />
</React.Suspense>
}
>
<Route
index
element={
<React.Suspense fallback={<>...</>}>
<TransactionsOverview />
</React.Suspense>
}
/>
<Route
path="set"
element={
<React.Suspense fallback={<>...</>}>
<TransactionInput />
</React.Suspense>
}
/>
</Route>
<Route
path="planning"
element={
<React.Suspense fallback={<>...</>}>
<Planning />
</React.Suspense>
}
/>
<Route
path="financialindependence"
element={
<React.Suspense fallback={<>...</>}>
<FinancialIndependence />
</React.Suspense>
}
/>
<Route
path="import"
element={
<React.Suspense fallback={<>...</>}>
<Importing />
</React.Suspense>
}
/>
<Route
path="taxes"
element={
<React.Suspense fallback={<>...</>}>
<Taxes />
</React.Suspense>
}
/>

<Footer settings={settings} />
</div>
</div>
</RouterProvider>
<Route path="*" element={<NoMatch />} />
</RoutesList>
);
};
}

function NoMatch() {
return (
Expand Down
Loading

0 comments on commit 7f557fd

Please sign in to comment.