Please follow the below steps for Challenge no #9
Lightning Component Framework Specialist

1. AddBoatReview.cmp
 <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="boatReview" type="BoatReview__c" access="public"/>
    <aura:attribute name="boatReviewRecord" type="Object" access="public"/>
    <aura:attribute name="boat" type="Boat__c"/>
    <aura:attribute name="recordError" type="String" access="private"/>
    <aura:registerEvent name="BoatReviewAdded" type="c:BoatReviewAdded"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <force:recordData aura:id="service"
                      targetError="{!v.recordError}"
                      targetRecord="{!v.boatReviewRecord}"
                      targetFields="{!v.boatReview}"
                      fields="Id,Name,Comment__c,Boat__c"
                      recordUpdated="{!c.onRecordUpdated}"
                      />
    <lightning:layout multipleRows="true">
        <lightning:layoutItem size="12" padding="around-small">
            <lightning:input name="title" label="Title" value="{!v.boatReview.Name}"/>
        </lightning:layoutItem>
        
        <lightning:layoutItem size="12" padding="around-small">
            <label class="slds-form-element__label" for="input-id-01">Description</label>
            <lightning:inputRichText value="{!v.boatReview.Comment__c}" disabledCategories="FORMAT_FONT"/>
        </lightning:layoutItem>
        
        <lightning:layoutItem size="12" padding="around-small">
            <label class="slds-form-element__label" for="input-id-01">Description</label>
            <c:FiveStarRating value="{!v.boatReview.Rating__c}" readonly="false"/>
        </lightning:layoutItem>
        
        
        <lightning:layoutItem size="12" class="slds-align--absolute-center">
            <lightning:button iconName="utility:save" label="Submit" onclick="{!c.onSave}"/>
        </lightning:layoutItem>
    </lightning:layout>
    <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            <ui:message title="Error" severity="error" closable="true">
                {!v.recordError}
            </ui:message>
        </div>
    </aura:if>
</aura:component>

2. AddBoatReviewController.js
({
    doInit : function(component, event, helper) {
        helper.onInit(component,event);
    },
    onSave : function(component, event, helper) {
        component.set("v.boatReview.Boat__c",component.get("v.boat.Id"));
        component.find("service").saveRecord(function(saveResult){
            if(saveResult.state==="SUCCESS" || saveResult.state === "DRAFT")
            {
                
               var resultsToast = $A.get("e.force:showToast");
                if(resultsToast)
                {
                    resultsToast.setParams({
                        "title": "Saved",
                        "message": "Boat Review Created"
                    });
                    resultsToast.fire(); 
                }
                else
                {
                    alert('Boat Review Created');
                }
            }
            else if (saveResult.state === "ERROR") {
                var errMsg='';
                console.log('Problem saving record, error: ' + JSON.stringify(saveResult.error));
                for (var i = 0; i < saveResult.error.length; i++) {
                    errMsg += saveResult.error[i].message + "\n";
                }
                component.set("v.recordError", errMsg);
            }
            else
            {
                console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
            }
            var boatReviewAddedEvnt=component.getEvent("boatReviewAdded");
                boatReviewAddedEvnt.fire();
                 helper.onInit(component,event,helper);
           
        });
       
    },
    onRecordUpdated : function(component, event, helper) {
        var eventParams = event.getParams();
        if(eventParams.changeType === "CHANGED") {
            var changedFields = eventParams.changedFields;
            var saveResultsToast = $A.get("e.force:showToast");
                if(saveResultsToast!='undefined')
                {
                    saveResultsToast.setParams({
                        "title": "Saved",
                        "message": "Boat Review Saved"
                    });
                    saveResultsToast.fire(); 
                }
                else
                {
                    alert('Boat Review Saved');
                }
        }
    }
})

3.AddBoatReviewHelper.js
({
    onInit : function(component,event) {
        component.find("service").getNewRecord(
            "BoatReview__c", // sObject type (entityAPIName)
            null,      // recordTypeId
            false,     // skip cache?
            $A.getCallback(function() {
                var rec = component.get("v.boatReview");
                var error = component.get("v.recordError");
                var boat=component.get("v.boat");
                if(error || (rec === null)) {
                    console.log("Error initializing record template: " + error);
                }
                else {
                    component.set("v.boatReviewRecord.Boat__c",boat.Id);
                    component.set("v.boatReview.Boat__c",boat.Id);
                }
            })
        );
    }
})

4. FiveStar.cmp
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="value" type="Integer" default="0" />
    <aura:attribute name="readonly" type="Boolean" default="false" />
    <aura:handler name="change" value="{!v.value}" action="{!c.onValueChange}"/>
    <ltng:require styles="{!$Resource.fivestar.rating.css}" />
    <ltng:require scripts="{!$Resource.fivestar.rating.js}"
            afterScriptsLoaded="{!c.afterScriptsLoaded}" />    
    <ul aura:id="ratingarea" class="{!v.readonly ? 'readonly c-rating' : 'c-rating'}"></ul>
</aura:component>

5. FiveStarContoller.js
({
    afterScriptsLoaded : function(component, event, helper) {
        var domEl = component.find("ratingarea").getElement();
        var currentRating = component.get('v.value');
        var readOnly = component.get('v.readonly');
        var maxRating = 5;
        var callback = function(rating) {
            component.set('v.value',rating);
        }
        component.ratingObj = rating(domEl,currentRating,maxRating,callback,readOnly); 
    },
    
    onValueChange: function(component,event,helper) {
        if (component.ratingObj) {
            var value = component.get('v.value');
            component.ratingObj.setRating(value,false);
        }
    }
})

6. BoatReviews.cmp

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" 
                controller="BoatReviews">
    
     
    <aura:attribute name="boat" type="Boat__c" access="public"/>
    <aura:attribute name="boatReviews" type="BoatReview__c[]" access="private"/>
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <aura:handler name="change" value="{!v.boat}" action="{!c.doInit}"/>
     <aura:method name="refresh" action="{!c.doInit}"> 
     </aura:method>
    <aura:iteration items="{!v.boatReviews}" var="BoatReview">
        <c:FiveStarRating aura:id="FiveStarRating" value="{!BoatReview.Rating__c}" readonly="true"/>
    </aura:iteration>
    

    <aura:if isTrue="{!v.boatReviews.length==0}">
        <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">   
              <ui:outputText value="No reviews available" />
        </lightning:layoutItem>
    </aura:if>
  <div class="slds-feed">
    <ul class="slds-feed__list">
         <ui:scrollerWrapper class="scrollerSize">
       <aura:iteration items="{!v.boatReviews}" var="review">
          
        <li class="slds-feed__item slds-scrollable_y">    
            <article class="slds-post">
                <header class="slds-post__header slds-media">
                <div class="slds-media__figure">
                    <a href="javascript:void(0);" class="slds-avatar slds-avatar_circle slds-avatar_large">
                        <img alt="{!review.CreatedBy.Name}" src="{!review.CreatedBy.SmallPhotoUrl}" title="{!review.CreatedBy.Name}"  />
                    </a>
                </div>
                <div class="slds-media__body">
                        <div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
                            <p><a data-userid="{!review.CreatedBy.Id}" href="javascript:void(0);" title="{!review.CreatedBy.Name}" onclick="{!c.onUserInfoClick}">
                                {!review.CreatedBy.Name}
                                </a> 
                                — {!review.CreatedBy.CompanyName}
                            </p>
                        </div>
                        <p class="slds-text-body_small">
                            <lightning:formattedDateTime value="{!review.LastModifiedDate}" year="numeric" month="short" day="numeric"  hour="2-digit" minute="2-digit" second="2-digit" />
                        </p>
                    </div>
            </header>
             <div class="slds-post__content slds-text-longform">
                 <p class="slds-text-title_caps">{!review.Name}</p>
                 
                 <p class="slds-text-body_small"><lightning:formattedRichText value="{!review.Comment__c}"/> </p>
            </div>
             <footer class="slds-post__footer">
    <ul class="slds-post__footer-actions-list slds-list_horizontal">
        <li class="slds-col slds-item slds-m-right_medium">
            <c:FiveStarRating value="{!review.Rating__c}" readonly="true"/>
        </li>
        
    </ul>
                 
</footer>
            </article>
          </li>
          
        </aura:iteration>
              </ui:scrollerWrapper>
    </ul>
  </div>
</aura:component>

6. BoatReviewsContoller.js

({
    refresh : function(component,event,helper){
        console.log("refresh called")
        this.doInit;
    },
    doInit : function(component,event,helper){
        console.log("BRCjs: doInit");
        helper.onInit(component, event);
    },
    onUserInfoClick : function(component,event,helper){
        var userId = event.currentTarget.getAttribute("data-userid");
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId" : userId,
        });
        navEvt.fire()

    },
})

7. BoatReviewsHelper.js
({
    onInit : function(component, event){
                var boat = component.get("v.boat");
                console.log("BRHjs:onInit started: boatId is " + boat.Id);
                var action = component.get("c.getAll");
                action.setParams({"boatId" : boat.Id});
                console.log("boatId: " + boat.Id);

                //add the callback behavior for when the response is received
                action.setCallback(this,function(response){
                    var state = response.getState();
                    if (state === "SUCCESS"){
                        component.set("v.boatReviews", response.getReturnValue());
                        console.log("APEX success");
                        }
                        else {
                        console.log("Failed with state: " + state);
                        }
                });
                //send action off to be executed in APEX
                $A.enqueueAction(action);
    },
})

Please like if you are able to clear your challenge.

Regards,
Shashi kumar

Superbadge
Lightning Component Framework Specialist

Challenge No #8
1. AddBoatReview.cmp


2. AddBoatReviewController.js
({
    doInit : function(component, event, helper) {
        helper.onInit(component,event);
    },
    onSave : function(component, event, helper) {
        component.set("v.boatReview.Boat__c",component.get("v.boat.Id"));
        component.find("service").saveRecord(function(saveResult){
            if(saveResult.state==="SUCCESS" || saveResult.state === "DRAFT")
            {
                
               var resultsToast = $A.get("e.force:showToast");
                if(resultsToast)
                {
                    resultsToast.setParams({
                        "title": "Saved",
                        "message": "Boat Review Created"
                    });
                    resultsToast.fire(); 
                }
                else
                {
                    alert('Boat Review Created');
                }
            }
            else if (saveResult.state === "ERROR") {
                var errMsg='';
                console.log('Problem saving record, error: ' + JSON.stringify(saveResult.error));
                for (var i = 0; i < saveResult.error.length; i++) {
                    errMsg += saveResult.error[i].message + "\n";
                }
                component.set("v.recordError", errMsg);
            }
            else
            {
                console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
            }
            var boatReviewAddedEvnt=component.getEvent("boatReviewAdded");
                boatReviewAddedEvnt.fire();
                 helper.onInit(component,event,helper);
           
        });
       
    },
    onRecordUpdated : function(component, event, helper) {
        var eventParams = event.getParams();
        if(eventParams.changeType === "CHANGED") {
            var changedFields = eventParams.changedFields;
            var saveResultsToast = $A.get("e.force:showToast");
                if(saveResultsToast!='undefined')
                {
                    saveResultsToast.setParams({
                        "title": "Saved",
                        "message": "Boat Review Saved"
                    });
                    saveResultsToast.fire(); 
                }
                else
                {
                    alert('Boat Review Saved');
                }
        }
    }
})

3. AddBoatReviewHelper.js
({
    onInit : function(component,event) {
        component.find("service").getNewRecord(
            "BoatReview__c", // sObject type (entityAPIName)
            null,      // recordTypeId
            false,     // skip cache?
            $A.getCallback(function() {
                var rec = component.get("v.boatReview");
                var error = component.get("v.recordError");
                var boat=component.get("v.boat");
                if(error || (rec === null)) {
                    console.log("Error initializing record template: " + error);
                }
                else {
                    component.set("v.boatReviewRecord.Boat__c",boat.Id);
                    component.set("v.boatReview.Boat__c",boat.Id);
                }
            })
        );
    }
})

4. BoatReviewAdded.evt
<aura:event type="Component" description="Event template">
    <aura:attribute name="BoatReviewAdded" type="Boat__c"/>
</aura:event>

5. BoatReviews.cmp

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" 
                controller="BoatReviews">
    
     <aura:attribute name="boat" type="Boat__c" access="public"/>
    <aura:handler name="change" value="{!v.boat}" action="{!c.refresh}"/>
    <aura:attribute name="boatReviews" type="BoatReview__c[]" access="private"/>
    <!-- set up the aura:method for refresh -->
    <aura:method name="refresh" action="{!c.doInit}" access="public"
                 description="BoatDetailsController.js invokes refresh whenever boat is updated">
    </aura:method>
     
    <ui:scrollerWrapper class="scrollerSize">
        <!--Scrollable content here -->
        <aura:if isTrue="{!v.boatReviews.length==0}">
            <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">   
                <ui:outputText value="No Reviews Available" />
            </lightning:layoutItem>
        </aura:if>
        <div class="slds-feed">
            <ul class="slds-feed__list">
                <aura:iteration items="{!v.boatReviews}" var="boatReview">
                    <li class="slds-feed__item">
                        <div class="slds-media__body">
                       <div class="slds-grid slds-has-flexi-truncate">
                            <a href="javascript:void(0)" onclick="{!c.onUserInfoClick}"
          data-userid="{!boatReview.CreatedBy.Id}">
          {!boatReview.CreatedBy.Name}
      </a>
                        &nbsp; &mdash; &nbsp; {!boatReview.CreatedBy.CompanyName}
   </div>
                         <p><lightning:formattedDateTime value="{!boatReview.CreatedDate}" 
                                   year="numeric" month="short" day="numeric"  
                                   hour="2-digit" minute="2-digit" hour12="true"/></p>
                        </div>
                    </li>
                </aura:iteration>
            </ul>
        </div>
    </ui:scrollerWrapper>
    
    
</aura:component>

6.BoatReviewsController.js
({
    refresh : function(component,event,helper){
        console.log("refresh called")
        this.doInit;
    },
    doInit : function(component,event,helper){
        console.log("BRCjs: doInit");
        helper.onInit(component, event);
    },
    onUserInfoClick : function(component,event,helper){
        var userId = event.currentTarget.getAttribute("data-userid");
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId" : userId,
        });
        navEvt.fire()

    },
})

7. BoatReviewsHelper.js
({
    onInit : function(component, event){
                var boat = component.get("v.boat");
                console.log("BRHjs:onInit started: boatId is " + boat.Id);
                var action = component.get("c.getAll");
                action.setParams({"boatId" : boat.Id});
                console.log("boatId: " + boat.Id);

                //add the callback behavior for when the response is received
                action.setCallback(this,function(response){
                    var state = response.getState();
                    if (state === "SUCCESS"){
                        component.set("v.boatReviews", response.getReturnValue());
                        console.log("APEX success");
                        }
                        else {
                        console.log("Failed with state: " + state);
                        }
                });
                //send action off to be executed in APEX
                $A.enqueueAction(action);
    },
})

8. BoatDetailController.js
({
     onFullDetails: function(component, event, helper) {
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": component.get("v.boat.Id")
        });
        navEvt.fire();
    }
})

9. BoatSelected.evt
<aura:event type="APPLICATION" description="BoatSelected fired from BoatTileController's onBoatClick handler">
    <aura:attribute name="boat" type="Boat__c"/>
</aura:event>

10. BoatSelect.evt
<aura:event type="COMPONENT" description="Boat Event">
    <aura:attribute name="boatId" type="Id"/>
</aura:event>

11. BoatDetail.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="boat" type="Boat__c"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="showButton" type="Boolean" default="false"/>    
     <lightning:button label="Full Details" onclick="{!c.onFullDetails }" />
    <lightning:card iconName="utility:anchor">        
        <aura:set attribute="title">
            {!v.boat.Contact__r.Name}'s boat
        </aura:set>
        <aura:set attribute="actions">
            <aura:if isTrue='{!v.showButton}'>
            <lightning:button label="Full Details" onclick="{!c.onFullDetails}"/>
            </aura:if>
        </aura:set>
        <p class="slds-p-horizontal_small">
            <lightning:layout >                
                <lightning:layoutItem flexibility="grow" size="6" mediumDeviceSize="6" largeDeviceSize="6">
                    <div class="slds-p-horizontal--small">
                        <div class="boatproperty">
                            <span class="label">Boat Name:</span>
                            <span><ui:outputText value="{!v.boat.Name}"/></span>
                        </div>
                        <div class="boatproperty">
                            <span class="label">Type:</span>
                            <span><ui:outputText value="{!v.boat.BoatType__r.Name}"/></span>
                        </div>
                        <div class="boatproperty">
                            <span class="label">Length:</span>
                            <span><ui:outputText value="{!v.boat.Length__c}"/> ft</span>
                        </div>
                        <div class="boatproperty">
                            <span class="label">Est. Price:</span>
                            <span><lightning:formattedNumber value="{!v.boat.Price__c}" currencyCode="USD" style="currency" currencyDisplayAs="symbol"/></span>
                        </div>
                        <div class="boatproperty">
                            <span class="label">Description:</span>
                            <span><ui:outputRichText class="slds-text-longform" value="{!v.boat.Description__c}"/></span>
                        </div>
                    </div>
                </lightning:layoutItem>
                <lightning:layoutItem flexibility="grow" size="6" mediumDeviceSize="6" largeDeviceSize="6">
                    <div class="imageview" style="{!'background-image:url(\'' + v.boat.Picture__c + '\')'}"/>
                </lightning:layoutItem>
            </lightning:layout>
        </p>
    </lightning:card>
</aura:component>

12. BoatDetailsController.js
({
    init: function(component, event, helper) {
        component.set("v.enableFullDetails", $A.get("e.force:navigateToSObject"));
    },
    onFullDetails: function(component, event, helper) {
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": component.get("v.boat.Id")
        });
        navEvt.fire();
    },    
    onBoatSelected : function(component, event, helper) {
        var boatSelected = event.getParam("boat");
        component.set("v.id",boatSelected.Id);
        var service = component.find("service");
        service.reloadRecord() ;
    },
    onRecordUpdated : function(component, event, helper){
        var boat = component.get("v.boat");
        console.log("onRecordUpdated called | boat: " + boat.Id);

        //invoke a refresh on the reviews tab, calling public method refresh
        var BoatReviews = component.find("BoatReviews");
        console.log("BoatReviews: " + BoatReviews);
        if(typeof BoatReviews != 'undefined'){
            BoatReviews.refresh();
        }
    },

   /* Earlier dated on 8 Jan2018
    *  onBoatReviewAdded : function(component, event, helper) {
    console.log('Event received');
    component.find("details").set("v.selectedTabId", "boatreviewtab");
}*/
    
    
    onBoatReviewAdded : function(component, event, helper){
        console.log("BDCjs: onBoatReviewAdded")
        component.find("tabs").set("v.selectedTabId", "boatreviewtab");

        //invoke a refresh on the reviews tab, calling public method refresh
        var BoatReviews = component.find("BoatReviews");
        //BRcmp is the aura:id for the component when invoked in BoatDetails.cmp
        BoatReviews.refresh();

    },
    
    
    
    
    
    
})

13. BoatDetails.cmp
 
 <aura:component description="BoatDetails"
                implements="flexipage:availableForAllPageTypes">

<aura:registerEvent name="BoatReviewAdded" type="c:BoatReviewAdded"/>
  <aura:handler name="reviewAdded" event="c:BoatReviewAdded" action="{!c.onBoatReviewAdded}"/>
    <aura:attribute name="boat" type="Boat__c"/>
    <aura:attribute name="recordError" type="String"/>
    <aura:attribute name="id" type="Id" default="" access="public"/>
    <aura:handler event="c:BoatSelected" action="{!c.onBoatSelected}"/>
    <lightning:tab label="Reviews" id="boatreviewtab">
          <c:BoatReviews boat="{!v.boat}" aura:id="BRcmp"/>
 </lightning:tab>
   

    <force:recordData aura:id="service"
                      recordId="{!v.id}"
                      mode="VIEW"
                      fields="Id,
                                Name,
                                Description__c,
                                Price__c, Length__c,
                                Contact__r.Name,
                                Contact__r.Email,
                                Contact__r.HomePhone,
                                BoatType__r.Name,
                                Picture__c"

                      targetFields="{!v.boat}"
                      targetError="{!v.recordError}"
                      recordUpdated="{!c.onRecordUpdated}" />

    <lightning:tabset variant="scoped" selectedTabId="{!v.selTabId}">
            <lightning:tab label="Details" id="details" >
                <c:BoatDetail boat="{!v.boat}"/>
            </lightning:tab>
            <lightning:tab label="Reviews" id="boatreviewtab" >
               
            </lightning:tab>
            <lightning:tab label="Add Review" id="addReview" >
                 <c:AddBoatReview boat="{!v.boat}"/>
            </lightning:tab>
        </lightning:tabset>
       
    <aura:if isTrue="{! !empty(v.boat)}">
        <article class="slds-card">
                <lightning:tabset >
                    <lightning:tab label="Details" id="details">
                        <c:BoatDetail boat="{!v.boat}"/>
                    </lightning:tab>
                    <lightning:tab label="Reviews" id="boatreviewtab">
                        Sample review
                    </lightning:tab>
                    <lightning:tab label="Add Review" id="addReview">
                        Sample add review
                    </lightning:tab>
                </lightning:tabset>
        </article>
    </aura:if>
</aura:component>

14. BoatTileController.js
({
    onBoatClick : function(component, event, helper) {
        var BoatSelectEvent = component.getEvent('BoatSelect');
        var boat = component.get('v.boat');
        BoatSelectEvent.setParams({
            "boatId" : boat.Id
        });
        BoatSelectEvent.fire(); 
        
        //var BoatSelectedEvt = component.getEvent('boatselected');
        var BoatSelectedEvt = $A.get('e.c:BoatSelected');
        BoatSelectedEvt.setParams({
            "boat" : boat
        });        
        BoatSelectedEvt.fire();
    }
})