From be8abbb75a7efd3023bf0431c8816e0e934f3d1e Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Wed, 14 May 2025 16:44:03 -0400
Subject: [PATCH] wire up draft metadata

---
 .../updateLeafletDraftMetadata.ts             | 26 ++++++
 app/lish/[handle]/[publication]/DraftList.tsx | 25 ++----
 app/lish/[handle]/[publication]/page.tsx      | 25 +-----
 components/PageSWRDataProvider.tsx            |  1 +
 components/Pages/PublicationMetadata.tsx      | 79 +++++++++++++++++++
 components/Pages/index.tsx                    | 19 +----
 src/hooks/useDebouncedEffect.ts               | 18 +++++
 7 files changed, 135 insertions(+), 58 deletions(-)
 create mode 100644 actions/publications/updateLeafletDraftMetadata.ts
 create mode 100644 components/Pages/PublicationMetadata.tsx
 create mode 100644 src/hooks/useDebouncedEffect.ts

diff --git a/actions/publications/updateLeafletDraftMetadata.ts b/actions/publications/updateLeafletDraftMetadata.ts
new file mode 100644
index 00000000..c15fb1eb
--- /dev/null
+++ b/actions/publications/updateLeafletDraftMetadata.ts
@@ -0,0 +1,26 @@
+"use server";
+
+import { getIdentityData } from "actions/getIdentityData";
+import { supabaseServerClient } from "supabase/serverClient";
+
+export async function updateLeafletDraftMetadata(
+  leafletID: string,
+  publication_uri: string,
+  title: string,
+  description: string,
+) {
+  let identity = await getIdentityData();
+  if (!identity?.atp_did) return null;
+  let { data: publication } = await supabaseServerClient
+    .from("publications")
+    .select()
+    .eq("uri", publication_uri)
+    .single();
+  if (!publication || publication.identity_did !== identity.atp_did)
+    return null;
+  await supabaseServerClient
+    .from("leaflets_in_publications")
+    .update({ title, description })
+    .eq("leaflet", leafletID)
+    .eq("publication", publication_uri);
+}
diff --git a/app/lish/[handle]/[publication]/DraftList.tsx b/app/lish/[handle]/[publication]/DraftList.tsx
index ccdbc745..a9581f7e 100644
--- a/app/lish/[handle]/[publication]/DraftList.tsx
+++ b/app/lish/[handle]/[publication]/DraftList.tsx
@@ -8,7 +8,11 @@ import { NewDraftSecondaryButton } from "./NewDraftButton";
 
 export function DraftList(props: {
   publication: string;
-  drafts: { id: string; initialFacts: Fact<any>[]; root_entity: string }[];
+  drafts: {
+    leaflet: string;
+    description: string;
+    title: string;
+  }[];
 }) {
   let rel = usePublicationRelationship();
   let { publication } = usePublicationContext();
@@ -18,29 +22,16 @@ export function DraftList(props: {
     <div className="flex flex-col gap-2">
       <NewDraftSecondaryButton publication={props.publication} />
       {props.drafts.map((d) => {
-        return (
-          <ReplicacheProvider
-            key={d.id}
-            rootEntity={d.root_entity}
-            initialFacts={d.initialFacts}
-            token={{
-              ...d,
-              permission_token_rights: [],
-            }}
-            name={d.id}
-          >
-            <Draft id={d.id} />
-          </ReplicacheProvider>
-        );
+        return <Draft id={d.leaflet} key={d.leaflet} {...d} />;
       })}
     </div>
   );
 }
 
-function Draft(props: { id: string }) {
+function Draft(props: { id: string; title: string }) {
   return (
     <Link key={props.id} href={`/${props.id}`}>
-      {props.id}
+      <h3>{props.title}</h3>
     </Link>
   );
 }
diff --git a/app/lish/[handle]/[publication]/page.tsx b/app/lish/[handle]/[publication]/page.tsx
index d8612d89..3433ff18 100644
--- a/app/lish/[handle]/[publication]/page.tsx
+++ b/app/lish/[handle]/[publication]/page.tsx
@@ -11,8 +11,6 @@ import { Footer } from "components/ActionBar/Footer";
 import { PublicationDashboard } from "./PublicationDashboard";
 import { DraftList } from "./DraftList";
 import { NewDraftActionButton } from "./NewDraftButton";
-import { use } from "react";
-import { IdentityContext } from "components/IdentityProvider";
 import { getIdentityData } from "actions/getIdentityData";
 
 const idResolver = new IdResolver();
@@ -61,24 +59,6 @@ export default async function Publication(props: {
   if (!publication || identity.atp_did !== publication.identity_did)
     return <PubNotFound />;
 
-  let all_facts = await supabaseServerClient.rpc("get_facts_for_roots", {
-    max_depth: 2,
-    roots: publication.leaflets_in_publications.map(
-      (l) => l.permission_tokens?.root_entity!,
-    ),
-  });
-  let facts =
-    all_facts.data?.reduce(
-      (acc, fact) => {
-        if (!acc[fact.root_id]) acc[fact.root_id] = [];
-        acc[fact.root_id].push(
-          fact as unknown as Fact<keyof typeof Attributes>,
-        );
-        return acc;
-      },
-      {} as { [key: string]: Fact<keyof typeof Attributes>[] },
-    ) || {};
-
   try {
     return (
       <div className="relative max-w-screen-lg w-full h-full mx-auto flex sm:flex-row flex-col sm:items-stretch sm:px-6">
@@ -92,10 +72,7 @@ export default async function Publication(props: {
               Drafts: (
                 <DraftList
                   publication={publication.uri}
-                  drafts={publication.leaflets_in_publications.map((d) => ({
-                    ...d.permission_tokens!,
-                    initialFacts: facts[d.permission_tokens?.root_entity!],
-                  }))}
+                  drafts={publication.leaflets_in_publications}
                 />
               ),
               Published: <div>none yet lol</div>,
diff --git a/components/PageSWRDataProvider.tsx b/components/PageSWRDataProvider.tsx
index 03d9cc71..7ae70fff 100644
--- a/components/PageSWRDataProvider.tsx
+++ b/components/PageSWRDataProvider.tsx
@@ -59,6 +59,7 @@ export function useLeafletPublicationData() {
   let { data, mutate } = useLeafletData();
   return {
     data: data?.data?.leaflets_in_publications,
+    mutate,
   };
 }
 export function useLeafletDomains() {
diff --git a/components/Pages/PublicationMetadata.tsx b/components/Pages/PublicationMetadata.tsx
new file mode 100644
index 00000000..56362174
--- /dev/null
+++ b/components/Pages/PublicationMetadata.tsx
@@ -0,0 +1,79 @@
+import Link from "next/link";
+import { useLeafletPublicationData } from "components/PageSWRDataProvider";
+import { Input } from "components/Input";
+import { useEffect, useState } from "react";
+import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
+import { updateLeafletDraftMetadata } from "actions/publications/updateLeafletDraftMetadata";
+import { useReplicache } from "src/replicache";
+import { useIdentityData } from "components/IdentityProvider";
+export const PublicationMetadata = ({
+  cardBorderHidden,
+}: {
+  cardBorderHidden: boolean;
+}) => {
+  let { permission_token } = useReplicache();
+  let { identity } = useIdentityData();
+  let { data: publicationData, mutate } = useLeafletPublicationData();
+  let pub = publicationData?.[0];
+  let [titleState, setTitleState] = useState(pub?.title || "");
+  let [descriptionState, setDescriptionState] = useState(pub?.title || "");
+
+  useEffect(() => {
+    setTitleState(pub?.title || "");
+    setDescriptionState(pub?.description || "");
+  }, [pub]);
+  useDebouncedEffect(
+    async () => {
+      if (!pub || !pub.publications) return;
+      if (pub.title === titleState && pub.description === descriptionState)
+        return;
+      await updateLeafletDraftMetadata(
+        permission_token.id,
+        pub.publications?.uri,
+        titleState,
+        descriptionState,
+      );
+      mutate();
+    },
+    1000,
+    [pub, titleState, descriptionState, permission_token],
+  );
+  if (!pub || !pub.publications) return null;
+
+  return (
+    <div
+      className={`flex flex-col px-3 sm:px-4 pb-4 sm:pb-6 ${cardBorderHidden ? "sm:pt-4 pt-0" : "sm:pt-6 pt-2"}`}
+    >
+      <Link
+        href={`/lish/${identity?.resolved_did?.alsoKnownAs?.[0].slice(5)}/${pub.publications.name}`}
+        className="text-accent-contrast font-bold hover:no-underline"
+      >
+        {pub.publications?.name}
+      </Link>
+      <Input
+        className="text-xl font-bold outline-none"
+        value={titleState}
+        onChange={(e) => {
+          setTitleState(e.currentTarget.value);
+        }}
+        placeholder="Untitled"
+      />
+      <textarea
+        rows={2}
+        placeholder="description (optional)"
+        className="italic text-secondary outline-none"
+        value={descriptionState}
+        onChange={(e) => {
+          setDescriptionState(e.currentTarget.value);
+        }}
+      />
+      {pub.doc ? (
+        <p>Published!</p>
+      ) : (
+        <p className="text-sm text-tertiary">Draft</p>
+      )}
+    </div>
+  );
+};
+
+const Title = () => {};
diff --git a/components/Pages/index.tsx b/components/Pages/index.tsx
index 10c73664..00f48c84 100644
--- a/components/Pages/index.tsx
+++ b/components/Pages/index.tsx
@@ -34,7 +34,7 @@ import { CloseTiny } from "components/Icons/CloseTiny";
 import { MoreOptionsTiny } from "components/Icons/MoreOptionsTiny";
 import { PaintSmall } from "components/Icons/PaintSmall";
 import { ShareSmall } from "components/Icons/ShareSmall";
-import Link from "next/link";
+import { PublicationMetadata } from "./PublicationMetadata";
 
 export function Pages(props: { rootPage: string }) {
   let rootPage = useEntity(props.rootPage, "root/page")[0];
@@ -231,22 +231,7 @@ const DocContent = (props: { entityID: string }) => {
           }}
         />
       ) : null}
-      <div
-        className={`flex flex-col px-3 sm:px-4 pb-4 sm:pb-6 ${cardBorderHidden?.data.value ? "sm:pt-4 pt-0" : "sm:pt-6 pt-2"}`}
-      >
-        <Link
-          href="/"
-          className="text-accent-contrast font-bold hover:no-underline"
-        >
-          Publication Name
-        </Link>
-        <h2 className="">Titles Are Cool</h2>
-        <p className="italic text-secondary">
-          This is a description! What happens if it's just a little but longer,
-          since it's nice to be able to say a few more words...
-        </p>
-        <p className="text-sm text-tertiary">Draft</p>
-      </div>
+      <PublicationMetadata cardBorderHidden={!!cardBorderHidden?.data.value} />
       <Blocks entityID={props.entityID} />
       {/* we handle page bg in this sepate div so that
     we can apply an opacity the background image
diff --git a/src/hooks/useDebouncedEffect.ts b/src/hooks/useDebouncedEffect.ts
new file mode 100644
index 00000000..4e4a4de0
--- /dev/null
+++ b/src/hooks/useDebouncedEffect.ts
@@ -0,0 +1,18 @@
+import { useEffect, useState, useRef } from "react";
+
+export function useDebouncedEffect(
+  fn: () => void,
+  delay: number,
+  deps: React.DependencyList = [],
+): void {
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      fn();
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...deps, delay]);
+}
-- 
2.51.2