comments / rewrite ex5

11/2/;

@@ -0,0 +1,32 @@
+import React, {useEffect, useState} from 'react';
+
+import '../css/main.css';
+
+export default function () {
+  const [lastInputText, setLastInputText] = useState('');
+  const [factor, setFactor] = useState(1);
+
+
+  function converter(time, factor) {
+    setLastInputText(time * factor);
+  }
+
+  const h = 
+
+  return (
+    <>
+      <div>
+        <label htmlFor="h">שעות</label>
+        <input type="number" id="h" value={h} onChange={e => setInput(e.target.value, 3600)}/>
+      </div>
+      <div>
+        <label htmlFor="m">דקות</label>
+        <input type="number" id="m" value={m} onChange={e => setInput(e.target.value, 60)}/>
+      </div>
+      <div>
+        <label htmlFor="s">שניות</label>
+        <input type="number" id="s" value={s} onChange={e => setInput(e.target.value, 1)}/>
+      </div>
+    </>
+  )
+}

11/5/src/colorpicker.js

@@ -2,49 +2,40 @@ import React, {useState} from 'react';
 import tinycolor from 'tinycolor2';
 
 import '../css/main.css';
-
+import _ from 'lodash';
+
+function LigherDivs({ color }) {
+  return _.range(5).map((i) =>
+    <div style={{background: color.lighten(5).toString()}}></div>
+  );
+}
+
+function DarkerDivs({ color }) {
+  return _.range(5).map((i) =>
+    <div style={{background: color.darken(5).toString()}}></div>
+  );
+}
+
+function ColorPicker({ setColor }) {
+  return (
+    <div>
+      <label>
+        <input type="color" onChange={(e) => setColor(e.target.value)}/>
+      </label>
+    </div>
+  );
+}
 
 export default function (props) {
-    const {defaultColor} = props;
-
-    const [color, setColor] = useState(defaultColor ? defaultColor : '');
-
-
-    function createDivs() {
-
-        let currentColor = tinycolor(color).darken(5*4);
-
-        const divs = [];
-        for(let i = 0; i < 5; i++){
-            console.log(i)
-            divs.push(
-                <div style={{background: currentColor.lighten(5).toString()}}></div>
-            );
-        }
-
-        divs.push(
-            <div>
-                <label>
-                    <input type="color" onChange={(e) => setColor(e.target.value)}/>
-                </label>
-            </div>
-        );
-
-        currentColor = tinycolor(color).lighten(5);
-
-        for(let i = 0; i < 5; i++){
-            console.log(i)
-            divs.push(
-                <div style={{background: currentColor.darken(5).toString()}}></div>
-            );
-        }
-
-        return divs;
-    }
-
-    return(
-        <div className="div-colors-result">
-            {createDivs()}
-        </div>
-    )
-}
+  const {defaultColor} = props;
+
+  const [color, setColor] = useState(defaultColor ? defaultColor : '');
+
+  return(
+    <div className="div-colors-result">
+      <LigherDivs color={tinycolor(color).darken(5*4)} />
+      <ColorPicker setColor={setColor} />
+      <DarkerDivs color={tinycolor(color).lighten(5)} />
+    </div>
+  )
+}

16/1/src/container.js

@@ -10,8 +10,15 @@ export default function () {
 
     function setPointsPlay(check){
 
+      // ternary is better used inside:
+      // const newValue = points + (check ? 10 : -5)
+      // (to save duplication)
         const newValue = check ? points+10 : points-5;
 
+      // I thought you liked ternaries...
+      // setPoints(newValue > 0 ? newValue : 0)
+      // but my favorite is:
+      // setPoints(Math.min(newValue, 0))
         if(newValue > 0) setPoints(newValue);
         else  setPoints(0);
 
@@ -35,4 +42,4 @@ export default function () {
 
 function getRndInteger(min, max) {
     return Math.floor(Math.random() * (max - min) ) + min;
-}
+}

16/1/src/play.js

@@ -7,11 +7,33 @@ export default function play(props) {
 
     const {setPointsPlay, placeRed} = props;
 
+  // You're hiding a lot of logic inside the map,
+  // and that makes the code hard to read
+  // Better to refactor and extract most of the code to a sub-component
+  // or to a helper function
+
     return(
       <div className="game">
           {Array(10).fill(null).map( (item, index) => (
-              <div style={{background: index+1 === placeRed ? 'red' : '#d5d5d5'}} key={index} onClick={ () => setPointsPlay(index+1 === placeRed) }></div>
+              <div
+                style={{background: index+1 === placeRed ? 'red' : '#d5d5d5'}}
+                key={index}
+                onClick={ () => setPointsPlay(index+1 === placeRed) }>
+              </div>
           ))}
       </div>
     )
-}
+
+  // What I would write:
+    return(
+      <div className="game">
+        {Array(10).fill(null).map((item, index) =>
+          <Square
+            key={index}
+            placeRed={placeRed}
+            item={item}
+            index={index}
+          />
+      </div>
+    )
+}

package.json

@@ -27,6 +27,7 @@
   },
   "devDependencies": {
     "css-loader": "^3.2.1",
+    "lodash": "^4.17.19",
     "mini-css-extract-plugin": "^0.8.0",
     "tinycolor2": "^1.4.1"
   }