@edifice.io/react 2.0.0-develop-rc.8 → 2.0.0-develop-rc.13

package/dist/core/useResource/useResource.js

@@ -1,26 +1,25 @@
-import { useState as c, useEffect as n } from "react";
-import { odeServices as u } from "@edifice.io/ts-client";
-const m = (r, s) => {
-  const [o, t] = c(null);
-  return n(() => {
-    if (s === "") {
+import { useState, useEffect } from "react";
+import { odeServices } from "edifice-ts-client";
+const useResource = (application, id) => {
+  const [resource, setResource] = useState(null);
+  return useEffect(() => {
+    if (id === "") {
       console.warn("resourceId must be an assetId and not an empty string");
       return;
     }
     (async () => {
       try {
-        const e = await u.resource(r).searchResource({
-          application: r,
-          id: s
+        const response = await odeServices.resource(application).searchResource({
+          application,
+          id
         });
-        t(e);
-      } catch (e) {
-        console.error(e);
+        setResource(response);
+      } catch (error) {
+        console.error(error);
       }
     })();
-  }, []), o;
+  }, []), resource;
 };
 export {
-  m as default
+  useResource as default
 };
-//# sourceMappingURL=useResource.js.map

package/dist/core/useResourceSearch/useResourceSearch.d.ts

@@ -1,4 +1,4 @@
-import { App, GetContextParameters, ILinkedResource } from '@edifice.io/ts-client';
+import { App, GetContextParameters, ILinkedResource } from 'edifice-ts-client';
 /**
  * A hook to search for resources produced by applications.
  *

package/dist/core/useResourceSearch/useResourceSearch.js

@@ -1,35 +1,34 @@
-import { useState as d, useEffect as h, useCallback as y } from "react";
-import { SnipletsService as a, odeServices as o } from "@edifice.io/ts-client";
-import { useMockedData as R } from "../../utils/MockedDataProvider/MockedDataProvider.js";
-const A = (s) => {
-  const e = R(), [i, u] = d([]);
-  h(() => {
+import { useState, useEffect, useCallback } from "react";
+import { SnipletsService, odeServices } from "edifice-ts-client";
+import { useMockedData } from "../../utils/MockedDataProvider/MockedDataProvider.js";
+const useResourceSearch = (appCode) => {
+  const mock = useMockedData(), [resourceApplications, setResourceApplications] = useState([]);
+  useEffect(() => {
     (async () => {
       try {
-        await a.initialize(o, (e == null ? void 0 : e.app) || s);
-      } catch (r) {
-        if (e != null && e.app)
-          a.resourceProducingApps = [e == null ? void 0 : e.app];
+        await SnipletsService.initialize(odeServices, (mock == null ? void 0 : mock.app) || appCode);
+      } catch (error) {
+        if (mock != null && mock.app)
+          SnipletsService.resourceProducingApps = [mock == null ? void 0 : mock.app];
         else
-          throw r;
+          throw error;
       }
-      await a.registerBehaviours((e == null ? void 0 : e.app) || s), u(a.resourceProducingApps);
+      await SnipletsService.registerBehaviours((mock == null ? void 0 : mock.app) || appCode), setResourceApplications(SnipletsService.resourceProducingApps);
     })();
   }, []);
-  const n = y(async (r) => {
-    var t;
-    const [p] = r.types;
-    return e != null && e.loadResources ? await ((t = e == null ? void 0 : e.loadResources) == null ? void 0 : t.call(e, r).then((c) => c.map((l) => ({
-      ...l,
+  const loadResources = useCallback(async (filters) => {
+    var _a;
+    const [resourceType] = filters.types;
+    return mock != null && mock.loadResources ? await ((_a = mock == null ? void 0 : mock.loadResources) == null ? void 0 : _a.call(mock, filters).then((results) => results.map((r) => ({
+      ...r,
       _id: "" + Math.round(Math.random() * 9999)
-    })))) : await o.behaviour(s, p).loadResources(r);
-  }, [s, e]);
+    })))) : await odeServices.behaviour(appCode, resourceType).loadResources(filters);
+  }, [appCode, mock]);
   return {
-    resourceApplications: i,
-    loadResources: n
+    resourceApplications,
+    loadResources
   };
 };
 export {
-  A as useResourceSearch
+  useResourceSearch
 };
-//# sourceMappingURL=useResourceSearch.js.map

package/dist/core/useSession/useSession.js

@@ -1,12 +1,11 @@
-import { odeServices as e } from "@edifice.io/ts-client";
-import { useQuery as s } from "@tanstack/react-query";
-function i() {
-  return s({
+import { useQuery } from "@tanstack/react-query";
+import { odeServices } from "edifice-ts-client";
+function useSession() {
+  return useQuery({
     queryKey: ["session"],
-    queryFn: async () => await e.session().getSession()
+    queryFn: async () => await odeServices.session().getSession()
   });
 }
 export {
-  i as default
+  useSession as default
 };
-//# sourceMappingURL=useSession.js.map

package/dist/core/useTrashedResource/useTrashedResource.js

@@ -1,28 +1,27 @@
-import { useState as u, useEffect as i } from "react";
-import { odeServices as f } from "@edifice.io/ts-client";
-import m from "../useUser/useUser.js";
-import { useOdeClient as h } from "../OdeClientProvider/OdeClientProvider.js";
-const $ = (o) => {
+import { useState, useEffect } from "react";
+import { odeServices } from "edifice-ts-client";
+import useUser from "../useUser/useUser.js";
+import { useOdeClient } from "../OdeClientProvider/OdeClientProvider.js";
+const useTrashedResource = (id) => {
   const {
-    appCode: r
-  } = h(), {
-    user: e
-  } = m(), [a, c] = u(!1);
-  i(() => {
+    appCode
+  } = useOdeClient(), {
+    user
+  } = useUser(), [trashed, setTrashed] = useState(!1);
+  useEffect(() => {
     (async () => {
-      var d, n;
-      const t = await f.http().get(`/explorer/resources?application=${r}&resource_type=${r}&asset_id[]=${o}`), s = (d = t == null ? void 0 : t.resources) == null ? void 0 : d.find((p) => p.assetId === o);
-      (s != null && s.trashed || (n = s == null ? void 0 : s.trashedBy) != null && n.includes(e == null ? void 0 : e.userId)) && c(!0);
+      var _a, _b;
+      const explorerData = await odeServices.http().get(`/explorer/resources?application=${appCode}&resource_type=${appCode}&asset_id[]=${id}`), resource = (_a = explorerData == null ? void 0 : explorerData.resources) == null ? void 0 : _a.find((resource2) => resource2.assetId === id);
+      (resource != null && resource.trashed || (_b = resource == null ? void 0 : resource.trashedBy) != null && _b.includes(user == null ? void 0 : user.userId)) && setTrashed(!0);
     })();
-  }, []), i(() => {
-    if (a)
+  }, []), useEffect(() => {
+    if (trashed)
       throw new Response("", {
         status: 404,
         statusText: "Not Found"
       });
-  }, [a]);
-};
+  }, [trashed]);
+}, useTrashedResource$1 = useTrashedResource;
 export {
-  $ as default
+  useTrashedResource$1 as default
 };
-//# sourceMappingURL=useTrashedResource.js.map

package/dist/core/useUpload/useUpload.d.ts

@@ -1,4 +1,4 @@
-import { WorkspaceElement, WorkspaceVisibility } from '@edifice.io/ts-client';
+import { WorkspaceElement, WorkspaceVisibility } from 'edifice-ts-client';
 import { Status } from '../../types';
 declare const useUpload: (visibility?: WorkspaceVisibility, application?: string) => {
     getUploadStatus: (upload: File | Blob) => Status | undefined;

package/dist/core/useUpload/useUpload.js

@@ -1,81 +1,81 @@
-import { useState as S, useCallback as E } from "react";
-import { ERROR_CODE as k, odeServices as O } from "@edifice.io/ts-client";
-import R from "../../hooks/useBrowserInfo/useBrowserInfo.js";
-import { getOrGenerateBlobId as t } from "../../utils/blob.js";
-import U from "../useWorkspaceFile/useWorkspaceFile.js";
-const D = (w, i = "media-library") => {
-  const [a, u] = S({}), {
-    browser: c,
-    device: f
-  } = R(navigator.userAgent), {
-    create: m
-  } = U(), y = E((e) => a[t(e)], [a]), s = (e, r) => {
-    u((o) => {
-      const n = t(e);
+import { useState, useCallback } from "react";
+import { ERROR_CODE, odeServices } from "edifice-ts-client";
+import useBrowserInfo from "../../hooks/useBrowserInfo/useBrowserInfo.js";
+import useWorkspaceFile from "../useWorkspaceFile/useWorkspaceFile.js";
+import { getOrGenerateBlobId } from "../../utils/blob.js";
+const useUpload = (visibility, application = "media-library") => {
+  const [status, setStatus] = useState({}), {
+    browser,
+    device
+  } = useBrowserInfo(navigator.userAgent), {
+    create
+  } = useWorkspaceFile(), getUploadStatus = useCallback((upload) => status[getOrGenerateBlobId(upload)], [status]), setUploadStatus = (blob, status2) => {
+    setStatus((prevStatus) => {
+      const key = getOrGenerateBlobId(blob);
       return {
-        ...o,
-        [n]: r
+        ...prevStatus,
+        [key]: status2
       };
     });
-  }, v = (e) => {
-    u((r) => {
-      const o = t(e), {
-        [o]: n,
-        ...p
-      } = r;
-      return p;
+  }, clearUploadStatus = (blob) => {
+    setStatus((prevStatus) => {
+      const key = getOrGenerateBlobId(blob), {
+        [key]: unused,
+        ...rest
+      } = prevStatus;
+      return rest;
     });
   };
-  async function d(e, r) {
-    s(e, "loading");
+  async function uploadFile(file, metadata) {
+    setUploadStatus(file, "loading");
     try {
-      let o;
-      return i === "media-library" && e.type.includes("video") ? o = await l(e, {
-        filename: e.name,
-        ...r
-      }) : o = await m(e, {
-        application: i,
-        visibility: w
-      }), s(e, "success"), o;
+      let resource;
+      return application === "media-library" && file.type.includes("video") ? resource = await uploadVideo(file, {
+        filename: file.name,
+        ...metadata
+      }) : resource = await create(file, {
+        application,
+        visibility
+      }), setUploadStatus(file, "success"), resource;
     } catch {
-      return s(e, "error"), null;
+      return setUploadStatus(file, "error"), null;
     }
   }
-  async function h(e, r) {
-    s(e, "loading");
+  async function uploadBlob(blob, metadata) {
+    setUploadStatus(blob, "loading");
     try {
-      let o;
-      if (e.type.includes("video"))
-        o = await l(e, r);
+      let resource;
+      if (blob.type.includes("video"))
+        resource = await uploadVideo(blob, metadata);
       else
-        throw new Error(k.NOT_SUPPORTED);
-      return s(e, "success"), o;
+        throw new Error(ERROR_CODE.NOT_SUPPORTED);
+      return setUploadStatus(blob, "success"), resource;
     } catch {
-      return s(e, "error"), null;
+      return setUploadStatus(blob, "error"), null;
     }
   }
-  const l = async (e, r) => {
-    const o = {
+  const uploadVideo = async (blob, metadata) => {
+    const params = {
       data: {
-        device: f.type,
+        device: device.type,
         browser: {
-          name: c.name,
-          version: c.version
+          name: browser.name,
+          version: browser.version
         },
         url: window.location.hostname,
-        file: e,
-        filename: (r == null ? void 0 : r.filename) ?? "filename",
-        weight: e.size
+        file: blob,
+        filename: (metadata == null ? void 0 : metadata.filename) ?? "filename",
+        weight: blob.size
       },
-      appCode: i,
-      captation: !(e instanceof File),
-      duration: (r == null ? void 0 : r.duration) ?? 0
-    }, n = await O.video().upload(o);
-    if (n.state === "succeed")
+      appCode: application,
+      captation: !(blob instanceof File),
+      duration: (metadata == null ? void 0 : metadata.duration) ?? 0
+    }, uploadResponse = await odeServices.video().upload(params);
+    if (uploadResponse.state === "succeed")
       return {
-        _id: n.videoworkspaceid,
-        file: n.videoid,
-        name: o.data.filename,
+        _id: uploadResponse.videoworkspaceid,
+        file: uploadResponse.videoid,
+        name: params.data.filename,
         eType: "file",
         eParent: "",
         children: [],
@@ -87,21 +87,20 @@ const D = (w, i = "media-library") => {
           displayName: ""
         }
       };
-    throw n.state === "error" ? new Error(n.code || "Error while uploading video") : new Error("Video encoding is still running");
+    throw uploadResponse.state === "error" ? new Error(uploadResponse.code || "Error while uploading video") : new Error("Video encoding is still running");
   };
-  function g(e, r, o) {
-    return t(r, t(e)), d(r, o);
+  function uploadAlternateFile(original, replacement, metadata) {
+    return getOrGenerateBlobId(replacement, getOrGenerateBlobId(original)), uploadFile(replacement, metadata);
   }
   return {
-    getUploadStatus: y,
-    setUploadStatus: s,
-    clearUploadStatus: v,
-    uploadFile: d,
-    uploadAlternateFile: g,
-    uploadBlob: h
+    getUploadStatus,
+    setUploadStatus,
+    clearUploadStatus,
+    uploadFile,
+    uploadAlternateFile,
+    uploadBlob
   };
 };
 export {
-  D as default
+  useUpload as default
 };
-//# sourceMappingURL=useUpload.js.map

package/dist/core/useUploadFiles/useUploadFiles.d.ts

@@ -1,4 +1,4 @@
-import { WorkspaceElement, WorkspaceVisibility } from '@edifice.io/ts-client';
+import { WorkspaceElement, WorkspaceVisibility } from 'edifice-ts-client';
 declare const useUploadFiles: ({ handleOnChange, visibility, application, }: {
     handleOnChange: (uploadedFiles: WorkspaceElement[]) => void;
     visibility?: WorkspaceVisibility | undefined;

package/dist/core/useUploadFiles/useUploadFiles.js

@@ -1,102 +1,101 @@
-import { useState as w, useCallback as v, useEffect as I } from "react";
-import { useDropzoneContext as x } from "../../components/Dropzone/DropzoneContext.js";
-import z from "../useUpload/useUpload.js";
-import D from "../../hooks/useImageResizer/useImageResizer.js";
-import { addTimestampToImageUrl as C } from "../../utils/addTimestampToUrl.js";
-import P from "../useWorkspaceFile/useWorkspaceFile.js";
-const B = ({
-  handleOnChange: O,
-  visibility: T,
-  application: _
+import { useState, useCallback, useEffect } from "react";
+import { useDropzoneContext } from "../../components/Dropzone/DropzoneContext.js";
+import useWorkspaceFile from "../useWorkspaceFile/useWorkspaceFile.js";
+import useUpload from "../useUpload/useUpload.js";
+import useImageResizer from "../../hooks/useImageResizer/useImageResizer.js";
+import { addTimestampToImageUrl } from "../../utils/addTimestampToUrl.js";
+const useUploadFiles = ({
+  handleOnChange,
+  visibility,
+  application
 }) => {
-  const [r, l] = w([]), [d, u] = w(void 0), {
-    files: i,
-    deleteFile: b,
-    replaceFileAt: c
-  } = x(), {
-    remove: h,
-    createOrUpdate: A
-  } = P(), {
-    getUploadStatus: m,
-    setUploadStatus: f,
-    clearUploadStatus: U,
-    uploadFile: p,
-    uploadAlternateFile: g
-  } = z(T, _), {
-    resizeImageFile: F
-  } = D(), y = v((e) => {
-    e.forEach(async (a, n) => {
-      if (a == null) return;
-      let t;
-      if (a.type.startsWith("image"))
+  const [uploadedFiles, setUploadedFiles] = useState([]), [editingImage, setEditingImage] = useState(void 0), {
+    files,
+    deleteFile,
+    replaceFileAt
+  } = useDropzoneContext(), {
+    remove,
+    createOrUpdate
+  } = useWorkspaceFile(), {
+    getUploadStatus,
+    setUploadStatus,
+    clearUploadStatus,
+    uploadFile,
+    uploadAlternateFile
+  } = useUpload(visibility, application), {
+    resizeImageFile
+  } = useImageResizer(), tryUploading = useCallback((files2) => {
+    files2.forEach(async (file, index) => {
+      if (file == null) return;
+      let resource;
+      if (file.type.startsWith("image"))
         try {
-          const o = await F(a);
-          t = await g(a, o), c(n, o);
-        } catch (o) {
-          console.error(o);
+          const replacement = await resizeImageFile(file);
+          resource = await uploadAlternateFile(file, replacement), replaceFileAt(index, replacement);
+        } catch (err) {
+          console.error(err);
         }
-      t || (t = await p(a)), t && l((o) => [...o, t]);
+      resource || (resource = await uploadFile(file)), resource && setUploadedFiles((prevFiles) => [...prevFiles, resource]);
     });
-  }, [F, g, p, c]);
-  I(() => {
-    let a = 0;
-    const n = i.map((t) => {
-      if (a >= 5) return null;
-      const o = m(t);
-      return o === "loading" && a++, o ? null : t;
+  }, [resizeImageFile, uploadAlternateFile, uploadFile, replaceFileAt]);
+  useEffect(() => {
+    let numUploads = 0;
+    const newFiles = files.map((file) => {
+      if (numUploads >= 5) return null;
+      const status = getUploadStatus(file);
+      return status === "loading" && numUploads++, status ? null : file;
     });
-    n.forEach((t) => t && f(t, "idle")), y(n);
-  }, [i, r, m, f, y]), I(() => {
-    const e = E(i, r);
-    O(e);
-  }, [r]);
-  const E = (e, a) => {
-    const n = e.reduce((t, o, s) => (t[o.name] = s, t), {});
-    return a.sort((t, o) => n[t.name] - n[o.name]);
+    newFiles.forEach((file) => file && setUploadStatus(file, "idle")), tryUploading(newFiles);
+  }, [files, uploadedFiles, getUploadStatus, setUploadStatus, tryUploading]), useEffect(() => {
+    const sortedUploadedFiles = sortUploadedFiles(files, uploadedFiles);
+    handleOnChange(sortedUploadedFiles);
+  }, [uploadedFiles]);
+  const sortUploadedFiles = (filesArray, uploadedFilesArray) => {
+    const orderMap = filesArray.reduce((acc, item, index) => (acc[item.name] = index, acc), {});
+    return uploadedFilesArray.sort((a, b) => orderMap[a.name] - orderMap[b.name]);
   };
-  async function L(e) {
-    const a = r.find((n) => n.name === e.name);
-    a && (await h(a), U(e), l((n) => n.filter((t) => t.name !== (a == null ? void 0 : a.name)))), b(e);
+  async function removeFile(file) {
+    const resource = uploadedFiles.find((uploadedFile) => uploadedFile.name === file.name);
+    resource && (await remove(resource), clearUploadStatus(file), setUploadedFiles((prevFiles) => prevFiles.filter((prevFile) => prevFile.name !== (resource == null ? void 0 : resource.name)))), deleteFile(file);
   }
-  async function k({
-    blob: e,
-    legend: a,
-    altText: n
+  async function updateImage({
+    blob,
+    legend,
+    altText: alt
   }) {
-    if (d)
+    if (editingImage)
       try {
-        const t = await A({
-          blob: e,
-          legend: a,
-          alt: n,
-          uri: S(d)
+        const res = await createOrUpdate({
+          blob,
+          legend,
+          alt,
+          uri: getUrl(editingImage)
         });
-        t && typeof t == "object" && l((o) => o.map((s) => s._id === t.file._id ? {
-          ...t.file
-        } : s));
+        res && typeof res == "object" && setUploadedFiles((prevFiles) => prevFiles.map((prevFile) => prevFile._id === res.file._id ? {
+          ...res.file
+        } : prevFile));
       } finally {
-        u(void 0);
+        setEditingImage(void 0);
       }
   }
-  const S = (e, a) => {
-    const n = `/workspace/${e != null && e.public ? "pub/" : ""}document/${e == null ? void 0 : e._id}`;
-    return e ? a ? C(n) : n : "";
+  const getUrl = (resource, timestamp) => {
+    const url = `/workspace/${resource != null && resource.public ? "pub/" : ""}document/${resource == null ? void 0 : resource._id}`;
+    return resource ? timestamp ? addTimestampToImageUrl(url) : url : "";
   };
   return {
     /** List of files added from device */
-    files: i,
-    getUploadStatus: m,
-    clearUploadStatus: U,
-    uploadedFiles: r,
-    editingImage: d,
-    setEditingImage: u,
-    getUrl: S,
-    updateImage: k,
-    uploadFile: p,
-    removeFile: L
+    files,
+    getUploadStatus,
+    clearUploadStatus,
+    uploadedFiles,
+    editingImage,
+    setEditingImage,
+    getUrl,
+    updateImage,
+    uploadFile,
+    removeFile
   };
-};
+}, useUploadFiles$1 = useUploadFiles;
 export {
-  B as default
+  useUploadFiles$1 as default
 };
-//# sourceMappingURL=useUploadFiles.js.map

package/dist/core/useUser/useUser.d.ts

@@ -1,4 +1,4 @@
-import { IUserDescription, IUserInfo } from '@edifice.io/ts-client';
+import { IUserDescription, IUserInfo } from 'edifice-ts-client';
 export interface useUserProps {
     user: IUserInfo | undefined;
     avatar: string;

package/dist/core/useUser/useUser.js

@@ -1,23 +1,22 @@
-import { useOdeClient as o } from "../OdeClientProvider/OdeClientProvider.js";
-import { useOdeTheme as s } from "../ThemeProvider/ThemeProvider.js";
-function v() {
+import { useOdeClient } from "../OdeClientProvider/OdeClientProvider.js";
+import { useOdeTheme } from "../ThemeProvider/ThemeProvider.js";
+function useUser() {
   const {
-    user: e,
-    userDescription: t
-  } = o(), {
-    theme: r
-  } = s();
-  function n() {
-    let a = t == null ? void 0 : t.picture;
-    return (!a || a === "no-avatar.jpg" || a === "no-avatar.svg") && (a = `${r == null ? void 0 : r.basePath}/img/illustrations/no-avatar.svg`), a;
+    user,
+    userDescription
+  } = useOdeClient(), {
+    theme
+  } = useOdeTheme();
+  function avatarUrl() {
+    let avatar = userDescription == null ? void 0 : userDescription.picture;
+    return (!avatar || avatar === "no-avatar.jpg" || avatar === "no-avatar.svg") && (avatar = `${theme == null ? void 0 : theme.basePath}/img/illustrations/no-avatar.svg`), avatar;
   }
   return {
-    user: e,
-    avatar: n(),
-    userDescription: t
+    user,
+    avatar: avatarUrl(),
+    userDescription
   };
 }
 export {
-  v as default
+  useUser as default
 };
-//# sourceMappingURL=useUser.js.map

package/dist/core/useWorkspaceFile/useWorkspaceFile.d.ts

@@ -1,4 +1,4 @@
-import { WorkspaceElement, WorkspaceVisibility } from '@edifice.io/ts-client';
+import { WorkspaceElement, WorkspaceVisibility } from 'edifice-ts-client';
 declare const useWorkspaceFile: () => {
     createOrUpdate: ({ alt, uri, blob, legend, parentId, application, visibility, }: {
         blob: Blob;