refactor: remove a lot of unused code, fix bugs and add correct font

ph1p · Nov 4, 2021 · 81751f4 · 81751f4
1 parent b629bfe
commit 81751f4
Show file tree

Hide file tree

Showing 26 changed files with 196 additions and 482 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/packages/plugin/src/Ui.tsx b/packages/plugin/src/Ui.tsx
@@ -93,30 +93,22 @@ const App = observer(() => {
               nodes: [],
             },
             currentUser,
-            instanceId = '',
           } = rootData;
 
           store.setCurrentUser(currentUser);
           store.setSecret(dataSecret);
           store.setRoomName(dataRoomName);
           store.setMessages(messages);
-          store.setInstanceId(instanceId);
           store.setSelection(selection);
 
-          // console.log(settings);
-
-          // store.persistSettings({ ...settings, ...currentUser }, socket, true);
-
           // socket listener
           socket.io.on('error', () => store.setStatus(ConnectionEnum.ERROR));
 
           socket.io.on('reconnect_error', () =>
             store.setStatus(ConnectionEnum.ERROR)
           );
 
-          socket.on('chat message', (data) => {
-            store.addMessage(data);
-          });
+          socket.on('chat message', (data) => store.addMessage(data));
 
           socket.on('join leave message', (data) => {
             const username = data.user.name || 'Anon';
@@ -134,16 +126,9 @@ const App = observer(() => {
 
           store.setStatus(ConnectionEnum.CONNECTED);
 
-          const settings = {
-            ...toJS(store.settings),
-            figmaId: currentUser.id,
-            name: currentUser.name,
-            photoUrl: currentUser.photoUrl,
-          };
-
-          socket.emit('set user', settings);
+          socket.emit('set user', toJS(store.currentUser));
           socket.emit('join room', {
-            settings,
+            settings: toJS(store.currentUser),
             room: dataRoomName,
           });
 
@@ -197,10 +182,7 @@ const App = observer(() => {
               <Route
                 path="/user-list"
                 element={
-                  <UserListView
-                    users={store.online}
-                    socketId={socket?.id || ''}
-                  />
+                  <UserListView users={store.online} user={store.currentUser} />
                 }
               />
               <Route path="/settings" element={<SettingsView />} />

diff --git a/packages/plugin/src/main/index.ts b/packages/plugin/src/main/index.ts
@@ -10,6 +10,12 @@ let triggerSelectionEvent = true;
 
 const isRelaunch = figma.command === 'relaunch';
 
+const currentUser = {
+  ...figma.currentUser,
+};
+
+delete currentUser.sessionId;
+
 figma.showUI(__html__, {
   width: 333,
   height: 490,
@@ -24,7 +30,6 @@ const main = async () => {
   const timestamp = +new Date();
 
   // random user id for current user
-  let instanceId = await figma.clientStorage.getAsync('id');
   let history = figma.root.getPluginData('history');
   let roomName = figma.root.getPluginData('roomName');
   let secret = figma.root.getPluginData('secret');
@@ -36,15 +41,6 @@ const main = async () => {
     history = '';
   }
 
-  if (!instanceId) {
-    instanceId = 'user-' + timestamp + '-' + generateString(15);
-    await figma.clientStorage.setAsync('id', instanceId);
-  }
-
-  if (!roomName && !secret) {
-    figma.root.setPluginData('ownerId', instanceId);
-  }
-
   if (!roomName) {
     const randomRoomName = timestamp + '-' + generateString(15);
     figma.root.setPluginData('roomName', randomRoomName);
@@ -70,7 +66,6 @@ const main = async () => {
     roomName,
     secret,
     history,
-    instanceId,
   };
 };
 
@@ -147,17 +142,16 @@ EventEmitter.on('notification', (payload) => {
   }
 });
 
-EventEmitter.answer('current-user', async () => figma.currentUser);
+EventEmitter.answer('current-user', async () => currentUser);
 
 EventEmitter.answer('root-data', async () => {
-  const { roomName, secret, history, instanceId } = await main();
+  const { roomName, secret, history } = await main();
 
   return {
     roomName,
     secret,
     history,
-    instanceId,
-    currentUser: figma.currentUser,
+    currentUser,
     selection: getSelectionIds(),
   };
 });

diff --git a/packages/plugin/src/store/index.tsx b/packages/plugin/src/store/index.tsx
@@ -27,19 +27,21 @@ export class RootStore {
 
   @ignore
   status = ConnectionEnum.NONE;
+
   @ignore
   online = [];
+
   @ignore
   messages = [];
+
   @ignore
   messagesRef = createRef<HTMLDivElement>();
 
   @ignore
   secret = '';
+
   @ignore
   roomName = '';
-  @ignore
-  instanceId = '';
 
   @ignore
   autoScrollDisabled = false;
@@ -52,8 +54,9 @@ export class RootStore {
     id: '',
     name: '',
     sessionId: '',
-    color: '',
+    avatar: '',
     photoUrl: '',
+    color: '#4F4F4F',
   };
 
   setStatus(status) {
@@ -70,9 +73,6 @@ export class RootStore {
   setRoomName(roomName) {
     this.roomName = roomName;
   }
-  setInstanceId(instanceId) {
-    this.instanceId = instanceId;
-  }
   setOnline(online) {
     this.online = online;
   }
@@ -127,8 +127,6 @@ export class RootStore {
 
   @observable.deep
   settings: Omit<StoreSettings, 'name'> = {
-    avatar: '',
-    color: '#4F4F4F',
     url: DEFAULT_SERVER_URL,
     enableNotificationTooltip: true,
     enableNotificationSound: true,
@@ -191,28 +189,26 @@ export class RootStore {
     }
   }
 
-  persistSettings(settings, socket?, isInit = false) {
+  persistSettings(settings, isInit = false) {
     const oldUrl = this.settings.url;
 
     this.settings = {
       ...this.settings,
       ...settings,
-      figmaId: this.currentUser.id,
-      name: this.currentUser.name,
-      photoUrl: this.currentUser.photoUrl,
     };
 
-    // save user settings in main
-    // EventEmitter.emit('save-user-settings', { ...toJS(this.settings) });
-
     // set server URL
     if (!isInit && settings.url && settings.url !== oldUrl) {
       this.addNotification('Updated server-URL');
     }
+  }
+
+  persistCurrentUser(currentUser, socket?) {
+    this.setCurrentUser(currentUser);
 
     if (socket && socket.connected) {
       // set user data on server
-      socket.emit('set user', this.settings);
+      socket.emit('set user', toJS(this.currentUser));
     }
   }
 
@@ -226,6 +222,7 @@ export class RootStore {
     // silent on error
     try {
       const data = JSON.parse(decryptedMessage);
+
       let newMessage: Record<string, unknown> = {
         message: {
           ...data,
@@ -235,12 +232,7 @@ export class RootStore {
       // is local sender
       if (isLocal) {
         newMessage = {
-          id: this.instanceId,
-          user: {
-            ...this.currentUser,
-            avatar: this.settings.avatar,
-            color: this.settings.color,
-          },
+          user: toJS(this.currentUser),
           message: {
             ...data,
           },
@@ -249,7 +241,6 @@ export class RootStore {
         EventEmitter.emit('add-message-to-history', newMessage);
       } else {
         newMessage = {
-          id: messageData.id,
           user: messageData.user,
           message: {
             ...data,
@@ -264,6 +255,7 @@ export class RootStore {
           const audio = new Audio(MessageSound);
           audio.play();
         }
+
         if (this.settings.enableNotificationTooltip) {
           let text = '';
           if (data.text) {

diff --git a/packages/plugin/src/style.css b/packages/plugin/src/style.css
@@ -5,40 +5,15 @@
 
 body {
   overflow: hidden;
-  font-family: Inter, sans-serif;
+  font-family: 'Inter', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   font-size: 12px;
   margin: 0;
 }
 
-/*  Typography */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  src: url('https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.7')
-      format('woff2'),
-    url('https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.7')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  src: url('https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.7')
-      format('woff2'),
-    url('https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.7')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 600;
-  src: url('https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.7')
-      format('woff2'),
-    url('https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.7')
-      format('woff');
+input {
+  font-family: 'Inter', sans-serif;
 }
 
 .main {

diff --git a/packages/plugin/src/views/Chat/components/Chatbar.tsx b/packages/plugin/src/views/Chat/components/Chatbar.tsx
@@ -81,9 +81,7 @@ const ChatBar: FunctionComponent<ChatProps> = (props) => {
           </RefTooltip>
           <SettingsAndUsers>
             <CustomLink to="/settings">
-              <div
-                className={`gear ${store.settings.isDarkTheme ? 'dark' : ''}`}
-              >
+              <div className="gear">
                 <GearIcon />
               </div>
             </CustomLink>
@@ -272,10 +270,9 @@ const SettingsAndUsers = styled.div`
     align-items: center;
     background-color: ${(p) => p.theme.chatbarSecondaryBackground};
     border-radius: 100%;
-    &.dark {
-      svg path {
-        fill: ${({ theme }) => theme.thirdFontColor};
-      }
+
+    svg path {
+      fill: ${({ theme }) => theme.thirdFontColor};
     }
   }
 `;

diff --git a/packages/plugin/src/views/Chat/index.tsx b/packages/plugin/src/views/Chat/index.tsx
@@ -1,3 +1,4 @@
+import { toJS } from 'mobx';
 import { observer, useLocalObservable } from 'mobx-react-lite';
 import React, { useEffect, FunctionComponent } from 'react';
 import styled from 'styled-components';
@@ -104,7 +105,9 @@ const Chat: FunctionComponent = observer(() => {
     };
   }, []);
 
-  useEffect(() => store.scrollToBottom(), [store.messages]);
+  useEffect(() => {
+    store.scrollToBottom();
+  }, [store.messages]);
 
   const onClickSelection = (selection) => {
     let selectionData = null;