adding listing management and easy content adds

desk/app/sphinx.hoon

@@ -100,14 +100,20 @@
   ?+    mark  ~|(bad-poke/mark !!)
       %declare
     =+  !<(=declare:s vase)
-    di-abet:(publish declare di-core)
+    (publish declare cor)
+    ::
+      %declarations
+    =+  !<(decs=(list declare:s) vase)
+    =.  cor  (roll decs publish)
+    cor
+    ::
       %remove
     =+  !<(=hash:s vase)
     di-abet:di-remove:(di-abed:di-core hash)
   ==
   ++  publish
-    |=  [=declare:s core=_di-core]
+    |=  [=declare:s core=_cor]
-    ^+  di-core
+    ^+  cor
     ::  
     ?>  from-self
     =/  listing
@@ -119,8 +125,8 @@
       ==
     ?:  (~(has by directory) hash.listing)
       ~&  'Listing already exists.'
-      di-core
+      cor
-    (di-publish:(di-abed:core hash.listing) listing)
+    di-abet:(di-publish:(di-abed:di-core:core hash.listing) listing)
   --
 :: 
 ++  watch
@@ -169,6 +175,9 @@
   |=  =path
   ^-  (unit (unit cage))
   ?+  path  [~ ~]
+      [%x %published ~]
+    ``directory+!>(published)
+  ::
       [%x %lookup @ @ @ @ ~]  
     =-  ``search+!>(-)
     ^-  search:s

desk/lib/sphinx-json.hoon

@@ -30,6 +30,12 @@
         size/n/(scot %ud size.search)
         total/n/(scot %ud total.search)
     ==
+  ++  directory
+    |=  d=directory:s
+    %-  pairs
+    %+  turn  ~(tap by d)
+    |=  [=hash:s l=listing:s]
+    [(scot %uv hash) (listing l)]
   --
 ++  dejs
   =,  dejs:format

desk/mar/directory.hoon

@@ -5,6 +5,7 @@
 ++  grow
   |%
   ++  noun  directory
+  ++  json  (directory:enjs:j directory)
   --
 ++  grab
   |%

ui/src/components/Listings.tsx

@@ -27,7 +27,7 @@ export const Listings = ({ listings, remove, className }: ListingsProps) => {
   }
 
   return (
-    <ul className={cn('px-2 space-y-6', className)}>
+    <ul className={cn('space-y-6', className)}>
       {listings && listings.map(l => (
         <li key={l.hash}>
           <article className='group-1 flex w-full'>

ui/src/components/Meta.tsx

@@ -31,7 +31,7 @@ export const Meta = ({ className }: MetaProps) => {
         {version && <span className='mb-[3px]'>v{version}</span>}
       </div>
       <a
-        className="inline-block font-mono default-ring underline rounded-md hover:text-rosy mb-4"
+        className="inline-block font-mono default-ring underline rounded-md hover:text-rosy"
         href="web+urbitgraph://group/~nocsyx-lassul/sphinx"
       >
         ~nocsyx-lassul/sphinx

ui/src/manage-listings/Apps.tsx

@@ -1,9 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { Link } from 'react-router-dom';
+import api from '../api';
 import { PostOptions } from '../components/PostOptions';
 import { useApps } from '../state/apps';
-import { PostOption, PostOptionsForm } from '../types/sphinx';
+import { Declare, Listing, PostOption, PostOptionsForm } from '../types/sphinx';
 
 function getAppKeys(apps: PostOption[]): string[] {
   return apps.map(({ key }) => key);
@@ -27,9 +28,19 @@ export const Apps = () => {
     }
   }, [apps, options, setValue]);
 
-  const onSubmit = useCallback(() => {
+  const onSubmit = useCallback((values: PostOptionsForm) => {
+    debugger;
+    api.poke<Declare[]>({
+      app: 'sphinx',
+      mark: 'declarations',
+      json: apps.filter(a => values.options.includes(a.key)).map(a => ({
+        post: a.post,
+        reach: 'friends'
+      }))
+    });
+
     reset();
-  }, [reset]);
+  }, [apps, reset]);
 
   return (
     <>

ui/src/manage-listings/Groups.tsx

@@ -1,9 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { Link } from 'react-router-dom';
+import api from '../api';
 import { PostOptions } from '../components/PostOptions';
 import { useGroups } from '../state/groups';
-import { PostOption, PostOptionsForm } from '../types/sphinx';
+import { Declare, PostOption, PostOptionsForm } from '../types/sphinx';
 
 export const Groups = () => {
   const groups = useGroups();
@@ -34,7 +35,16 @@ export const Groups = () => {
     }
   }, [groups, options, setValue]);
 
-  const onSubmit = useCallback(() => {
+  const onSubmit = useCallback((values: PostOptionsForm) => {
+    api.poke<Declare[]>({
+      app: 'sphinx',
+      mark: 'declarations',
+      json: groups.filter(a => values.options.includes(a.key)).map(a => ({
+        post: a.post,
+        reach: 'friends'
+      }))
+    });
+
     reset();
   }, [reset]);
 

ui/src/manage-listings/MyListings.tsx

@@ -1,5 +1,34 @@
+import { size } from 'lodash';
 import React from 'react';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+import api from '../api';
+import { Listings } from '../components/Listings';
+import { Directory, Remove } from '../types/sphinx';
 
 export const MyListings = () => {
-  return <div />;
+  const queryClient = useQueryClient();
+  const { data } = useQuery('published', () => api.scry<Directory>({
+    app: 'sphinx',
+    path: '/published'
+  }));
+  const { mutate } = useMutation((hash: string) => {
+    return api.poke<Remove>({
+      app: 'sphinx',
+      mark: 'remove',
+      json: hash
+    })
+  }, {
+    onSuccess: () => {
+      queryClient.invalidateQueries('published');
+    }
+  });
+
+  return (
+    <>
+      <header className='flex items-center'>
+        <h1 className='text-2xl font-semibold'>My Listings</h1>
+      </header>
+      <Listings listings={Object.values(data || {})} remove={mutate} className="mt-6" />
+    </>
+  )
 }

ui/src/state/apps.ts

@@ -4,12 +4,12 @@ import api from "../api";
 import { Post } from "../types/sphinx";
 
 function getAppPost(app: string, vat: Vat, charge: Charge): Post {
-  const ship = vat.arak.rail?.publisher || vat.arak.rail?.ship;
+  const ship = vat.arak.rail?.publisher || vat.arak.rail?.ship || `~${window.ship}`;
 
   return {
     type: 'app',
     title: charge.title,
-    link: `${ship}/${app}`,
+    link: `web+urbitgraph://${ship}/${app}`,
     description: charge.info || charge.title,
     image: charge.image || '',
     tags: ['app']

ui/src/types/sphinx.ts

@@ -33,6 +33,10 @@ export type Search = {
   total: number;
 }
 
+export interface Directory {
+  [hash: string]: Listing;
+}
+
 export interface PostOption {
   post: Post;
   key: string;