From 0b9b35ff040a72eacdbb807072d98fb6537b9a77 Mon Sep 17 00:00:00 2001
From: gdbroman <99gustaf@gmail.com>
Date: Tue, 11 Jul 2023 15:26:25 +0200
Subject: [PATCH] Fix sharemodal flicker

---
 .../components/ShareModal/ShareModal.tsx      | 265 ++++--------------
 .../ShareModal/ShareModalBubble.tsx           |  44 +++
 .../ShareModal/ShareModalHeader.tsx           |  80 ++++++
 .../ShareModal/ShareModalPathRow.tsx          |  45 +++
 .../ShareModal/ShareModalPathRows.tsx         |  33 +++
 .../components/ShareModal/useShareModal.tsx   |  17 +-
 6 files changed, 270 insertions(+), 214 deletions(-)
 create mode 100644 app/src/renderer/components/ShareModal/ShareModalBubble.tsx
 create mode 100644 app/src/renderer/components/ShareModal/ShareModalHeader.tsx
 create mode 100644 app/src/renderer/components/ShareModal/ShareModalPathRow.tsx
 create mode 100644 app/src/renderer/components/ShareModal/ShareModalPathRows.tsx

diff --git a/app/src/renderer/components/ShareModal/ShareModal.tsx b/app/src/renderer/components/ShareModal/ShareModal.tsx
index 1ea01b2bf3..b74fcb6a98 100644
--- a/app/src/renderer/components/ShareModal/ShareModal.tsx
+++ b/app/src/renderer/components/ShareModal/ShareModal.tsx
@@ -1,41 +1,16 @@
+import { useMemo } from 'react';
 import styled from 'styled-components';
 
-import {
-  Bubble,
-  Button,
-  Card,
-  CheckBox,
-  Flex,
-  Icon,
-  Portal,
-  Row,
-  Text,
-} from '@holium/design-system';
+import { Card, Flex, Portal, Text } from '@holium/design-system/general';
 
-import { ChatAvatar } from 'renderer/apps/Courier/components/ChatAvatar';
-
-import { SharePath, useShareModal } from './useShareModal';
+import { ShareModalBubble } from './ShareModalBubble';
+import { ShareModalHeader } from './ShareModalHeader';
+import { ShareModalPathRows } from './ShareModalPathRows';
+import { ShareObject, useShareModal } from './useShareModal';
 
 const WIDTH = 340;
 const HEIGHT = 470;
 
-const ShareButton = styled(Button.IconButton)`
-  height: 30px;
-  width: 30px;
-  &:hover:not([disabled]) {
-    background: rgba(var(--rlm-accent-rgba), 0.12);
-  }
-`;
-
-const BubbleWrapper = styled(Flex)`
-  width: 90%;
-  margin-left: 8px;
-  margin-bottom: 8px;
-  & > div {
-    flex-grow: 2;
-  }
-`;
-
 const ShareTo = styled(Flex)`
   margin: 8px;
 `;
@@ -57,185 +32,63 @@ const ShareToLabel = styled(Text.Label)`
   font-weight: 500;
 `;
 
-export const ShareModal = () => {
-  const { object, colors, paths, setPaths } = useShareModal();
-
-  if (!object) return <div />;
+type Props = {
+  object: ShareObject;
+};
 
-  return (
-    <Portal>
-      <Card
-        id="share-modal"
-        p={1}
-        elevation={2}
-        position="absolute"
-        initial={{
-          opacity: 0,
-        }}
-        animate={{
-          opacity: 1,
-          transition: {
-            duration: 0.1,
-          },
-        }}
-        exit={{
-          opacity: 0,
-          y: 8,
-          transition: {
-            duration: 0.1,
-          },
-        }}
-        style={{
-          y: (window.innerHeight - HEIGHT) / 2,
-          x: (window.innerWidth - WIDTH) / 2,
-          width: WIDTH,
-          maxHeight: HEIGHT,
-          overflowY: 'auto',
-          backgroundColor: 'rgba(var(--rlm-window-bg-rgba))',
-        }}
-      >
-        <Flex
-          justifyContent="space-between"
-          style={{ padding: '8px', paddingBottom: '16px' }}
-          alignItems="center"
+const ShareModalView = ({ object }: Props) =>
+  useMemo(
+    () => (
+      <Portal>
+        <Card
+          id="share-modal"
+          p={1}
+          elevation={2}
+          position="absolute"
+          initial={{
+            opacity: 0,
+          }}
+          animate={{
+            opacity: 1,
+            transition: {
+              duration: 0.1,
+            },
+          }}
+          exit={{
+            opacity: 0,
+            y: 8,
+            transition: {
+              duration: 0.1,
+            },
+          }}
+          style={{
+            y: (window.innerHeight - HEIGHT) / 2,
+            x: (window.innerWidth - WIDTH) / 2,
+            width: WIDTH,
+            maxHeight: HEIGHT,
+            backgroundColor: 'rgba(var(--rlm-window-bg-rgba))',
+          }}
+          onClick={(e) => e.stopPropagation()}
         >
-          <Flex gap={8}>
-            <Icon
-              name={object.icon}
-              size={44}
-              fill="text"
-              opacity={1}
-              style={{
-                padding: '4px',
-                borderRadius: '6px',
-                border: '2px solid var(--rlm-border-color)',
-                background: '#FFFfff',
-              }}
-            />
-            <Flex col={true}>
-              <Text.H2
-                color={colors.textColor}
-                fontSize={16}
-                lineHeight={21}
-                fontWeight={500}
-              >
-                {object.app}
-              </Text.H2>
-              <Text.Label
-                opacity={0.7}
-                fontSize={13}
-                lineHeight={18}
-                fontWeight={300}
-              >
-                Share {object.dataTypeName}
-              </Text.Label>
-            </Flex>
+          <Flex flex={1} flexDirection="column" minHeight={0}>
+            <ShareModalHeader />
+            <ShareModalBubble />
+            <ShareTo>
+              <ShareToLabel>Share to</ShareToLabel>
+              <ShareToHr />
+            </ShareTo>
+            <ShareModalPathRows />
           </Flex>
-          <ShareButton
-            disabled={paths.find((p) => p.selected) ? undefined : true}
-            height="30px"
-            width="30px"
-            background="rgba(var(--rlm-accent-rgba), 0.12)"
-            onClick={() =>
-              object.share(
-                object,
-                paths.filter((p) => p.selected)
-              )
-            }
-          >
-            <Icon
-              name="ShareArrow"
-              size={30}
-              mt={1}
-              ml={2}
-              style={{ fill: '#4E9EFD' }}
-            />
-          </ShareButton>
-        </Flex>
-
-        {object.message && (
-          <BubbleWrapper>
-            <Bubble
-              id={`message-row-${object.message.id}`}
-              isPrevGrouped={false}
-              isNextGrouped={false}
-              expiresAt={object.message.expiresAt}
-              themeMode={'light'}
-              isOur={false}
-              ourColor={'black'}
-              isEditing={false}
-              isDeleting={false}
-              updatedAt={object.message.updatedAt}
-              isEdited={object.message.metadata.edited}
-              author={object.message.sender}
-              message={object.mergedContents}
-              sentAt={new Date(object.message.createdAt).toISOString()}
-              error={object.message.error}
-              forwardedFrom={object.message.forwardedFrom}
-            />
-          </BubbleWrapper>
-        )}
+        </Card>
+      </Portal>
+    ),
+    [object]
+  );
 
-        <ShareTo>
-          <ShareToLabel>Share to</ShareToLabel>
-          <ShareToHr />
-        </ShareTo>
+export const ShareModal = () => {
+  const { object } = useShareModal();
 
-        {paths.map((p) => (
-          <PathRow
-            key={p.path}
-            pathObj={p}
-            toggle={(path: string, selected: boolean) => {
-              setPaths(
-                paths.map((i) => (i.path === path ? { ...i, selected } : i))
-              );
-            }}
-          />
-        ))}
-      </Card>
-    </Portal>
-  );
-};
+  if (!object) return null;
 
-export const PathRow = ({
-  pathObj,
-  toggle,
-}: {
-  pathObj: SharePath;
-  toggle: (path: string, selected: boolean) => void;
-}) => {
-  return (
-    <Row>
-      <Flex width="36px">
-        <ChatAvatar
-          sigil={pathObj.sigil}
-          type={pathObj.type}
-          path={pathObj.path}
-          peers={pathObj.peers}
-          image={pathObj.image}
-          color={pathObj.space?.color}
-          metadata={pathObj.metadata}
-          canEdit={false}
-        />
-      </Flex>
-      <Flex col={true} flexGrow={2}>
-        <Text.Custom fontSize="15px" fontWeight={500}>
-          {pathObj.space ? pathObj.space.name : pathObj.title}
-        </Text.Custom>
-        {pathObj.space && (
-          <Flex gap={4}>
-            <Icon name="Members" size={14} fill="text" opacity={0.6} />
-            <Text.Custom opacity={0.6} fontSize="13px" fontWeight={400}>
-              {pathObj.space.members.count} members
-            </Text.Custom>
-          </Flex>
-        )}
-      </Flex>
-      <CheckBox
-        isChecked={pathObj.selected}
-        onChange={(v) => toggle(pathObj.path, v)}
-        size={24}
-      />
-    </Row>
-  );
+  return <ShareModalView object={object} />;
 };
diff --git a/app/src/renderer/components/ShareModal/ShareModalBubble.tsx b/app/src/renderer/components/ShareModal/ShareModalBubble.tsx
new file mode 100644
index 0000000000..77f27c2d89
--- /dev/null
+++ b/app/src/renderer/components/ShareModal/ShareModalBubble.tsx
@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+import { Bubble } from '@holium/design-system/blocks';
+import { Flex } from '@holium/design-system/general';
+
+import { useShareModal } from './useShareModal';
+
+const BubbleWrapper = styled(Flex)`
+  width: 90%;
+  margin-left: 8px;
+  margin-bottom: 8px;
+  & > div {
+    flex-grow: 2;
+  }
+`;
+
+export const ShareModalBubble = () => {
+  const { object } = useShareModal();
+
+  if (!object || !object.message) return null;
+
+  return (
+    <BubbleWrapper>
+      <Bubble
+        id={`message-row-${object.message.id}`}
+        isPrevGrouped={false}
+        isNextGrouped={false}
+        expiresAt={object.message.expiresAt}
+        themeMode="light"
+        isOur={false}
+        ourColor="black"
+        isEditing={false}
+        isDeleting={false}
+        updatedAt={object.message.updatedAt}
+        isEdited={object.message.metadata.edited}
+        author={object.message.sender}
+        message={object.mergedContents}
+        sentAt={new Date(object.message.createdAt).toISOString()}
+        error={object.message.error}
+        forwardedFrom={object.message.forwardedFrom}
+      />
+    </BubbleWrapper>
+  );
+};
diff --git a/app/src/renderer/components/ShareModal/ShareModalHeader.tsx b/app/src/renderer/components/ShareModal/ShareModalHeader.tsx
new file mode 100644
index 0000000000..35c3066be7
--- /dev/null
+++ b/app/src/renderer/components/ShareModal/ShareModalHeader.tsx
@@ -0,0 +1,80 @@
+import styled from 'styled-components';
+
+import { Button, Flex, Icon, Text } from '@holium/design-system/general';
+
+import { useShareModal } from './useShareModal';
+
+const ShareButton = styled(Button.IconButton)`
+  height: 30px;
+  width: 30px;
+  &:hover:not([disabled]) {
+    background: rgba(var(--rlm-accent-rgba), 0.12);
+  }
+`;
+
+export const ShareModalHeader = () => {
+  const { object, colors, paths } = useShareModal();
+
+  if (!object) return <div />;
+
+  return (
+    <Flex
+      justifyContent="space-between"
+      style={{ padding: '8px', paddingBottom: '16px' }}
+      alignItems="center"
+    >
+      <Flex gap={8}>
+        <Icon
+          name={object.icon}
+          size={44}
+          fill="text"
+          opacity={1}
+          style={{
+            padding: '4px',
+            borderRadius: '6px',
+            border: '2px solid var(--rlm-border-color)',
+            background: '#FFFfff',
+          }}
+        />
+        <Flex col={true}>
+          <Text.H2
+            color={colors.textColor}
+            fontSize={16}
+            lineHeight={21}
+            fontWeight={500}
+          >
+            {object.app}
+          </Text.H2>
+          <Text.Label
+            opacity={0.7}
+            fontSize={13}
+            lineHeight={18}
+            fontWeight={300}
+          >
+            Share {object.dataTypeName}
+          </Text.Label>
+        </Flex>
+      </Flex>
+      <ShareButton
+        disabled={paths.find((p) => p.selected) ? undefined : true}
+        height="30px"
+        width="30px"
+        background="rgba(var(--rlm-accent-rgba), 0.12)"
+        onClick={() =>
+          object.share(
+            object,
+            paths.filter((p) => p.selected)
+          )
+        }
+      >
+        <Icon
+          name="ShareArrow"
+          size={30}
+          mt={1}
+          ml={2}
+          style={{ fill: '#4E9EFD' }}
+        />
+      </ShareButton>
+    </Flex>
+  );
+};
diff --git a/app/src/renderer/components/ShareModal/ShareModalPathRow.tsx b/app/src/renderer/components/ShareModal/ShareModalPathRow.tsx
new file mode 100644
index 0000000000..7179e03236
--- /dev/null
+++ b/app/src/renderer/components/ShareModal/ShareModalPathRow.tsx
@@ -0,0 +1,45 @@
+import { CheckBox, Flex, Icon, Row, Text } from '@holium/design-system';
+
+import { ChatAvatar } from 'renderer/apps/Courier/components/ChatAvatar';
+
+import { SharePath } from './useShareModal';
+
+type Props = {
+  pathObj: SharePath;
+  toggle: (path: string, selected: boolean) => void;
+};
+
+export const ShareModalPathRow = ({ pathObj, toggle }: Props) => (
+  <Row>
+    <Flex width="36px">
+      <ChatAvatar
+        sigil={pathObj.sigil}
+        type={pathObj.type}
+        path={pathObj.path}
+        peers={pathObj.peers}
+        image={pathObj.image}
+        color={pathObj.space?.color}
+        metadata={pathObj.metadata}
+        canEdit={false}
+      />
+    </Flex>
+    <Flex col={true} flexGrow={2}>
+      <Text.Custom fontSize="15px" fontWeight={500}>
+        {pathObj.space ? pathObj.space.name : pathObj.title}
+      </Text.Custom>
+      {pathObj.space && (
+        <Flex gap={4}>
+          <Icon name="Members" size={14} fill="text" opacity={0.6} />
+          <Text.Custom opacity={0.6} fontSize="13px" fontWeight={400}>
+            {pathObj.space.members.count} members
+          </Text.Custom>
+        </Flex>
+      )}
+    </Flex>
+    <CheckBox
+      isChecked={pathObj.selected}
+      onChange={(v) => toggle(pathObj.path, v)}
+      size={24}
+    />
+  </Row>
+);
diff --git a/app/src/renderer/components/ShareModal/ShareModalPathRows.tsx b/app/src/renderer/components/ShareModal/ShareModalPathRows.tsx
new file mode 100644
index 0000000000..91dceda1e5
--- /dev/null
+++ b/app/src/renderer/components/ShareModal/ShareModalPathRows.tsx
@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+import { Flex } from '@holium/design-system/general';
+
+import { ShareModalPathRow } from './ShareModalPathRow';
+import { useShareModal } from './useShareModal';
+
+const ListContainer = styled(Flex)`
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+`;
+
+export const ShareModalPathRows = () => {
+  const { paths, setPaths } = useShareModal();
+
+  return (
+    <ListContainer>
+      {paths.map((p) => (
+        <ShareModalPathRow
+          key={p.path}
+          pathObj={p}
+          toggle={(path: string, selected: boolean) => {
+            setPaths(
+              paths.map((i) => (i.path === path ? { ...i, selected } : i))
+            );
+          }}
+        />
+      ))}
+    </ListContainer>
+  );
+};
diff --git a/app/src/renderer/components/ShareModal/useShareModal.tsx b/app/src/renderer/components/ShareModal/useShareModal.tsx
index ff988cff94..5b13b2dd2d 100644
--- a/app/src/renderer/components/ShareModal/useShareModal.tsx
+++ b/app/src/renderer/components/ShareModal/useShareModal.tsx
@@ -6,6 +6,7 @@ import {
   useEffect,
   useState,
 } from 'react';
+import { observer } from 'mobx-react';
 
 import { IconPathsType } from '@holium/design-system';
 
@@ -14,7 +15,7 @@ import { useAppState } from 'renderer/stores/app.store';
 import { ChatMessageType } from 'renderer/stores/models/chat.model';
 import { SpaceModelType } from 'renderer/stores/models/spaces.model';
 
-type ShareObject = {
+export type ShareObject = {
   app: string;
   icon: IconPathsType;
   dataTypeName: string;
@@ -49,8 +50,7 @@ type ShareModalProviderProps = {
   children: ReactNode;
 };
 
-export const ShareModalProvider = ({ children }: ShareModalProviderProps) => {
-  const root = document.getElementById('root');
+const ShareModalProviderPresenter = ({ children }: ShareModalProviderProps) => {
   const { theme } = useAppState();
   const { textColor, windowColor } = theme;
   const [shareObject, setShareObject] = useState<ShareObject>(null);
@@ -71,13 +71,15 @@ export const ShareModalProvider = ({ children }: ShareModalProviderProps) => {
   }, []);
 
   useEffect(() => {
+    const root = document.getElementById('root');
+
     if (!root) return;
     root.addEventListener('mousedown', handleClick);
 
     return () => {
       root.removeEventListener('mousedown', handleClick);
     };
-  }, [handleClick, root]);
+  }, [handleClick]);
 
   return (
     <ShareModalContext.Provider
@@ -94,7 +96,6 @@ export const ShareModalProvider = ({ children }: ShareModalProviderProps) => {
   );
 };
 
-export const useShareModal = () => {
-  const context = useContext(ShareModalContext);
-  return context;
-};
+export const ShareModalProvider = observer(ShareModalProviderPresenter);
+
+export const useShareModal = () => useContext(ShareModalContext);