From 9b8ed09e48eb71d9b9273322bb1adae8204f0a53 Mon Sep 17 00:00:00 2001 From: U Ahmad Date: Fri, 27 Nov 2020 12:19:21 +0500 Subject: [PATCH 1/5] Added Edit Palette Button on MiniPalette --- colors-app/src/MiniPalette.js | 13 ++++++++++++- colors-app/src/styles/MiniPaletteStyles.js | 14 +++++++++++++- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/colors-app/src/MiniPalette.js b/colors-app/src/MiniPalette.js index c5b4a13..42e1d55 100644 --- a/colors-app/src/MiniPalette.js +++ b/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} /> +
{miniColorBoxes}
diff --git a/colors-app/src/styles/MiniPaletteStyles.js b/colors-app/src/styles/MiniPaletteStyles.js index 6674f88..fa79dfe 100644 --- a/colors-app/src/styles/MiniPaletteStyles.js +++ b/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, + }, }; From 026c49f338c9b004f81df88f7a1cc99110ea3027 Mon Sep 17 00:00:00 2001 From: U Ahmad Date: Fri, 27 Nov 2020 12:22:41 +0500 Subject: [PATCH 2/5] Added Update Palette Route --- colors-app/src/App.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/colors-app/src/App.js b/colors-app/src/App.js index 7cfd518..d55c1d6 100644 --- a/colors-app/src/App.js +++ b/colors-app/src/App.js @@ -62,6 +62,28 @@ class App extends Component { )} /> + + ( + + + palette.id === + routeProps.match.params.id + )} + /> + + )} + /> + Date: Fri, 27 Nov 2020 12:41:06 +0500 Subject: [PATCH 3/5] Use currentPalette's Colors while updating Palette instead of Seed Colors --- colors-app/src/NewPaletteForm.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/colors-app/src/NewPaletteForm.js b/colors-app/src/NewPaletteForm.js index 0ecc447..9e7a4d6 100644 --- a/colors-app/src/NewPaletteForm.js +++ b/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); @@ -86,7 +91,12 @@ class NewPaletteForm extends Component { }; 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; From 4daff84fe9632fa9f4f7305f34488bc92a180488 Mon Sep 17 00:00:00 2001 From: U Ahmad Date: Fri, 27 Nov 2020 13:01:18 +0500 Subject: [PATCH 4/5] Changed Text to Update Palette while Updating Palette --- colors-app/src/NewPaletteForm.js | 3 +++ colors-app/src/PaletteFormNav.js | 10 ++++++++-- colors-app/src/PaletteMetaForm.js | 8 ++++++-- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/colors-app/src/NewPaletteForm.js b/colors-app/src/NewPaletteForm.js index 9e7a4d6..3ab99a8 100644 --- a/colors-app/src/NewPaletteForm.js +++ b/colors-app/src/NewPaletteForm.js @@ -107,6 +107,9 @@ class NewPaletteForm extends Component { palettes={palettes} handleSubmit={this.handleSubmit} handleDrawerOpen={this.handleDrawerOpen} + updatePalette={updatePalette} + editPalette={editPalette} + currentPalette={currentPalette} /> - Save + {updatePalette ? 'Update' : 'Save'} {formShowing && ( @@ -94,7 +98,7 @@ class PaletteMetaForm extends Component { Cancel From 7792d6faf917eacfc8199cebe70b2bda12fa0164 Mon Sep 17 00:00:00 2001 From: U Ahmad Date: Fri, 27 Nov 2020 13:11:45 +0500 Subject: [PATCH 5/5] Added Update Palette Functionality Successfully --- colors-app/src/App.js | 23 +++++++++++++++++++++++ colors-app/src/NewPaletteForm.js | 11 ++++++++++- colors-app/src/PaletteMetaForm.js | 13 ++++++++++++- 3 files changed, 45 insertions(+), 2 deletions(-) diff --git a/colors-app/src/App.js b/colors-app/src/App.js index d55c1d6..cbac4d3 100644 --- a/colors-app/src/App.js +++ b/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 ( { + 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 { @@ -108,7 +117,7 @@ class NewPaletteForm extends Component { handleSubmit={this.handleSubmit} handleDrawerOpen={this.handleDrawerOpen} updatePalette={updatePalette} - editPalette={editPalette} + editPalette={this.editPalette} currentPalette={currentPalette} /> 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 = () => {