Skip to content

Commit a13ce79

Browse files
thetaPCthetaPC
committed
docs(react): update existing code comment
1 parent 79fbfd4 commit a13ce79

File tree

10 files changed

+26
-26
lines changed

10 files changed

+26
-26
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ Outside of the `usePhotoGallery()` method definition (the very bottom of the fil
118118

119119
```ts
120120
export function usePhotoGallery {
121-
// Same old code from before.
121+
// ...existing code...
122122
}
123123

124124
// CHANGE: Add the `UserPhoto` interface
@@ -135,7 +135,7 @@ export function usePhotoGallery {
135135
// CHANGE: Add the `photos` array
136136
const [photos, setPhotos] = useState<UserPhoto[]>([]);
137137

138-
// Same old code from before.
138+
// ...existing code...
139139
}
140140
```
141141

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { Filesystem, Directory } from '@capacitor/filesystem';
2626
import { Preferences } from '@capacitor/preferences';
2727

2828
export function usePhotoGallery() {
29-
// Same old code from before.
29+
// ...existing code...
3030

3131
// CHANGE: Add the `savePicture()` method
3232
const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
@@ -109,7 +109,7 @@ import { Filesystem, Directory } from '@capacitor/filesystem';
109109
import { Preferences } from '@capacitor/preferences';
110110

111111
export function usePhotoGallery() {
112-
// Same old code from before.
112+
// ...existing code...
113113

114114
// CHANGE: Update the `savePicture()` method
115115
const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,15 @@ export function usePhotoGallery() {
2727
// CHANGE: Add a key for photo storage
2828
const PHOTO_STORAGE = 'photos';
2929

30-
// Same old code from before.
30+
// ...existing code...
3131
}
3232
```
3333

3434
Next, at the end of the `addNewToGallery()` method, add a call to the `Preferences.set()` method to save the `photos` array. By adding it here, the `photos` array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved.
3535

3636
```ts
3737
const addNewToGallery = async () => {
38-
// Same old code from before.
38+
// ...existing code...
3939

4040
// CHANGE: Add method to cache all photo data for future retrieval
4141
Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
@@ -61,7 +61,7 @@ export function usePhotoGallery() {
6161
loadSaved();
6262
}, []);
6363

64-
// Same old code from before.
64+
// ...existing code...
6565
}
6666
```
6767

@@ -96,7 +96,7 @@ export function usePhotoGallery() {
9696
loadSaved();
9797
}, []);
9898

99-
// Same old code from before.
99+
// ...existing code...
100100
}
101101
```
102102

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import { Preferences } from '@capacitor/preferences';
3232
import { isPlatform } from '@ionic/react';
3333
import { Capacitor } from '@capacitor/core';
3434

35-
// Same old code from before.
35+
// ...existing code...
3636
```
3737

3838
## Platform-specific Logic

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ import { isPlatform } from '@ionic/react';
4848
import { Capacitor } from '@capacitor/core';
4949

5050
export function usePhotoGallery() {
51-
// Same old code from before.
51+
// ...existing code...
5252

5353
// CHANGE: Add `deletePhoto()` method
5454
const deletePhoto = async (photo: UserPhoto) => {
@@ -85,7 +85,7 @@ export interface UserPhoto {
8585
Next, in `Tab2.tsx`, implement the `IonActionSheet` component. We're adding two options: "Delete", which calls `usePhotoGallery.deletePicture()`, and "Cancel". The cancel button will automatically closes the action sheet when assigned the "cancel" role.
8686

8787
```tsx
88-
// Same old code from before.
88+
// ...existing code...
8989
// change: Add React import
9090
import { useState } from 'react';
9191
// CHANGE: Add `UserPhoto` type import.
@@ -100,7 +100,7 @@ const Tab2: React.FC = () => {
100100
return (
101101
<IonPage>
102102
<IonContent>
103-
{/* Same old code from before. */}
103+
{/* ...existing code... */}
104104

105105
<IonFab vertical="bottom" horizontal="center" slot="fixed">
106106
<IonFabButton onClick={() => addNewToGallery()}>
@@ -167,7 +167,7 @@ Add a click handler to the `<IonImg>` element. When the app user taps on a photo
167167
</IonRow>
168168
</IonGrid>
169169

170-
{/* Same old code from before. */}
170+
{/* ...existing code... */}
171171
</IonContent>
172172
</IonPage>
173173
```

‎versioned_docs/version-v7/react/your-first-app/2-taking-photos.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ Outside of the `usePhotoGallery()` method definition (the very bottom of the fil
118118

119119
```ts
120120
export function usePhotoGallery {
121-
// Same old code from before.
121+
// ...existing code...
122122
}
123123

124124
// CHANGE: Add the `UserPhoto` interface
@@ -135,7 +135,7 @@ export function usePhotoGallery {
135135
// CHANGE: Add the `photos` array
136136
const [photos, setPhotos] = useState<UserPhoto[]>([]);
137137

138-
// Same old code from before.
138+
// ...existing code...
139139
}
140140
```
141141

‎versioned_docs/version-v7/react/your-first-app/3-saving-photos.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { Filesystem, Directory } from '@capacitor/filesystem';
2626
import { Preferences } from '@capacitor/preferences';
2727

2828
export function usePhotoGallery() {
29-
// Same old code from before.
29+
// ...existing code...
3030

3131
// CHANGE: Add the `savePicture()` method
3232
const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
@@ -109,7 +109,7 @@ import { Filesystem, Directory } from '@capacitor/filesystem';
109109
import { Preferences } from '@capacitor/preferences';
110110

111111
export function usePhotoGallery() {
112-
// Same old code from before.
112+
// ...existing code...
113113

114114
// CHANGE: Update the `savePicture()` method
115115
const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {

‎versioned_docs/version-v7/react/your-first-app/4-loading-photos.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,15 @@ export function usePhotoGallery() {
2727
// CHANGE: Add a key for photo storage
2828
const PHOTO_STORAGE = 'photos';
2929

30-
// Same old code from before.
30+
// ...existing code...
3131
}
3232
```
3333

3434
Next, at the end of the `addNewToGallery()` method, add a call to the `Preferences.set()` method to save the `photos` array. By adding it here, the `photos` array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved.
3535

3636
```ts
3737
const addNewToGallery = async () => {
38-
// Same old code from before.
38+
// ...existing code...
3939

4040
// CHANGE: Add method to cache all photo data for future retrieval
4141
Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
@@ -61,7 +61,7 @@ export function usePhotoGallery() {
6161
loadSaved();
6262
}, []);
6363

64-
// Same old code from before.
64+
// ...existing code...
6565
}
6666
```
6767

@@ -96,7 +96,7 @@ export function usePhotoGallery() {
9696
loadSaved();
9797
}, []);
9898

99-
// Same old code from before.
99+
// ...existing code...
100100
}
101101
```
102102

‎versioned_docs/version-v7/react/your-first-app/5-adding-mobile.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import { Preferences } from '@capacitor/preferences';
3232
import { isPlatform } from '@ionic/react';
3333
import { Capacitor } from '@capacitor/core';
3434

35-
// Same old code from before.
35+
// ...existing code...
3636
```
3737

3838
## Platform-specific Logic

‎versioned_docs/version-v7/react/your-first-app/7-live-reload.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ import { isPlatform } from '@ionic/react';
4848
import { Capacitor } from '@capacitor/core';
4949

5050
export function usePhotoGallery() {
51-
// Same old code from before.
51+
// ...existing code...
5252

5353
// CHANGE: Add `deletePhoto()` method
5454
const deletePhoto = async (photo: UserPhoto) => {
@@ -85,7 +85,7 @@ export interface UserPhoto {
8585
Next, in `Tab2.tsx`, implement the `IonActionSheet` component. We're adding two options: "Delete", which calls `usePhotoGallery.deletePicture()`, and "Cancel". The cancel button will automatically closes the action sheet when assigned the "cancel" role.
8686

8787
```tsx
88-
// Same old code from before.
88+
// ...existing code...
8989
// change: Add React import
9090
import { useState } from 'react';
9191
// CHANGE: Add `UserPhoto` type import
@@ -100,7 +100,7 @@ const Tab2: React.FC = () => {
100100
return (
101101
<IonPage>
102102
<IonContent>
103-
{/* Same old code from before. */}
103+
{/* ...existing code... */}
104104

105105
<IonFab vertical="bottom" horizontal="center" slot="fixed">
106106
<IonFabButton onClick={() => addNewToGallery()}>
@@ -167,7 +167,7 @@ Add a click handler to the `<IonImg>` element. When the app user taps on a photo
167167
</IonRow>
168168
</IonGrid>
169169

170-
{/* Same old code from before. */}
170+
{/* ...existing code... */}
171171
</IonContent>
172172
</IonPage>
173173
```

0 commit comments

Comments
 (0)