move config to context to make it easier to change values at runtime

Author: dwwoelfel

src/Attribution.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import {Box, Text, Grommet} from 'grommet';
-import config from './config';
+import ConfigContext from './ConfigContext';
 
 export default function Attribution() {
-  if (config.hideAttribution) {
+  const {config: hideAttribution} = React.useContext(ConfigContext);
+  if (hideAttribution) {
     return null;
   }
   return (

src/ConfigContext.js

@@ -0,0 +1,17 @@
+// @flow
+
+import React from 'react';
+import config from './config';
+import type {Config} from './config';
+
+const ConfigContext = React.createContext<{
+  config: Config,
+  updateConfig: ($Shape<Config>) => void,
+}>({
+  config,
+  updateConfig: (config) => {
+    console.warn('updateConfig not implemented');
+  },
+});
+
+export default ConfigContext;

src/ErrorBox.js

@@ -3,9 +3,10 @@
 import React from 'react';
 import {Box, Text} from 'grommet';
 import {StatusCritical} from 'grommet-icons/icons/StatusCritical';
-import config from './config';
+import ConfigContext from './ConfigContext';
 
 const ErrorBox = ({error}: {error: any}) => {
+  const {config} = React.useContext(ConfigContext);
   console.error('error', error);
   const relayError = error?.source?.errors?.[0]?.message;
   return (

src/Head.js

@@ -2,9 +2,10 @@
 
 import React from 'react';
 import NextHead from 'next/head';
-import config from './config';
+import ConfigContext from './ConfigContext';
 
 function Head() {
+  const {config} = React.useContext(ConfigContext);
   return (
     <NextHead>
       <title>{config.title}</title>

src/Header.js

@@ -3,11 +3,12 @@ import React from 'react';
 import {Box, Heading} from 'grommet';
 import Avatar from './Avatar';
 import Link from 'next/link';
-import config from './config';
+import ConfigContext from './ConfigContext';
 import {PostBox} from './Post';
 import {useRouter} from 'next/router';
 
 function Header({gitHub, adminLinks}) {
+  const {config} = React.useContext(ConfigContext);
   const {pathname} = useRouter();
 
   return (

src/MarkdownRenderer.js

@@ -16,9 +16,9 @@ import {ResponsiveContext} from 'grommet/contexts/ResponsiveContext';
 import emoji from './emoji';
 import {fetchTokenInfo, defaultThemeColors} from './lib/codeHighlight';
 import {isPromise} from 'relay-runtime';
-import Config from './config';
 import Tippy from '@tippyjs/react';
 import {slugify} from './Post';
+import ConfigContext from './ConfigContext';
 
 import type {TokenInfo} from './lib/codeHighlight';
 import type {StatelessFunctionalComponent, Node} from 'react';
@@ -33,12 +33,10 @@ type Props = {|
   }>,
 |};
 
-class CodeBlock extends React.PureComponent<
-  {
-    value: string,
-    language: string,
-    theme: string,
-  },
+type CodeBlockProps = {|value: string, language: string, theme: string|};
+
+export class CodeBlock extends React.PureComponent<
+  CodeBlockProps,
   {
     tokenInfo: TokenInfo | Promise<TokenInfo>,
   },
@@ -51,18 +49,48 @@ class CodeBlock extends React.PureComponent<
     }),
   };
 
-  componentDidMount() {
-    const {tokenInfo} = this.state;
+  _updateTokenInfo = (tokenInfo: TokenInfo | Promise<TokenInfo>) => {
     if (isPromise(tokenInfo)) {
       tokenInfo
-        .then((res) => this.setState({tokenInfo: res}))
+        .then((res) => {
+          this.setState((prevState) => {
+            if (prevState.tokenInfo === tokenInfo) {
+              return {tokenInfo: res};
+            } else {
+              return prevState;
+            }
+          });
+        })
         .catch((e) => {
           console.error('Error fetching token info', e);
         });
     }
+  };
+
+  componentDidMount() {
+    this._updateTokenInfo(this.state.tokenInfo);
+  }
+
+  componentDidUpdate(prevProps: CodeBlockProps) {
+    if (
+      this.props.value !== prevProps.value ||
+      this.props.language !== prevProps.language ||
+      this.props.theme !== prevProps.theme
+    ) {
+      const tokenInfo = fetchTokenInfo({
+        code: this.props.value,
+        language: this.props.language,
+        theme: this.props.theme,
+      });
+      this.setState({
+        tokenInfo,
+      });
+      this._updateTokenInfo(tokenInfo);
+    }
   }
+
   render() {
-    const {language, value} = this.props;
+    const {language, value, theme} = this.props;
     const {tokenInfo} = this.state;
 
     if (!isPromise(tokenInfo)) {
@@ -105,10 +133,8 @@ class CodeBlock extends React.PureComponent<
           overflowX: 'auto',
           padding: '1em',
           borderRadius: 4,
-          color:
-            defaultThemeColors[Config.codeTheme]?.foregroundColor || '#fff',
-          background:
-            defaultThemeColors[Config.codeTheme]?.backgroundColor || '#000',
+          color: defaultThemeColors[theme]?.foregroundColor || '#fff',
+          background: defaultThemeColors[theme]?.backgroundColor || '#000',
         }}>
         <code className={`language-${language}`}>{value}</code>
       </pre>
@@ -257,6 +283,18 @@ function Link(props) {
   return <Anchor {...props} />;
 }
 
+function Code(props) {
+  const {config} = React.useContext(ConfigContext);
+  if (props.language === 'backmatter') {
+    return null;
+  }
+  return (
+    <Box margin={{vertical: 'small'}}>
+      <CodeBlock theme={config.codeTheme} {...props} />
+    </Box>
+  );
+}
+
 function flatten(text, child) {
   return typeof child === 'string'
     ? text + child
@@ -305,16 +343,7 @@ const defaultRenderers = ({
         </code>
       );
     },
-    code(props) {
-      if (props.language === 'backmatter') {
-        return null;
-      }
-      return (
-        <Box margin={{vertical: 'small'}}>
-          <CodeBlock theme={Config.codeTheme} {...props} />
-        </Box>
-      );
-    },
+    code: Code,
     image: Image,
     paragraph: ParagraphWrapper,
     heading(props) {

src/PostRoot.js

@@ -10,7 +10,7 @@ import Comments from './Comments';
 import Post from './Post';
 import ErrorBox from './ErrorBox';
 import Head from 'next/head';
-import config from './config';
+import ConfigContext from './ConfigContext';
 import Attribution from './Attribution';
 import parseMarkdown from './lib/parseMarkdown';
 import {useRouter} from 'next/router';
@@ -93,6 +93,7 @@ function buildDescription(body) {
 }
 
 export const PostRoot = ({issueNumber}: {issueNumber: number}) => {
+  const {config} = React.useContext(ConfigContext);
   const {basePath} = useRouter();
   const data: ?PostRoot_PostQueryResponse = useLazyLoadQuery<PostRoot_PostQuery>(
     query,

src/Posts.js

@@ -9,7 +9,6 @@ import LoadingSpinner from './loadingSpinner';
 import {Box} from 'grommet/components/Box';
 import {useInView} from 'react-intersection-observer';
 import Welcome from './Welcome';
-import config from './config';
 import 'intersection-observer';
 
 type Props = {|

src/Welcome.js

@@ -3,10 +3,11 @@
 import React from 'react';
 import {PostBox} from './Post';
 import {Box, Heading} from 'grommet';
-import config from './config';
+import ConfigContext from './ConfigContext';
 import {newIssueUrl} from './issueUrls';
 
 export default function Welcome() {
+  const {config} = React.useContext(ConfigContext);
   return (
     <PostBox key="intro">
       <Box pad="medium">

src/lib/codeHighlight.js

@@ -1,7 +1,6 @@
 // @flow
 
 import parseMarkdown from './parseMarkdown';
-import Config from '../config';
 
 type Tokens = Array<{
   text: string,
@@ -118,15 +117,18 @@ function findCodeNodes(roots: Array<any>) {
 
 export async function tokenInfosFromMarkdowns({
   markdowns,
+  theme,
 }: {
   markdowns: Array<string>,
-}): Array<{
-  code: string,
-  language: ?string,
   theme: string,
-  tokenInfo: TokenInfo,
-}> {
-  const theme = Config.codeTheme;
+}): Promise<
+  Array<{
+    code: string,
+    language: ?string,
+    theme: string,
+    tokenInfo: TokenInfo,
+  }>,
+> {
   const nodes = findCodeNodes(markdowns.map(parseMarkdown));
   return await Promise.all(
     nodes.map(async (node) => {