update editing box colors functionality

client/src/app.js

@@ -3,6 +3,7 @@ import axios from 'axios';
 import Box from './box';
 import api from './api';
 import Modal from './modal';
+import Color from './color';
 import './styles/app.css';
 
 function App() {
@@ -12,7 +13,7 @@ function App() {
   const [boxID, setBoxID] = useState(undefined);
   const [boxName, setBoxName] = useState('');
   const [boxDescription, setBoxDescription] = useState('');
-  const [boxColor, setBoxColor] = useState(0);
+  const [boxColor, setBoxColor] = useState('WHITE');
 
   const [showModalBox, setShowModalBox] = useState(false);
   const [showModalItem, setShowModalItem] = useState(false);
@@ -118,7 +119,7 @@ function App() {
   }
 
   const handleColorBox = (event) => {
-    setBoxColor(parseInt(event.target.value));
+    setBoxColor(event.target.value);
   }
 
   const handleSubmitBox = (event) => {
@@ -353,19 +354,25 @@ function App() {
     setFilter('');
   }
 
-  const colors = {
-    default: 0,
-    red: 1,
-    green: 2,
-  };
+  //these colors are all wrong
+  const colors = [
+    {
+      title: 'WHITE',
+      defaultStyle: { backgroundColor: 'white' },
+      hoverStyle: { backgroundColor: '#EBEBEB' }
+    },
+    {
+      title: 'BLUE',
+      defaultStyle: { backgroundColor: '#084B83' },
+      hoverStyle: { backgroundColor: '#0B64AD' }
+    }
+  ];
+
   const colorSelector =
     <div className="color-selector-container">
-      <label className={`${boxColor === colors.red ? "selected" : null} color`} htmlFor="color">
-        <input checked={boxColor === colors.red} onChange={boxHandler.handleColor} id="color" type="radio" value={colors.red}></input>
-      </label>
-      <label className={`${boxColor === colors.green ? "selected" : null} color`} htmlFor="color">
-        <input checked={boxColor === colors.green} onChange={boxHandler.handleColor} id="color" type="radio" value={colors.green}></input>
-      </label>
+      {colors.map((color) =>
+        <Color colorData={color} handler={boxHandler.handleColor} boxColor={boxColor}/>
+      )}
     </div>;
 
   const boxForm =

client/src/color.js

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+
+const Color = ({ colorData, handler, boxColor }) => {
+    const [style, setStyle] = useState(colorData.defaultStyle);
+
+    const handleHover = (isHover) => {
+        setStyle(isHover ? colorData.hoverStyle : colorData.defaultStyle);
+    }
+
+    return (
+        <label onMouseEnter={() => handleHover(true)} onMouseLeave={() => handleHover(false)} style={style} className={`color ${boxColor === colorData.title ? "selected" : ""}`}>
+            <input checked={boxColor === colorData.title} onChange={handler} type="radio" value={colorData.title}></input>
+        </label>
+    )
+}
+
+export default Color;

client/src/styles/app.css

@@ -301,13 +301,16 @@ button.button:hover {
 
 .color-selector-container {
     display: grid;
+    grid-auto-flow: column;
+    width: fit-content;
 }
 .color-selector-container > .color {
     border-radius: 50%;
-    background-color: red;
+    border: 2px solid black;
     width: 2em;
     height: 2em;
 }
+
 .color-selector-container > .color.selected {
     border: 1px solid black;
 }

server/server.js

@@ -33,7 +33,12 @@ var boxSchema = new mongoose.Schema({
     description: String,
     item: [itemSchema],
     sort: Number,
-    color: Number,
+    color: {
+        type: String,
+        enum: ['WHITE', 'RED', 'GREEN'],
+        default: 0
+    }
+    //these colors are wrong
 });
 
 //compile schema into model