fix incorrect reference causing error in state

Author: khamiltonuk

src/components/ColourPicker.js

@@ -0,0 +1,75 @@
+import React from "react";
+import { compose, withState } from "recompose";
+import styled from "styled-components";
+import Button from "@material-ui/core/Button";
+import ColorLens from "@material-ui/icons/ColorLens";
+
+const ColourPickerList = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  z-index: 12;
+`;
+const ColourOffering = styled.li`
+  border-radius: 50%;
+  height: 56px;
+  width: 56px;
+  background: blue;
+  position: absolute;
+  text-indent: 100%;
+  overflow: hidden;
+`;
+const ColourOfferingYellow = ColourOffering.extend`
+  background: yellow;
+  left: 0;
+`;
+const ColourOfferingGreen = ColourOffering.extend`
+  background: green;
+  left: 30px;
+`;
+const ColourOfferingPink = ColourOffering.extend`
+  background: pink;
+  left: 60px;
+`;
+const ToggleListButton = styled(Button)`
+  position: absolute !important;
+  bottom: 10px;
+  left: 10px;
+`;
+const ColourPicker = ({
+  isColorPickerShown,
+  toggleColourPicker,
+  setPostitColour
+}) => {
+  return (
+    <div>
+      <ToggleListButton
+        onClick={() => toggleColourPicker(!isColorPickerShown)}
+        title="change color"
+        color="primary"
+        aria-label="change color"
+        variant="fab"
+      >
+        <ColorLens />
+      </ToggleListButton>
+      {isColorPickerShown && (
+        <ColourPickerList>
+          <ColourOfferingYellow onClick={() => setPostitColour("yellow")}>
+            yellow
+          </ColourOfferingYellow>
+          <ColourOfferingGreen onClick={() => setPostitColour("green")}>
+            green
+          </ColourOfferingGreen>
+          <ColourOfferingPink onClick={() => setPostitColour("pink")}>
+            pink
+          </ColourOfferingPink>
+        </ColourPickerList>
+      )}
+    </div>
+  );
+};
+
+const enhance = compose(
+  withState("isColorPickerShown", "toggleColourPicker", false)
+);
+export default enhance(ColourPicker);

src/components/Postit.js

@@ -3,7 +3,8 @@ import styled from "styled-components";
 import { compose, withState, withHandlers } from "recompose";
 import Button from "@material-ui/core/Button";
 import Delete from "@material-ui/icons/Delete";
-import ColorLens from "@material-ui/icons/ColorLens";
+
+import ColourPicker from "./ColourPicker";
 
 const StyledButton = styled(Button)`
   position: absolute !important;
@@ -15,44 +16,13 @@ const Postit = styled.li`
   color: #333;
   position: relative;
   width: 300px;
+  min-height: 300px;
   margin: 0 auto;
   transform: rotate(2deg);
   padding: 40px 0 0 40px;
   box-shadow: 0 10px 10px 2px rgba(0, 0, 0, 0.3);
 `;
-const ToggleListButton = styled(Button)`
-  position: absolute !important;
-  bottom: 10px;
-  left: 10px;
-`;
 
-const ColourPicker = styled.ul`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  z-index: 12;
-`;
-const ColourOffering = styled.li`
-  border-radius: 50%;
-  height: 56px;
-  width: 56px;
-  background: blue;
-  position: absolute;
-  text-indent: 100%;
-  overflow: hidden;
-`;
-const ColourOfferingYellow = ColourOffering.extend`
-  background: yellow;
-  left: 0;
-`;
-const ColourOfferingGreen = ColourOffering.extend`
-  background: green;
-  left: 30px;
-`;
-const ColourOfferingPink = ColourOffering.extend`
-  background: pink;
-  left: 60px;
-`;
 const Textarea = styled.textarea`
   border: none;
   background: none;
@@ -68,7 +38,6 @@ const Posit = ({
   setPostitColour,
   removeNote,
   toggleColourPicker,
-  isColorPickerShown,
   isPostitActive,
   handleInputChange,
   highLightPostit
@@ -96,41 +65,18 @@ const Posit = ({
       >
         <Delete />
       </StyledButton>
-      <ToggleListButton
-        onClick={() => toggleColourPicker(!isColorPickerShown)}
-        title="change color"
-        color="primary"
-        aria-label="change color"
-        variant="fab"
-      >
-        <ColorLens />
-      </ToggleListButton>
-      {isColorPickerShown && (
-        <ColourPicker>
-          <ColourOfferingYellow onClick={() => setPostitColour("yellow")}>
-            yellow
-          </ColourOfferingYellow>
-          <ColourOfferingGreen onClick={() => setPostitColour("green")}>
-            green
-          </ColourOfferingGreen>
-          <ColourOfferingPink onClick={() => setPostitColour("pink")}>
-            pink
-          </ColourOfferingPink>
-        </ColourPicker>
-      )}
+      <ColourPicker
+        setPostitColour={setPostitColour}
+        toggleColourPicker={toggleColourPicker}
+      />
     </Postit>
   );
 };
 const enhance = compose(
-  withState("isColorPickerShown", "toggleColourPicker", false),
   withState("isPostitActive", "highLightPostit", false),
   withHandlers({
-    setPostitColour: props => colour => {
-      props.updateNoteColour({ id: props.note.id, noteColour: colour });
-      props.toggleColourPicker();
-    },
     handleInputChange: props => event => {
-      props.updateNoteText({ id: props.note.id, noteText: event.value });
+      props.updateNoteText({ id: props.note.id, noteText: event.target.value });
     },
     highLightPostIt: props => event => {}
   })