0.0.1
This commit is contained in:
214
src/App.tsx
214
src/App.tsx
@@ -1,121 +1,103 @@
|
||||
import { useState } from 'react'
|
||||
import reactLogo from './assets/react.svg'
|
||||
import viteLogo from './assets/vite.svg'
|
||||
import heroImg from './assets/hero.png'
|
||||
import './App.css'
|
||||
import { useState } from "react";
|
||||
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
import { collection, doc, writeBatch } from "firebase/firestore";
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState(0)
|
||||
import { AppLayout } from "@/components/AppLayout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { GroupsProvider } from "@/context/GroupsContext";
|
||||
import { CONNECTORS_SEED } from "@/data/connectorsSeed";
|
||||
import { db } from "@/lib/firebase";
|
||||
import { CompartmentPage } from "@/pages/CompartmentPage";
|
||||
import { GroupPage } from "@/pages/GroupPage";
|
||||
import { HomePage } from "@/pages/Home";
|
||||
import { PlaceholderPage } from "@/pages/PlaceholderPage";
|
||||
import { NewPage } from "@/pages/NewPage";
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: "/",
|
||||
element: <AppLayout />,
|
||||
children: [
|
||||
{ index: true, element: <HomePage /> },
|
||||
{ path: "groups/:groupId", element: <GroupPage /> },
|
||||
{
|
||||
path: "groups/:groupId/compartments/:compartmentId",
|
||||
element: <CompartmentPage />,
|
||||
},
|
||||
{ path: "search", element: <PlaceholderPage title="Search" /> },
|
||||
{ path: "new", element: <NewPage /> },
|
||||
{ path: "account", element: <PlaceholderPage title="Account" /> },
|
||||
{ path: "settings", element: <PlaceholderPage title="Settings" /> },
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const CONNECTORS_COLLECTION = "connectors";
|
||||
|
||||
export function ConnectorsSeedControl() {
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [notice, setNotice] = useState("");
|
||||
|
||||
async function insertConnectors() {
|
||||
if (
|
||||
!window.confirm(
|
||||
`Insert ${CONNECTORS_SEED.length} new documents into Firestore collection "${CONNECTORS_COLLECTION}"? Each run creates new document IDs (duplicates if you run again).`,
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
setBusy(true);
|
||||
setNotice("");
|
||||
try {
|
||||
const col = collection(db, CONNECTORS_COLLECTION);
|
||||
const batch = writeBatch(db);
|
||||
for (const row of CONNECTORS_SEED) {
|
||||
batch.set(doc(col), { ...row });
|
||||
}
|
||||
await batch.commit();
|
||||
setNotice(`Inserted ${CONNECTORS_SEED.length} rows.`);
|
||||
} catch (e) {
|
||||
setNotice(
|
||||
e instanceof Error ? e.message : "Failed to write to Firestore.",
|
||||
);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<section id="center">
|
||||
<div className="hero">
|
||||
<img src={heroImg} className="base" width="170" height="179" alt="" />
|
||||
<img src={reactLogo} className="framework" alt="React logo" />
|
||||
<img src={viteLogo} className="vite" alt="Vite logo" />
|
||||
</div>
|
||||
<div>
|
||||
<h1>Get started</h1>
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
className="counter"
|
||||
onClick={() => setCount((count) => count + 1)}
|
||||
>
|
||||
Count is {count}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<div className="ticks"></div>
|
||||
|
||||
<section id="next-steps">
|
||||
<div id="docs">
|
||||
<svg className="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#documentation-icon"></use>
|
||||
</svg>
|
||||
<h2>Documentation</h2>
|
||||
<p>Your questions, answered</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vite.dev/" target="_blank">
|
||||
<img className="logo" src={viteLogo} alt="" />
|
||||
Explore Vite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://react.dev/" target="_blank">
|
||||
<img className="button-icon" src={reactLogo} alt="" />
|
||||
Learn more
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="social">
|
||||
<svg className="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#social-icon"></use>
|
||||
</svg>
|
||||
<h2>Connect with us</h2>
|
||||
<p>Join the Vite community</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#github-icon"></use>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vite.dev/" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#discord-icon"></use>
|
||||
</svg>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://x.com/vite_js" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#x-icon"></use>
|
||||
</svg>
|
||||
X.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#bluesky-icon"></use>
|
||||
</svg>
|
||||
Bluesky
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="ticks"></div>
|
||||
<section id="spacer"></section>
|
||||
</>
|
||||
)
|
||||
<div className="fixed right-4 bottom-24 z-50 flex max-w-xs flex-col gap-2 rounded-lg border border-border bg-background/95 p-3 shadow-md backdrop-blur-sm">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Local only: push rows from{" "}
|
||||
<code className="text-foreground">connectorsSeed.ts</code> into{" "}
|
||||
<code className="text-foreground">{CONNECTORS_COLLECTION}</code>.
|
||||
</p>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
disabled={busy}
|
||||
onClick={() => void insertConnectors()}
|
||||
>
|
||||
{busy ? "Inserting…" : "Insert connectors"}
|
||||
</Button>
|
||||
{notice ? (
|
||||
<p className="text-xs text-muted-foreground wrap-break-word">
|
||||
{notice}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App
|
||||
function App() {
|
||||
return (
|
||||
<GroupsProvider>
|
||||
{/* {import.meta.env.DEV ? <ConnectorsSeedControl /> : null} */}
|
||||
<RouterProvider router={router} />
|
||||
</GroupsProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
Reference in New Issue
Block a user