🔨 Make card only update when saved

timmo001 · Jan 27, 2019 · f5ab27c · f5ab27c
1 parent 13c7e97
commit f5ab27c
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 16 deletions.
diff --git a/src/Components/EditConfig/EditCard.js b/src/Components/EditConfig/EditCard.js
@@ -10,6 +10,7 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import CardBase from '../Cards/CardBase';
 import defaultConfig from './defaultConfig.json';
 import Item from './Item';
+import clone from '../Common/clone';
 
 const styles = theme => ({
   dialog: {
@@ -26,7 +27,9 @@ const styles = theme => ({
 class EditCard extends React.Component {
   state = {
     open: true,
-    card: this.props.card
+    defaultCard: clone(defaultConfig.items[0].cards.find(c => c.type === this.props.card.type))
+      || defaultConfig.items[0].cards[0],
+    card: clone(this.props.card)
   };
 
   handleClose = cb => this.setState({ open: false }, cb);
@@ -44,13 +47,32 @@ class EditCard extends React.Component {
 
   handleConfigChange = (path, value) => {
     const { card } = this.props;
-    card[path.pop()] = value;
-    this.setState({ card });
+    console.log('card:', clone(card));
+    const key = path.pop();
+    card[key] = value;
+    console.log('card after:', clone(card));
+    console.log(key, key === 'type');
+    const defaultCard = defaultConfig.items[0].cards.find(c => c.type === value)
+      || defaultConfig.items[0].cards[0];
+    console.log('defaultCard:', defaultCard);
+    if (key === 'type') {
+      // Delete any unused props and set the new props
+      Object.keys(card).map(c =>
+        !defaultCard[c] ? delete card[c] :
+          card[c] = defaultCard[c]
+      );
+      Object.keys(defaultCard).map(c =>
+        !card[c] ? card[c] = defaultCard[c] :
+          null
+      );
+      console.log('new card type:', clone(card));
+    }
+    this.setState({ defaultCard, card });
   };
 
   render() {
     const { classes, add, config, theme, haUrl, haConfig, entities, groupId, cardId } = this.props;
-    const { open, card } = this.state;
+    const { open, defaultCard, card } = this.state;
 
     return (
       <Dialog
@@ -79,12 +101,12 @@ class EditCard extends React.Component {
         </div>
         <DialogContent className={classes.dialogContent}>
           <Grid container direction="column">
-            {Object.keys(defaultConfig.items[0].cards[0]).map((i, x) =>
+            {Object.keys(defaultCard).map((i, x) =>
               <Item
                 key={x}
                 objKey={i}
-                defaultItem={defaultConfig.items[0].cards[0][i]}
-                item={card[i] !== undefined ? card[i] : defaultConfig.items[0].cards[0][i]}
+                defaultItem={defaultCard[i]}
+                item={card[i] !== undefined ? card[i] : defaultCard[i]}
                 defaultItemPath={['items', 0, 'cards', 0, i]}
                 itemPath={['items', groupId, 'cards', cardId, i]}
                 handleConfigChange={this.handleConfigChange} />

diff --git a/src/Components/EditConfig/configExplanations.json b/src/Components/EditConfig/configExplanations.json
@@ -107,6 +107,7 @@
         {
           "type": "What is the card's type?",
           "name": "The name of the link",
+          "url": "The URL of the link",
           "icon": "Icon shown in the middle of the card. Use https://materialdesignicons.com to find the icon you want to use",
           "width": "The amount of cards wide",
           "height": "The amount of cards high",
@@ -131,4 +132,4 @@
       ]
     }
   ]
-}
+}
diff --git a/src/Components/EditConfig/defaultConfig.json b/src/Components/EditConfig/defaultConfig.json
@@ -107,6 +107,7 @@
         {
           "type": "link",
           "name": "",
+          "url": "",
           "icon": "",
           "width": 1,
           "height": 1,
@@ -131,4 +132,4 @@
       ]
     }
   ]
-}
+}
diff --git a/src/Components/Main.js b/src/Components/Main.js
@@ -9,6 +9,7 @@ import EditCard from './EditConfig/EditCard';
 import EditPage from './EditConfig/EditPage';
 import defaultConfig from './EditConfig/defaultConfig.json';
 import isObject from './Common/isObject';
+import clone from './Common/clone';
 
 const styles = () => ({
   root: {
@@ -99,7 +100,7 @@ class Main extends React.Component {
   handleEditingComplete = () => this.setState({ editing: false });
 
   handleConfigChange = (path, value) => {
-    let { config } = this.props;
+    let config = clone(this.props.config);
     // Set the new value
     const lastItem = path.pop();
     let secondLastItem = path.reduce((o, k) => o[k] = o[k] || {}, config);
@@ -135,29 +136,29 @@ class Main extends React.Component {
     });
 
   handleCardAddDone = (path, card) => {
-    card && this.handleConfigChange(path, card);
+    card && this.handleConfigChange(path, clone(card));
     this.setState({ addingPage: undefined });
   };
 
   handleCardEdit = (groupId, cardId, card) =>
-    this.setState({ editingCard: { groupId, cardId, card } });
+    this.setState({ editingCard: { groupId, cardId, card: clone(card) } });
 
   handleCardEditDone = (path, card) => {
-    card && this.handleConfigChange(path, card);
+    card && this.handleConfigChange(path, clone(card));
     this.setState({ editingCard: undefined });
   };
 
   handlePageAdd = () => this.setState({ addingPage: true });
 
   handlePageAddDone = (id, page) => {
-    page && this.handleConfigChange(['pages', id], page);
+    page && this.handleConfigChange(['pages', id], clone(page));
     this.setState({ addingPage: false });
   };
 
-  handlePageEdit = (id, page) => this.setState({ editingPage: { id, page } });
+  handlePageEdit = (id, page) => this.setState({ editingPage: { id, page: clone(page) } });
 
   handlePageEditDone = (id, page) => {
-    page && this.handleConfigChange(['pages', id], page);
+    page && this.handleConfigChange(['pages', id], clone(page));
     this.setState({ editingPage: undefined });
   };