Move state out of CodeImage

7 years ago · 0bf01d6fbe
parent eb75ecd320
commit 0bf01d6fbe
2 changed files with 31 additions and 45 deletions
--- a/components/codeImage.js
+++ b/components/codeImage.js
@ -19,56 +19,40 @@ const DEFAULT_SETTINGS = {
  language: 'javascript'
 }

-class CodeImage extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      code: this.props.children
-    }
+const CodeImage = (props) => {
+  const config = Object.assign(DEFAULT_SETTINGS, props.config)
+
+  const options = {
+    lineNumbers: false,
+    mode: config.language,
+    theme: config.theme,
+    scrollBarStyle: null,
+    viewportMargin: Infinity,
+    lineWrapping: true
  }

-  updateCode (newCode) {
-    this.setState({ code: newCode })
+  // create styles
+  const containerStyle = {
+    background: config.background,
+    padding: `${config.paddingVertical} ${config.paddingHorizontal}`
  }

-  render () {
-    const config = Object.assign(DEFAULT_SETTINGS, this.props.config)
-
-    const options = { 
-      lineNumbers: false,
-      mode: config.language, 
-      theme: config.theme, 
-      scrollBarStyle: null, 
-      viewportMargin: Infinity,
-      lineWrapping: true
-    }
-    
-    // create styles
-    const containerStyle = {
-      background: config.background,
-      padding: `${config.paddingVertical} ${config.paddingHorizontal}`
-    }
-
-    return (
-      <div id='section'>
-        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.min.css'/>
-        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/theme/dracula.min.css'/>
-        <div id='container' style={containerStyle}>
-          { true ? <WindowControls /> : null }
-          <CodeMirror className="CodeMirrorContainer" value={this.state.code} onChange={this.updateCode} options={options} />
-        </div>
-        <style jsx>{`
-          #section {
-            height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
-        `}</style>
+  return (
+    <div id="section">
+      <div id="container" style={containerStyle}>
+        { true ? <WindowControls /> : null }
+        <CodeMirror className="CodeMirrorContainer" value={props.children} options={options} />
      </div>
-    )
-  }
+      <style jsx>{`
+        #section {
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      `}</style>
+    </div>
+  )
 }

 export default CodeImage
--- a/components/meta.js
+++ b/components/meta.js
@ -3,6 +3,8 @@ import Head from 'next/head'
 export default () => (
  <div>
    <Head>
+      <link rel="stylesheet" href='//cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.min.css' />
+      <link rel="stylesheet" href='//cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/theme/dracula.min.css'/>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta charSet="utf-8" />
      <link rel="shortcut icon" href="/static/favicon.ico" />