From 988515aefaceaabb061d82f65d097747df7524a3 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Mon, 1 Feb 2021 18:08:42 +1000
Subject: [PATCH] group-view: update interface to use threads

---
 pkg/interface/src/logic/api/groups.ts         | 30 ++++++++++++++++
 .../landscape/components/DeleteGroup.tsx      | 35 +++++++++++--------
 .../views/landscape/components/GroupsPane.tsx |  2 +-
 .../views/landscape/components/NewGroup.tsx   |  6 ++--
 4 files changed, 54 insertions(+), 19 deletions(-)

diff --git a/pkg/interface/src/logic/api/groups.ts b/pkg/interface/src/logic/api/groups.ts
index 8ceb83175..4e5182abe 100644
--- a/pkg/interface/src/logic/api/groups.ts
+++ b/pkg/interface/src/logic/api/groups.ts
@@ -41,6 +41,32 @@ export default class GroupsApi extends BaseApi<StoreState> {
     return this.viewAction({ join: { resource, ship }});
   }
 
+  create(name: string, policy: Enc<GroupPolicy>, title: string, description: string) {
+    return this.viewThread('group-create', {
+      create: {
+        name,
+        policy,
+        title,
+        description
+      }
+    });
+  }
+
+  deleteGroup(ship: string, name: string) {
+    const resource = makeResource(ship, name);
+
+    return this.viewThread('group-delete', {
+      remove: resource
+    });
+  }
+
+  leaveGroup(ship: string, name: string) {
+    const resource = makeResource(ship, name);
+    return this.viewThread('group-leave', {
+      leave: resource
+    });
+  }
+
   private proxyAction(action: GroupAction) {
     return this.action('group-push-hook', 'group-update', action);
   }
@@ -49,6 +75,10 @@ export default class GroupsApi extends BaseApi<StoreState> {
     return this.action('group-store', 'group-update', action);
   }
 
+  private viewThread(thread: string, action: any) {
+    return this.spider('group-view-action', 'json', thread, action);
+  }
+
   private viewAction(action: any) {
     return this.action('group-view', 'group-view-action', action);
 
diff --git a/pkg/interface/src/views/landscape/components/DeleteGroup.tsx b/pkg/interface/src/views/landscape/components/DeleteGroup.tsx
index cac10fe7d..e539c7c8c 100644
--- a/pkg/interface/src/views/landscape/components/DeleteGroup.tsx
+++ b/pkg/interface/src/views/landscape/components/DeleteGroup.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Col, Label, Row, Button } from "@tlon/indigo-react";
+import { Icon, Text, Col, Label, Row, Button, Action } from "@tlon/indigo-react";
 import { useHistory } from "react-router-dom";
 
 import GlobalApi from "~/logic/api/global";
@@ -7,6 +7,8 @@ import { Association } from "~/types";
 import { resourceFromPath } from "~/logic/lib/group";
 import { StatelessAsyncButton } from "~/views/components/StatelessAsyncButton";
 import ModalButton from "~/views/apps/launch/components/ModalButton";
+import {useModal} from "~/logic/lib/useModal";
+import {SidebarItem} from "./Sidebar/SidebarItem";
 
 export function DeleteGroup(props: {
   owner: boolean;
@@ -15,14 +17,17 @@ export function DeleteGroup(props: {
 }) {
   const history = useHistory();
   const onDelete = async () => {
-    const name = props.association.group.split("/").pop();
+    const { ship, name } = resourceFromPath(props.association.group);
     if (props.owner) {
       const shouldDelete =
         prompt(`To confirm deleting this group, type ${name}`) === name;
       if (!shouldDelete) return;
     }
-    const resource = resourceFromPath(props.association.group);
-    await props.api.groups.removeGroup(resource);
+    if(props.owner) {
+      await props.api.groups.deleteGroup(ship, name);
+    } else {
+      await props.api.groups.leaveGroup(ship, name);
+    }
     history.push("/");
   };
 
@@ -32,15 +37,8 @@ export function DeleteGroup(props: {
     : "You can rejoin if it is an open group, or if you are reinvited";
 
   const icon = props.owner ? "X" : "SignOut";
-  return (
-    <ModalButton
-      ml="2"
-      color="red"
-      boxShadow="none"
-      icon={icon}
-      text={`${action} group`}
-    >
-      {(dismiss: () => void) => (
+  const { modal, showModal } = useModal({ modal: 
+    (dismiss: () => void) => (
         <Col p="4">
           <Label>{action} Group</Label>
           <Label gray mt="2">
@@ -59,7 +57,14 @@ export function DeleteGroup(props: {
             </StatelessAsyncButton>
           </Row>
         </Col>
-      )}
-    </ModalButton>
+      )});
+  return (
+    <Row px="3" py="1" onClick={showModal} cursor="pointer">
+      {modal}
+      <Icon icon={icon} color="red" mr="2" />
+      <Text color="red">
+        {action} group
+      </Text>
+    </Row>
   );
 }
diff --git a/pkg/interface/src/views/landscape/components/GroupsPane.tsx b/pkg/interface/src/views/landscape/components/GroupsPane.tsx
index b1e5b08eb..e860f1ec5 100644
--- a/pkg/interface/src/views/landscape/components/GroupsPane.tsx
+++ b/pkg/interface/src/views/landscape/components/GroupsPane.tsx
@@ -57,7 +57,7 @@ export function GroupsPane(props: GroupsPaneProps) {
     setRecentGroups((gs) => _.uniq([workspace.group, ...gs]));
   }, [workspace]);
 
-  if (!associations) {
+  if (!(associations && (groupPath ? groupPath in groups : true))) {
     return null;
   }
 
diff --git a/pkg/interface/src/views/landscape/components/NewGroup.tsx b/pkg/interface/src/views/landscape/components/NewGroup.tsx
index ea02ac049..b7a45bfde 100644
--- a/pkg/interface/src/views/landscape/components/NewGroup.tsx
+++ b/pkg/interface/src/views/landscape/components/NewGroup.tsx
@@ -62,10 +62,10 @@ export function NewGroup(props: NewGroupProps & RouteComponentProps) {
                 banned: [],
               },
             };
-        await api.contacts.create(name, policy, title, description);
+        await api.groups.create(name, policy, title, description);
         const path = `/ship/~${window.ship}/${name}`;
-        await waiter(({ contacts, groups, associations }) => {
-          return path in contacts && path in groups && path in associations.groups;
+        await waiter(({ groups, associations }) => {
+          return path in groups && path in associations.groups;
         });
 
         actions.setStatus({ success: null });