Refactor editing a definition/statement + edit and save all at once

Author: mrkvon

src/components/Layout.tsx

@@ -6,6 +6,8 @@ import About from './About'
 import ControlPanel from '../features/control/ControlPanel'
 import Search from '../features/search/Search'
 import Info from '../features/info/Info'
+import Statement from '../features/math/statement/Statement'
+import InfoContainer from '../features/math/InfoContainer'
 
 const PositionedAbout = styled(About)`
   position: fixed;
@@ -37,6 +39,12 @@ const TopNav = styled.nav`
   padding: 1rem;
 `
 
+const PositionedStatement = () => (
+  <InfoContainer>
+    <Statement />
+  </InfoContainer>
+)
+
 const Layout: React.FC = () => {
   return (
     <>
@@ -58,6 +66,8 @@ const Layout: React.FC = () => {
 
       <PositionedInfo />
 
+      <PositionedStatement />
+
       <FullSizeVisualization />
     </>
   )

src/features/math/Statement.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import Math from '../Math'
+import { GraphNode } from '../types'
+
+export const NodeDescription = ({ node }: { node: GraphNode }) => (
+  <Math>{node.description.en}</Math>
+)
+
+export const NodeDescriptionEdit = ({
+  value,
+  onChange,
+}: {
+  value: string
+  onChange: (value: string) => void
+}) => {
+  return (
+    <>
+      <span className="has-text-grey is-size-7">
+        You can use{' '}
+        <a href="https://www.markdownguide.org/basic-syntax/">Markdown</a> and{' '}
+        <a href="http://asciimath.org/">AsciiMath</a> (use $inline math$ and
+        $$multiline math$$).
+      </span>
+      <textarea
+        className="textarea"
+        placeholder="description"
+        value={value}
+        onChange={e => onChange(e.target.value)}
+      />
+      <Math>{value}</Math>
+    </>
+  )
+}

src/features/math/statement/NodeDescription.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+interface EditProps {
+  value: string
+  onChange: (label: string) => void
+}
+
+export const NodeLabelEdit = ({ value, onChange }: EditProps) => {
+  return (
+    <input
+      className="input is-small"
+      type="text"
+      placeholder="label"
+      value={value}
+      onChange={e => onChange(e.target.value)}
+      size={10}
+    />
+  )
+}
+
+export const NodeLabel = ({ uri, label }: { uri: string; label: string }) => (
+  <a href={uri}>{label}</a>
+)