feat(minimize): add minimize modus again

create constants file
remove unused code
update images

README.md

@@ -48,6 +48,7 @@ The plugin must set an interval that asks for new updates every n milliseconds.
 - [ ] create a random unique user name to detect returning users on server and inside a figma file
 - [x] remove all messages
 - [ ] add max message count to prevent a to large object inside the figma file
+- [x] pagination
 
 Feel free to open a feature request: https://github.com/ph1p/figma-chat/issues
 

package.json

@@ -57,10 +57,10 @@
     "react-dom": "^16.12.0",
     "react-easy-state": "^6.1.3",
     "react-router-dom": "^5.1.2",
-    "react-router-transition": "^2.0.0",
     "simple-encryptor": "^3.0.0",
     "socket.io-client": "^2.3.0",
     "styled-components": "^4.4.1",
+    "timeago-react": "^3.0.0",
     "type-fest": "^0.8.1",
     "uniqid": "^5.1.0"
   }

src/assets/css/ui.css

@@ -24,9 +24,3 @@ body {
 ::-webkit-scrollbar-thumb {
   background-color: #000000;
 }
-
-.info-paragraph {
-  padding: 15px;
-  text-align: center;
-  color: #999;
-}

src/code.ts

@@ -1,5 +1,5 @@
 import uniqid from 'uniqid';
-import { generateString } from './utils';
+import { generateString } from './shared/utils';
 
 let isMinimized = false;
 let isFocused = true;

src/components/message.tsx

@@ -1,6 +1,8 @@
 import React, { FunctionComponent } from 'react';
-import { sendMainMessage, colors } from '../utils';
 import styled from 'styled-components';
+import TimeAgo from 'timeago-react';
+import { colors } from '../shared/constants';
+import { sendMainMessage } from '../shared/utils';
 
 interface Props {
   data: any;
@@ -15,7 +17,14 @@ const Message: FunctionComponent<Props> = ({ data, instanceId }) => {
     <MessageContainer
       className={`message ${data.id === instanceId ? 'me' : colorClass}`}
     >
-      {data.id !== instanceId ? <div className="user">{username}</div> : ''}
+      <MessageHeader>
+        {data.id !== instanceId ? <div className="user">{username}</div> : ''}
+        {data.message.date && (
+          <div className="date">
+            <TimeAgo datetime={data.message.date} locale="en_US" />
+          </div>
+        )}
+      </MessageHeader>
       {data.message.selection ? (
         <span
           onClick={() =>
@@ -36,6 +45,17 @@ const Message: FunctionComponent<Props> = ({ data, instanceId }) => {
   );
 };
 
+const MessageHeader = styled.header`
+  display: flex;
+  justify-content: space-between;
+  font-size: 9px;
+  margin-bottom: 5px;
+  color: #fff;
+  .date {
+    opacity: 0.5;
+  }
+`;
+
 const MessageContainer = styled.div`
   background-color: #18a0fb;
   border-radius: 15px;
@@ -53,12 +73,14 @@ const MessageContainer = styled.div`
     color: #000;
     margin: 0 0 15px 30%;
     background-color: #ebebeb;
-  }
+    header {
+      color: #000;
+    }
 
-  .user {
-    font-size: 9px;
-    margin-bottom: 5px;
-    color: #fff;
+    .selection {
+      border-color: #000;
+      color: #000;
+    }
   }
 
   .selection {
@@ -70,64 +92,55 @@ const MessageContainer = styled.div`
     color: #fff;
   }
 
-  &.me .user {
-    color: #000;
-  }
-
-  &.me .selection {
-    border-color: #000;
-    color: #000;
-  }
-
-  &.lightblue .user {
+  &.lightblue header {
     color: #1c4856;
   }
   &.lightblue .selection {
     border-color: #1c4856;
     color: #1c4856;
   }
 
-  &.lightgreen .user {
+  &.lightgreen header {
     color: #3a8459;
   }
   &.lightgreen .selection {
     border-color: #3a8459;
     color: #3a8459;
   }
 
-  &.purple .user {
+  &.purple header {
     color: #ffffff;
   }
   &.purple .selection {
     border-color: #ffffff;
     color: #ffffff;
   }
 
-  &.red .user {
+  &.red header {
     color: #ffffff;
   }
   &.red .selection {
     border-color: #ffffff;
     color: #ffffff;
   }
 
-  &.green .user {
+  &.green header {
     color: #0d6540;
   }
   &.green .selection {
     border-color: #0d6540;
     color: #0d6540;
   }
 
-  &.orange .user {
+  &.orange header {
     color: #865427;
   }
   &.orange .selection {
     border-color: #865427;
     color: #865427;
   }
 
-  &.beige .user {
+  &.beige header {
     color: #564432;
   }
   &.beige .selection {

src/shared/constants.ts

@@ -0,0 +1,15 @@
+export const IS_PROD = true;
+export const DEFAULT_SERVER_URL = 'https://figma-chat.ph1p.dev/';
+export const MAX_MESSAGES = 5;
+export const colors = {
+  '#4F4F4F': 'gray',
+  '#18A0FB': 'blue',
+  '#56CCF2': 'lightblue',
+  '#7B61FF': 'purple',
+  '#1BC47D': 'green',
+  '#6fcf97': 'lightgreen',
+  '#F24822': 'red',
+  '#F2994A': 'orange',
+  '#E7B889': 'beige',
+  '#F47E9A': 'pink'
+};

src/shared/interfaces.ts

@@ -1,5 +1,4 @@
 declare function require(path: string): any;
-const IS_PROD = true;
 
 export enum ConnectionEnum {
   NONE = 'NONE',
@@ -8,12 +7,6 @@ export enum ConnectionEnum {
   CONNECTING = 'CONNECTING'
 }
 
-export enum SelectionStateEnum {
-  READY = 'READY',
-  NONE = 'NONE',
-  LOADING = 'LOADING'
-}
-
 export interface MessageData {
   message: string;
   id: string;

src/shared/state.ts

@@ -1,7 +1,8 @@
 import { createRef } from 'react';
 import { store, view } from 'react-easy-state';
 import SimpleEncryptor from 'simple-encryptor';
-import { DEFAULT_SERVER_URL, sendMainMessage } from '../utils';
+import { DEFAULT_SERVER_URL } from './constants';
+import { sendMainMessage } from './utils';
 import { ConnectionEnum } from './interfaces';
 
 const state = store({
@@ -21,7 +22,6 @@ const state = store({
   disableAutoScroll: false,
   scrollToBottom() {
     if (!state.disableAutoScroll) {
-      console.log('ok', state.disableAutoScroll);
       // scroll to bottom
       if (state.messagesRef.current) {
         state.messagesRef.current.scrollTop =
@@ -38,6 +38,10 @@ const state = store({
     url: DEFAULT_SERVER_URL
   },
   // ---
+  toggleMinimizeChat() {
+    state.isMinimized = !state.isMinimized;
+    sendMainMessage('minimize', state.isMinimized);
+  },
   removeAllMessages() {
     if (
       (window as any).confirm('Remove all messages? (This cannot be undone)')

src/utils.ts → src/shared/utils.ts

@@ -9,28 +9,14 @@ export const sendMainMessage = (action, payload = {}) =>
     '*'
   );
 
-export const DEFAULT_SERVER_URL = 'https://figma-chat.ph1p.dev/';
-
-export const colors = {
-  '#4F4F4F': 'gray',
-  '#18A0FB': 'blue',
-  '#56CCF2': 'lightblue',
-  '#7B61FF': 'purple',
-  '#1BC47D': 'green',
-  '#6fcf97': 'lightgreen',
-  '#F24822': 'red',
-  '#F2994A': 'orange',
-  '#E7B889': 'beige',
-  '#F47E9A': 'pink'
-};
-
-export const generateString = (length = 40) => {
+export const generateString = (length: number = 40): string => {
   const chars =
     'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 
   let text = '';
   for (let i = 0; i < length; i++) {
     text += chars.charAt(Math.floor(Math.random() * chars.length));
   }
+
   return text;
 };