Added Update Palette Feature

colors-app/src/App.js

@@ -42,6 +42,29 @@ class App extends Component {
       JSON.stringify(this.state.palettes)
     );
   }
+
+  editPalette = (updatedPalette, previousId) => {
+      // Delete that previous version of Palette which is updated
+      const newPalettes = this.state.palettes.filter(
+         (palette) => palette.id !== previousId
+      );
+
+      // console.log('newPalettes', newPalettes);
+
+      // console.log('palettes: [newPalettes, updatedPalette]', [
+      //    ...newPalettes,
+      //    updatedPalette,
+      // ]);
+      // Add new Version of Palette to palettes
+      this.setState({
+         palettes: [...newPalettes, updatedPalette],
+      });
+
+      this.syncLocalStorage();
+
+      // console.log('res.data', res.data);
+   };
+
   render() {
     return (
       <Route
@@ -62,6 +85,28 @@ class App extends Component {
                     </Page>
                   )}
                 />
+
+                <Route
+                  exact
+                  path='/updatePalette/:id'
+                  render={(routeProps) => (
+                    <Page>
+                        <NewPaletteForm
+                          savePalette={this.savePalette}
+                          palettes={this.state.palettes}
+                          {...routeProps}
+                          updatePalette={true}
+                          editPalette={this.editPalette}
+                          currentPalette={this.state.palettes.find(
+                              (palette) =>
+                                palette.id ===
+                                routeProps.match.params.id
+                          )}
+                        />
+                    </Page>
+                  )}
+                />
+
                 <Route
                   exact
                   path='/palette/:paletteId/:colorId'

colors-app/src/MiniPalette.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from "react";
 import { withStyles } from "@material-ui/styles";
 import styles from "./styles/MiniPaletteStyles";
 import DeleteIcon from "@material-ui/icons/Delete";
-
+import EditIcon from '@material-ui/icons/Edit';
 class MiniPalette extends PureComponent {
   constructor(props) {
     super(props);
@@ -16,6 +16,12 @@ class MiniPalette extends PureComponent {
   handleClick() {
     this.props.goToPalette(this.props.id);
   }
+
+  editPalette = (e) => {
+      e.stopPropagation();
+      console.log('this.props.id', this.props.id);
+      window.location.href = `/updatePalette/${this.props.id}`;
+   };
   render() {
     const { classes, paletteName, emoji, colors } = this.props;
 
@@ -33,6 +39,11 @@ class MiniPalette extends PureComponent {
           style={{ transition: "all 0.3s ease-in-out" }}
           onClick={this.deletePalette}
         />
+        <EditIcon
+               className={classes.editIcon}
+               style={{ transition: 'all 0.3s ease-in-out' }}
+               onClick={this.editPalette}
+            />
 
         <div className={classes.colors}>{miniColorBoxes}</div>
         <h5 className={classes.title}>

colors-app/src/NewPaletteForm.js

@@ -22,8 +22,13 @@ class NewPaletteForm extends Component {
     super(props);
     this.state = {
       open: true,
-      colors: seedColors[0].colors
-    };
+      colors:
+              ( this.props.updatePalette && this.props.currentPalette) 
+              ? this.props.currentPalette.colors
+              : seedColors[0].colors
+    };  
+
+    console.log('this.state.colors', this.state.colors)
     this.addNewColor = this.addNewColor.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
@@ -84,9 +89,23 @@ class NewPaletteForm extends Component {
       colors: arrayMove(colors, oldIndex, newIndex)
     }));
   };
+  editPalette = (updatedPalette) => {
+    updatedPalette.id = updatedPalette.paletteName.toLowerCase().replace(/ /g, "-");
+
+    console.log('this.state.colors', this.state.colors)
+    updatedPalette.colors = this.state.colors;
+
+    this.props.editPalette(updatedPalette , this.props.currentPalette.id);
+    this.props.history.push("/");
+  }
 
   render() {
-    const { classes, maxColors, palettes } = this.props;
+    const { 
+      classes, maxColors, palettes  ,
+      updatePalette , 
+      editPalette , 
+      currentPalette
+    } = this.props;
     const { open, colors } = this.state;
     const paletteIsFull = colors.length >= maxColors;
 
@@ -97,6 +116,9 @@ class NewPaletteForm extends Component {
           palettes={palettes}
           handleSubmit={this.handleSubmit}
           handleDrawerOpen={this.handleDrawerOpen}
+          updatePalette={updatePalette}  
+          editPalette={this.editPalette}  
+          currentPalette={currentPalette}
         />
         <Drawer
           className={classes.drawer}

colors-app/src/PaletteFormNav.js

@@ -38,7 +38,10 @@ class PaletteFormNav extends Component {
       open,
       palettes,
       handleSubmit,
-      handleDrawerOpen
+      handleDrawerOpen,
+      updatePalette , 
+      editPalette , 
+      currentPalette
     } = this.props;
     const { formShowing } = this.state;
     return (
@@ -82,12 +85,15 @@ class PaletteFormNav extends Component {
               onClick={this.showForm}
               className={classes.button}
             >
-              Save
+              {updatePalette ? 'Update' : 'Save'}
             </Button>
           </div>
         </AppBar>
         {formShowing && (
           <PaletteMetaForm
+            updatePalette={updatePalette}  
+            editPalette={editPalette}  
+            currentPalette={currentPalette}
             palettes={palettes}
             handleSubmit={handleSubmit}
             hideForm={this.hideForm}

colors-app/src/PaletteMetaForm.js

@@ -26,6 +26,12 @@ class PaletteMetaForm extends Component {
         ({ paletteName }) => paletteName.toLowerCase() !== value.toLowerCase()
       )
     );
+
+    if(this.props.updatePalette && this.props.currentPalette) {
+      this.setState({
+        newPaletteName :this.props.currentPalette.paletteName
+      })
+    }
   }
   handleChange(evt) {
     this.setState({
@@ -40,7 +46,12 @@ class PaletteMetaForm extends Component {
       paletteName: this.state.newPaletteName,
       emoji: emoji.native
     };
-    this.props.handleSubmit(newPalette);
+    if(this.props.updatePalette ) {
+      this.props.editPalette(newPalette)
+    }
+    else{
+      this.props.handleSubmit(newPalette);
+    }
     this.setState({ stage: "" });
   }
   handleClickOpen = () => {
@@ -53,7 +64,11 @@ class PaletteMetaForm extends Component {
 
   render() {
     const { newPaletteName, stage } = this.state;
-    const { hideForm } = this.props;
+    const { hideForm  ,
+        updatePalette , 
+        editPalette , 
+        currentPalette
+    } = this.props;
 
     return (
       <div>
@@ -94,7 +109,7 @@ class PaletteMetaForm extends Component {
                 Cancel
               </Button>
               <Button variant='contained' color='primary' type='submit'>
-                Save Palette
+                { updatePalette ? 'Update Palette' :  'Save Palette'}
               </Button>
             </DialogActions>
           </ValidatorForm>

colors-app/src/styles/MiniPaletteStyles.js

@@ -51,5 +51,17 @@ export default {
     padding: "10px",
     zIndex: 10,
     opacity: 0
-  }
+  },
+   editIcon: {
+      color: 'white',
+      backgroundColor: '#58a3df',
+      width: '20px',
+      height: '20px',
+      position: 'absolute',
+      right: '43px',
+      top: '0px',
+      padding: '10px',
+      zIndex: 10,
+      opacity: 0,
+   },
 };