Feat: add my message component (#8)

* base message

* basic messages added

* Image attachments added

* attachments are in

* all media is in one file

* fix compile issue

* css properties patch

* Image Thumb is in use

* tests pass

* File Thumb

* read receipts are documented

package.json

@@ -71,6 +71,6 @@
     "typescript": "^4.4.4"
   },
   "dependencies": {
-    "html-to-text": "^8.0.0"
+    "react-grid-system": "^7.3.1"
   }
 }

scripts/new.sh

@@ -2,8 +2,8 @@
 
 mkdir ./src/$1
 
-echo "" > ./src/$1/index.tsx
-echo "" > ./src/$1/props.tsx
+echo "import React from 'react';import { Props } from './props';export const index: React.FC<Props> = ({}) => {return <div />;};" > ./src/$1/index.tsx
+echo "export interface Props {}" > ./src/$1/props.tsx
 echo "" > ./src/$1/stories.tsx
-echo "" > ./src/$1/styles.tsx
+echo "import { Properties } from 'csstype';export const styles = {example: {} as Properties,};" > ./src/$1/styles.tsx
 echo "" > ./src/$1/.test.tsx

src/ChatFeed/FileThumb/.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Default as Thing } from './stories';
+
+describe('Thing', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<Thing />, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+});

src/ChatFeed/FileThumb/index.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+
+import { getFileName } from '../../util/file';
+
+import { Props } from './props';
+import { styles } from './styles';
+
+export const FileThumb: React.FC<Props> = ({
+  attachment,
+  isLoading = false,
+  children = 'Loading...',
+  style = {},
+  loadingStyle = {},
+}) => {
+  const [hovered, setHovered] = useState<boolean>(false);
+
+  const fileStyle = {
+    ...styles.fileView,
+    ...{
+      color: hovered ? '#1890ff' : '#434343',
+      border: hovered ? '1px solid #1890ff' : '1px solid #434343',
+    },
+  };
+
+  if (isLoading || !attachment) {
+    return (
+      <div style={{ ...styles.loadingContainer, ...loadingStyle }}>
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        ...fileStyle,
+        ...style,
+      }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onClick={() => window.open(attachment.file)}
+    >
+      {getFileName(attachment.file)}
+    </div>
+  );
+};

src/ChatFeed/FileThumb/props.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+import { Properties } from 'csstype';
+
+import { AttachmentProps } from '../../util/interfaces';
+
+export interface Props {
+  attachment?: AttachmentProps;
+  isLoading?: boolean;
+  children?: ReactNode;
+  style?: Properties;
+  loadingStyle?: Properties;
+}

src/ChatFeed/FileThumb/stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { Meta, Story } from '@storybook/react';
+
+import { FileThumb } from '.';
+
+import { Props } from './props';
+
+import { fileAttachment } from '../../util/mocks';
+
+const meta: Meta = {
+  title: 'ChatFeed/FileThumb',
+  component: FileThumb,
+  argTypes: {},
+};
+
+export default meta;
+
+const Template: Story<Props> = (props) => <FileThumb {...props}></FileThumb>;
+
+export const Default = Template.bind({});
+Default.args = {
+  attachment: fileAttachment,
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  isLoading: true,
+};

src/ChatFeed/FileThumb/styles.tsx

@@ -0,0 +1,28 @@
+import { Properties } from 'csstype';
+
+export const styles = {
+  fileView: {
+    fontFamily: 'Avenir',
+    padding: '12px',
+    borderRadius: '14px',
+    display: 'inline-block',
+    marginBottom: '4px',
+    marginRight: '2px',
+    cursor: 'pointer',
+    transition: 'all .33s ease',
+    WebkitTransition: 'all .33s ease',
+    MozTransition: 'all .33s ease',
+  } as Properties,
+  loadingContainer: {
+    fontFamily: 'Avenir',
+    color: 'white',
+    padding: '14px',
+    display: 'inline-block',
+    borderRadius: '14px',
+    marginRight: '2px',
+    width: '136px',
+    marginBottom: '4px',
+    marginLeft: '4px',
+    backgroundColor: '#d9d9d9',
+  } as Properties,
+};

src/ChatFeed/ImageThumb/.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Default as Thing } from './stories';
+
+describe('Thing', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<Thing />, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+});

src/ChatFeed/ImageThumb/index.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+
+import { Props } from './props';
+import { styles } from './styles';
+
+export const ImageThumb: React.FC<Props> = ({
+  attachment,
+  isLoading = false,
+  children = 'Loading...',
+  style = {},
+  loadingStyle = {},
+}) => {
+  const [hovered, setHovered] = useState<boolean>(false);
+
+  const thumbnailStyle = {
+    ...styles.thumbnail,
+    ...{ border: hovered ? '1px solid #1890ff' : '1px solid #fff' },
+  };
+
+  if (isLoading || !attachment) {
+    return (
+      <div style={{ ...styles.loadingContainer, ...loadingStyle }}>
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <img
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      src={attachment.file}
+      alt={'thumb-nail'}
+      style={{
+        ...thumbnailStyle,
+        ...style,
+      }}
+      onClick={() => window.open(attachment.file)}
+    />
+  );
+};

src/ChatFeed/ImageThumb/props.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+import { Properties } from 'csstype';
+
+import { AttachmentProps } from '../../util/interfaces';
+
+export interface Props {
+  attachment?: AttachmentProps;
+  isLoading?: boolean;
+  children?: ReactNode;
+  style?: Properties;
+  loadingStyle?: Properties;
+}

src/ChatFeed/ImageThumb/stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { Meta, Story } from '@storybook/react';
+
+import { ImageThumb } from '.';
+
+import { Props } from './props';
+
+import { imageAttachment } from '../../util/mocks';
+
+const meta: Meta = {
+  title: 'ChatFeed/ImageThumb',
+  component: ImageThumb,
+  argTypes: {},
+};
+
+export default meta;
+
+const Template: Story<Props> = (props) => <ImageThumb {...props}></ImageThumb>;
+
+export const Default = Template.bind({});
+Default.args = {
+  attachment: imageAttachment,
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  isLoading: true,
+};

src/ChatFeed/ImageThumb/styles.tsx

@@ -0,0 +1,41 @@
+import { Properties } from 'csstype';
+
+export const styles = {
+  thumbnail: {
+    cursor: 'pointer',
+    textAlign: 'right',
+    display: 'inline',
+    objectFit: 'cover',
+    borderRadius: '0.3em',
+    padding: '2px',
+    // Size
+    height: '30vw',
+    width: '30vw',
+    maxHeight: '200px',
+    maxWidth: '200px',
+    minHeight: '100px',
+    minWidth: '100px',
+    transition: 'all .33s ease',
+    WebkitTransition: 'all .33s ease',
+    MozTransition: 'all .33s ease',
+  } as Properties,
+  loadingContainer: {
+    fontFamily: 'Avenir',
+    color: 'white',
+    cursor: 'pointer',
+    textAlign: 'right',
+    display: 'inline-block',
+    objectFit: 'cover',
+    borderRadius: '0.3em',
+    padding: '2px',
+    marginRight: '2px',
+    marginBottom: '4px',
+    height: '30vw',
+    width: '30vw',
+    maxHeight: '200px',
+    maxWidth: '200px',
+    minHeight: '100px',
+    minWidth: '100px',
+    backgroundColor: '#d9d9d9',
+  } as Properties,
+};

src/ChatFeed/MyMessage/.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Default as Thing } from './stories';
+
+import { message } from '../../util/mocks';
+
+describe('Thing', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<Thing message={message} />, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+});