add/delete tech working in createNewTech page

Star-Nosed-Mole · Jul 27, 2020 · 8b9f3f6 · 8b9f3f6
1 parent 1335a44
commit 8b9f3f6
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 4 deletions.
diff --git a/client/components/MakeMap.js b/client/components/MakeMap.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import Bubble from './Bubble';
+import { findConfigFile } from 'typescript';
 
 // import MainContainer from './containers/MainContainer';
 class MakeMap extends Component {
@@ -8,7 +9,7 @@ class MakeMap extends Component {
     this.state = {
       name: 'React',
       color: 'hsl(191, 70%, 50%)',
-      loc: 13285,
+      loc: 0,
       children: []
     };
 
@@ -35,12 +36,62 @@ class MakeMap extends Component {
     })
       .then((res) => res.json())
       .then((data) => {
-        console.log(data);
+        // create innerBubble objec to push to children array
+        let innerBubble = {};
+        // let name = data.name;
+        console.log('DATA OBJ: ', data.type, data.name);
+        // create shallow copy of state's children array to manipulate
         let childrenArray = [...this.state.children];
-        childrenArray.push(data);
+        // check if childrenArray is empty
+        if (childrenArray.length === 0) {
+          innerBubble.name = data.name;
+          innerBubble.loc = 5000;
+          console.log('IN LENGTH 0 check');
+          if (data.type === 'state-management') {
+            innerBubble.color = 'hsl(228, 96%, 51%)';
+          } else if (data.type === 'ui-components') {
+            innerBubble.color = 'hsl(24, 96%, 67%)';
+          } else if (data.type === 'router') {
+            innerBubble.color = 'hsl(156, 41%, 54%)';
+          }
+        }
+        let nameExists = false;
+        for (let i = 0; i < childrenArray.length; i++) {
+          // if a bubble object doesn't exist with name property
+          if (childrenArray[i].name === data.name) {
+            // do something
+            nameExists = true;
+            childrenArray.splice(i, 1);
+            console.log('CHIDLREN ARRAY: ', childrenArray);
+            this.setState({
+              ...this.state,
+              children: childrenArray
+            });
+          }
+        }
+
+        if (nameExists === false) {
+          console.log('TEST');
+          innerBubble.name = data.name;
+          innerBubble.loc = 6000;
+          if (data.type === 'state-management') {
+            innerBubble.color = 'hsl(228, 96%, 51%)';
+          } else if (data.type === 'ui-components') {
+            innerBubble.color = 'hsl(24, 96%, 67%)';
+          } else if (data.type === 'router') {
+            innerBubble.color = 'hsl(156, 41%, 54%)';
+          }
+        }
+
+        // take location and name add to an object and push copy of state.children array
+        // if data.type === 'state management' set color to blue
+        childrenArray.push(innerBubble);
         this.setState({
+          ...this.state,
           children: childrenArray
         });
+
+        console.log('STATE: ', this.state);
       });
   }
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -44,7 +44,8 @@ module.exports = {
     contentBase: path.join(__dirname, '/client'),
     publicPath: 'http://localhost:8080/build/',
     proxy: {
-      '/api': 'http://localhost:3000'
+      '/api': 'http://localhost:3000',
+      '/make': 'http://localhost:3000'
     }
   }
 };