feat: reducer logic for add-request

packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/index.js

@@ -39,14 +39,18 @@ const CollectionItem = ({item, collectionId, actions, dispatch, activeRequestTab
     });
   };
 
+  const addRequest = () => {
+    dispatch({
+      type: actions.ADD_REQUEST,
+      itemId: item.id,
+      collectionId: collectionId
+    });
+  };
+
   let indents = range(item.depth);
 
   const onDropdownCreate = (ref) => dropdownTippyRef.current = ref;
 
-  const stopEventPropogation = (event) => {
-    event.stopPropagation();
-  };
-
   return (
     <StyledWrapper className="flex flex-col">
       <div
@@ -87,8 +91,7 @@ const CollectionItem = ({item, collectionId, actions, dispatch, activeRequestTab
               <div>
                 <div className="dropdown-item" onClick={(e) => {
                   dropdownTippyRef.current.hide();
-                  stopEventPropogation(e);
+                  addRequest();
-                  console.log('Clicked');
                 }}>
                   Add Request
                 </div>
@@ -102,7 +105,7 @@ const CollectionItem = ({item, collectionId, actions, dispatch, activeRequestTab
         <div>
           {item.items && item.items.length ? item.items.map((i) => {
             return <CollectionItem
-              key={i.name}
+              key={i.id}
               item={i}
               collectionId={collectionId}
               actions={actions}

packages/grafnode-run/src/providers/Store/actions.js

@@ -3,11 +3,13 @@ const SIDEBAR_COLLECTION_ITEM_CLICK = "SIDEBAR_COLLECTION_ITEM_CLICK";
 const REQUEST_TAB_CLICK = "REQUEST_TAB_CLICK";
 const REQUEST_TAB_CLOSE = "REQUEST_TAB_CLOSE";
 const RESPONSE_RECEIVED = "RESPONSE_RECEIVED";
+const ADD_REQUEST = "ADD_REQUEST";
 
 export default {
   SIDEBAR_COLLECTION_CLICK,
   SIDEBAR_COLLECTION_ITEM_CLICK,
   REQUEST_TAB_CLICK,
   REQUEST_TAB_CLOSE,
-  RESPONSE_RECEIVED
+  RESPONSE_RECEIVED,
+  ADD_REQUEST
 };

packages/grafnode-run/src/providers/Store/reducer.js

@@ -1,4 +1,5 @@
 import produce from 'immer';
+import {nanoid} from 'nanoid';
 import find from 'lodash/find';
 import filter from 'lodash/filter';
 import actions from './actions';
@@ -85,6 +86,44 @@ const reducer = (state, action) => {
       });
     }
 
+    case actions.ADD_REQUEST: {
+      return produce(state, (draft) => {
+        const collection = find(draft.collections, (c) => c.id === action.collectionId);
+        console.log('a');
+
+        if(collection) {
+          let flattenedItems = flattenItems(collection.items);
+          let item = findItem(flattenedItems, action.itemId);
+        console.log('b');
+          
+          if(item) {
+        console.log('c');
+            if(!isItemARequest(item)) {
+              console.log('d');
+              item.items.push({
+                "id": nanoid(),
+                "depth": 2,
+                "name": "Capsules 2",
+                "request": {
+                  "url": "https://api.spacex.land/graphql/",
+                  "method": "POST",
+                  "headers": [],
+                  "body": {
+                    "mimeType": "application/graphql",
+                    "graphql": {
+                      "query": "{\n  launchesPast(limit: 10) {\n    mission_name\n    launch_date_local\n    launch_site {\n      site_name_long\n    }\n    links {\n      article_link\n      video_link\n    }\n    rocket {\n      rocket_name\n      first_stage {\n        cores {\n          flight\n          core {\n            reuse_count\n            status\n          }\n        }\n      }\n      second_stage {\n        payloads {\n          payload_type\n          payload_mass_kg\n          payload_mass_lbs\n        }\n      }\n    }\n    ships {\n      name\n      home_port\n      image\n    }\n  }\n}",
+                      "variables": ""
+                    }
+                  }
+                },
+                "response": null
+              });
+            }
+          }
+        }
+      });
+    }
+
     default: {
       return state;
     }