Skip to content

Commit 4bebd49

Browse files
ehenomaehenoma
committed
Improve output
1 parent 2c74e88 commit 4bebd49

18 files changed

Lines changed: 261 additions & 163 deletions

‎website/public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<meta name="theme-color" content="#000000" />
88
<meta
99
name="description"
10-
content="Web site created using create-react-app"
10+
content="Run Java Snippets in your Browser"
1111
/>
1212
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1313
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

‎website/src/App.css‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎website/src/App.tsx‎

Lines changed: 7 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,19 @@
11
import React from 'react'
22
import './antd.css'
3-
import {Button, Layout, Menu, Space} from 'antd'
4-
import {Content, Header} from 'antd/lib/layout/layout'
5-
import * as icons from '@ant-design/icons'
6-
import styled from 'styled-components'
3+
import {Layout} from 'antd'
4+
import {Content} from 'antd/lib/layout/layout'
75
import Sheet from "./sheet/snippet/Sheet";
8-
import {useTranslation} from 'react-i18next'
9-
import Client, {EvaluationListener} from "./client";
10-
import {
11-
EvaluationError, EvaluationResult,
12-
MissingSources, StartEvaluationRequest
13-
} from "@jsheets/protocol/src/jsheets/api/snippet_runtime_pb";
14-
import {SheetSnippetComponentOutput} from "./sheet";
15-
import {useDispatch} from "react-redux";
16-
import {reportOutput} from "./sheet/state";
17-
18-
const Logo = styled.span`
19-
span:first-child {
20-
color: #00758f;
21-
}
22-
23-
span:last-child {
24-
color: #f29110;
25-
}
26-
27-
font-size: 30px;
28-
font-weight: bolder;
29-
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;
30-
`
31-
32-
const StyledHeader = styled(Header)`
33-
box-shadow: 0 5px 5px 0 rgb(230 230 230 / 90%);
34-
35-
.ant-menu-horizontal {
36-
border-bottom: none;
37-
}
38-
`
6+
import useEvaluate from "./sheet/useEvaluate";
7+
import Header from "./header/Header";
398

409
export default function App() {
41-
const {t} = useTranslation()
42-
const evaluator = useEvaluator()
10+
const [evaluate, evaluating] = useEvaluate()
4311
return (
4412
<Layout>
45-
<StyledHeader style={{background: '#fff'}} className="header">
46-
<Menu theme="light" style={{marginRight: 'auto'}} mode="horizontal" defaultSelectedKeys={['2']}>
47-
<Logo><span>Java</span><span>Sheets</span></Logo>
48-
<Space style={{marginLeft: 'auto'}} size="middle">
49-
<Button type="primary" ghost icon={<icons.ShareAltOutlined/>}>{t('menu.share')}</Button>
50-
</Space>
51-
</Menu>
52-
</StyledHeader>
13+
<Header/>
5314
<Content style={{padding: 50}}>
54-
<Sheet onRun={evaluator}/>
15+
<Sheet running={evaluating} onRun={evaluate}/>
5516
</Content>
5617
</Layout>
5718
)
58-
}
59-
60-
function useEvaluator() {
61-
const client = Client.create()
62-
const dispatch = useDispatch()
63-
return (start: StartEvaluationRequest) => {
64-
console.log({start: start.toObject()})
65-
client.evaluate(
66-
start,
67-
new Listener((componentId, output) =>
68-
dispatch(reportOutput({componentId, output})))
69-
)
70-
}
71-
}
72-
73-
type ReportOutput = (componentId: string, output: SheetSnippetComponentOutput) => void
74-
75-
class Listener implements EvaluationListener {
76-
constructor(private readonly reportOutput: ReportOutput) {}
77-
78-
onEnd(): void {}
79-
80-
onError = (error: EvaluationError) => {
81-
console.log({error})
82-
this.reportOutput(error.getComponentId(), {
83-
span: {
84-
start: error.getSpan()?.getStart() || 0,
85-
end: error.getSpan()?.getEnd() || 0
86-
},
87-
code: error.getKind(),
88-
message: error.getMessage()
89-
})
90-
}
91-
92-
onMissingSources(sources: MissingSources): void {
93-
console.log({sources: sources.toObject()})
94-
}
95-
96-
onResult = (result: EvaluationResult) => {
97-
console.log({result})
98-
this.reportOutput(result.getComponentId(), {
99-
type: result.getKind() === 1 ? 'info' : 'error',
100-
message: result.getOutput()
101-
})
102-
}
10319
}

‎website/src/header/Header.style.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import styled from "styled-components";
2+
import {Header as AntdHeader} from "antd/lib/layout/layout";
3+
import {Menu as AntdMenu} from "antd";
4+
5+
export const Header = styled(AntdHeader)`
6+
box-shadow: 0 5px 5px 0 rgb(230 230 230 / 90%);
7+
background: #fff;
8+
.ant-menu-horizontal {
9+
border-bottom: none;
10+
}
11+
`
12+
13+
export const Menu = styled(AntdMenu)`
14+
margin-right: auto;
15+
`

‎website/src/header/Header.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import {Button, Space} from "antd";
2+
import {Logo} from "./Logo";
3+
import * as icons from "@ant-design/icons";
4+
import React from "react";
5+
import * as Styled from './Header.style'
6+
import {useTranslation} from "react-i18next";
7+
8+
export default function Header() {
9+
const {t} = useTranslation()
10+
return (
11+
<Styled.Header className="header">
12+
<Styled.Menu theme="light" mode="horizontal" defaultSelectedKeys={['2']}>
13+
<Logo/>
14+
<Space style={{marginLeft: 'auto'}} size="middle">
15+
<Button type="primary" ghost icon={<icons.ShareAltOutlined/>}>{t('menu.share')}</Button>
16+
</Space>
17+
</Styled.Menu>
18+
</Styled.Header>
19+
)
20+
}

‎website/src/header/Logo.style.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import styled from "styled-components";
2+
3+
export const Logo = styled.span`
4+
span:first-child {
5+
color: #00758f;
6+
}
7+
8+
span:last-child {
9+
color: #f29110;
10+
}
11+
12+
font-size: 30px;
13+
font-weight: bolder;
14+
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;
15+
`

‎website/src/header/Logo.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from "react";
2+
3+
import * as Styled from './Logo.style'
4+
5+
export const Logo: React.FC = () => (
6+
<Styled.Logo>
7+
<span>Java</span>
8+
<span>Sheets</span>
9+
</Styled.Logo>
10+
)

‎website/src/setupTests.ts‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎website/src/sheet/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export interface SheetSnippetComponent {
1717
order: number
1818
type: 'code' | 'text'
1919
content: string
20-
output?: SheetSnippetComponentOutput
20+
output?: SheetSnippetComponentOutput[]
2121
}
2222

2323
export type SheetSnippetComponentOutput = ErrorOutput | MessageOutput

‎website/src/sheet/snippet/Sheet.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ const newSnippetTemplate: () => Partial<SheetSnippet> = () => ({
4141
})
4242

4343
export interface SheetProperties {
44+
running?: boolean
4445
onRun: (request: StartEvaluationRequest) => void
4546
}
4647

@@ -72,6 +73,7 @@ export default function Sheet(properties: SheetProperties) {
7273
>
7374
<MemoizedSnippet
7475
key={snippet.id}
76+
running={properties.running}
7577
sheetId={sheet.id}
7678
onRun={properties.onRun}
7779
dragHandleProps={draggable.dragHandleProps}

0 commit comments

Comments
 (0)