profile: use GroupLink for pinned groups

pkg/interface/src/views/apps/profile/components/Profile.tsx

@@ -90,6 +90,8 @@ export function Profile(props: any) {
             ship={ship}
             contact={contact}
             isPublic={isPublic} 
+            groups={props.groups}
+            associations={props.associations}
           />
         ) }
       </Box>

pkg/interface/src/views/apps/profile/components/ViewProfile.tsx

@@ -16,30 +16,12 @@ import RichText from "~/views/components/RichText";
 import { useHistory } from "react-router-dom";
 import {GroupSummary} from "~/views/landscape/components/GroupSummary";
 import {MetadataUpdatePreview} from "~/types";
+import {GroupLink} from "~/views/components/GroupLink";
 
 
 export function ViewProfile(props: any) {
   const history = useHistory();
-  const { api, contact, nacked, isPublic, ship } = props;
-
-  const [previews, setPreviews] = useState<MetadataUpdatePreview[]>([]);
-  useEffect(() => {
-    (async () => {
-      setPreviews(
-        _.compact(
-          await Promise.all(
-            (contact?.groups || []).map(g => api.metadata.preview(g)
-              .catch(() => null)
-            )
-          )
-        )
-      );
-    })();
-
-    return () => {
-      setPreviews([]);
-    }
-  }, [ship]);
+  const { api, contact, nacked, isPublic, ship, associations, groups } = props;
 
   return (
     <>
@@ -75,21 +57,17 @@ export function ViewProfile(props: any) {
       { (contact?.groups || []).length > 0 && (
         <Col gapY="3" my="3" alignItems="center">
           <Text fontWeight="medium">Pinned Groups</Text>
-           {previews.length === 0 ? (
-            <LoadingSpinner />
-            ) : (
-              <Row justifyContent="center" gapX="3">
-                {previews.map(p => (
-                <Box p="2" border="1" borderColor="washedGray">
-                  <GroupSummary
-                    metadata={p.metadata}
-                    memberCount={p.members}
-                    channelCount={p?.['channel-count']}
-                  />
-                </Box>
-              ))}
+          <Row flexWrap="wrap" justifyContent="center" gapX="3">
+            { contact?.groups.map(g => (
+              <GroupLink 
+                api={api}
+                resource={g}
+                groups={groups}
+                associations={associations}
+                measure={() => {}}
+              />
+            ))}
           </Row>
-          )}
       </Col>
       )}
       { (ship === `~${window.ship}`) ? (

pkg/interface/src/views/components/GroupLink.tsx

@@ -2,35 +2,48 @@ import React, { useEffect, useState, useLayoutEffect } from "react";
 
 import { Box, Text, Row, Button, Action } from "@tlon/indigo-react";
 import GlobalApi from "~/logic/api/global";
-import { Associations, Groups } from "~/types";
+import { Associations, Groups, PropFunc } from "~/types";
 import { MetadataIcon } from "../landscape/components/MetadataIcon";
-import {JoinGroup} from "../landscape/components/JoinGroup";
-import {useModal} from "~/logic/lib/useModal";
+import { JoinGroup } from "../landscape/components/JoinGroup";
+import { useModal } from "~/logic/lib/useModal";
+import { GroupSummary } from "../landscape/components/GroupSummary";
 
-export function GroupLink(props: {
-  api: GlobalApi;
-  resource: string;
-  associations: Associations;
-  groups: Groups;
-  measure: () => void;
-}) {
-  const { resource, api, measure } = props;
+export function GroupLink(
+  props: {
+    api: GlobalApi;
+    resource: string;
+    associations: Associations;
+    groups: Groups;
+    measure: () => void;
+    detailed?: boolean;
+  } & PropFunc<typeof Row>
+) {
+  const { resource, api, associations, groups, measure, ...rest } = props;
   const name = resource.slice(6);
   const [preview, setPreview] = useState<MetadataUpdatePreview | null>(null);
 
-  const { modal, showModal } = useModal({
-    modal: (
-      <JoinGroup
-        groups={props.groups}
-        associations={props.associations}
-        api={api}
-        autojoin={name}
-      />
-    )
-  });
-
   const joined = resource in props.associations.groups;
 
+  const { modal, showModal } = useModal({
+    modal:
+      joined && preview ? (
+        <Box width="fit-content" p="4">
+          <GroupSummary
+            metadata={preview.metadata}
+            memberCount={preview.members}
+            channelCount={preview?.["channel-count"]}
+          />
+        </Box>
+      ) : (
+        <JoinGroup
+          groups={groups}
+          associations={associations}
+          api={api}
+          autojoin={name}
+        />
+      ),
+  });
+
   useEffect(() => {
     (async () => {
       setPreview(await api.metadata.preview(resource));
@@ -46,7 +59,7 @@ export function GroupLink(props: {
   }, [preview]);
 
   return (
-    <Box>
+    <Box {...rest}>
       {modal}
       <Row
         width="fit-content"
@@ -60,10 +73,12 @@ export function GroupLink(props: {
       >
         {preview ? (
           <>
-            <MetadataIcon height="4" width="4"  metadata={preview.metadata} />
-            <Text ml="2" fontWeight="medium">{preview.metadata.title}</Text>
-            <Button disabled={joined} onClick={showModal} ml="4" primary>
-              {joined ? "Joined" : "Join"}
+            <MetadataIcon height="4" width="4" metadata={preview.metadata} />
+            <Text ml="2" fontWeight="medium">
+              {preview.metadata.title}
+            </Text>
+            <Button onClick={showModal} ml="4" primary>
+              {joined ? "View" : "Join"}
             </Button>
           </>
         ) : (