Comments (codesandbox#3600)

* duplicate header

* get all the pieces ther

* move Actions into a file

* delete dead code

* move usermenu container styles to usermenu

* make avatar wrap not take extra spac

* align avatar with buttons

* vertical align menubar

* redesign menu + sandbox name

* get the right logos top left

* adjust alignment

* remove debug line

* fixed margin issues

* overmind-graphql

* UI

* UI

* fix

* More UI

* Add change link permissions

* Add resubscribing

* Fix type

* Fix link update

* Update CircleCI scripts

* refactored to effect and cleaned up (codesandbox#3537)

* refactored to effect and cleaned up

* clean and add disposeWhere

* New changes

* Set right connection places

* Push

* fix effects proxy

* WIP

* WIP

* Polish

* Update GraphQL typings

* Typing changes

* return promise on mutations

* Fix ts issues

* fix typing

* Change prop order

* Fixes

* Deduplicate yarn.lock

* Update cases

* Update schema

* Quickfix

* use endpoint instead of url

* fix weird event typing

* Move collaborators queries to own folder

* move collaborators to folder and add overmind package

* try catch loading colalborators

* initial graphql data and state

* show comments data

* list start

* add bottom form

* add delete

* add edit mitation

* add ui

* default is open

* default is open

* default is open

* simply bottom alignment with space-between

* make the comment header prettier

* refactor

* select comment

* bring the scroll back

* center the empty block

* margin bottoms + reply string

* sorry, changed the name

* replace input with autosize textarea for add comment

* use icons and icon buttons

* make empty screen prettier

* oops forgot to remove debug statement

* get the more icon to align to the right

* add a clipped edges border

* clean?

* fix comments in old sidebar

* add toggle in dev

* small eslint fix

* fix eslint

* fix ts

* prevent loading comments unless on

* fix if server down

* fix if server down

* move to new version of overmind graphql

* refactor a tiny bit

Co-authored-by: Christian Alfoni <[email protected]>
Co-authored-by: Ives van Hoorne <[email protected]>
Co-authored-by: Sara Vieira <[email protected]>

Author: 4 people

packages/app/package.json

@@ -137,6 +137,7 @@
     "gulp-rev": "^7.1.2",
     "hash-sum": "^1.0.2",
     "http-browserify": "^1.7.0",
+    "http-proxy-middleware": "^1.0.0",
     "https-browserify": "^1.0.0",
     "humps": "CompuIves/humps",
     "ignore": "^5.1.4",
@@ -167,10 +168,10 @@
     "normalizr": "^3.2.3",
     "onigasm": "^2.2.1",
     "ot": "^0.0.15",
-    "overmind": "^23.0.0-1582285704974",
+    "overmind": "^23.0.2-1583315924305",
     "overmind-devtools": "^19.0.0",
-    "overmind-graphql": "^3.0.0-1582705151381",
-    "overmind-react": "^24.0.0-1582285704974",
+    "overmind-graphql": "^3.1.0-1583324447920",
+    "overmind-react": "^24.0.2-1583315924305",
     "phoenix": "^1.4.11",
     "postcss": "^7.0.26",
     "postcss-selector-parser": "^2.2.3",

packages/app/scripts/start.js

@@ -10,7 +10,7 @@ var historyApiFallback = require('connect-history-api-fallback');
 var execSync = require('child_process').execSync;
 var opn = require('opn');
 var http = require('http');
-var proxy = require('http-proxy-middleware');
+var { createProxyMiddleware } = require('http-proxy-middleware');
 var path = require('path');
 var httpProxy = require('http-proxy');
 const { platform } = require('os');
@@ -230,7 +230,7 @@ function addMiddleware(devServer, index) {
         credentials: true,
       })
     );
-    wsProxy = proxy({
+    wsProxy = createProxyMiddleware({
       target: PROXY_DOMAIN.replace('https', 'wss'),
       changeOrigin: true,
       ws: true,
@@ -243,7 +243,7 @@ function addMiddleware(devServer, index) {
     devServer.use('/socket', wsProxy);
     devServer.use(
       '/api',
-      proxy({
+      createProxyMiddleware({
         target: PROXY_DOMAIN,
         changeOrigin: true,
       })
@@ -252,7 +252,7 @@ function addMiddleware(devServer, index) {
   if (process.env.VSCODE) {
     devServer.use(
       ['/vscode**', '/node_modules**', '/monaco**'],
-      proxy({
+      createProxyMiddleware({
         target: 'http://localhost:8080',
         changeOrigin: true,
       })

packages/app/src/app/overmind/dependencies/overmind-graphql.ts

@@ -0,0 +1,53 @@
+import gql from 'graphql-tag';
+import { Query } from 'overmind-graphql';
+
+export const addComment: Query<any, any> = gql`
+  mutation AddComment(
+    $sandboxId: String!
+    $comment: String!
+    $username: String!
+  ) {
+    addComment(sandboxId: $sandboxId, comment: $comment, username: $username) {
+      id
+      isResolved
+      originalMessage {
+        id
+        content
+        author {
+          id
+          avatarUrl
+          username
+        }
+      }
+      replies {
+        id
+      }
+      insertedAt
+      updatedAt
+    }
+  }
+`;
+
+export const deleteComment: Query<any, any> = gql`
+  mutation DeleteComment($id: String!) {
+    deleteComment(id: $id) {
+      id
+    }
+  }
+`;
+
+export const updateComment: Query<any, any> = gql`
+  mutation UpdateComment($id: String!, $comment: String, $isResolved: Boolean) {
+    updateComment(
+      id: $id
+      data: { comment: $comment, isResolved: $isResolved }
+    ) {
+      id
+      isResolved
+      originalMessage {
+        id
+        content
+      }
+    }
+  }
+`;