Add import and export

src/Board.tsx

@@ -102,6 +102,36 @@ class Board extends React.Component<{}, State> {
     this.setState({ grid });
   };
 
+  download = () => {
+    const state = JSON.stringify(this.state);
+    const element = document.createElement('a');
+    const file = new Blob([state], { type: 'text/plain' });
+    element.href = URL.createObjectURL(file);
+    element.download = 'export.json';
+    document.body.appendChild(element);
+    element.click();
+  };
+
+  upload = () => {
+    if (
+      window.confirm('This will replace any changes you have made. Continue?')
+    ) {
+      const element = document.createElement('input');
+      element.type = 'file';
+      element.click();
+      element.addEventListener('change', (e) => {
+        const files = (e.currentTarget as HTMLInputElement).files;
+        if (files && files.length > 0) {
+          const file = files[0];
+          file.text().then((text) => {
+            const newState = JSON.parse(text);
+            this.setState(newState);
+          });
+        }
+      });
+    }
+  };
+
   render() {
     const { grid, running, speed, width, height, cellSize } = this.state;
 
@@ -117,6 +147,8 @@ class Board extends React.Component<{}, State> {
           updateDimensions={this.updateDimensions}
           updateSpeed={this.updateSpeed}
           reset={this.reset}
+          download={this.download}
+          upload={this.upload}
         />
         <div className="board-container">
           <div className="board">

src/Controls.tsx

@@ -7,9 +7,11 @@ interface Props {
   height: number;
   reset: () => void;
   toggle: () => void;
+  download: () => void;
   updateCellSize: (f: (size: number) => number) => void;
   updateDimensions: (dimensions: { width?: number; height?: number }) => void;
   updateSpeed: (speed: number) => void;
+  upload: () => void;
 }
 
 const Controls = (props: Props) => {
@@ -23,6 +25,8 @@ const Controls = (props: Props) => {
     reset,
     updateCellSize,
     updateDimensions,
+    download,
+    upload,
   } = props;
 
   const goSlower = () => {
@@ -93,6 +97,18 @@ const Controls = (props: Props) => {
           Bigger
         </button>
       </div>
+      <div className="controls__section import-export">
+        <div className="upload">
+          <button className="button" onClick={upload}>
+            Import
+          </button>
+        </div>
+        <div className="download">
+          <button className="button" onClick={download}>
+            Export
+          </button>
+        </div>
+      </div>
       <div className="controls__section play-reset">
         <div className="reset">
           <button className="button" onClick={reset}>

src/index.css

@@ -75,7 +75,7 @@ code {
   border: 1px solid white;
   color: white;
   cursor: pointer;
-  font-size: 18px;
+  font-size: 16px;
   margin-right: 1em;
   padding: 0.25em 0.5em;
 }
@@ -88,6 +88,8 @@ code {
 .controls__section {
   align-items: center;
   display: flex;
+  flex: 1;
+  justify-content: center;
   margin: 0.5em 0;
 }
 
@@ -95,7 +97,6 @@ code {
 .speed {
   align-items: center;
   display: flex;
-  flex: 1;
   justify-content: center;
 }
 
@@ -139,6 +140,5 @@ code {
 }
 
 .play-reset {
-  flex: 1;
   justify-content: flex-end;
 }