Skip to content

Instantly share code, notes, and snippets.

@jsoneaday

jsoneaday/Photos

Created Jan 16, 2020
Embed
What would you like to do?
import React, { useState } from "react";
import {
IonContent,
IonGrid,
IonRow,
IonCol,
IonPage,
IonHeader,
IonToolbar,
IonTitle,
IonList,
IonLabel,
useIonViewWillEnter,
IonItemSliding,
IonItem,
IonItemOptions,
IonItemOption,
IonAvatar
} from "@ionic/react";
import { useStorage } from "@ionic/react-hooks/storage";
import { FilesystemDirectory, Capacitor } from "@capacitor/core";
import { useFilesystem } from "@ionic/react-hooks/filesystem";
export const LOG_PREFIX = "[Photos] ";
const Photos: React.FC = () => {
const [photoItems, setPhotoItems] = useState<JSX.Element[] | null>(null);
const { getUri } = useFilesystem();
const { get } = useStorage();
useIonViewWillEnter(async () => {
const imgPaths = await get("imagePaths");
const images = imgPaths ? JSON.parse(imgPaths) : null;
console.log(LOG_PREFIX + "images", images);
if (images && images.length > 0) {
const photos: JSX.Element[] = [];
for await (let image of images) {
console.log(LOG_PREFIX + "checking if file exists", image.fileName);
const finalPhotoUri = await getUri({
directory: FilesystemDirectory.Documents,
path: image.fileName
});
console.log(LOG_PREFIX + "image.fileName", image.fileName);
console.log(LOG_PREFIX + "finalPhotoUri", finalPhotoUri);
const photoUrl = Capacitor.convertFileSrc(finalPhotoUri.uri);
console.log(LOG_PREFIX + "converted photoUrl", photoUrl);
photos.push(
<IonItemSliding key={image.fileName}>
<IonItem>
<IonAvatar slot="start">
{photoUrl && <img src={photoUrl} alt="my pic" />}
</IonAvatar>
<IonLabel>{image.fileName}</IonLabel>
</IonItem>
<IonItemOptions side="end">
<IonItemOption onClick={() => {}}>Delete</IonItemOption>
</IonItemOptions>
</IonItemSliding>
);
}
console.log(LOG_PREFIX + "setPhotoItems");
setPhotoItems(photos);
}
});
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Photos</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonGrid>
<IonRow>
<IonCol size-md="6" offset-md="3" className="ion-text-center">
<IonList>{photoItems}</IonList>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
);
};
export default Photos;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment