Connect components with event

1.campingList.cmp
<aura:component controller="CampingListController">
     <!--  <ol>
         <li>Bug Spray</li>
         <li>Bear Repellant</li>
         <li>Goat Food</li>
       </ol> -->
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <aura:handler name="addItem" event="c:addItemEvent" action="{!c.handleAddItem}"/>

    <aura:attribute name="newItem" type="Camping_Item__c" required="true" default="{
                                                       'sobjectType': 'Camping_Item__c',
                                                          'Name': '',
                                                          'Quantity__c':0,
                                                           'Price__c':0,
                                                           'Packed__c':false }"/>

       <aura:attribute name="items" type="Camping_Item__c[]"/>
   
    <div class="slds-col slds-col--padded slds-p-top--large">
       <c:campingListForm/>
    </div>
    <div class="slds-grid slds-m-top--large">

       <fieldset class="slds-box slds-theme--default slds-container--small">
            <legend id="newexpenseform1" class="slds-text-heading--small slds-p-vertical--medium">
          Camping List
         </legend>
              <section class="slds-card__body">
            <div id="list" class="row">
                <aura:iteration items="{!v.items}" var="item">
                    <c:campingListItem item="{!item}"/>
                </aura:iteration>
            </div>
        </section>
        </fieldset>
    </div>   
</aura:component>







2.campingListController.js
//remember when to use JSON.parse(JSON.Stringify())
//every action/function needs to be separated by ,
//mostly focus on conditions and validations and struct of ur code

({
    doInit: function(component, event, helper) {
    // Create the action
    var action = component.get("c.getItems");
    // Add callback behavior for when response is received
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
            component.set("v.items", response.getReturnValue());
        }
        else {
         console.log("Failed with state: " + state);
       }
    });

    $A.enqueueAction(action);
},
    handleAddItem: function(component, event, helper) {
        var item = event.getParam("item");
        var action = component.get("c.saveItem");
        action.setParams({
            "campingItem": item
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {       
             var items = component.get("v.items");
            items.push(response.getReturnValue());
            component.set("v.items", items);
            }
        });
        $A.enqueueAction(action);
    },

    clickCreateItem : function(component, event, helper) {
         var validCamping = true;
        // Name must not be blank
        var nameField = component.find("name");
        var name = nameField.get("v.value");
        var quantityField = component.find("quantity");
        var quantity = nameField.get("v.value");
         var priceField = component.find("price");
        var price = nameField.get("v.value");
         if ($A.util.isEmpty(name)){
            validCamping = false;
            nameField.set("v.errors", [{message:"Camping name can't be blank."}]);
        }
        else {
            nameField.set("v.errors", null);
        }
        
         if ($A.util.isEmpty(quantity)){
            validCamping = false;
            quantityField.set("v.errors", [{message:"Camping quantity can't be blank."}]);
        }
        else {
            quantityField.set("v.errors", null);
        }
        if ($A.util.isEmpty(price)){
            validCamping = false;
            priceField.set("v.errors", [{message:"Camping price can't be blank."}]);
        }
        else {
            priceField.set("v.errors", null);
        }
        
         if(validCamping){
             var newItem = component.get("v.newItem");
             console.log("Create item: " + JSON.stringify(newItem));
             // var newItems = component.get("v.items");
              //newItems.push(JSON.parse(JSON.stringify(newItem)));
           //component.set("v.items", newItems);
           helper.createItem(component, newItem);

           component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c','Name': '','Quantity__c': 0,
                    'Price__c': 0,'Packed__c': false });


       }
    }
})



3.campingListController.apxc
public with sharing class campingListController {
    
    //for insert item
    @AuraEnabled 
    public static List<Camping_Item__c> getItems() {
        return [SELECT Id, Name, Price__c, Quantity__c, Packed__c FROM Camping_Item__c];
    }
    
    //fetch record and return as a list
 
    @AuraEnabled
    public static Camping_Item__c saveItem(Camping_Item__c item) {
        upsert item;
        return item;
    }
}


4.campingListForm.cmp
//avoid using ui components instead of base lightning components
//errors in controllers and helpers are irritating #AF

<aura:component >
     <aura:registerEvent name="addItem" type="c:addItemEvent"/>

     <div aria-labelledby="newcampingform">
         <fieldset class="slds-box slds-theme--default slds-container--small">
    <legend id="newexpenseform" class="slds-text-heading--small slds-p-vertical--medium">
      Camping
    </legend>
 

    <!-- CREATE NEW EXPENSE FORM -->
    <form class="slds-form--stacked">
      <lightning:input type="text"
                         label="Camping Item Name"
                         name="Name"
                         value="{!v.newItem.Name}"
                         required="true"/> 
        <lightning:input type="number" aura:id="campinglistitemform" label="Quantity"
                             name="itemquantity"
                             min="1"
                             step="1"
                             value="{!v.newItem.Quantity__c}"
                             placeholder="0"/>
        <lightning:input type="number" aura:id="newItemForm" label="Price"
                             name="Price"
                             min="0.1"
                             formatter="currency"
                             step="0.01"
                             value="{!v.newItem.Price__c}"
                             messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>
        <lightning:input type="checkbox" 
                         label="Packed?"  
                         name="Packed"
                         checked="{!v.newItem.Packed__c}"/>
        <lightning:button variant="brand"
                         label="Create Camping Item" 
                         class="slds-m-top--medium"
                         onclick="{!c.clickCreateItem}"/>
    </form>
    
  </fieldset>   
    
        
        
    </div>
</aura:component>





5.campingListFormController.js
//you will face lot of issues while working with this controller


({
    submitForm : function(component, event, helper) {
             var validCamping = true;
        // Name must not be blank
        var nameField = component.find("name");
        var name = nameField.get("v.value");
        var quantityField = component.find("quantity");
        var quantity = nameField.get("v.value");
         var priceField = component.find("price");
        var price = nameField.get("v.value");
         if ($A.util.isEmpty(name)){
            validCamping = false;
            nameField.set("v.errors", [{message:"Camping name can't be blank."}]);
        }
        else {
            nameField.set("v.errors", null);
        }
        
         if ($A.util.isEmpty(quantity)){
            validCamping = false;
            quantityField.set("v.errors", [{message:"Camping quantity can't be blank."}]);
        }
        else {
            quantityField.set("v.errors", null);
        }
        if ($A.util.isEmpty(price)){
            validCamping = false;
            priceField.set("v.errors", [{message:"Camping price can't be blank."}]);
        }
        else {
            priceField.set("v.errors", null);
        }
        
         if(validCamping){
             //var newItem = component.get("v.newItem");
             //console.log("Create item: " + JSON.stringify(newItem));
             // var newItems = component.get("v.items");
              //newItems.push(JSON.parse(JSON.stringify(newItem)));
           //component.set("v.items", newItems);
           helper.createItem(component);
             
         }
    }
})




6.campingListformHelper.js
({
    createItem : function(component) {
        var newItem = component.get("v.newItem");
        var addEvent = component.getEvent("addItem");
        addEvent.setParams({"item" : newItem});
        addEvent.fire();
        component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c','Name': '','Quantity__c': 0,
                    'Price__c': 0,'Packed__c': false });

    }
})




7.addItemEvent.evt
//add simple event listener for item
<aura:event type="COMPONENT">
       <aura:attribute name="item" type="Camping_Item__c"/>
  </aura:event>