Skip to content

Commit b3489b4

Browse files
thetaPCthetaPC
committed
docs(react): update imports
1 parent 8544a57 commit b3489b4

File tree

12 files changed

+206
-132
lines changed

12 files changed

+206
-132
lines changed

‎docs/react/your-first-app.md‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -194,23 +194,9 @@ We put the visual aspects of our app into `<IonContent>`. In this case, it’s w
194194

195195
```tsx
196196
// CHANGE: Add the following import
197-
import { camera, trash, close } from 'ionicons/icons';
197+
import { camera } from 'ionicons/icons';
198198
// CHANGE: Update the following import
199-
import {
200-
IonContent,
201-
IonHeader,
202-
IonPage,
203-
IonTitle,
204-
IonToolbar,
205-
IonFab,
206-
IonFabButton,
207-
IonIcon,
208-
IonGrid,
209-
IonRow,
210-
IonCol,
211-
IonImg,
212-
IonActionSheet,
213-
} from '@ionic/react';
199+
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon } from '@ionic/react';
214200
// CHANGE: Remove or comment out `ExploreContainer`
215201
// import ExploreContainer from '../components/ExploreContainer';
216202
import './Tab2.css';
@@ -247,7 +233,7 @@ const Tab2: React.FC = () => {
247233
export default Tab2;
248234
```
249235

250-
Next, open `src/views/TabsPage.vue`. Change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button.
236+
Next, open `src/App.tsx`. Change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button.
251237

252238
```tsx
253239
import { Redirect, Route } from 'react-router-dom';

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

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,7 @@ Create a new file at `src/hooks/usePhotoGallery.ts` and open it up.
2424
Next, define a new method, `usePhotoGallery()`, that will contain the core logic to take a device photo and save it to the filesystem. Let’s start by opening the device camera.
2525

2626
```ts
27-
import { useState, useEffect } from 'react';
28-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
29-
import { Filesystem, Directory } from '@capacitor/filesystem';
30-
import { Preferences } from '@capacitor/preferences';
27+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
3128

3229
export function usePhotoGallery() {
3330
const addNewToGallery = async () => {
@@ -50,22 +47,8 @@ Notice the magic here: there's no platform-specific code (web, iOS, or Android)!
5047
Next, in `Tab2.tsx`, import the `usePhotoGallery()` method and destructure it to call its `addNewToGallery()` method.
5148

5249
```tsx
53-
import { camera, trash, close } from 'ionicons/icons';
54-
import {
55-
IonContent,
56-
IonHeader,
57-
IonPage,
58-
IonTitle,
59-
IonToolbar,
60-
IonFab,
61-
IonFabButton,
62-
IonIcon,
63-
IonGrid,
64-
IonRow,
65-
IonCol,
66-
IonImg,
67-
IonActionSheet,
68-
} from '@ionic/react';
50+
import { camera } from 'ionicons/icons';
51+
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon } from '@ionic/react';
6952
// CHANGE: Add `usePhotoGallery` import
7053
import { usePhotoGallery } from '../hooks/usePhotoGallery';
7154
import './Tab2.css';
@@ -131,6 +114,10 @@ export interface UserPhoto {
131114
Above the `addNewToGallery()` method, define an array of `UserPhoto`, which will contain a reference to each photo captured with the Camera. Make it a state variable using React's [useState hook](https://react.dev/reference/react/useState).
132115

133116
```ts
117+
// CHANGE: Add import
118+
import { useState } from 'react';
119+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
120+
134121
export function usePhotoGallery {
135122
// CHANGE: Add the `photos` array
136123
const [photos, setPhotos] = useState<UserPhoto[]>([]);
@@ -145,6 +132,7 @@ Over in the `addNewToGallery()` method, add the newly captured photo to the begi
145132
export function usePhotoGallery() {
146133
const [photos, setPhotos] = useState<UserPhoto[]>([]);
147134

135+
// CHANGE: Update `addNewToGallery()` method
148136
const addNewToGallery = async () => {
149137
// Take a photo
150138
const capturedPhoto = await Camera.getPhoto({
@@ -179,10 +167,8 @@ export function usePhotoGallery() {
179167
`usePhotoGallery.ts` should now look like this:
180168

181169
```ts
182-
import { useState, useEffect } from 'react';
183-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
184-
import { Filesystem, Directory } from '@capacitor/filesystem';
185-
import { Preferences } from '@capacitor/preferences';
170+
import { useState } from 'react';
171+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
186172

187173
export function usePhotoGallery() {
188174
const [photos, setPhotos] = useState<UserPhoto[]>([]);
@@ -222,6 +208,24 @@ export interface UserPhoto {
222208
Next, switch to `Tab2.tsx` to display the images. We'll add a [Grid component](../../api/grid.md) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `UserPhoto`'s `photos` array. For each item, add an [Image component](../../api/img.md) and set its `src` property to the photo's path.
223209

224210
```tsx
211+
import { camera } from 'ionicons/icons';
212+
// CHANGE: Update import
213+
import {
214+
IonContent,
215+
IonHeader,
216+
IonPage,
217+
IonTitle,
218+
IonToolbar,
219+
IonFab,
220+
IonFabButton,
221+
IonIcon,
222+
IonGrid,
223+
IonRow,
224+
IonCol,
225+
IonImg,
226+
} from '@ionic/react';
227+
import { usePhotoGallery } from '../hooks/usePhotoGallery';
228+
225229
const Tab2: React.FC = () => {
226230
// CHANGE: Add `photos` array to destructure from `usePhotoGallery()`
227231
const { photos, addNewToGallery } = usePhotoGallery();

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@ We’re now able to take multiple photos and display them in a photo gallery on
2020
Fortunately, saving them to the filesystem only takes a few steps. Begin by creating a new class method, `savePicture()`, in the `usePhotoGallery()` method in `usePhotoGallery.ts`.
2121

2222
```ts
23-
import { useState, useEffect } from 'react';
24-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
25-
import { Filesystem, Directory } from '@capacitor/filesystem';
26-
import { Preferences } from '@capacitor/preferences';
23+
import { useState } from 'react';
24+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
25+
// CHANGE: Add import
26+
import type { Photo } from '@capacitor/camera';
2727

2828
export function usePhotoGallery() {
2929
// ...existing code...
@@ -51,10 +51,9 @@ export interface UserPhoto {
5151
We can use this new method immediately in `addNewToGallery()`.
5252

5353
```ts
54-
import { useState, useEffect } from 'react';
55-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
56-
import { Filesystem, Directory } from '@capacitor/filesystem';
57-
import { Preferences } from '@capacitor/preferences';
54+
import { useState } from 'react';
55+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
56+
import type { Photo } from '@capacitor/camera';
5857

5958
export function usePhotoGallery() {
6059
const [photos, setPhotos] = useState<UserPhoto[]>([]);
@@ -103,10 +102,11 @@ Then, pass the data to the Filesystem's `writeFile` method. Recall that we displ
103102
For now, create a new helper method, `convertBlobToBase64()`, to implement the necessary logic for running on the web.
104103

105104
```ts
106-
import { useState, useEffect } from 'react';
107-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
105+
import { useState } from 'react';
106+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
107+
import type { Photo } from '@capacitor/camera';
108+
// CHANGE: Add import
108109
import { Filesystem, Directory } from '@capacitor/filesystem';
109-
import { Preferences } from '@capacitor/preferences';
110110

111111
export function usePhotoGallery() {
112112
// ...existing code...
@@ -159,10 +159,10 @@ export interface UserPhoto {
159159
`usePhotoGallery.ts` should now look like this:
160160

161161
```ts
162-
import { useState, useEffect } from 'react';
163-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
162+
import { useState } from 'react';
163+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
164+
import type { Photo } from '@capacitor/camera';
164165
import { Filesystem, Directory } from '@capacitor/filesystem';
165-
import { Preferences } from '@capacitor/preferences';
166166

167167
export function usePhotoGallery() {
168168
const [photos, setPhotos] = useState<UserPhoto[]>([]);

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

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,17 +34,42 @@ export function usePhotoGallery() {
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
37-
const addNewToGallery = async () => {
37+
import { useState } from 'react';
38+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
39+
import type { Photo } from '@capacitor/camera';
40+
import { Filesystem, Directory } from '@capacitor/filesystem';
41+
// CHANGE: Add import
42+
import { Preferences } from '@capacitor/preferences';
43+
44+
export function usePhotoGallery() {
45+
// ...existing code...
46+
47+
const addNewToGallery = async () => {
48+
// ...existing code...
49+
50+
// CHANGE: Add method to cache all photo data for future retrieval
51+
Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
52+
};
53+
3854
// ...existing code...
3955

40-
// CHANGE: Add method to cache all photo data for future retrieval
41-
Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
42-
};
56+
return {
57+
addNewToGallery,
58+
photos,
59+
};
60+
}
4361
```
4462

4563
With the photo array data saved, create a new method in the `usePhotoGallery()` called `loadSaved()` that can retrieve the photo data. We use the same key to retrieve the `photos` array in JSON format, then parse it into an array.
4664

4765
```ts
66+
// CHANGE: Update import
67+
import { useState, useEffect } from 'react';
68+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
69+
import type { Photo } from '@capacitor/camera';
70+
import { Filesystem, Directory } from '@capacitor/filesystem';
71+
import { Preferences } from '@capacitor/preferences';
72+
4873
export function usePhotoGallery() {
4974
const [photos, setPhotos] = useState<UserPhoto[]>([]);
5075

@@ -104,7 +129,8 @@ export function usePhotoGallery() {
104129

105130
```ts
106131
import { useState, useEffect } from 'react';
107-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
132+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
133+
import type { Photo } from '@capacitor/camera';
108134
import { Filesystem, Directory } from '@capacitor/filesystem';
109135
import { Preferences } from '@capacitor/preferences';
110136

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { useState, useEffect } from 'react';
2828
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
2929
import { Filesystem, Directory } from '@capacitor/filesystem';
3030
import { Preferences } from '@capacitor/preferences';
31-
// CHANGE: Add imports
31+
// CHANGE: Add import
3232
import { isPlatform } from '@ionic/react';
3333
import { Capacitor } from '@capacitor/core';
3434

@@ -113,7 +113,8 @@ Our Photo Gallery now consists of one codebase that runs on the web, Android, an
113113

114114
```ts
115115
import { useState, useEffect } from 'react';
116-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
116+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
117+
import type { Photo } from '@capacitor/camera';
117118
import { Filesystem, Directory } from '@capacitor/filesystem';
118119
import { Preferences } from '@capacitor/preferences';
119120
import { isPlatform } from '@ionic/react';

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

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@ In `usePhotoGallery.ts`, add the `deletePhoto()` method. The selected photo is r
4141

4242
```ts
4343
import { useState, useEffect } from 'react';
44-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
44+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
45+
import type { Photo } from '@capacitor/camera';
4546
import { Filesystem, Directory } from '@capacitor/filesystem';
4647
import { Preferences } from '@capacitor/preferences';
4748
import { isPlatform } from '@ionic/react';
@@ -85,11 +86,30 @@ export interface UserPhoto {
8586
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.
8687

8788
```tsx
88-
// ...existing code...
89-
// change: Add React import
89+
// CHANGE: Add import
9090
import { useState } from 'react';
91-
// CHANGE: Add `UserPhoto` type import.
91+
// CHANGE: Update import
92+
import { camera, trash, close } from 'ionicons/icons';
93+
// CHANGE: Update import
94+
import {
95+
IonContent,
96+
IonHeader,
97+
IonPage,
98+
IonTitle,
99+
IonToolbar,
100+
IonFab,
101+
IonFabButton,
102+
IonIcon,
103+
IonGrid,
104+
IonRow,
105+
IonCol,
106+
IonImg,
107+
IonActionSheet,
108+
} from '@ionic/react';
109+
// CHANGE: Add import
92110
import type { UserPhoto } from '../hooks/usePhotoGallery';
111+
import { usePhotoGallery } from '../hooks/usePhotoGallery';
112+
import './Tab2.css';
93113

94114
const Tab2: React.FC = () => {
95115
// CHANGE: Add `deletePhoto()` method

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

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -194,23 +194,9 @@ We put the visual aspects of our app into `<IonContent>`. In this case, it’s w
194194

195195
```tsx
196196
// CHANGE: Add the following import
197-
import { camera, trash, close } from 'ionicons/icons';
197+
import { camera } from 'ionicons/icons';
198198
// CHANGE: Update the following import
199-
import {
200-
IonContent,
201-
IonHeader,
202-
IonPage,
203-
IonTitle,
204-
IonToolbar,
205-
IonFab,
206-
IonFabButton,
207-
IonIcon,
208-
IonGrid,
209-
IonRow,
210-
IonCol,
211-
IonImg,
212-
IonActionSheet,
213-
} from '@ionic/react';
199+
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon } from '@ionic/react';
214200
// CHANGE: Remove or comment out `ExploreContainer`
215201
// import ExploreContainer from '../components/ExploreContainer';
216202
import './Tab2.css';
@@ -247,7 +233,7 @@ const Tab2: React.FC = () => {
247233
export default Tab2;
248234
```
249235

250-
Next, open `src/views/TabsPage.vue`. Change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button.
236+
Next, open `src/App.tsx`. Change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button.
251237

252238
```tsx
253239
import { Redirect, Route } from 'react-router-dom';

0 commit comments

Comments
 (0)