-fix fill part brush,

-fix rerender color history
-fix css

src/components/Field/Field.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import './Field.css';
 import Brush from '../Tools/Brush';
@@ -19,33 +19,47 @@ const Field = () => {
   const field = useSelector((state) => state.auth.field);
   const pixelSize = useSelector((state) => state.auth.pixelSize);
   const brush = useSelector((state) => state.auth.brush);
+  const currentColor = useSelector((state) => state.auth.currentColor);
+  const historyColor = useSelector((state) => state.auth.historyColor);
 
-  const changePixelColor = (index) => {
-    dispatch({
-      type: 'CHANGE_PIXEL_COLOR_AND_SAVE_TO_HISTORY',
-      payload: { index },
-    });
-  };
+  const changePixelColor = useCallback(
+    (index) => {
+      if (!field || !field[index]) return;
+
+      const color = field[index].color;
+      if (color && !historyColor.includes(color)) {
+        dispatch({
+          type: 'ADD_COLOR_TO_HISTORY',
+          payload: { color },
+        });
+      }
+      dispatch({
+        type: 'CHANGE_PIXEL_COLOR_AND_SAVE_TO_HISTORY',
+        payload: { index, color: currentColor },
+      });
+    },
+    [dispatch, field, currentColor, historyColor]
+  );
 
-  const clearField = () => {
+  const clearField = useCallback(() => {
     dispatch({
       type: 'CLEAR_FIELD',
     });
-  };
+  }, [dispatch]);
 
-  const onKeyPressed = (e) => {
+  const onKeyPressed = useCallback((e) => {
     if (e.code === 'Space' || e.type === 'mousedown') {
       setContinueToDraw(true);
     }
-  };
+  }, []);
 
-  const onKeyUp = (e) => {
+  const onKeyUp = useCallback((e) => {
     if (e.code === 'Space' || e.type === 'mouseup') {
       setContinueToDraw(false);
     }
-  };
+  }, []);
 
-  const saveToImage = () => {
+  const saveToImage = useCallback(() => {
     domtoimage
       .toJpeg(document.getElementById('capture'), { quality: 0.95 })
       .then((dataUrl) => {
@@ -54,11 +68,49 @@ const Field = () => {
         link.href = dataUrl;
         link.click();
       });
-  };
+  }, []);
 
-  if (!field || !Array.isArray(field)) {
-    return <p>Loading...</p>;
-  }
+  const fieldMemo = useMemo(() => {
+    if (!field || !Array.isArray(field)) {
+      return <p>Loading...</p>;
+    }
+
+    return (
+      <div
+        id="capture"
+        className="grid"
+        style={{
+          width: fieldSize + 'px',
+          height: fieldSize + 'px',
+        }}
+        onMouseDown={onKeyPressed}
+        onMouseUp={onKeyUp}
+        onMouseLeave={() => setContinueToDraw(false)}
+        tabIndex="0"
+      >
+        {field.map((el, i) => (
+          <div
+            className="pixel"
+            key={i}
+            style={{
+              background: el.color,
+              width: pixelSize + '%',
+              height: pixelSize + '%',
+              border: gridMap ? '1px solid lightgrey' : '',
+            }}
+            onClick={() => changePixelColor(i)}
+            onMouseOver={
+              brush !== 'fill' && brush !== 'fillPart'
+                ? () => changePixelColor(continueToDraw ? i : undefined)
+                : null
+            }
+          >
+            {}
+          </div>
+        ))}
+      </div>
+    );
+  }, [field, fieldSize, pixelSize, gridMap, brush, changePixelColor, onKeyPressed, onKeyUp, continueToDraw]);
 
   return (
     <div className="wrap-app">
@@ -103,41 +155,7 @@ const Field = () => {
         </button>
       </div>
       {/* FIELD DRAW */}
-      <div>
-        <div
-          id="capture"
-          className="grid"
-          style={{
-            width: fieldSize + 'px',
-            height: fieldSize + 'px'
-          }}
-          onMouseDown={onKeyPressed}
-          onMouseUp={onKeyUp}
-          onMouseLeave={() => setContinueToDraw(false)}
-          tabIndex="0"
-        >
-          {field.map((el, i) => (
-            <div
-              className="pixel"
-              key={i}
-              style={{
-                background: el.color,
-                width: pixelSize + '%',
-                height: pixelSize + '%',
-                border: gridMap ? '1px solid lightgrey' : ''
-              }}
-              onClick={() => changePixelColor(i)}
-              onMouseOver={
-                brush !== 'fill' && brush !== 'fillPart'
-                  ? () => changePixelColor(continueToDraw ? i : undefined)
-                  : null
-              }
-            >
-              {}
-            </div>
-          ))}
-        </div>
-      </div>
+      <div>{fieldMemo}</div>
       <div className="draw-history-wrap">
         <DrawHistory />
       </div>

src/components/Field/FieldSize.js

@@ -1,56 +1,53 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 
-const FieldSize = ({ currentSize, changeFieldSize }) => (
-  <div className="container">
-    <div className="tabs">
-      <input
-        type="radio"
-        id="radio-1"
-        value={currentSize}
-        onChange={() => changeFieldSize(100)}
-        checked={currentSize === 100}
-      />
-      <label className="tab" htmlFor="radio-1">
-        100
-      </label>
+const FieldSize = () => {
+  const dispatch = useDispatch();
+  const currentSize = useSelector((state) => state.auth.fieldSize);
 
-      <input
-        type="radio"
-        id="radio-2"
-        value={currentSize}
-        onChange={() => changeFieldSize(400)}
-        checked={currentSize === 400}
-      />
-      <label className="tab" htmlFor="radio-2">
-        400
-      </label>
-
-      <input
-        type="radio"
-        id="radio-3"
-        value={currentSize}
-        onChange={() => changeFieldSize(1600)}
-        checked={currentSize === 1600}
-      />
-      <label className="tab" htmlFor="radio-3">
-        1600
-      </label>
-      <span className="glider"></span>
-    </div>
-  </div>
-);
-
-const mapStateToProps = (state) => ({
-  currentSize: state.fieldSize,
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  changeFieldSize: (size) =>
+  const changeFieldSize = (size) => {
     dispatch({
       type: 'CHANGE_FIELD_SIZE',
       payload: { size },
-    }),
-});
+    });
+  };
+
+  return (
+    <div className="container">
+      <div className="tabs">
+        <input
+          type="radio"
+          id="radio-1"
+          onChange={() => changeFieldSize(100)}
+          checked={currentSize === 100}
+        />
+        <label className="tab" htmlFor="radio-1">
+          100
+        </label>
+
+        <input
+          type="radio"
+          id="radio-2"
+          onChange={() => changeFieldSize(400)}
+          checked={currentSize === 400}
+        />
+        <label className="tab" htmlFor="radio-2">
+          400
+        </label>
+
+        <input
+          type="radio"
+          id="radio-3"
+          onChange={() => changeFieldSize(1600)}
+          checked={currentSize === 1600}
+        />
+        <label className="tab" htmlFor="radio-3">
+          1600
+        </label>
+        <span className="glider"></span>
+      </div>
+    </div>
+  );
+};
 
-export default connect(mapStateToProps, mapDispatchToProps)(FieldSize);
+export default FieldSize;

src/components/Tools/Brush.js

@@ -1,11 +1,14 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import classnames from 'classnames';
 import fill from '../icons/fill.png';
 import random from '../icons/random.jpeg';
 import colorpicker from '../icons/colorpicker.png';
 
-const Brush = ({ changeBrush, fieldRandomBrush, brush }) => {
+const Brush = () => {
+  const dispatch = useDispatch();
+  const brush = useSelector((state) => state.auth.brush);
+
   const brushTypes = [
     { type: 'dot', label: '▣' },
     { type: 'horizontal', label: '↔' },
@@ -15,9 +18,23 @@ const Brush = ({ changeBrush, fieldRandomBrush, brush }) => {
     { type: 'fillPart', label: 'fillPart' },
     { type: 'mirrorH', label: '═' },
     { type: 'mirrorV', label: '||' },
-    { type: 'color-picker', label: <img src={colorpicker} className="img-icon-btn" alt="icon-colorpicker" /> }
+    { type: 'color-picker', label: <img src={colorpicker} className="img-icon-btn" alt="icon-colorpicker" /> },
   ];
 
+  const changeBrush = (type) => {
+    dispatch({
+      type: 'CHANGE_BRUSH',
+      payload: { brush: type },
+    });
+  };
+
+  const fieldRandomBrush = () => {
+    dispatch({
+      type: 'FILL_RANDOM_BRUSH',
+      payload: {},
+    });
+  };
+
   return (
     <div className="brush-block">
       {brushTypes.map(({ type, label }) => (
@@ -36,19 +53,4 @@ const Brush = ({ changeBrush, fieldRandomBrush, brush }) => {
   );
 };
 
-const mapStateToProps = (state) => ({
-  brush: state.brush
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  changeBrush: (brush) => dispatch({
-    type: 'CHANGE_BRUSH',
-    payload: { brush }
-  }),
-  fieldRandomBrush: () => dispatch({
-    type: 'FILL_RANDOM_BRUSH',
-    payload: {}
-  })
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Brush);
+export default Brush;

src/components/Tools/ColorHistory.js

@@ -1,24 +1,24 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { v4 as uuidv4 } from 'uuid';
 import history_del from '../icons/history_del.png';
 
 const ColorHistory = () => {
   const dispatch = useDispatch();
   const historyColor = useSelector((state) => state.auth.historyColor);
-console.log(historyColor)
-  const changeColor = (color) => {
+
+  const changeColor = useCallback((color) => {
     dispatch({
       type: 'CHANGE_CURRENT_COLOR',
       payload: { color },
     });
-  };
+  }, [dispatch]);
 
-  const deleteColorHistory = () => {
+  const deleteColorHistory = useCallback(() => {
     dispatch({
       type: 'DELETE_COLOR_HISTORY',
     });
-  };
+  }, [dispatch]);
 
   return (
     <div className="container">
@@ -43,4 +43,4 @@ console.log(historyColor)
   );
 };
 
-export default ColorHistory;
+export default React.memo(ColorHistory);