Photos

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;