refactor: remove files and add missing functionality

rename containers to views update state add user list view add scrolling add socket provider
ph1p · Nov 16, 2019 · 5ad7ca8 · 5ad7ca8
1 parent 00af214
commit 5ad7ca8
Show file tree

Hide file tree

Showing 19 changed files with 601 additions and 1,143 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "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",

diff --git a/src/assets/css/ui.css b/src/assets/css/ui.css
@@ -9,206 +9,6 @@ body {
   height: 100%;
 }
 
-.chat {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  height: 100%;
-}
-
-.chat .header {
-  border-bottom: 1px solid #e9e9e9;
-}
-
-.chat .header .user-online {
-  cursor: pointer;
-}
-
-.chat .header .onboarding-tip {
-  padding: 0;
-}
-
-.chat .header .minimize-chat {
-  cursor: pointer;
-  border-left: 1px solid #e9e9e9;
-  margin-left: 10px;
-}
-
-.chat .header .onboarding-tip__msg {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.chat .header .onboarding-tip__icon {
-  border-right: 1px solid #e9e9e9;
-}
-
-.chat .header .icon {
-  cursor: pointer;
-}
-
-.messages {
-  margin: 0;
-  overflow: auto;
-  padding: 15px 15px 0;
-}
-
-.messages .message {
-  background-color: #18a0fb;
-  border-radius: 15px;
-  color: #fff;
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-  padding: 12px 15px;
-  margin: 0 30% 15px 0;
-  word-break: break-word;
-}
-
-.messages .message.me {
-  color: #000;
-  margin: 0 0 15px 30%;
-  background-color: #ebebeb;
-}
-
-.messages .message .user {
-  font-size: 9px;
-  margin-bottom: 5px;
-  color: #fff;
-}
-
-.messages .message .selection {
-  margin: 8px 0 0 0;
-  cursor: pointer;
-  width: 100%;
-  background-color: transparent;
-  border-color: #fff;
-  color: #fff;
-}
-
-.messages .message.me .user {
-  color: #000;
-}
-
-.messages .message.me .selection {
-  border-color: #000;
-  color: #000;
-}
-
-.messages .message.lightblue .user {
-  color: #1c4856;
-}
-.messages .message.lightblue .selection {
-  border-color: #1c4856;
-  color: #1c4856;
-}
-
-.messages .message.lightgreen .user {
-  color: #3a8459;
-}
-.messages .message.lightgreen .selection {
-  border-color: #3a8459;
-  color: #3a8459;
-}
-
-.messages .message.purple .user {
-  color: #ffffff;
-}
-.messages .message.purple .selection {
-  border-color: #ffffff;
-  color: #ffffff;
-}
-
-.messages .message.red .user {
-  color: #ffffff;
-}
-.messages .message.red .selection {
-  border-color: #ffffff;
-  color: #ffffff;
-}
-
-.messages .message.green .user {
-  color: #0d6540;
-}
-.messages .message.green .selection {
-  border-color: #0d6540;
-  color: #0d6540;
-}
-
-.messages .message.orange .user {
-  color: #865427;
-}
-.messages .message.orange .selection {
-  border-color: #865427;
-  color: #865427;
-}
-
-.messages .message.beige .user {
-  color: #564432;
-}
-.messages .message.beige .selection {
-  border-color: #564432;
-  color: #564432;
-}
-
-.messages .message.gray {
-  background-color: #4f4f4f;
-}
-.messages .message.blue {
-  background-color: #18a0fb;
-}
-.messages .message.lightblue {
-  background-color: #56ccf2;
-  color: #1c4856;
-}
-.messages .message.purple {
-  background-color: #7b61ff;
-  color: #ffffff;
-}
-.messages .message.green {
-  background-color: #1bc47d;
-  color: #0d6540;
-}
-.messages .message.lightgreen {
-  background-color: #6fcf97;
-  color: #3a8459;
-}
-.messages .message.red {
-  background-color: #f24822;
-  color: #ffffff;
-}
-.messages .message.orange {
-  background-color: #f2994a;
-  color: #865427;
-}
-.messages .message.beige {
-  background-color: #e7b889;
-  color: #564432;
-}
-.messages .message.pink {
-  background-color: #f47e9a;
-  color: #ffffff;
-}
-
-.chat .footer {
-  display: grid;
-  grid-template-columns: 1fr 32px;
-  grid-gap: 10px;
-  margin: 0;
-  padding: 6px;
-  border-top: 1px solid #e9e9e9;
-}
-
-.chat .footer button {
-  border: 0;
-  padding: 0;
-  margin: 0;
-  background-color: transparent;
-  outline: none;
-}
-
 ::-webkit-scrollbar {
   width: 4px;
 }
@@ -225,53 +25,8 @@ body {
   background-color: #000000;
 }
 
-
-.connection {
-  display: grid;
-  text-align: center;
-  height: 100%;
-  font-size: 14px;
-}
-.connection div {
-  align-self: center;
-}
-
-/*
-  USER-LIST
-*/
-.user-list {
-  display: grid;
-  grid-template-rows: auto 1fr;
-  height: 100%;
-}
-.user-list .header {
-  border-bottom: 1px solid #e9e9e9;
-}
-.user-list .header .icon {
-  border-right: 1px solid #e9e9e9;
-  cursor: pointer;
-}
-.user-list .users {
-  overflow-y: auto;
-}
-.user-list .users .user {
-  border-bottom: 1px solid #e9e9e9;
-  padding: 10px 15px;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-}
-
-.user-list .users .user .color {
-  border-radius: 100%;
-  width: 12px;
-  height: 12px;
-  margin-right: 10px;
-}
-
-
 .info-paragraph {
   padding: 15px;
   text-align: center;
   color: #999;
-}
+}
diff --git a/src/code.ts b/src/code.ts
@@ -111,6 +111,18 @@ main().then(({ roomName, secret, history, instanceId }) => {
       const url = await figma.clientStorage.getAsync('server-url');
 
       postMessage('initialize', url || '');
+
+
+      const settings = await figma.clientStorage.getAsync('user-settings');
+
+      postMessage('root-data', {
+        roomName,
+        secret,
+        history,
+        instanceId,
+        settings
+      });
+
     }
 
     if (message.action === 'get-selection') {

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -34,6 +34,7 @@ const Head = styled.div`
     .back-button,
     .left {
       border-right: 1px solid #e9e9e9;
+      cursor: pointer;
     }
     .left {
     }
@@ -44,6 +45,9 @@ const Head = styled.div`
     }
     .right {
     }
+    .icon {
+      cursor: pointer;
+    }
   }
 `;