docs(react): remove periods from comments

Author: thetaPC

docs/react/your-first-app.md

@@ -104,10 +104,10 @@ Next, import `@ionic/pwa-elements` by editing `src/main.tsx`.
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
-// CHANGE: Add the following import.
+// CHANGE: Add the following import
 import { defineCustomElements } from '@ionic/pwa-elements/loader';
 
-// CHANGE: Call the element loader before the render call.
+// CHANGE: Call the element loader before the render call
 defineCustomElements(window);
 
 const container = document.getElementById('root');
@@ -176,9 +176,9 @@ export default Tab2;
 We put the visual aspects of our app into `<IonContent>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon.
 
 ```tsx
-// CHANGE: Add the following import.
+// CHANGE: Add the following import
 import { camera, trash, close } from 'ionicons/icons';
-// CHANGE: Update the following import.
+// CHANGE: Update the following import
 import {
   IonContent,
   IonHeader,
@@ -194,7 +194,7 @@ import {
   IonImg,
   IonActionSheet,
 } from '@ionic/react';
-// CHANGE: Remove or comment out `ExploreContainer`.
+// CHANGE: Remove or comment out `ExploreContainer`
 // import ExploreContainer from '../components/ExploreContainer';
 import './Tab2.css';
 
@@ -212,14 +212,14 @@ const Tab2: React.FC = () => {
             <IonTitle size="large">Photo Gallery</IonTitle>
           </IonToolbar>
         </IonHeader>
-        {/* CHANGE: Add the floating action button. */}
+        {/* CHANGE: Add the floating action button */}
         <IonFab vertical="bottom" horizontal="center" slot="fixed">
           <IonFabButton>
             <IonIcon icon={camera}></IonIcon>
           </IonFabButton>
         </IonFab>
       </IonContent>
-      {/* CHANGE: Remove or comment out `ExploreContainer`. */}
+      {/* CHANGE: Remove or comment out `ExploreContainer` */}
       {/* <ExploreContainer name="Tab 2 page" /> */}
     </IonPage>
   );
@@ -243,7 +243,7 @@ import {
   setupIonicReact,
 } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
-// CHANGE: Update the following import.
+// CHANGE: Update the following import
 import { images, square, triangle } from 'ionicons/icons';
 import Tab1 from './pages/Tab1';
 import Tab2 from './pages/Tab2';
@@ -275,9 +275,9 @@ const App: React.FC = () => (
             <IonLabel>Tab 1</IonLabel>
           </IonTabButton>
           <IonTabButton tab="tab2" href="/tab2">
-            {/* CHANGE: Update icon. */}
+            {/* CHANGE: Update icon */}
             <IonIcon aria-hidden="true" icon={images} />
-            {/* CHANGE: Update label. */}
+            {/* CHANGE: Update label */}
             <IonLabel>Photos</IonLabel>
           </IonTabButton>
           <IonTabButton tab="tab3" href="/tab3">

docs/react/your-first-app/2-taking-photos.md

@@ -66,12 +66,12 @@ import {
   IonImg,
   IonActionSheet,
 } from '@ionic/react';
-// CHANGE: Add `usePhotoGallery` import.
+// CHANGE: Add `usePhotoGallery` import
 import { usePhotoGallery } from '../hooks/usePhotoGallery';
 import './Tab2.css';
 
 const Tab2: React.FC = () => {
-  // CHANGE: Destructure `addNewToGallery()` from `usePhotoGallery()`.
+  // CHANGE: Destructure `addNewToGallery()` from `usePhotoGallery()`
   const { addNewToGallery } = usePhotoGallery();
 
   return (
@@ -89,7 +89,7 @@ const Tab2: React.FC = () => {
         </IonHeader>
 
         <IonFab vertical="bottom" horizontal="center" slot="fixed">
-          {/* CHANGE: Add a click event listener to the floating action button. */}
+          {/* CHANGE: Add a click event listener to the floating action button */}
           <IonFabButton onClick={() => addNewToGallery()}>
             <IonIcon icon={camera}></IonIcon>
           </IonFabButton>
@@ -121,7 +121,7 @@ export function usePhotoGallery {
   // Same old code from before.
 }
 
-// CHANGE: Add the `UserPhoto` interface.
+// CHANGE: Add the `UserPhoto` interface
 export interface UserPhoto {
   filepath: string;
   webviewPath?: string;
@@ -132,7 +132,7 @@ Above the `addNewToGallery()` method, define an array of `UserPhoto`, which will
 
 ```ts
 export function usePhotoGallery {
-  // CHANGE: Add the `photos` array.
+  // CHANGE: Add the `photos` array
   const [photos, setPhotos] = useState<UserPhoto[]>([]);
 
   // Same old code from before.
@@ -153,9 +153,9 @@ export function usePhotoGallery() {
       quality: 100,
     });
 
-    // CHANGE: Create the `fileName` with current timestamp.
+    // CHANGE: Create the `fileName` with current timestamp
     const fileName = Date.now() + '.jpeg';
-    // CHANGE: Create `savedImageFile` matching `UserPhoto` interface.
+    // CHANGE: Create `savedImageFile` matching `UserPhoto` interface
     const savedImageFile = [
       {
         filepath: fileName,
@@ -164,13 +164,13 @@ export function usePhotoGallery() {
       ...photos,
     ];
 
-    // CHANGE: Update the `photos` array with the new photo.
+    // CHANGE: Update the `photos` array with the new photo
     setPhotos(savedImageFile);
   };
 
   return {
     addNewToGallery,
-    // CHANGE: Update return statement to include `photos` array.
+    // CHANGE: Update return statement to include `photos` array
     photos,
   };
 }
@@ -223,7 +223,7 @@ Next, switch to `Tab2.tsx` to display the images. We'll add a [Grid component](.
 
 ```tsx
 const Tab2: React.FC = () => {
-  // CHANGE: Add `photos` array to destructure from `usePhotoGallery()`.
+  // CHANGE: Add `photos` array to destructure from `usePhotoGallery()`
   const { photos, addNewToGallery } = usePhotoGallery();
 
   return (
@@ -240,10 +240,10 @@ const Tab2: React.FC = () => {
           </IonToolbar>
         </IonHeader>
 
-        {/* CHANGE: Add a grid component to display the photos. */}
+        {/* CHANGE: Add a grid component to display the photos */}
         <IonGrid>
           <IonRow>
-            {/* CHANGE: Create a new column and image component for each photo. */}
+            {/* CHANGE: Create a new column and image component for each photo */}
             {photos.map((photo) => (
               <IonCol size="6" key={photo.filepath}>
                 <IonImg src={photo.webviewPath} />

docs/react/your-first-app/3-saving-photos.md

@@ -28,7 +28,7 @@ import { Preferences } from '@capacitor/preferences';
 export function usePhotoGallery() {
   // Same old code from before.
 
-  // CHANGE: Add the `savePicture()` method.
+  // CHANGE: Add the `savePicture()` method
   const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
     return {
       filepath: 'soon...',
@@ -68,16 +68,16 @@ export function usePhotoGallery() {
     });
 
     const fileName = Date.now() + '.jpeg';
-    // CHANGE: Add `savedImageFile`.
+    // CHANGE: Add `savedImageFile`
     // Save the picture and add it to photo collection
     const savedImageFile = await savePicture(capturedPhoto, fileName);
 
-    // CHANGE: Update state with new photo.
+    // CHANGE: Update state with new photo
     const newPhotos = [savedImageFile, ...photos];
     setPhotos(newPhotos);
   };
 
-  // CHANGE: Add `savePicture()` method.
+  // CHANGE: Add `savePicture()` method
   const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
     return {
       filepath: 'soon...',
@@ -112,7 +112,7 @@ import { Preferences } from '@capacitor/preferences';
 export function usePhotoGallery() {
   // Same old code from before.
 
-  // CHANGE: Update the `savePicture()` method.
+  // CHANGE: Update the `savePicture()` method
   const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
     // Fetch the photo, read as a blob, then convert to base64 format
     const response = await fetch(photo.webPath!);
@@ -133,7 +133,7 @@ export function usePhotoGallery() {
     };
   };
 
-  // CHANGE: Add `convertBlobToBase64()` method.
+  // CHANGE: Add `convertBlobToBase64()` method
   const convertBlobToBase64 = (blob: Blob) => {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();

docs/react/your-first-app/4-loading-photos.md

@@ -24,7 +24,7 @@ Open `usePhotoGallery.ts` and begin by defining a constant variable that will ac
 ```ts
 export function usePhotoGallery() {
   const [photos, setPhotos] = useState<UserPhoto[]>([]);
-  // CHANGE: Add a key for photo storage.
+  // CHANGE: Add a key for photo storage
   const PHOTO_STORAGE = 'photos';
 
   // Same old code from before.
@@ -37,7 +37,7 @@ Next, at the end of the `addNewToGallery()` method, add a call to the `Preferenc
 const addNewToGallery = async () => {
   // Same old code from before.
 
-  // CHANGE: Add method to cache all photo data for future retrieval.
+  // CHANGE: Add method to cache all photo data for future retrieval
   Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
 };
 ```
@@ -50,9 +50,9 @@ export function usePhotoGallery() {
 
   const PHOTO_STORAGE = 'photos';
 
-  // CHANGE: Add useEffect hook.
+  // CHANGE: Add useEffect hook
   useEffect(() => {
-    // CHANGE: Add `loadSaved()` method.
+    // CHANGE: Add `loadSaved()` method
     const loadSaved = async () => {
       const { value: photoList } = await Preferences.get({ key: PHOTO_STORAGE });
       const photosInPreferences = (photoList ? JSON.parse(photoList) : []) as UserPhoto[];
@@ -76,12 +76,12 @@ export function usePhotoGallery() {
   const PHOTO_STORAGE = 'photos';
 
   useEffect(() => {
-    // CHANGE: Update `loadSaved()` method.
+    // CHANGE: Update `loadSaved()` method
     const loadSaved = async () => {
       const { value: photoList } = await Preferences.get({ key: PHOTO_STORAGE });
       const photosInPreferences = (photoList ? JSON.parse(photoList) : []) as UserPhoto[];
 
-      // CHANGE: Display the photo by reading into base64 format.
+      // CHANGE: Display the photo by reading into base64 format
       for (const photo of photosInPreferences) {
         const readFile = await Filesystem.readFile({
           path: photo.filepath,

docs/react/your-first-app/5-adding-mobile.md

@@ -28,7 +28,7 @@ import { useState, useEffect } from 'react';
 import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
 import { Filesystem, Directory } from '@capacitor/filesystem';
 import { Preferences } from '@capacitor/preferences';
-// CHANGE: Add imports.
+// CHANGE: Add imports
 import { isPlatform } from '@ionic/react';
 import { Capacitor } from '@capacitor/core';
 
@@ -42,10 +42,10 @@ First, we’ll update the photo saving functionality to support mobile. In the `
 Update `savePicture()` to look like the following:
 
 ```ts
-// CHANGE: Update the `savePicture()` method.
+// CHANGE: Update the `savePicture()` method
 const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
   let base64Data: string | Blob;
-  // CHANGE: Add platform check.
+  // CHANGE: Add platform check
   // "hybrid" will detect mobile - iOS or Android
   if (isPlatform('hybrid')) {
     const readFile = await Filesystem.readFile({
@@ -65,7 +65,7 @@ const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> =
     directory: Directory.Data,
   });
 
-  // CHANGE: Add platform check.
+  // CHANGE: Add platform check
   if (isPlatform('hybrid')) {
     // Display the new image by rewriting the 'file://' path to HTTP
     return {
@@ -86,12 +86,12 @@ const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> =
 Next, add a new bit of logic in the `loadSaved()` method. On mobile, we can directly point to each photo file on the Filesystem and display them automatically. On the web, however, we must read each image from the Filesystem into base64 format. This is because the Filesystem API uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) under the hood. Update the `loadSaved()` method:
 
 ```ts
-// CHANGE: Update `loadSaved` method.
+// CHANGE: Update `loadSaved` method
 const loadSaved = async () => {
   const { value: photoList } = await Preferences.get({ key: PHOTO_STORAGE });
   const photosInPreferences = (photoList ? JSON.parse(photoList) : []) as UserPhoto[];
 
-  // CHANGE: Add platform check.
+  // CHANGE: Add platform check
   // If running on the web...
   if (!isPlatform('hybrid')) {
     for (const photo of photosInPreferences) {

docs/react/your-first-app/7-live-reload.md

@@ -50,7 +50,7 @@ import { Capacitor } from '@capacitor/core';
 export function usePhotoGallery() {
   // Same old code from before.
 
-  // CHANGE: Add `deletePhoto()` method.
+  // CHANGE: Add `deletePhoto()` method
   const deletePhoto = async (photo: UserPhoto) => {
     // Remove this photo from the Photos reference data array
     const newPhotos = photos.filter((p) => p.filepath !== photo.filepath);
@@ -71,7 +71,7 @@ export function usePhotoGallery() {
   return {
     photos,
     addNewToGallery,
-    // CHANGE: Add `deletePhoto()` to the return statement.
+    // CHANGE: Add `deletePhoto()` to the return statement
     deletePhoto,
   };
 }
@@ -86,15 +86,15 @@ Next, in `Tab2.tsx`, implement the `IonActionSheet` component. We're adding two
 
 ```tsx
 // Same old code from before.
-// change: Add React import.
+// change: Add React import
 import { useState } from 'react';
 // CHANGE: Add `UserPhoto` type import.
 import type { UserPhoto } from '../hooks/usePhotoGallery';
 
 const Tab2: React.FC = () => {
-  // CHANGE: Add `deletePhoto()` method.
+  // CHANGE: Add `deletePhoto()` method
   const { photos, addNewToGallery, deletePhoto } = usePhotoGallery();
-  // CHANGE: Add state for the photo to delete.
+  // CHANGE: Add state for the photo to delete
   const [photoToDelete, setPhotoToDelete] = useState<UserPhoto>();
 
   return (
@@ -108,7 +108,7 @@ const Tab2: React.FC = () => {
           </IonFabButton>
         </IonFab>
 
-        {/* CHANGE: Add action sheet for deleting photos. */}
+        {/* CHANGE: Add action sheet for deleting photos */}
         <IonActionSheet
           isOpen={!!photoToDelete}
           buttons={[
@@ -147,7 +147,7 @@ Add a click handler to the `<IonImg>` element. When the app user taps on a photo
   <IonRow>
     {photos.map((photo) => (
       <IonCol size="6" key={photo.filepath}>
-        {/* CHANGE: Add a click event listener to each image. */}
+        {/* CHANGE: Add a click event listener to each image */}
         <IonImg src={photo.webviewPath} onClick={() => setPhotoToDelete(photo)} />
       </IonCol>
     ))}