Merge pull request #1814 from holium/RE-219/space-block

RE-219 SpaceBlock for /spaces/~zod/our type chat messages using custom type

app/src/os/services/ship/chat/chat.db.ts

@@ -476,9 +476,9 @@ export class ChatDB extends AbstractDataAccess<ChatRow, ChatUpdateTypes> {
       // deserialize the last message
       const lastMessage = row.lastMessage ? JSON.parse(row.lastMessage) : null;
       if (lastMessage && lastMessage.contents) {
-        lastMessage.contents = JSON.parse(lastMessage.contents).map(
-          (message: any) => message && JSON.parse(message)
-        );
+        lastMessage.contents = JSON.parse(lastMessage.contents)
+          .map((message: any) => message && JSON.parse(message))
+          .map(this._makeCustomContentTypeMessageFormat);
       }
       return {
         ...row,
@@ -492,6 +492,43 @@ export class ChatDB extends AbstractDataAccess<ChatRow, ChatUpdateTypes> {
     });
   }
 
+  private _makeCustomContentTypeMessageFormat(msg: any) {
+    const key = Object.keys(msg)[0];
+    const allowed = [
+      'markdown',
+      'plain',
+      'bold',
+      'italics',
+      'strike',
+      'bold-italics',
+      'bold-strike',
+      'italics-strike',
+      'bold-italics-strike',
+      'blockquote',
+      'inline-code',
+      'ship',
+      'code',
+      'link',
+      'image',
+      'ur-link',
+      'react',
+      'status',
+      'break',
+    ];
+    if (allowed.includes(key)) {
+      return msg;
+    } else {
+      return {
+        custom: {
+          name: key,
+          value: msg[key],
+        },
+        metadata: msg.metadata,
+        reactions: msg.reactions,
+      };
+    }
+  }
+
   getChat(path: string) {
     if (!this.db?.open) return;
     const query = this.db.prepare(`
@@ -582,9 +619,9 @@ export class ChatDB extends AbstractDataAccess<ChatRow, ChatUpdateTypes> {
     const rows = result.map((row: any) => {
       const lastMessage = row.lastMessage ? JSON.parse(row.lastMessage) : null;
       if (lastMessage && lastMessage.contents) {
-        lastMessage.contents = JSON.parse(lastMessage.contents).map(
-          (message: any) => message && JSON.parse(message)
-        );
+        lastMessage.contents = JSON.parse(lastMessage.contents)
+          .map((message: any) => message && JSON.parse(message))
+          .map(this._makeCustomContentTypeMessageFormat);
       }
       return {
         ...row,
@@ -667,12 +704,14 @@ export class ChatDB extends AbstractDataAccess<ChatRow, ChatUpdateTypes> {
         ...row,
         metadata: row.metadata ? this._parseMetadata(row.metadata) : [null],
         contents: row.contents
-          ? JSON.parse(row.contents).map((content: any) => {
-              if (content?.metadata) {
-                content.metadata = JSON.parse(content.metadata);
-              }
-              return content;
-            })
+          ? JSON.parse(row.contents)
+              .map((content: any) => {
+                if (content?.metadata) {
+                  content.metadata = JSON.parse(content.metadata);
+                }
+                return content;
+              })
+              .map(this._makeCustomContentTypeMessageFormat)
           : null,
         reactions: row.reactions ? JSON.parse(row.reactions) : [],
       };
@@ -717,13 +756,15 @@ export class ChatDB extends AbstractDataAccess<ChatRow, ChatUpdateTypes> {
       return {
         ...row,
         contents: row.contents
-          ? JSON.parse(row.contents).map((content: any) => {
-              const parsedContent = content;
-              if (parsedContent?.metadata) {
-                parsedContent.metadata = JSON.parse(content.metadata);
-              }
-              return parsedContent;
-            })
+          ? JSON.parse(row.contents)
+              .map((content: any) => {
+                const parsedContent = content;
+                if (parsedContent?.metadata) {
+                  parsedContent.metadata = JSON.parse(content.metadata);
+                }
+                return parsedContent;
+              })
+              .map(this._makeCustomContentTypeMessageFormat)
           : null,
       };
     });

app/src/renderer/apps/Courier/components/ChatMessage.tsx

@@ -10,6 +10,8 @@ import {
 } from '@holium/design-system';
 import { useToggle } from '@holium/design-system/util';
 
+import { SystemTrayRegistry } from 'renderer/apps/registry';
+import { useTrayApps } from 'renderer/apps/store';
 import { useContextMenu } from 'renderer/components';
 import { useAppState } from 'renderer/stores/app.store';
 import { MainIPC } from 'renderer/stores/ipc';
@@ -25,6 +27,8 @@ type ChatMessageProps = {
   onReplyClick?: (msgId: string) => void;
 };
 
+const { dimensions } = SystemTrayRegistry.spaces;
+
 export const ChatMessagePresenter = ({
   message,
   ourColor,
@@ -33,7 +37,14 @@ export const ChatMessagePresenter = ({
   onReplyClick,
 }: ChatMessageProps) => {
   const { loggedInAccount, theme } = useAppState();
-  const { chatStore, friends } = useShipStore();
+  const { chatStore, friends, spacesStore } = useShipStore();
+  const {
+    activeApp,
+    setActiveApp,
+    setTrayAppCoords,
+    setTrayAppDimensions,
+    coords,
+  } = useTrayApps();
   const { selectedChat } = chatStore;
   const messageRef = useRef<HTMLDivElement>(null);
   const ourShip = useMemo(() => loggedInAccount?.serverId, [loggedInAccount]);
@@ -305,6 +316,33 @@ export const ChatMessagePresenter = ({
     friends,
   ]);
 
+  const joiner = useCallback(
+    (path: string) => {
+      console.log(spacesStore.allSpacePaths, path);
+      if (spacesStore.allSpacePaths.includes(path)) {
+        throw new Error('you are already in this space');
+      }
+      setTrayAppCoords({
+        left: 55,
+        bottom: coords.bottom,
+      });
+      setTrayAppDimensions(dimensions);
+      spacesStore.setJoin('initial');
+      spacesStore.setSearchVisible(true);
+      spacesStore.setSearchPath(path);
+      setActiveApp('spaces-tray');
+      spacesStore.setJoin('loading');
+      spacesStore.joinSpace(path.replace(/^\/spaces/, ''));
+    },
+    [
+      activeApp,
+      setTrayAppCoords,
+      setTrayAppDimensions,
+      setActiveApp,
+      spacesStore,
+    ]
+  );
+
   return (
     <Bubble
       innerRef={messageRef}
@@ -328,6 +366,8 @@ export const ChatMessagePresenter = ({
       reactions={reactionList}
       onReaction={canReact ? onReaction : undefined}
       onReplyClick={onReplyClick}
+      onJoinSpaceClick={joiner}
+      allSpacePaths={spacesStore.allSpacePaths}
       error={message.error}
     />
   );

app/src/renderer/apps/Courier/views/ChatLog/ChatLog.tsx

@@ -26,7 +26,7 @@ export const ChatLogPresenter = ({ isStandaloneChat = false }: Props) => {
   const storage = useStorage();
   const { loggedInAccount, theme } = useAppState();
   const { dimensions, innerNavigation } = useTrayApps();
-  const { notifStore, friends, chatStore } = useShipStore();
+  const { notifStore, friends, chatStore, spacesStore } = useShipStore();
   const { selectedChat } = chatStore;
   const [hasLoaded, setHasLoaded] = useState(false);
   const [isFetching, setIsFetching] = useState(false);
@@ -138,6 +138,17 @@ export const ChatLogPresenter = ({ isStandaloneChat = false }: Props) => {
             }
           }
         }
+        if (Object.keys(frag)[0] === 'custom') {
+          const cust = frag.custom;
+          if (cust.name === 'space') {
+            const match = spacesStore.getSpaceByPath(
+              cust.value.replace(/^\/spaces/, '')
+            );
+            metadata = {
+              space: match && JSON.stringify(match),
+            };
+          }
+        }
         return {
           content: frag,
           'reply-to': selectedChat.replyingMsg

app/src/renderer/apps/Spaces/SpaceRow.tsx

@@ -43,7 +43,7 @@ const SpaceRowPresenter = (props: SpaceRowProps) => {
       label: 'Copy link',
       onClick: (evt: React.MouseEvent<HTMLDivElement>) => {
         evt.stopPropagation();
-        navigator.clipboard.writeText(space.path.substring(1));
+        navigator.clipboard.writeText('/spaces' + space.path);
       },
     });
     if (loggedInAccount && space.isAdmin(loggedInAccount.serverId)) {

app/src/renderer/apps/Spaces/Workflow/EditSpace/EditSpaceBody.tsx

@@ -2,17 +2,17 @@ import { ChangeEvent, useEffect, useState } from 'react';
 
 import {
   Button,
+  Crest,
   Flex,
   Icon,
+  isImgUrl,
   Spinner,
   Text,
 } from '@holium/design-system/general';
 import { RadioGroup, RadioList, TextInput } from '@holium/design-system/inputs';
 import { useToggle } from '@holium/design-system/util';
 import { CreateSpaceInvitePayload } from '@holium/shared';
 
-import { Crest, isImgUrl } from 'renderer/components/Crest';
-
 import { EditSpaceColor } from './EditSpaceColor';
 import { joinApi } from './JoinApi';
 import { JoinLink } from './JoinLink';

app/src/renderer/apps/Spaces/Workflow/EditSpace/EditSpaceColor.tsx

@@ -1,12 +1,11 @@
 import { ChangeEvent, useEffect, useRef } from 'react';
 import { TwitterPicker } from 'react-color';
 
-import { Flex, Text } from '@holium/design-system/general';
+import { Flex, isValidHexColor, Text } from '@holium/design-system/general';
 import { TextInput } from '@holium/design-system/inputs';
 import { useToggle } from '@holium/design-system/util';
 
 import { ColorTile, ColorTilePopover } from 'renderer/components/ColorTile';
-import { isValidHexColor } from 'renderer/components/Crest';
 
 import { spaceColorOptions } from './types';
 

app/src/renderer/apps/Spaces/Workflow/InviteMembers.tsx

@@ -8,6 +8,7 @@ import {
   Avatar,
   Box,
   Button,
+  Crest,
   Flex,
   Icon,
   Row,
@@ -19,7 +20,6 @@ import { defaultTheme } from '@holium/shared';
 
 import { getSpacePath } from 'os/lib/text';
 import { MemberRole, MemberStatus } from 'os/types';
-import { Crest } from 'renderer/components';
 import { ShipSearch } from 'renderer/components/ShipSearch';
 import { pluralize } from 'renderer/lib/text';
 import { useAppState } from 'renderer/stores/app.store';

app/src/renderer/apps/Spaces/components/SelectionRow.tsx

@@ -1,14 +1,15 @@
 import {
   Button,
+  Crest,
   Flex,
   Icon,
   IconPathsType,
+  isValidHexColor,
+  isValidImageUrl,
   Row,
   Text,
 } from '@holium/design-system';
 
-import { Crest, isValidHexColor, isValidImageUrl } from 'renderer/components';
-
 import { EmptyGroup } from '../SpaceRow';
 
 interface ISelectRow {

app/src/renderer/apps/Spaces/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { isValidPatp } from 'urbit-ob';
 
@@ -25,19 +25,23 @@ const SpacesTrayAppPresenter = () => {
   const { loggedInAccount, shellStore } = useAppState();
   const { spacesStore } = useShipStore();
   const { dimensions } = useTrayApps();
-  const [searchString, setSearchString] = useState<string>('');
+  const searchString = spacesStore.searchPath;
 
   const isValidSpace = (space: string) => {
+    if (!space.match(/^\/spaces\//)) {
+      return false;
+    }
     if (!space.includes('/')) {
       return false;
     }
     const pathArr = space.split('/');
-    const patp = pathArr[0];
-    const spaceName = pathArr[1];
+    if (!(pathArr.length === 4)) return false;
+    const patp = pathArr[2];
+    const spaceName = pathArr[3];
     return patp.length > 1 && isValidPatp(patp) && spaceName.length > 0;
   };
 
-  const [searchVisible, setSearchVisible] = useState(false);
+  const searchVisible = spacesStore.searchVisible;
 
   useEffect(() => {
     spacesStore.setJoin('initial');
@@ -48,7 +52,7 @@ const SpacesTrayAppPresenter = () => {
   ) {
     spacesStore.selectSpace('/' + searchString);
     if (searchVisible === true) {
-      setSearchVisible(false);
+      spacesStore.setSearchVisible(false);
     }
     spacesStore.setJoin('loaded');
   }
@@ -79,7 +83,7 @@ const SpacesTrayAppPresenter = () => {
             height={26}
             onClick={() => {
               spacesStore.setJoin('initial');
-              setSearchVisible(!searchVisible);
+              spacesStore.setSearchVisible(!searchVisible);
             }}
           >
             <Icon name="Search" size={20} opacity={0.7} />
@@ -114,19 +118,22 @@ const SpacesTrayAppPresenter = () => {
               id="space-input"
               name="space-input"
               height={34}
-              placeholder="Enter space path (e.g. ~zod/galaxy-space)"
+              placeholder="space path (e.g. /spaces/~zod/galaxies)"
+              value={searchString}
               onChange={(evt: any) => {
                 evt.stopPropagation();
                 spacesStore.setJoin('initial');
-                setSearchString(evt.target.value);
+                spacesStore.setSearchPath(evt.target.value);
               }}
               rightAdornment={
                 <Button.TextButton
                   isDisabled={!isValidSpace(searchString)}
                   onClick={() => {
                     spacesStore.setJoin('loading');
                     console.log('joining space: ', searchString);
-                    spacesStore.joinSpace(`/${searchString}`);
+                    spacesStore.joinSpace(
+                      searchString.replace(/^\/spaces/, '')
+                    );
                   }}
                 >
                   {spacesStore.join.state === 'loading' ? (
@@ -181,7 +188,7 @@ const SpacesTrayAppPresenter = () => {
         >
           <SpacesList
             onFindMore={() => {
-              setSearchVisible(true);
+              spacesStore.setSearchVisible(true);
             }}
             selected={spacesStore.selected}
             spaces={spacesStore.spacesList}

app/src/renderer/components/SpacePicture.tsx

@@ -1,8 +1,7 @@
 import styled, { css } from 'styled-components';
 
-import { Flex, Icon, Text } from '@holium/design-system';
+import { Crest, Flex, Icon, Text } from '@holium/design-system';
 
-import { Crest } from 'renderer/components';
 import { pluralize } from 'renderer/lib/text';
 import { SpaceModelType } from 'renderer/stores/models/spaces.model';
 

app/src/renderer/components/index.ts

@@ -2,7 +2,6 @@ export * from './AppTile';
 export * from './Badge';
 export * from './ConnectionStatus';
 export * from './ContextMenu';
-export * from './Crest';
 export * from './Divider';
 export * from './Embeds/EmbedBox';
 export * from './Embeds/LinkPreview';