Merge pull request #7 from crypto-stats/ri/feature/subgraph-editor

Ri/feature/subgraph editor

Author: dmihal

components/CodeEditor.tsx

@@ -11,6 +11,7 @@ interface EditorProps {
   defaultValue: string
   fileId: string
   onMount?: (editor: any, monaco: any) => void
+  defaultLanguage?: 'typescript' | 'graphql'
 }
 
 const Editor: React.FC<EditorProps> = ({
@@ -19,6 +20,7 @@ const Editor: React.FC<EditorProps> = ({
   defaultValue,
   fileId,
   onMount,
+  defaultLanguage = 'typescript',
 }) => {
   const code = useRef(defaultValue)
   const monaco = useMonaco()
@@ -64,12 +66,13 @@ const Editor: React.FC<EditorProps> = ({
   return (
     <MonacoEditor
       theme="vs-dark"
-      defaultLanguage="typescript"
+      defaultLanguage={defaultLanguage}
       defaultValue={defaultValue}
       path={fileId}
       options={{
         tabSize: 2,
         insertSpaces: true,
+        minimap: { enabled: false },
       }}
       onMount={(editor: any) => {
         if (onMount) {

components/SubgraphEditor/BottomTitleBar.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Top } from 'react-spaces'
+import CloseIcon from 'components/CloseIcon'
+import { useConsole } from 'hooks/console'
+
+const Header = styled(Top)`
+  background: #2f2f2f;
+  border-bottom: solid 1px #4a4a4d;
+  border-top: solid 1px #4a4a4d;
+  display: flex;
+  padding: 0 4px;
+  align-items: center;
+  justify-content: space-between;
+  color: #ffffff;
+`
+
+const CloseButton = styled.button`
+  border: none;
+  background: transparent;
+  margin-left: 10px;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+
+  & svg {
+    fill: #888888;
+  }
+  &:hover svg {
+    fill: #666666;
+  }
+`
+
+const ClearButton = styled.button`
+  height: 20px;
+  padding: 3px 0 2px;
+  border-radius: 4px;
+  border: solid 1px #ffffff;
+  background-color: transparent;
+  margin: 16px 0 6px;
+  color: white;
+  padding: 2px 16px;
+  margin-left: 8px;
+
+  &:hover {
+    background: #363636;
+  }
+`
+
+export enum BottomView {
+  NONE,
+  ERRORS,
+  CONSOLE,
+}
+
+interface BottomTitleBarProps {
+  view: BottomView
+  onSetView: (newView: BottomView) => void
+}
+
+const BottomTitleBar: React.FC<BottomTitleBarProps> = ({ view, onSetView }) => {
+  const { clear: clearConsole } = useConsole()
+
+  return (
+    <Header size={40}>
+      <div>
+        {view === BottomView.ERRORS ? 'Errors' : 'Console'}
+        {view === BottomView.CONSOLE && <ClearButton onClick={clearConsole}>Clear</ClearButton>}
+      </div>
+
+      <CloseButton onClick={() => onSetView(BottomView.NONE)}>
+        <CloseIcon />
+      </CloseButton>
+    </Header>
+  )
+}
+
+export default BottomTitleBar

components/SubgraphEditor/Console.tsx

@@ -0,0 +1,41 @@
+import React, { useLayoutEffect, useRef } from 'react'
+import styled from 'styled-components'
+import { Fill } from 'react-spaces'
+import { useConsole, Line } from 'hooks/console'
+import { LOG_LEVEL } from '@cryptostats/sdk'
+
+const ConsoleView = styled(Fill)`
+  padding: 8px;
+  color: #ffffff;
+  font-size: 12px;
+`
+
+const ConsoleLine = styled.div<{ level: string }>`
+  font-family: monospace;
+  white-space: pre-wrap;
+  word-break: break-all;
+
+  ${({ level }) => (level === LOG_LEVEL.ERROR.toString() ? 'color: red;' : '')}
+`
+
+const Console: React.FC = () => {
+  const { lines } = useConsole()
+  const bottomRef = useRef<any>(null)
+
+  useLayoutEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [bottomRef.current, lines])
+
+  return (
+    <ConsoleView scrollable={true}>
+      {lines.map((line: Line, i: number) => (
+        <ConsoleLine key={i} level={line.level}>
+          {line.value}
+        </ConsoleLine>
+      ))}
+      <div ref={bottomRef} />
+    </ConsoleView>
+  )
+}
+
+export default Console