From 4a13e0a42792851cf136544887d62d615062be0e Mon Sep 17 00:00:00 2001
From: Hrafnkell Baldursson <hrafnkell.baldursson@advania.is>
Date: Tue, 21 Sep 2021 11:37:43 +0000
Subject: [PATCH] docs(example): Add comments to app-crashes example

---
 example/src/components/app-crashes/app-crashes.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/example/src/components/app-crashes/app-crashes.tsx b/example/src/components/app-crashes/app-crashes.tsx
index 831598f..c093383 100644
--- a/example/src/components/app-crashes/app-crashes.tsx
+++ b/example/src/components/app-crashes/app-crashes.tsx
@@ -54,7 +54,7 @@ export class AppCrashes {
     }
   }
 
-  async presentErrorReportItemModal(items: ErrorReportItem[]) {
+  async presentErrorReportItemsModal(items: ErrorReportItem[]) {
     const modal = await modalController.create({
       component: 'error-report-items-modal',
       componentProps: { items },
@@ -103,20 +103,23 @@ export class AppCrashes {
           { this.crashReport ? Object.keys(this.crashReport).map(key => {
             const value = this.crashReport[key];
             let renderedValue;
-            let errorReportItems: ErrorReportItem[];
 
+            // Extract items we will display in the modal when the item is clicked
+            let errorReportModalItems: ErrorReportItem[];
+            // If the value is an object, we need to add all key/value items to the errorReportModalItems
             const valueIsObject = value && typeof value === 'object' && value.length === undefined;
             if (valueIsObject) {
               const keys = Object.keys(value);
               renderedValue = `${keys.length} properties`;
-              errorReportItems = keys.map(valueKey => ({ label: valueKey, value: value[valueKey] }));
+              errorReportModalItems = keys.map(valueKey => ({ label: valueKey, value: value[valueKey] }));
             } else {
+              // If the value is not an object, add the value as is to the errorReportModalItems
               renderedValue = value;
-              errorReportItems = [{ label: key, value }];
+              errorReportModalItems = [{ label: key, value }];
             }
 
             return (
-              <ion-item detail onClick={() => this.presentErrorReportItemModal(errorReportItems)}>
+              <ion-item detail onClick={() => this.presentErrorReportItemsModal(errorReportModalItems)}>
                 <ion-label>
                   <h3>{key}</h3>
                   <p>{renderedValue}</p>