Better www

Author: tannerlinsley

.babelrc

@@ -7,5 +7,5 @@
       }
     ],
     "@babel/react"
-  ]
+  ],
 }

src/components/Chart.js

@@ -100,24 +100,24 @@ export default function Chart({
 
   getSeriesID = React.useCallback(
     Utils.normalizeGetter(getSeriesID),
-    getSeriesID
+    [getSeriesID]
   );
-  getLabel = React.useCallback(Utils.normalizeGetter(getLabel), getLabel);
+  getLabel = React.useCallback(Utils.normalizeGetter(getLabel), [getLabel]);
   getPrimaryAxisID = React.useCallback(
     Utils.normalizeGetter(getPrimaryAxisID),
-    getPrimaryAxisID
+    [getPrimaryAxisID]
   );
   getSecondaryAxisID = React.useCallback(
     Utils.normalizeGetter(getSecondaryAxisID),
-    getSecondaryAxisID
+    [getSecondaryAxisID]
   );
-  getDatums = React.useCallback(Utils.normalizeGetter(getDatums), getDatums);
-  getPrimary = React.useCallback(Utils.normalizeGetter(getPrimary), getPrimary);
+  getDatums = React.useCallback(Utils.normalizeGetter(getDatums), [getDatums]);
+  getPrimary = React.useCallback(Utils.normalizeGetter(getPrimary), [getPrimary]);
   getSecondary = React.useCallback(
     Utils.normalizeGetter(getSecondary),
-    getSecondary
+    [getSecondary]
   );
-  getR = React.useCallback(Utils.normalizeGetter(getR), getR);
+  getR = React.useCallback(Utils.normalizeGetter(getR), [getR]);
 
   let materializedData = calculateMaterializeData({
     data,

www/.babelrc

@@ -1,4 +1,4 @@
 {
   "presets": ["next/babel"],
-  // "plugins": [["styled-components", { "ssr": true }]]
+  "plugins": ["source", "styled-components"]
 }

www/next.config.js

@@ -33,8 +33,7 @@ Module.prototype.require = function(modulePath) {
 }
 
 const baseConfig = {
-  // target: 'serverless',
-  // distDir: '../.next',
+  target: 'serverless',
   pageExtensions: ['js', 'jsx'],
   webpack(config) {
     config.resolve.modules = [...config.resolve.modules, path.resolve('./src')]

www/package.json

@@ -21,6 +21,8 @@
   "devDependencies": {
     "@zeit/next-css": "^1.0.1",
     "babel-eslint": "10.0.3",
+    "babel-plugin-source": "^0.0.6",
+    "babel-plugin-styled-components": "^1.10.6",
     "eslint": "6.6.0",
     "eslint-plugin-flowtype": "4.4.1",
     "eslint-plugin-import": "2.18.2",

www/pages/__document.js renamed to www/pages/_document.js

@@ -5,10 +5,10 @@ import React from 'react'
 
 import useChartConfig from 'hooks/useChartConfig'
 import Box from 'components/Box'
-// import SyntaxHighlighter from 'components/SyntaxHighlighter'
+import SyntaxHighlighter from 'components/SyntaxHighlighter'
 import { Chart } from 'react-charts'
 
-// let sourceCode
+let sourceCode
 
 export default function Line () {
   const { data, randomizeData } = useChartConfig({
@@ -39,7 +39,7 @@ export default function Line () {
         <Chart data={data} series={series} axes={axes} tooltip />
       </Box>
       <br />
-      {/* <SyntaxHighlighter code={sourceCode} /> */}
+      <SyntaxHighlighter code={sourceCode} />
     </>
   )
 }

www/pages/examples/line.js

@@ -244,57 +244,45 @@ const Menu = ({ items }) => (
   </div>
 )
 
-class Sidebar extends React.Component {
-  state = {
-    isOpen: false
-  }
-  toggle = isOpen =>
-    this.setState({
-      isOpen
-    })
-  render() {
-    const { children } = this.props
-    const { isOpen } = this.state
-    
-    return (
-      <SidebarStyles className="sidebar" isOpen={isOpen}>
-        <ClickOutside
-          onClickOutside={
-            isOpen
-              ? () => {
-                  this.setState({
-                    isOpen: false
-                  })
-                }
-              : undefined
-          }
-        >
-          <div className="sidebar">
-            <button
-              className="toggle"
-              onClick={() => {
-                this.toggle(!isOpen)
-              }}
-            >
-              ⇤
-            </button>
-            <div className="header">
-              <span className="link">
-                <a href="https://github.com/react-tools/react-charts">
-                  React Charts
-                </a>
-              </span>
-              <div className="version" />
-            </div>
-            <div className="scroll">
-              <Menu items={menuItems} />
-            </div>
+export default function Sidebar ({ children }) {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  const toggle = () => setIsOpen(old => !old)
+
+  return (
+    <SidebarStyles className="sidebar" isOpen={isOpen}>
+      <ClickOutside
+        onClickOutside={
+          isOpen
+            ? () => {
+                this.setState({
+                  isOpen: false
+                })
+              }
+            : undefined
+        }
+      >
+        <div className="sidebar">
+          <button
+            className="toggle"
+            onClick={toggle}
+          >
+            ⇤
+          </button>
+          <div className="header">
+            <span className="link">
+              <a href="https://github.com/react-tools/react-charts">
+                React Charts
+              </a>
+            </span>
+            <div className="version" />
           </div>
-        </ClickOutside>
-        <div className="content">{children}</div>
-      </SidebarStyles>
-    )
-  }
+          <div className="scroll">
+            <Menu items={menuItems} />
+          </div>
+        </div>
+      </ClickOutside>
+      <div className="content">{children}</div>
+    </SidebarStyles>
+  )
 }
-
-export default Sidebar