Feat: allow image component to save new images (#556)

* Feat: allow image component to save new images

* fix package-lock.json

Author: VirginiaBalseiro

CHANGELOG.md

@@ -4,6 +4,10 @@ This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html
 
 ## Unreleased
 
+### New features
+
+- The `Image` component now allows for a new image to be saved even if the property is not found in the dataset, by passing a `solidDataset` where the Thing should be set after updating, and a `saveLocation` where the image file should be stored. 
+
 ## 2.6.0 ( November 22, 2021 )
 
 ### New features

src/components/image/index.test.tsx

@@ -33,6 +33,9 @@ const mockThing = SolidFns.addUrl(
   mockProperty,
   mockUrl
 );
+const mockThingWithoutPhoto = SolidFns.createThing();
+const datasetIri = "https://example.org/dataset/";
+const mockDataset = SolidFns.mockSolidDatasetFrom(datasetIri);
 
 const mockObjectUrl = "mock object url";
 const mockFile = SolidFns.mockFileFrom(mockUrl);
@@ -259,6 +262,53 @@ describe("Image component", () => {
       );
       expect(SolidFns.overwriteFile).toHaveBeenCalled();
     });
+    it("Should call saveFileInContainer and update dataset on change if value is not available and saveLocation is passed", async () => {
+      const saveLocation = "https://example.org/container/";
+      jest.spyOn(SolidFns, "getUrl").mockImplementationOnce(() => null);
+      jest
+        .spyOn(SolidFns, "saveSolidDatasetAt")
+        .mockResolvedValueOnce(mockDataset as any);
+      jest
+        .spyOn(SolidFns, "saveFileInContainer")
+        .mockResolvedValueOnce(mockFile);
+      const mockUpdatedObjectUrl = "updated mock object url";
+      const { getByAltText } = render(
+        <Image
+          thing={mockThingWithoutPhoto}
+          property={mockProperty}
+          alt={mockAlt}
+          edit
+          autosave
+          inputProps={{ alt: "test-input" }}
+          saveLocation={saveLocation}
+          solidDataset={mockDataset}
+        />
+      );
+      await waitFor(() => {
+        const input = getByAltText("test-input");
+        expect(input).not.toBeNull();
+      });
+      fireEvent.change(getByAltText("test-input"), {
+        target: {
+          files: [mockFile],
+        },
+      });
+      (window.URL.createObjectURL as jest.Mock).mockReturnValueOnce(
+        mockUpdatedObjectUrl
+      );
+      expect(SolidFns.saveFileInContainer).toHaveBeenCalledWith(
+        saveLocation,
+        mockFile,
+        { fetch: expect.any(Function) }
+      );
+      await waitFor(() => {
+        expect(SolidFns.saveSolidDatasetAt).toHaveBeenCalledWith(
+          datasetIri,
+          expect.anything(),
+          { fetch: expect.any(Function) }
+        );
+      });
+    });
 
     test.skip("Should not call overwriteFile on change if file size > maxSize", async () => {
       const { getByAltText } = render(

src/components/image/index.tsx

@@ -20,15 +20,24 @@
  */
 
 import React, { ReactElement, useState, useEffect, useContext } from "react";
-
+import {
+  addUrl,
+  getSourceUrl,
+  saveFileInContainer,
+  saveSolidDatasetAt,
+  setThing,
+  SolidDataset,
+} from "@inrupt/solid-client";
 import { overwriteFile, CommonProperties, useProperty } from "../../helpers";
 
 import { SessionContext } from "../../context/sessionContext";
 import useFile from "../../hooks/useFile";
 
 export type Props = {
   maxSize?: number;
+  saveLocation?: string;
   inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  solidDataset?: SolidDataset;
   errorComponent?: React.ComponentType<{ error: Error }>;
   loadingComponent?: React.ComponentType | null;
 } & CommonProperties &
@@ -50,6 +59,8 @@ export function Image({
   inputProps,
   errorComponent: ErrorComponent,
   loadingComponent: LoadingComponent,
+  saveLocation,
+  solidDataset,
   ...imgOptions
 }: Props): ReactElement | null {
   const { fetch } = useContext(SessionContext);
@@ -81,7 +92,6 @@ export function Image({
   }, [error, onError, ErrorComponent]);
 
   const [imgObjectUrl, setImgObjectUrl] = useState<string | undefined>();
-
   const {
     data,
     error: imgError,
@@ -104,19 +114,40 @@ export function Image({
 
   const handleChange = async (input: EventTarget & HTMLInputElement) => {
     const fileList = input.files;
-    if (autosave && fileList && fileList.length > 0 && value) {
-      const newObjectUrl = await overwriteFile(
-        value as string,
-        fileList[0],
-        input,
-        fetch,
-        maxSize,
-        onSave,
-        onError
-      );
-
-      if (newObjectUrl) {
-        setImgObjectUrl(newObjectUrl);
+    if (autosave && fileList && fileList.length > 0) {
+      if (value) {
+        const newObjectUrl = await overwriteFile(
+          value as string,
+          fileList[0],
+          input,
+          fetch,
+          maxSize,
+          onSave,
+          onError
+        );
+
+        if (newObjectUrl) {
+          setImgObjectUrl(newObjectUrl);
+        }
+      } else if (!value && saveLocation) {
+        const savedFile = await saveFileInContainer(saveLocation, fileList[0], {
+          fetch,
+        });
+        const savedFileUrl = getSourceUrl(savedFile);
+        if (savedFileUrl && propThing && propProperty && solidDataset) {
+          setImgObjectUrl(savedFileUrl);
+          try {
+            const updatedThing = addUrl(propThing, propProperty, savedFileUrl);
+            const updatedDataset = setThing(solidDataset, updatedThing);
+            const datasetSourceUrl = getSourceUrl(solidDataset);
+            if (!datasetSourceUrl) return;
+            await saveSolidDatasetAt(datasetSourceUrl, updatedDataset, {
+              fetch,
+            });
+          } catch (e) {
+            setError(e as Error);
+          }
+        }
       }
     }
   };

stories/components/image.stories.tsx

@@ -70,6 +70,14 @@ export default {
       description: `A loading component to show while fetching the dataset. If \`null\` the default loading message won't be displayed`,
       control: { type: null },
     },
+    saveLocation: {
+      description: `A URL for a container where a new image is to be saved in case a value for an image property is not found`,
+      control: { type: null },
+    },
+    solidDataset: {
+      description: `A Solid Dataset where a new image should be added`,
+      control: { type: null },
+    },
   },
 };
 interface IWithBasicData {