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) => {
@@ -193,7 +194,7 @@ function App() {
     setMoveItemBoxID(null);
     setMoveItemID(null);
     setIsMoving(false);
-    await moveItem(moveItemID,boxData._id);
+    await moveItem(moveItemID, boxData._id);
 
   }
   const boxHandler = {
@@ -219,7 +220,7 @@ function App() {
       const response = await axios.post(`${api.baseApiUrl}/item/${itemID}/${boxIDTarget}`);
       setData(response.data);
     }
-    catch(error) {
+    catch (error) {
       console.log(error);
     }
   }
@@ -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 =
@@ -420,19 +427,19 @@ function App() {
         {<button className='button' onClick={handleAddBox}>new box</button>}
       </div>
       <div className='body-container scroll-container'>
-      <ul className="list-box">
-        {filteredData.map((box, index) => {
-          return (
-            <Box
-              isMoving={box._id !== moveItemBoxID && isMoving}
-              key={index}
-              boxData={box}
-              boxHandler={boxHandler}
-              itemHandler={itemHandler}
-            />
-          );
-        })}
-      </ul>
+        <ul className="list-box">
+          {filteredData.map((box, index) => {
+            return (
+              <Box
+                isMoving={box._id !== moveItemBoxID && isMoving}
+                key={index}
+                boxData={box}
+                boxHandler={boxHandler}
+                itemHandler={itemHandler}
+              />
+            );
+          })}
+        </ul>
       </div>
 
     </>

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

@@ -300,14 +300,17 @@ button.button:hover {
 
 
 .color-selector-container {
- display: grid;
+    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