Something went wrong. Try again.
An atproto AppView for tracking a Magic: The Gathering collection github.com/eth0net/manaweb
appview atproto mtg rust typescript
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157import { useEffect, useState } from "react";import { CatalogUpdate } from "./CatalogStatus";import { Collection } from "./collection/Collection";import { useCollection } from "./collection/cards";import { useContainers } from "./collection/containers";import { Owning } from "./collection/context";import { Destination } from "./collection/Destination";import { CATALOG } from "./config";import { EXPORT, Export } from "./export/Export";import { IMPORT, Import, ImportStatus } from "./import/Import";import { attach, useWaiting } from "./import/runner";import { Menu } from "./Menu";import { Nav } from "./Nav";import { useSession } from "./oauth/useSession";import { HOME, known, Link, replace, tab, usePath } from "./router";import { Search } from "./Search";import { SETS, SetView } from "./Sets";import { Soon } from "./Soon";import { Review } from "./scan/Review";import { REVIEW, SCAN, Scan } from "./scan/Scan";import { useScratch } from "./scan/store";import { useCatalog } from "./useCatalog";
export function App() { const status = useCatalog(); const { load } = status; const account = useSession(); const signedIn = account.state.status === "in" ? account.state.session : null; const containers = useContainers(signedIn); const [chosen, choose] = useState<string | null>(null); const waiting = useWaiting(); const scratch = useScratch(); const collection = useCollection(signedIn, chosen, waiting); const path = usePath(); const here = tab(path);
// An import outlives the page that started it, so what picks it back up is // the app opening rather than that page being visited. useEffect(() => { void attach(signedIn, collection.snapshot, collection.landed); }, [signedIn, collection.snapshot, collection.landed]);
// A bare `/` and the OAuth callback both land somewhere the bar can't mark, // and the callback has to be read out of the address before it is rewritten. useEffect(() => { if (account.state.status !== "restoring" && !known(path)) replace(HOME); }, [account.state.status, path]);
const destination = signedIn && ( <> <Destination containers={containers} owning={collection} chosen={chosen} onChoose={choose} /> {collection.error && <span className="warn">{collection.error}</span>} </> );
return ( <main> <header> <h1> <Link to={HOME} className="mark"> <img src="/icon.svg" alt="" width="128" height="128" /> Manaweb </Link> </h1> <Menu account={account} status={status} loaded={load.status === "ready" ? load : null} /> </header>
<div className="column"> <CatalogUpdate status={status} /> <ImportStatus path={path} />
{/* Signed out leaves this null, which is what hides every add button. */} <Owning value={collection.ready ? collection : null}> <div className="view"> {here === "/cards" && (load.status === "ready" ? ( path === SETS ? ( <SetView catalog={load.catalog} tools={destination} /> ) : ( <Search catalog={load.catalog} tools={destination} /> ) ) : load.status === "loading" ? ( <p>{load.step}…</p> ) : ( <p> No catalog at <code>{CATALOG}</code>: {load.error} </p> ))}
{here === SCAN && (path === REVIEW ? ( load.status === "ready" ? ( <Review catalog={load.catalog} scratch={scratch} session={signedIn} owning={collection} container={chosen} tools={destination} /> ) : ( <p className="quiet">The catalog is still loading.</p> ) ) : ( <Scan catalog={load.status === "ready" ? load.catalog : null} manifest={load.status === "ready" ? load.manifest : null} scratch={scratch} /> ))}
{here === "/collection" && (path === IMPORT ? ( <Import session={signedIn} owning={collection} catalog={load.status === "ready" ? load.catalog : null} /> ) : path === EXPORT ? ( <Export session={signedIn} owning={collection} catalog={load.status === "ready" ? load.catalog : null} containers={containers} /> ) : signedIn ? ( <Collection catalog={load.status === "ready" ? load.catalog : null} containers={containers} owning={collection} path={path} /> ) : ( <p className="quiet">Sign in to see what you own.</p> ))}
{here === "/decks" && <Soon what="Decks" />} {here === "/lists" && <Soon what="Lists" />} </div> </Owning> </div>
<Nav path={here} /> </main> );}