ehenoma · Sep 29, 2021 · Sep 29, 2021 · Sep 29, 2021
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
@@ -1,7 +1,7 @@
 version: '3.7'
 services:
   server:
-    image: ehenoma/jsheets:latest
+    image: ehenoma/jsheets:dev
     build:
       # Make sure to run 'gradle copyDependencies' before building
       dockerfile: server/deploy/Dockerfile

diff --git a/website/.gitignore b/website/.gitignore
@@ -23,5 +23,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-website/src/editor/java/parser.js
-website/src/editor/java/parser.terms.js
+parser.js
+parser.terms.js
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -17,6 +17,7 @@
     "@types/react-router-dom": "^5.3.0",
     "@types/uuid": "^8.3.1",
     "antd": "^4.16.13",
+    "copy-to-clipboard": "^3.3.1",
     "google-protobuf": "^3.18.0",
     "i18next": "^20.6.1",
     "install": "^0.13.0",

diff --git a/website/src/App.tsx b/website/src/App.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import React, {useCallback, useState} from 'react'
 import {Layout} from 'antd'
 import {Content} from 'antd/lib/layout/layout'
 import Sheet from './sheet/Sheet'
@@ -11,16 +11,28 @@ import {
 } from 'react-router-dom'
 import {useShare} from './sheet/useShare'
 import ImportedSheet from './sheet/ImportedSheet'
+import ShareModal from './sheet/ShareModal'
 
 export default function App() {
   const [evaluate, evaluating] = useEvaluate()
   const history = useHistory()
-  const callback = useCallback(created => history.push(`/s/${created.id}`), [history])
+  const [sharedId, setSharedId] = useState('')
+  const [shareVisible, setShareVisible] = useState(false)
+  const callback = useCallback(created => {
+    history.push(`/s/${created.id}`)
+    setShareVisible(true)
+    setSharedId(created.id)
+  }, [history])
   const [share, captureSnippet] = useShare(callback)
   return (
     <Layout>
       <Header onShare={share}/>
       <Content style={{padding: '0 50px 50px 50px'}}>
+          <ShareModal
+            visible={shareVisible}
+            onVisibilityChange={setShareVisible}
+            sheetId={sharedId}
+          />
           <Switch>
             <Route path="/s/:sheetId">
               <ImportedSheet

diff --git a/website/src/client/index.ts b/website/src/client/index.ts
@@ -8,7 +8,7 @@ import {
   EvaluateRequest
 } from "@jsheets/protocol/src/jsheets/api/snippet_runtime_pb";
 import * as SheetProtocol from "@jsheets/protocol/src/jsheets/api/sheet_pb";
-import {Sheet} from '../sheet'
+import {ComponentState, SheetState, SnippetState} from '../sheet'
 
 export interface EvaluationListener {
   onEnd(): void
@@ -108,7 +108,7 @@ class WebSocketEvaluation implements Evaluation {
 export class SheetClient {
   constructor(private readonly baseUrl: string) { }
 
-  async find(id: string): Promise<Sheet> {
+  async find(id: string): Promise<SheetState> {
     const call = await fetch(`${this.baseUrl}/api/v1/sheets/${id}`)
     if (call.ok) {
       const body = await call.json()
@@ -117,7 +117,7 @@ export class SheetClient {
     throw new Error(`${call.status}`)
   }
 
-  async post(snippet: Partial<SheetProtocol.Sheet.AsObject>): Promise<Sheet> {
+  async post(snippet: Partial<SheetProtocol.Sheet.AsObject>): Promise<SheetState> {
     convertRequest(snippet)
     const call = await fetch(`${this.baseUrl}/api/v1/sheets`, {
       method: 'POST',
@@ -131,28 +131,34 @@ export class SheetClient {
   }
 }
 
-function createSheetFromResponse(response: Record<string, any>): Sheet {
+function createSheetFromResponse(response: Record<string, any>): SheetState {
   convertResponse(response)
   const message = response as SheetProtocol.Sheet.AsObject
+  const snippets: Record<string, SnippetState> = {}
+  for (const snippet of message.snippetsList) {
+    const components: Record<string, ComponentState> = {}
+    for (const component of snippet.componentsList) {
+      const kind = (component.kind as unknown) as string
+      components[component.id] = {
+        id: component.id,
+        order: component.order,
+        type: kind.toLowerCase() === "code" ? "code" : "text",
+        content: component.content
+      }
+    }
+    snippets[snippet.id] = {
+      id: snippet.id,
+      order: snippet.order,
+      title: snippet.name,
+      components
+    }
+  }
   return {
     id: message.id,
     title: message.title,
     description: message.description,
-    snippets: message.snippetsList.map(snippet => ({
-      id: snippet.id,
-      order: snippet.order,
-      title: snippet.name,
-      components: snippet.componentsList.map(component => {
-        const kind = (component.kind as unknown) as string
-        return {
-          id: component.id,
-          order: component.order,
-          type: kind.toLowerCase(),
-          content: component.content
-        }
-      })
-    }))
-  } as Sheet
+    snippets: snippets
+  } as SheetState
 }
 
 function convertResponse(object: Record<string, any>) {

diff --git a/website/src/editor/java/language.ts b/website/src/editor/java/language.ts
@@ -10,7 +10,7 @@ import {
 import {styleTags, Tag, tags as t} from "@codemirror/highlight"
 
 // Make sure that the code is generated (npm run build-grammar)
-import {parser} from "./parser";
+import {parser} from "./parser"
 
 export const customTags = {
   call: Tag.define(),

diff --git a/website/src/editor/java/parser.js b/website/src/editor/java/parser.js
diff --git a/website/src/editor/java/parser.terms.js b/website/src/editor/java/parser.terms.js
diff --git a/website/src/header/Logo.style.ts b/website/src/header/Logo.style.ts
@@ -9,6 +9,7 @@ export const Logo = styled.span`
     color: #f29110;
   }
 
+  cursor: pointer;
   font-size: 30px;
   font-weight: bolder;
   font-family: 'Titillium Web', Roboto, 'Helvetica Neue', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;

diff --git a/website/src/header/Logo.tsx b/website/src/header/Logo.tsx
@@ -1,10 +1,14 @@
 import React from "react";
 
 import * as Styled from './Logo.style'
+import {useHistory} from 'react-router-dom'
 
-export const Logo: React.FC = () => (
-  <Styled.Logo>
-    <span>Java</span>
-    <span>Sheets</span>
-  </Styled.Logo>
-)
+export function Logo() {
+  const history = useHistory()
+  return (
+    <Styled.Logo onClick={() => history.push('/')}>
+      <span>Java</span>
+      <span>Sheets</span>
+    </Styled.Logo>
+  )
+}
diff --git a/website/src/sheet/ImportedSheet.tsx b/website/src/sheet/ImportedSheet.tsx
@@ -6,6 +6,8 @@ import {useSheet} from './useSheet'
 import Client from '../client'
 import styled from 'styled-components'
 import {LoadingOutlined} from '@ant-design/icons'
+import {Empty} from 'antd'
+import themed from '../theme/themed'
 
 interface ImportedSheetProperties {
   evaluating?: boolean
@@ -29,9 +31,9 @@ export default function ImportedSheet(properties: ImportedSheetProperties) {
         update(sheet)
         setLoading(false)
       }).catch(error => {
-      setLoading(false)
-      setError(error)
-    })
+        setLoading(false)
+        setError(error)
+      })
   }, [sheetId])
 
   if (loading) {
@@ -44,12 +46,54 @@ export default function ImportedSheet(properties: ImportedSheetProperties) {
 
 const Centered = styled.div`
   margin: auto;
+  display: flex;
+`
+
+const ErrorBox = styled.div`
+  margin: 50px auto auto auto;
+  background: ${themed('snippet.card.background')};
+  border-radius: 5px;
+  padding: 20px;
+  max-width: 300px;
+  pre {
+    margin: 0;
+    width: 100%;
+  }
+  code {
+    background: ${themed('snippet.card.icon.background')};
+    width: 100%;
+    padding: 10px;
+  }
 `
 
 const Failed = ({error}: {error: any}) => (
-  <Centered>{JSON.stringify(error)}</Centered>
+  <Centered>
+    <ErrorBox>
+      <Empty
+        description="Could not find the sheet"
+      >
+        <pre>
+          <code>{JSON.stringify(error)}</code>
+        </pre>
+      </Empty>
+    </ErrorBox>
+  </Centered>
 )
 
+const LoadingBox = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  .anticon {
+    font-size: 20px;
+  }
+`
+
 const Loading = () => (
-  <Centered><LoadingOutlined/></Centered>
+  <Centered>
+    <LoadingBox>
+      <LoadingOutlined/>
+    </LoadingBox>
+  </Centered>
+
 )
diff --git a/website/src/sheet/ShareModal.style.ts b/website/src/sheet/ShareModal.style.ts
@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+import {Input, Modal} from 'antd'
+
+export const ShareModal = styled(Modal)`
+  .ant-modal-footer {
+    display: none;
+  }
+`
+
+export const LinkText = styled(Input)`
+  font-family: "JetBrains Mono", Menlo, Monaco, source-code-pro, Consolas, monospace;
+`