feat: implemented save button. still needs to be connected to database

Author: williamzhu17

components/core/CreateShape.js

@@ -125,95 +125,95 @@ const CreateShape = (props) => {
     }
 
     function addNewVerticeCoordinates(x ,y, number) {
-    const xPercentage = Math.round((x / 280.0) * 100.0);
-    const yPercentage = Math.round((y / 280.0) * 100.0);
+        const xPercentage = Math.round((x / 280.0) * 100.0);
+        const yPercentage = Math.round((y / 280.0) * 100.0);
 
-    let newVerticeCoordinates = shapeInformation.verticeCoordinates;
-    newVerticeCoordinates[number] = {
-        "x": xPercentage + "%",
-        "y": yPercentage + "%"
-    }
+        let newVerticeCoordinates = shapeInformation.verticeCoordinates;
+        newVerticeCoordinates[number] = {
+            "x": xPercentage + "%",
+            "y": yPercentage + "%"
+        }
 
-    return newVerticeCoordinates;
+        return newVerticeCoordinates;
     }
 
     function generateNewFormula(newVerticeCoordinates) {
-    let newFormula = shapeInformation.clipPathType + "(";
+        let newFormula = shapeInformation.clipPathType + "(";
 
-    for (let i = 0; i < newVerticeCoordinates.length; i++) {
-        let newX = newVerticeCoordinates[i].x; 
-        let newY = newVerticeCoordinates[i].y;
+        for (let i = 0; i < newVerticeCoordinates.length; i++) {
+            let newX = newVerticeCoordinates[i].x; 
+            let newY = newVerticeCoordinates[i].y;
 
-        i === newVerticeCoordinates.length - 1 ? newFormula = newFormula + newX + " " + newY + ")" : newFormula = newFormula + newX + " " + newY + ", ";
-    }
+            i === newVerticeCoordinates.length - 1 ? newFormula = newFormula + newX + " " + newY + ")" : newFormula = newFormula + newX + " " + newY + ", ";
+        }
 
-    return newFormula;
+        return newFormula;
     }
 
     function handleFormulaChange(formula, edgeVerticeNumber, clipPathType) {
-    let newVerticeCoordinates = [];
-
-    if (clipPathType === "polygon") {
-        let formulaNumbers = formula.slice(formula.indexOf("(") + 1, formula.indexOf(")"));
-        formulaNumbers = formulaNumbers.split(", "); 
-        newVerticeCoordinates = formulaNumbers.map(x => {
-        let percentageArray = x.split(" ");
-        return {
-            "x": percentageArray[0], 
-            "y": percentageArray[1],
-        }
-        });
-    }
-
-    setShapeInformation(prevState => {
-        return {
-        ...prevState, 
-        "formula": formula.includes("(") && formula.includes(")") ? formula : prevState.formula, 
-        "clipPathType": clipPathType === null ? prevState.clipPathType : clipPathType,
-        "vertices": edgeVerticeNumber, 
-        "edges": edgeVerticeNumber, 
-        "verticeCoordinates": newVerticeCoordinates, 
+        let newVerticeCoordinates = [];
+
+        if (clipPathType === "polygon") {
+            let formulaNumbers = formula.slice(formula.indexOf("(") + 1, formula.indexOf(")"));
+            formulaNumbers = formulaNumbers.split(", "); 
+            newVerticeCoordinates = formulaNumbers.map(x => {
+            let percentageArray = x.split(" ");
+            return {
+                "x": percentageArray[0], 
+                "y": percentageArray[1],
+            }
+            });
         }
-    });
-    }
 
-    function handleClipPathChange(clipPathType) {
-    if (clipPathType === "polygon") {
-        setShapeInformation({
-        ...shapeInformation, 
-        "name": "Tilted Square", 
-        "type": "tiltedSquare", 
-        "formula": "polygon(10% 10%, 90% 10%, 90% 90%, 10% 80%)", 
+        setShapeInformation(prevState => {
+            return {
+            ...prevState, 
+            "formula": formula.includes("(") && formula.includes(")") ? formula : prevState.formula, 
+            "clipPathType": clipPathType === null ? prevState.clipPathType : clipPathType,
+            "vertices": edgeVerticeNumber, 
+            "edges": edgeVerticeNumber, 
+            "verticeCoordinates": newVerticeCoordinates, 
+            }
         });
-    }
+        }
 
-    if (clipPathType === "circle") {
-        setShapeInformation({
-        ...shapeInformation, 
-        "name": "Circle", 
-        "type": "circle", 
-        "formula": "circle(50% at 50% 50%)",
-        });
-    }
+        function handleClipPathChange(clipPathType) {
+        if (clipPathType === "polygon") {
+            setShapeInformation({
+            ...shapeInformation, 
+            "name": "Tilted Square", 
+            "type": "tiltedSquare", 
+            "formula": "polygon(10% 10%, 90% 10%, 90% 90%, 10% 80%)", 
+            });
+        }
 
-    if (clipPathType === "ellipse") {
-        setShapeInformation({
-        ...shapeInformation, 
-        "name": "Ellipse", 
-        "type": "ellipse", 
-        "formula": "ellipse(25% 40% at 50% 50%)",
-        });
-    }
+        if (clipPathType === "circle") {
+            setShapeInformation({
+            ...shapeInformation, 
+            "name": "Circle", 
+            "type": "circle", 
+            "formula": "circle(50% at 50% 50%)",
+            });
+        }
 
-    setShapeInformation(prevState => {
-        return {
-        ...prevState, 
-        "clipPathType": clipPathType, 
-        "edges": clipPathType === "polygon" ? 4 : 0,
-        "vertices": clipPathType === "polygon" ? 4 : 0, 
-        "notes": "", 
+        if (clipPathType === "ellipse") {
+            setShapeInformation({
+            ...shapeInformation, 
+            "name": "Ellipse", 
+            "type": "ellipse", 
+            "formula": "ellipse(25% 40% at 50% 50%)",
+            });
         }
-    })
+
+        setShapeInformation(prevState => {
+            return {
+            ...prevState, 
+            "clipPathType": clipPathType, 
+            "edges": clipPathType === "polygon" ? 4 : 0,
+            "vertices": clipPathType === "polygon" ? 4 : 0, 
+            "notes": "", 
+            }
+        })
     }
 
     const [validated, setValidated] = useState(false);
@@ -236,25 +236,36 @@ const CreateShape = (props) => {
                 onHide={props.handleClose}
                 backdrop="static"
             >
-                <Modal.Header>
+                <Modal.Header closeButton>
                     <Modal.Title>Create Shape</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
                     <Container fluid>
                         <Row lg={2} md={1} sm={1} xs={1}>
                             <Col>
-                                <ShapeForm shapeInformation={shapeInformation} handleChange={handleFormChange} handleSubmit={handleSubmit} validated={validated} />
+                                <ShapeForm 
+                                    shapeInformation={shapeInformation} 
+                                    handleChange={handleFormChange} 
+                                    handleSubmit={handleSubmit} 
+                                    validated={validated} 
+                                />
                             </Col>
                             <Col>
-                                <ShapePreview shapeInformation={shapeInformation} handleChange={handlePreviewChange} />
+                                <ShapePreview 
+                                    shapeInformation={shapeInformation} 
+                                    handleChange={handlePreviewChange} 
+                                />
                             </Col>
                         </Row>
                     </Container>
                 </Modal.Body>
                 <Modal.Footer>
-                    <Button onClick={() => props.handleClose()}>
+                    <Button onClick={() => props.handleClose()} variant="outline-info">
                         Close
                     </Button>
+                    <Button variant="secondary" type="submit" form="createShapeForm">
+                        Save
+                    </Button>
                 </Modal.Footer>
             </Modal>
         </>

components/utils/ShapeForm.js

@@ -11,9 +11,9 @@ const ColorPicker = styled.input`
 
 const ShapeForm = (props) => {
     return (
-        <Form noValidate validated={props.validated} onSubmit={props.handleSubmit} id="previewForm">
+        <Form noValidate validated={props.validated} onSubmit={props.handleSubmit} id="createShapeForm">
             <Form.Group>
-                <Form.Label>Shape Name:</Form.Label>
+                <Form.Label>Name</Form.Label>
                 <Form.Control 
                     type="text" 
                     name="name" 
@@ -25,7 +25,7 @@ const ShapeForm = (props) => {
             </Form.Group>
 
             <Form.Group>
-                <Form.Label>Description:</Form.Label>
+                <Form.Label>Description</Form.Label>
                 <Form.Control 
                     as="textarea" 
                     name="notes" 
@@ -36,17 +36,18 @@ const ShapeForm = (props) => {
             </Form.Group>
 
             <Form.Group>
-                <Form.Label>Shape Color:</Form.Label>
+                <Form.Label>Color Picker</Form.Label>
                 <ColorPicker 
                     type="color" 
                     name="backgroundColor"
                     value={props.shapeInformation.backgroundColor}
                     onChange={props.handleChange}
+                    className="form-control-color"
                 />
             </Form.Group>
 
             <Form.Group>
-                <Form.Label>Type of Clip Path:</Form.Label>
+                <Form.Label>Type of Clip-Path</Form.Label>
                 <Form.Control 
                     as="select" 
                     name="clipPathType" 
@@ -60,7 +61,7 @@ const ShapeForm = (props) => {
             </Form.Group>
 
             <Form.Group>
-                <Form.Label>Clip-Path:</Form.Label>
+                <Form.Label>Clip-Path</Form.Label>
                 <Form.Control 
                     type="text" 
                     name="formula"