import React, { useState } from "react"; import { useFireproof } from "use-fireproof"; import { useVibe, useViewer } from "use-vibes"; import { Button, Empty, Heading, Row, Segmented, Spacer, Stack, Text } from "@vibes.diy/pouf"; import { Toaster } from "@vibes.diy/pouf/interactive"; import Dashboard from "./components/Dashboard.jsx"; import LogVisit from "./components/LogVisit.jsx"; import Generators from "./components/Generators.jsx"; import TeamSettings from "./components/TeamSettings.jsx"; export default function App() { const { database, useLiveQuery } = useFireproof("mightyGen"); const { me, can, ready } = useVibe("mightyGen"); const { requestLogin, isViewerPending } = useViewer(); const [view, setView] = useState("dash"); const { docs: teams } = useLiveQuery("type", { key: "team" }); const team = teams.find((t) => t.creatorHandle === me?.userHandle) ?? teams[0]; const teamId = team?._id ?? ""; const { docs: all } = useLiveQuery("teamId", { key: teamId }); const ofType = (t) => all.filter((d) => d.type === t); const generators = ofType("generator"); const visits = ofType("visit"); const members = ofType("member"); const settings = ofType("settings")[0]; const reports = ofType("report"); const teamDraft = me?.userHandle ? { _id: `default-${me.userHandle}`, type: "team", name: "Mighty Gen Tracker", creatorHandle: me.userHandle } : null; async function createTeam() { if (teamDraft && can.create(teamDraft).ok) await database.put(teamDraft); } const c = { page: "min-h-screen bg-background text-foreground font-sans", wrap: "mx-auto w-full max-w-2xl p-4 pb-24", }; const nav = [ { value: "dash", label: "Dashboard" }, { value: "gens", label: "Generators" }, { value: "team", label: "Team" }, ]; return (

{!team && ( {!ready || isViewerPending ? ( Checking your access… ) : !me ? ( <> ) : ( <> )} )} {team && view === "dash" && (

setView("gens")} />

)} {team && view === "log" && (

setView("dash")} />

)} {team && view === "gens" && (

)} {team && view === "team" && (

)}

); }