feat: upload

Author: andrmaz

public/population_state_10x10_35.txt renamed to public/population_state_10x10_36.txt

@@ -1,4 +1,4 @@
-Generation 35:
+Generation 36:
 10 10
 . . . * * . . . . * 
 . . * . * . . * . .

public/population_state_5x11_20.txt renamed to public/population_state_11x5_20.txt

@@ -1,5 +1,5 @@
 Generation 20:
-5 11
+11 5
 . * . * .  
 . . * . * 
 * . * . *  

src/App.tsx

@@ -2,9 +2,8 @@ import * as React from 'react'
 
 import {Grid} from './components/Grid'
 import {Cell} from './components/Cell'
-import {readCols, readRows} from './helpers/main'
 import {Upload} from './components/Upload'
-import {Details} from './components/Details'
+import {readRows, readCols} from './helpers/main'
 
 export const resolution = 600
 
@@ -16,29 +15,23 @@ function App() {
   const onFileUpload: React.ChangeEventHandler<HTMLInputElement> = event => {
     const file = event.target.files?.[0]
     if (file) {
-      file.text().then(setText).catch(console.error)
+      file
+        .text()
+        .then(text => {
+          setText(text)
+          setRows(readRows(text))
+          setCols(readCols(text))
+        })
+        .catch(console.error)
     } else {
       console.warn('Could not find file')
     }
   }
 
-  React.useEffect(() => {
-    if (text.length) {
-      setRows(readRows(text))
-      setCols(readCols(text))
-    }
-  }, [text])
-
   return (
     <>
-      <Details
-        list={[
-          {term: 'Rows:', description: rows},
-          {term: 'Cols:', description: cols},
-        ]}
-      />
       <Upload onChange={onFileUpload} />
-      <Grid cols={cols} rows={rows} text={text}>
+      <Grid text={text} rows={rows} cols={cols}>
         {generation =>
           generation.map((axis, index) => {
             return (
@@ -48,8 +41,8 @@ function App() {
                     <Cell
                       key={index + Math.random()}
                       state={state}
-                      cols={cols}
-                      rows={rows}
+                      rows={generation.length}
+                      cols={generation[0].length}
                     />
                   )
                 })}

src/components/Grid.tsx

@@ -7,18 +7,15 @@ import {Slider} from './Slider'
 import {Details} from './Details'
 
 interface Props<T> {
-  cols: number
-  rows: number
   text: string
+  rows: number
+  cols: number
   children: (data: T) => React.ReactNode
 }
 
-export const Grid = ({cols, rows, text, children}: Props<Generation>) => {
-  const [delay, setDelay] = React.useState(1000)
+export const Grid = ({text, rows, cols, children}: Props<Generation>) => {
   const [generation, setGeneration] = React.useState<Generation>([[]])
-
-  const onDelayUpdate: React.ChangeEventHandler<HTMLInputElement> = event =>
-    setDelay(parseInt(event.target.value))
+  const [delay, setDelay] = React.useState(1000)
 
   React.useEffect(() => {
     setGeneration(draw(build(cols, rows), parse(text)))
@@ -31,10 +28,17 @@ export const Grid = ({cols, rows, text, children}: Props<Generation>) => {
     return () => clearInterval(timeout)
   })
 
+  const onDelayUpdate: React.ChangeEventHandler<HTMLInputElement> = event =>
+    setDelay(parseInt(event.target.value))
+
   return (
     <>
       <Details
-        list={[{term: 'Generation:', description: countLiveCells(generation)}]}
+        list={[
+          {term: 'Generation:', description: countLiveCells(generation)},
+          {term: 'Rows:', description: rows},
+          {term: 'Cols:', description: cols},
+        ]}
       />
       <Slider onChange={onDelayUpdate} value={delay} />
       <div