Terakoda/dm-companion
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Converts using full document state management

Browse Source
This commit is contained in:
Drew Haven
2025-07-02 17:01:56 -07:00
parent 32c5c40466
commit f27432ef05
13 changed files with 468 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
src/components/RelationshipList.tsx
View File

@@ -12,6 +12,7 @@ import { useEffect, useState } from "react";
import { Loader } from "./Loader";
import { DocumentRow } from "./documents/DocumentRow";
import { NewRelatedDocumentForm } from "./documents/NewRelatedDocumentForm";
import { useDocument } from "@/context/document/DocumentContext";
interface RelationshipListProps {
root: AnyDocument;
@@ -26,64 +27,145 @@ export function RelationshipList({
root,
relationshipType,
}: RelationshipListProps) {
const [items, setItems] = useState<AnyDocument[]>([]);
const [relationshipId, setRelationshipId] = useState<string | null>(null);
// const [items, setItems] = useState<AnyDocument[]>([]);
// const [relationshipId, setRelationshipId] = useState<string | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const queryClient = useQueryClient();
// const queryClient = useQueryClient();
useEffect(() => {
async function fetchItems() {
const { relationship } = await queryClient.fetchQuery({
queryKey: ["relationship", relationshipType, root.id],
staleTime: 5 * 60 * 1000, // 5 mintues
queryFn: async () => {
setLoading(true);
const relationship: Relationship = await pb
.collection("relationships")
.getFirstListItem(
`primary = "${root.id}" && type = "${relationshipType}"`,
{
expand: "secondary",
},
);
setLoading(false);
return { relationship };
},
});
setRelationshipId(relationship.id);
setItems(relationship.expand?.secondary ?? []);
}
fetchItems();
}, [root, relationshipType]);
// useEffect(() => {
// async function fetchItems() {
// const { relationship } = await queryClient.fetchQuery({
// queryKey: ["relationship", relationshipType, root.id],
// staleTime: 5 * 60 * 1000, // 5 mintues
// queryFn: async () => {
// setLoading(true);
// const relationship: Relationship = await pb
// .collection("relationships")
// .getFirstListItem(
// `primary = "${root.id}" && type = "${relationshipType}"`,
// {
// expand: "secondary",
// },
// );
//
// setLoading(false);
//
// return { relationship };
// },
// });
// setRelationshipId(relationship.id);
// setItems(relationship.expand?.secondary ?? []);
// }
//
// fetchItems();
// }, [root, relationshipType]);
// Handles creation of a new document and adds it to the relationship
// const handleCreate = async (doc: AnyDocument) => {
// setLoading(true);
// setError(null);
// try {
// // Check for existing relationship
// if (relationshipId) {
// console.debug("Adding to existing relationship", relationshipId);
// await pb.collection("relationships").update(relationshipId, {
// "+secondary": doc.id,
// });
// } else {
// console.debug("Creating new relationship");
// const relationship = await pb.collection("relationships").create({
// primary: root.id,
// secondary: [doc.id],
// type: relationshipType,
// });
// setRelationshipId(relationship.id);
// }
// queryClient.invalidateQueries({
// queryKey: ["relationship", relationshipType, root.id],
// });
// setItems((prev) => [doc, ...prev]);
// } catch (e: any) {
// setError(e?.message || "Failed to add document to relationship.");
// } finally {
// setLoading(false);
// }
// };
//
// const handleRemove = async (documentId: DocumentId) => {
// setLoading(true);
// setError(null);
//
// try {
// if (relationshipId) {
// console.debug("Removing from existing relationship", relationshipId);
// await pb.collection("relationships").update(relationshipId, {
// "secondary-": documentId,
// });
// }
// queryClient.invalidateQueries({
// queryKey: ["relationship", relationshipType, root.id],
// });
// setItems((prev) => prev.filter((item) => item.id != documentId));
// } catch (e: any) {
// setError(
// e?.message || `Failed to remove document from ${relationshipType}.`,
// );
// } finally {
// setLoading(false);
// }
// };
//
// if (loading) {
// <Loader />;
// }
const { state, dispatch } = useDocument();
if (state.status === "loading") {
return <Loader />;
}
console.info("Rendering relationship list: ", relationshipType);
const relationship = state.relationships[relationshipType];
const itemIds = relationship?.secondary ?? [];
const items = itemIds.map((id) => state.relatedDocs[id]).filter((d) => !!d);
const handleCreate = async (doc: AnyDocument) => {
setLoading(true);
setError(null);
try {
// Check for existing relationship
if (relationshipId) {
console.debug("Adding to existing relationship", relationshipId);
await pb.collection("relationships").update(relationshipId, {
if (relationship) {
console.debug("Adding to existing relationship", relationship.id);
const updatedRelationship: Relationship = await pb
.collection("relationships")
.update(relationship.id, {
"+secondary": doc.id,
});
dispatch({
type: "setRelationship",
relationship: updatedRelationship,
});
} else {
console.debug("Creating new relationship");
const relationship = await pb.collection("relationships").create({
const updatedRelationship: Relationship = await pb
.collection("relationships")
.create({
primary: root.id,
secondary: [doc.id],
type: relationshipType,
});
setRelationshipId(relationship.id);
}
queryClient.invalidateQueries({
queryKey: ["relationship", relationshipType, root.id],
dispatch({
type: "setRelationship",
relationship: updatedRelationship,
});
}
dispatch({
type: "setRelatedDocument",
doc,
});
setItems((prev) => [doc, ...prev]);
} catch (e: any) {
setError(e?.message || "Failed to add document to relationship.");
} finally {
@@ -96,16 +178,18 @@ export function RelationshipList({
setError(null);
try {
if (relationshipId) {
console.debug("Removing from existing relationship", relationshipId);
await pb.collection("relationships").update(relationshipId, {
if (relationship) {
console.debug("Removing from existing relationship", relationship.id);
const updatedRelationship: Relationship = await pb
.collection("relationships")
.update(relationship.id, {
"secondary-": documentId,
});
}
queryClient.invalidateQueries({
queryKey: ["relationship", relationshipType, root.id],
dispatch({
type: "setRelationship",
relationship: updatedRelationship,
});
setItems((prev) => prev.filter((item) => item.id != documentId));
}
} catch (e: any) {
setError(
e?.message || `Failed to remove document from ${relationshipType}.`,
@@ -115,10 +199,6 @@ export function RelationshipList({
}
};
if (loading) {
<Loader />;
}
return (
<DocumentList
title={displayName(relationshipType)}

55
src/components/documents/DocumentView.tsx Normal file
View File

@@ -0,0 +1,55 @@
import { RelationshipList } from "@/components/RelationshipList";
import { DocumentEditForm } from "@/components/documents/DocumentEditForm";
import { useDocument } from "@/context/document/DocumentContext";
import { displayName, relationshipsForDocument } from "@/lib/relationships";
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
import { Link } from "@tanstack/react-router";
import { Loader } from "../Loader";
export function DocumentView() {
const { state } = useDocument();
if (state.status === "loading") {
return <Loader />;
}
const doc = state.doc;
const relationshipList = relationshipsForDocument(doc);
return (
<div key={doc.id} className="max-w-xl mx-auto py-2 px-4">
<Link
to="/document/$documentId/print"
params={{ documentId: doc.id }}
className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors mb-4"
>
Print
</Link>
<DocumentEditForm document={doc} />
<TabGroup>
<TabList className="flex flex-row flex-wrap gap-1 mt-2">
{relationshipList.map((relationshipType) => (
<Tab
key={relationshipType}
className="px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 data-selected:bg-violet-900 data-selected:border-violet-700"
>
{displayName(relationshipType)}
</Tab>
))}
</TabList>
<TabPanels>
{relationshipList.map((relationshipType) => (
<TabPanel key={relationshipType}>
<RelationshipList
key={relationshipType}
root={doc}
relationshipType={relationshipType}
/>
</TabPanel>
))}
</TabPanels>
</TabGroup>
</div>
);
}

4
src/components/documents/secret/NewSecretForm.tsx
View File

@@ -45,7 +45,7 @@ export const NewSecretForm = ({
return (
<BaseForm
title="Create new treasure"
title="Create new secret"
isLoading={adding || !newSecret.trim()}
onSubmit={handleSubmit}
error={error}
@@ -53,7 +53,7 @@ export const NewSecretForm = ({
<SingleLineInput
value={newSecret}
onChange={setNewSecret}
placeholder="Treasure description"
placeholder="Secret description"
/>
}
/>

3
src/components/documents/session/SessionEditForm.tsx
View File

@@ -1,10 +1,8 @@
import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
import { useCache } from "@/context/cache/CacheContext";
import { pb } from "@/lib/pocketbase";
import type { Session } from "@/lib/types";
export const SessionEditForm = ({ session }: { session: Session }) => {
const cache = useCache();
async function saveStrongStart(strongStart: string) {
const freshRecord: Session = await pb
.collection("documents")
@@ -14,7 +12,6 @@ export const SessionEditForm = ({ session }: { session: Session }) => {
strongStart,
},
});
cache.set(freshRecord);
}
return (

74
src/context/cache/CacheContext.tsx vendored
View File

@@ -1,74 +0,0 @@
import { createContext, use, useContext, useMemo, useRef } from "react";
import type { ReactNode } from "react";
import { RecordCache } from "@/lib/recordCache";
import { pb } from "@/lib/pocketbase";
import { type DocumentId, type AnyDocument, CollectionIds } from "@/lib/types";
import { useQueryClient } from "@tanstack/react-query";
/**
* Context value for the record cache singleton.
*/
export type CacheContextValue = RecordCache;
const CacheContext = createContext<CacheContextValue | undefined>(undefined);
/**
* Provider for the record cache context. Provides a singleton RecordCache instance to children.
*/
export function CacheProvider({ children }: { children: ReactNode }) {
const cacheRef = useRef<RecordCache | undefined>(undefined);
if (!cacheRef.current) {
cacheRef.current = new RecordCache();
}
return (
<CacheContext.Provider value={cacheRef.current}>
{children}
</CacheContext.Provider>
);
}
/**
* Hook to access the record cache context. Throws if used outside of CacheProvider.
*/
export function useCache(): CacheContextValue {
const ctx = useContext(CacheContext);
if (!ctx) throw new Error("useCache must be used within a CacheProvider");
return ctx;
}
export function useDocument(documentId: DocumentId): AnyDocument {
const cache = useCache();
const queryClient = useQueryClient();
async function fetchItems() {
const cacheValue = cache.getDocument(documentId);
if (cacheValue) {
console.info(`Serving ${documentId} from cache.`);
return cacheValue;
}
const { doc } = await queryClient.fetchQuery({
queryKey: [CollectionIds.Documents, documentId],
queryFn: async () => {
const doc: AnyDocument = await pb
.collection("documents")
.getOne(documentId, {
expand:
"relationships_via_primary,relationships_via_primary.secondary",
});
console.info(`Saving ${documentId} to cache.`);
cache.set(doc);
return { doc };
},
});
return doc;
}
const items = useMemo(fetchItems, [documentId, cache, queryClient]);
return use(items);
}

75
src/context/document/DocumentContext.tsx Normal file
View File

@@ -0,0 +1,75 @@
import { pb } from "@/lib/pocketbase";
import { type AnyDocument, type DocumentId } from "@/lib/types";
import type { ReactNode } from "react";
import { createContext, useContext, useEffect, useReducer } from "react";
import type { DocumentAction } from "./actions";
import { reducer } from "./reducer";
import { loading, type DocumentState } from "./state";
import { useQueryClient } from "@tanstack/react-query";
import type { RecordModel } from "pocketbase";
type DocumentContextValue = {
state: DocumentState<AnyDocument>;
dispatch: (action: DocumentAction<AnyDocument>) => void;
};
const DocumentContext = createContext<DocumentContextValue | undefined>(
undefined,
);
/**
* Provider for the record cache context. Provides a singleton RecordCache instance to children.
*/
export function DocumentProvider({
documentId,
children,
}: {
documentId: DocumentId;
children: ReactNode;
}) {
const queryClient = useQueryClient();
const [state, dispatch] = useReducer(reducer, loading());
useEffect(() => {
async function fetchDocumentAndRelations() {
const doc: AnyDocument = await queryClient.fetchQuery({
queryKey: ["document", documentId],
staleTime: 5 * 60 * 1000, // 5 mintues
queryFn: () =>
pb.collection("documents").getOne(documentId, {
expand:
"relationships_via_primary,relationships_via_primary.secondary",
}),
});
dispatch({
type: "ready",
doc,
relationships: doc.expand?.relationships_via_primary || [],
relatedDocuments:
doc.expand?.relationships_via_primary?.flatMap(
(r: RecordModel) => r.expand?.secondary,
) || [],
});
}
fetchDocumentAndRelations();
}, [documentId]);
return (
<DocumentContext.Provider
value={{
state,
dispatch,
}}
>
{children}
</DocumentContext.Provider>
);
}
export function useDocument(): DocumentContextValue {
const ctx = useContext(DocumentContext);
if (!ctx)
throw new Error("useDocument must be used within a DocumentProvider");
return ctx;
}

24
src/context/document/actions.ts Normal file
View File

@@ -0,0 +1,24 @@
import type { AnyDocument, Relationship } from "@/lib/types";
export type DocumentAction<D extends AnyDocument> =
| {
type: "loading";
}
| {
type: "ready";
doc: D;
relationships: Relationship[];
relatedDocuments: AnyDocument[];
}
| {
type: "update";
data: D["data"];
}
| {
type: "setRelationship";
relationship: Relationship;
}
| {
type: "setRelatedDocument";
doc: AnyDocument;
};

75
src/context/document/reducer.ts Normal file
View File

@@ -0,0 +1,75 @@
import _ from "lodash";
import type {
AnyDocument,
DocumentId,
Relationship,
RelationshipId,
RelationshipType,
} from "@/lib/types";
import type { DocumentAction } from "./actions";
import type { DocumentState } from "./state";
function ifStatus<D extends AnyDocument, S extends DocumentState<D>["status"]>(
status: S,
state: DocumentState<D>,
newState: (state: DocumentState<D> & { status: S }) => DocumentState<D>,
) {
// TODO: Is there a better way to express the type of type narrowing?
return state.status === status
? newState(state as DocumentState<D> & { status: S })
: state;
}
export function reducer<D extends AnyDocument>(
state: DocumentState<D>,
action: DocumentAction<D>,
): DocumentState<D> {
switch (action.type) {
case "loading":
return {
status: "loading",
};
case "ready":
return {
status: "ready",
doc: action.doc,
relationships: _.keyBy(action.relationships, (r) => r.type) as Record<
RelationshipType,
Relationship
>,
relatedDocs: _.keyBy(action.relatedDocuments, (r) => r.id) as Record<
DocumentId,
AnyDocument
>,
};
case "update":
if (state.status === "ready") {
return {
...state,
doc: {
...state.doc,
data: action.data,
},
};
} else {
return state;
}
case "setRelationship":
return ifStatus("ready", state, (state) => ({
...state,
relationships: {
...state.relationships,
[action.relationship.type]: action.relationship,
},
}));
case "setRelatedDocument":
return ifStatus("ready", state, (state) => ({
...state,
relatedDocs: {
...state.relatedDocs,
[action.doc.id]: action.doc,
},
}));
}
}

21
src/context/document/state.ts Normal file
View File

@@ -0,0 +1,21 @@
import type {
AnyDocument,
DocumentId,
Relationship,
RelationshipType,
} from "@/lib/types";
export type DocumentState<D extends AnyDocument> =
| {
status: "loading";
}
| {
status: "ready";
doc: D;
relationships: Record<RelationshipType, Relationship>;
relatedDocs: Record<DocumentId, AnyDocument>;
};
export const loading = <D extends AnyDocument>(): DocumentState<D> => ({
status: "loading",
});

75
src/lib/recordCache.ts
View File

@@ -5,42 +5,45 @@ import {
type Relationship,
type DocumentId,
type RelationshipId,
type DbRecord,
} from "./types";
type CacheKey<C extends CollectionId = CollectionId> = `${C}:${string}`;
export type CacheKey<C extends CollectionId = CollectionId> = `${C}:${string}`;
export type CacheValue<C extends CollectionId = CollectionId> = {
record: Promise<DbRecord<C>>;
subscriptions: ((record: DbRecord<C> | null) => void)[];
};
type DocumentKey = CacheKey<typeof CollectionIds.Documents>;
type RelationshipKey = CacheKey<typeof CollectionIds.Relationships>;
export class RecordCache {
private cache: Record<
`${CollectionId}:${string}`,
{
record: AnyDocument | Relationship;
subscriptions: ((record: AnyDocument | Relationship | null) => void)[];
}
> = {};
private cache: Record<`${CollectionId}:${string}`, CacheValue> = {};
private makeKey<C extends CollectionId>(
static makeKey<C extends CollectionId>(
collectionId: C,
id: string,
): CacheKey<C> {
return `${collectionId}:${id}`;
}
private docKey = (id: DocumentId): DocumentKey =>
this.makeKey(CollectionIds.Documents, id);
static docKey = (id: DocumentId): DocumentKey =>
RecordCache.makeKey(CollectionIds.Documents, id);
private relationKey = (id: RelationshipId): RelationshipKey =>
this.makeKey(CollectionIds.Relationships, id);
static relationKey = (id: RelationshipId): RelationshipKey =>
RecordCache.makeKey(CollectionIds.Relationships, id);
get = (key: CacheKey): AnyDocument | Relationship | undefined =>
this.cache[key]?.record;
get = <C extends CollectionId>(
key: CacheKey<C>,
): Promise<DbRecord<C>> | undefined =>
this.cache[key]?.record as Promise<DbRecord<C>> | undefined;
set = (record: AnyDocument | Relationship) => {
const key = this.makeKey(record.collectionName, record.id);
pending = <C extends CollectionId>(
key: CacheKey<C>,
record: Promise<DbRecord<C>>,
) => {
if (this.cache[key] === undefined) {
this.cache[key] = {
record,
record: record,
subscriptions: [],
};
}
@@ -48,6 +51,34 @@ export class RecordCache {
entry.record = record;
record.then((record) => {
for (const subscription of entry.subscriptions) {
subscription(record);
}
for (const doc of record.expand?.secondary ?? []) {
this.set(doc);
}
for (const rel of record.expand?.relationships_via_primary ?? []) {
this.set(rel);
}
});
};
set = <C extends CollectionId>(record: DbRecord<C>) => {
const key = RecordCache.makeKey(
record.collectionName as CollectionId,
record.id,
);
if (this.cache[key] === undefined) {
this.cache[key] = {
record: Promise.resolve(record),
subscriptions: [],
};
}
const entry = this.cache[key];
entry.record = Promise.resolve(record);
for (const subscription of entry.subscriptions) {
subscription(record);
}
@@ -69,13 +100,13 @@ export class RecordCache {
};
getDocument = (id: DocumentId): AnyDocument | undefined =>
this.get(this.docKey(id)) as AnyDocument | undefined;
this.get(RecordCache.docKey(id)) as AnyDocument | undefined;
getRelationship = (id: RelationshipId): Relationship | undefined =>
this.get(this.relationKey(id)) as Relationship | undefined;
this.get(RecordCache.relationKey(id)) as Relationship | undefined;
removeDocument = (id: DocumentId) => this.remove(this.docKey(id));
removeDocument = (id: DocumentId) => this.remove(RecordCache.docKey(id));
removeRelationship = (id: RelationshipId) =>
this.remove(this.relationKey(id));
this.remove(RecordCache.relationKey(id));
}

30
src/lib/types.ts
View File

@@ -1,15 +1,7 @@
import type { RecordModel } from "pocketbase";
export type Id<T extends string> = string & { __type: T };
export type UserId = Id<"User">;
export type CampaignId = Id<"Campaign">;
export type DocumentId = Id<"Document">;
export type RelationshipId = Id<"Relationship">;
export type ISO8601Date = string & { __type: "iso8601date" };
export const CollectionIds = {
Users: "users",
Campaigns: "campaigns",
Documents: "documents",
Relationships: "relationships",
@@ -17,6 +9,26 @@ export const CollectionIds = {
export type CollectionId = (typeof CollectionIds)[keyof typeof CollectionIds];
export type Id<T extends CollectionId> = string & { __type: T };
export type UserId = Id<typeof CollectionIds.Users>;
export type CampaignId = Id<typeof CollectionIds.Campaigns>;
export type DocumentId = Id<typeof CollectionIds.Documents>;
export type RelationshipId = Id<typeof CollectionIds.Relationships>;
export type ISO8601Date = string & { __type: "iso8601date" };
export type DbRecord<C extends CollectionId = CollectionId> = {
[CollectionIds.Campaigns]: Campaign;
[CollectionIds.Documents]: AnyDocument;
[CollectionIds.Relationships]: Relationship;
[CollectionIds.Users]: RecordModel;
}[C];
/******************************************
* Campaigns
******************************************/
export type Campaign = RecordModel & {
id: CampaignId;
name: string;

3
src/routes/__root.tsx
View File

@@ -1,5 +1,4 @@
import { AuthProvider } from "@/context/auth/AuthContext";
import { CacheProvider } from "@/context/cache/CacheContext";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { Outlet, createRootRoute } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
@@ -8,9 +7,7 @@ export const Route = createRootRoute({
component: () => (
<>
<AuthProvider>
<CacheProvider>
<Outlet />
</CacheProvider>
</AuthProvider>
<TanStackRouterDevtools />
<ReactQueryDevtools buttonPosition="bottom-right" />

50
src/routes/_app/_authenticated/document.$documentId.tsx
View File

@@ -1,10 +1,7 @@
import { RelationshipList } from "@/components/RelationshipList";
import { DocumentEditForm } from "@/components/documents/DocumentEditForm";
import { displayName, relationshipsForDocument } from "@/lib/relationships";
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
import { createFileRoute, Link } from "@tanstack/react-router";
import { useDocument } from "@/context/cache/CacheContext";
import { DocumentView } from "@/components/documents/DocumentView";
import { DocumentProvider } from "@/context/document/DocumentContext";
import type { DocumentId } from "@/lib/types";
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute(
"/_app/_authenticated/document/$documentId",
@@ -14,44 +11,11 @@ export const Route = createFileRoute(
function RouteComponent() {
const { documentId } = Route.useParams();
const doc = useDocument(documentId as DocumentId);
const relationshipList = relationshipsForDocument(doc);
console.info("Rendering document route: ", documentId);
return (
<div key={doc.id} className="max-w-xl mx-auto py-2 px-4">
<Link
to="/document/$documentId/print"
params={{ documentId: doc.id }}
className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors mb-4"
>
Print
</Link>
<DocumentEditForm document={doc} />
<TabGroup>
<TabList className="flex flex-row flex-wrap gap-1 mt-2">
{relationshipList.map((relationshipType) => (
<Tab
key={relationshipType}
className="px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 data-selected:bg-violet-900 data-selected:border-violet-700"
>
{displayName(relationshipType)}
</Tab>
))}
</TabList>
<TabPanels>
{relationshipList.map((relationshipType) => (
<TabPanel key={relationshipType}>
<RelationshipList
key={relationshipType}
root={doc}
relationshipType={relationshipType}
/>
</TabPanel>
))}
</TabPanels>
</TabGroup>
</div>
<DocumentProvider documentId={documentId as DocumentId}>
<DocumentView />
</DocumentProvider>
);
}