Skip to content

Commit 5e652b8

Browse files
mwilmanmwilman
authored
docs(your-first-app): update instructions for photo deletion functionality (#4272)
1 parent f2f9305 commit 5e652b8

File tree

12 files changed

+24
-24
lines changed

12 files changed

+24
-24
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
3232

3333
## Deleting Photos
3434

35-
With Live Reload running and the app open on your device, let’s implement photo deletion functionality. Open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
35+
With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
3636

3737
```html
3838
<ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
@@ -98,7 +98,7 @@ public async deletePicture(photo: UserPhoto, position: number) {
9898

9999
// delete photo file from filesystem
100100
const filename = photo.filepath
101-
.substr(photo.filepath.lastIndexOf('/') + 1);
101+
.substring(photo.filepath.lastIndexOf('/') + 1);
102102

103103
await Filesystem.deleteFile({
104104
path: filename,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
2626

2727
## Deleting Photos
2828

29-
With Live Reload running and the app is open on your device, let’s implement photo deletion functionality. Open `Tab2.tsx` then import `useState` from React and `UserPhoto` from the `usePhotoGallery` hook:
29+
With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `Tab2.tsx` then import `useState` from React and `UserPhoto` from the `usePhotoGallery` hook:
3030

3131
```tsx
3232
import React, { useState } from 'react';
@@ -94,7 +94,7 @@ const deletePhoto = async (photo: UserPhoto) => {
9494
Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
9595

9696
// delete photo file from filesystem
97-
const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
97+
const filename = photo.filepath.substring(photo.filepath.lastIndexOf('/') + 1);
9898
await Filesystem.deleteFile({
9999
path: filename,
100100
directory: Directory.Data,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
2626

2727
## Deleting Photos
2828

29-
With Live Reload running and the app is open on your device, let’s implement photo deletion functionality. Open `Tab2Page.vue` then import the `actionSheetController`. We'll display an [IonActionSheet](https://ionicframework.com/docs/api/action-sheet) with the option to delete a photo:
29+
With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `Tab2Page.vue` then import the `actionSheetController`. We'll display an [IonActionSheet](https://ionicframework.com/docs/api/action-sheet) with the option to delete a photo:
3030

3131
```tsx
3232
import {
@@ -96,7 +96,7 @@ const deletePhoto = async (photo: UserPhoto) => {
9696
photos.value = photos.value.filter((p) => p.filepath !== photo.filepath);
9797

9898
// delete photo file from filesystem
99-
const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
99+
const filename = photo.filepath.substring(photo.filepath.lastIndexOf('/') + 1);
100100
await Filesystem.deleteFile({
101101
path: filename,
102102
directory: Directory.Data,

‎versioned_docs/version-v5/angular/your-first-app/7-live-reload.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
2626

2727
## Deleting Photos
2828

29-
With Live Reload running and the app open on your device, let’s implement photo deletion functionality. Open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
29+
With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
3030

3131
```html
3232
<ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
@@ -92,7 +92,7 @@ public async deletePicture(photo: UserPhoto, position: number) {
9292

9393
// delete photo file from filesystem
9494
const filename = photo.filepath
95-
.substr(photo.filepath.lastIndexOf('/') + 1);
95+
.substring(photo.filepath.lastIndexOf('/') + 1);
9696

9797
await Filesystem.deleteFile({
9898
path: filename,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
2626

2727
## Deleting Photos
2828

29-
With Live Reload running and the app is open on your device, let’s implement photo deletion functionality. Open `Tab2.tsx` then import `useState` from React and `UserPhoto` from the `usePhotoGallery` hook:
29+
With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `Tab2.tsx` then import `useState` from React and `UserPhoto` from the `usePhotoGallery` hook:
3030

3131
```tsx
3232
import React, { useState } from 'react';
@@ -94,7 +94,7 @@ const deletePhoto = async (photo: UserPhoto) => {
9494
Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
9595

9696
// delete photo file from filesystem
97-
const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
97+
const filename = photo.filepath.substring(photo.filepath.lastIndexOf('/') + 1);
9898
await Filesystem.deleteFile({
9999
path: filename,
100100
directory: Directory.Data,

‎versioned_docs/version-v5/vue/your-first-app/7-live-reload.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
2626

2727
## Deleting Photos
2828

29-
With Live Reload running and the app is open on your device, let’s implement photo deletion functionality. Open `Tab2.vue` then import the `actionSheetController`. We'll display an [IonActionSheet](https://ionicframework.com/docs/api/action-sheet) with the option to delete a photo:
29+
With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `Tab2.vue` then import the `actionSheetController`. We'll display an [IonActionSheet](https://ionicframework.com/docs/api/action-sheet) with the option to delete a photo:
3030

3131
```tsx
3232
import {
@@ -111,7 +111,7 @@ const deletePhoto = async (photo: UserPhoto) => {
111111
photos.value = photos.value.filter((p) => p.filepath !== photo.filepath);
112112

113113
// delete photo file from filesystem
114-
const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
114+
const filename = photo.filepath.substring(photo.filepath.lastIndexOf('/') + 1);
115115
await Filesystem.deleteFile({
116116
path: filename,
117117
directory: Directory.Data,

‎versioned_docs/version-v6/angular/your-first-app/7-live-reload.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
3232

3333
## Deleting Photos
3434

35-
With Live Reload running and the app open on your device, let’s implement photo deletion functionality. Open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
35+
With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
3636

3737
```html
3838
<ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
@@ -98,7 +98,7 @@ public async deletePicture(photo: UserPhoto, position: number) {
9898

9999
// delete photo file from filesystem
100100
const filename = photo.filepath
101-
.substr(photo.filepath.lastIndexOf('/') + 1);
101+
.substring(photo.filepath.lastIndexOf('/') + 1);
102102

103103
await Filesystem.deleteFile({
104104
path: filename,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
2626

2727
## Deleting Photos
2828

29-
With Live Reload running and the app is open on your device, let’s implement photo deletion functionality. Open `Tab2.tsx` then import `useState` from React and `UserPhoto` from the `usePhotoGallery` hook:
29+
With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `Tab2.tsx` then import `useState` from React and `UserPhoto` from the `usePhotoGallery` hook:
3030

3131
```tsx
3232
import React, { useState } from 'react';
@@ -94,7 +94,7 @@ const deletePhoto = async (photo: UserPhoto) => {
9494
Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
9595

9696
// delete photo file from filesystem
97-
const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
97+
const filename = photo.filepath.substring(photo.filepath.lastIndexOf('/') + 1);
9898
await Filesystem.deleteFile({
9999
path: filename,
100100
directory: Directory.Data,

‎versioned_docs/version-v6/vue/your-first-app/7-live-reload.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
2626

2727
## Deleting Photos
2828

29-
With Live Reload running and the app is open on your device, let’s implement photo deletion functionality. Open `Tab2.vue` then import the `actionSheetController`. We'll display an [IonActionSheet](https://ionicframework.com/docs/api/action-sheet) with the option to delete a photo:
29+
With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `Tab2.vue` then import the `actionSheetController`. We'll display an [IonActionSheet](https://ionicframework.com/docs/api/action-sheet) with the option to delete a photo:
3030

3131
```tsx
3232
import {
@@ -111,7 +111,7 @@ const deletePhoto = async (photo: UserPhoto) => {
111111
photos.value = photos.value.filter((p) => p.filepath !== photo.filepath);
112112

113113
// delete photo file from filesystem
114-
const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
114+
const filename = photo.filepath.substring(photo.filepath.lastIndexOf('/') + 1);
115115
await Filesystem.deleteFile({
116116
path: filename,
117117
directory: Directory.Data,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
3232

3333
## Deleting Photos
3434

35-
With Live Reload running and the app open on your device, let’s implement photo deletion functionality. Open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
35+
With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
3636

3737
```html
3838
<ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
@@ -98,7 +98,7 @@ public async deletePicture(photo: UserPhoto, position: number) {
9898

9999
// delete photo file from filesystem
100100
const filename = photo.filepath
101-
.substr(photo.filepath.lastIndexOf('/') + 1);
101+
.substring(photo.filepath.lastIndexOf('/') + 1);
102102

103103
await Filesystem.deleteFile({
104104
path: filename,

0 commit comments

Comments
 (0)