Merge pull request #48 from postlight/upgrades

Upgrade dependencies

.gitignore

@@ -24,4 +24,6 @@ yarn-error.log*
 
 *~
 \#*
-.#*
+.#*
+
+src/texts/compiled.json

.node-version

@@ -0,0 +1 @@
+v16.14.0

package.json

@@ -3,7 +3,6 @@
   "version": "0.3.0",
   "private": true,
   "dependencies": {
-    "@postlight/use-search-params": "https://github.com/postlight/use-search-params.git",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
@@ -12,18 +11,18 @@
     "parsimmon": "^1.13.0",
     "prettier": "^2.0.5",
     "prismjs": "^1.20.0",
-    "raw-loader": "^4.0.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-emoji-render": "^1.2.2",
     "react-hamburger-menu": "^1.2.1",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.1"
+    "react-router-dom": "6.4.3",
+    "react-scripts": "5.0.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "compile-texts": "node ./src/compile-texts.js",
+    "start": "yarn compile-texts && react-scripts start",
+    "build": "yarn compile-texts && react-scripts build",
+    "test": "yarn compile-texts && react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

src/App.js

@@ -1,49 +1,27 @@
-import "util";
 import parse from "./smarter-text";
 import React from "react";
-import { useParams, Redirect } from "react-router-dom";
+import { useParams, Navigate } from "react-router-dom";
 
 import "./App.css";
 import Section from "./Section";
 import Nav from "./Nav";
 
-// ########################################
-// Loading text files via Webpack into a hash
-// ########################################
-
-const webpackTextLoader = require.context(
-  "!raw-loader!./texts",
-  false,
-  /\.txt$/
-);
-
-const textFiles = webpackTextLoader.keys().map((filename) => {
-  return {
-    filename,
-    text: webpackTextLoader(filename).default,
-  };
-});
-
-// Just the filenames
-function cleanFSInfo(k) {
-  const r = k.replace(/^\.\/(.+).txt$/, "$1");
-  return r;
-}
-
-const textVars = textFiles.reduce(
-  (m, t) => ({ ...m, [cleanFSInfo(t.filename)]: [...parse(t.text), t.text] }),
-  {}
+const textFiles = require('./texts/compiled.json')
+const textVars = Object.fromEntries(
+  Object
+    .entries(textFiles)
+    .map(([filename, text]) => [filename, [...parse(text), text]])
 );
 
 function App() {
   let { page } = useParams();
-  if (!textVars[page]) return <Redirect to="/soda" />;
+  if (!textVars[page]) return <Navigate to="/soda" />;
   const [ast, astState, rawText] = textVars[page];
 
   return (
     <div className="App">
       <Nav textVars={textVars} />
-      <Section ast={ast} astState={astState} rawText={rawText} page={page} />
+      <Section key={page} ast={ast} astState={astState} rawText={rawText} page={page} />
     </div>
   );
 }

src/Section.js

@@ -1,7 +1,5 @@
-import "util";
 import numeral from "numeral";
-import useSearchParams from "@postlight/use-search-params";
-import React, { useMemo, useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import Slider from "./Slider";
 import Statement from "./Statement";
 import Text from "./Text";
@@ -21,16 +19,24 @@ Prism.languages.account = {
 };
 
 function Section({ ast, astState, page, rawText }) {
-  const [viewSource, setViewSource] = useState();
-  const searchParams = useSearchParams("replace");
-  const state = useMemo(readFields, [astState, searchParams]);
+  const [viewSource, setViewSource] = useState(false);
+  const [state, setState] = useState(readFields());
+  const [historyState, setHistoryState] =
+    useState(new URLSearchParams(window.location.search).toString())
 
   function addField(k, v) {
-    searchParams.set(k, v);
+    const newState = { ...state, [k]: v }
+    const newHistoryState = new URLSearchParams(historyState)
+    newHistoryState.set(k, v)
+    setHistoryState(newHistoryState.toString())
+    window.history.replaceState({}, null, `/${page}?${newHistoryState.toString()}`)
+    setState(newState)
     return v;
   }
 
   function readFields() {
+    const searchParams = new URLSearchParams(window.location.search);
+
     return Object.fromEntries(
       Object.keys(astState).map((k) => {
         return [k, searchParams.get(k) || astState[k]];
@@ -83,10 +89,6 @@ function Section({ ast, astState, page, rawText }) {
     }
   }
 
-  useEffect(() => {
-    setViewSource(false);
-  }, [page]);
-
   useEffect(() => {
     if (viewSource) {
       Prism.highlightAll();

src/compile-texts.js

@@ -0,0 +1,17 @@
+const fs = require('fs')
+
+const TEXTS_DIR = './src/texts'
+const filenames = fs.readdirSync(TEXTS_DIR)
+
+const data = Object.fromEntries(
+  filenames
+    .filter(f => f.endsWith('.txt'))
+    .map((filename) => ([
+      filename.replace(/\.txt$/, ''),
+      fs.readFileSync(`${TEXTS_DIR}/${filename}`).toString()
+    ]))
+)
+
+fs.writeFileSync(`${TEXTS_DIR}/compiled.json`, JSON.stringify(data))
+
+console.log('Wrote src/texts/*.txt to src/texts/compiled.json')

src/index.js

@@ -4,24 +4,20 @@ import "./index.css";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
 import {
-  BrowserRouter as Router,
+  BrowserRouter,
+  Routes,
   Route,
-  Redirect,
-  Switch,
+  Navigate,
 } from "react-router-dom";
 
 ReactDOM.render(
   <React.StrictMode>
-    <Router>
-      <Switch>
-        <Route path="/:page">
-          <App />
-        </Route>
-        <Route path="/">
-          <Redirect to="/soda" />
-        </Route>
-      </Switch>
-    </Router>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/:page" element={<App />} />
+        <Route path="/" element={<Navigate to="/soda" replace />} />
+      </Routes>
+    </BrowserRouter>
   </React.StrictMode>,
   document.getElementById("root")
 );

src/smarter-text.js

@@ -176,8 +176,4 @@ function parse(text) {
   return [concatted, state];
 }
 
-// var fs = require("fs");
-// var text = fs.readFileSync("./texts/advertising.txt").toString();
-// let x = parse(text);
-
 export default parse;