jazz-tools 0.18.37 → 0.19.0

package/src/media/utils.ts

@@ -1,5 +1,5 @@
 import type { CoID } from "cojson";
-import { Account, FileStream, ImageDefinition } from "jazz-tools";
+import { Account, FileStream, ImageDefinition, MaybeLoaded } from "jazz-tools";
 
 export function highestResAvailable(
   image: ImageDefinition,
@@ -15,7 +15,7 @@ export function highestResAvailable(
     });
 
   if (availableSizes.length === 0) {
-    return image.original
+    return image.original.$isLoaded
       ? {
           width: image.originalSize[0],
           height: image.originalSize[1],
@@ -40,19 +40,20 @@ export function highestResAvailable(
   // note: `toReversed` is not available in react-native.
   const bestLoaded = [...sortedSizes]
     .reverse()
-    .find((el) => el.isLoaded && image[el.size[2]]?.getChunks());
+    .find((el) => el.isLoaded && getImageChunks(image[el.size[2]]));
 
   // if I can't find a good match, let's use the highest resolution
   const bestTarget =
     sortedSizes.find((el) => el.match > 0.95) || sortedSizes.at(-1);
 
   // if the best target is already loaded, we are done
-  if (image[bestTarget!.size[2]]?.getChunks()) {
-    return image[bestTarget!.size[2]]
+  const bestTargetImage = image[bestTarget!.size[2]];
+  if (getImageChunks(bestTargetImage)) {
+    return bestTargetImage?.$isLoaded
       ? {
           width: bestTarget!.size[0],
           height: bestTarget!.size[1],
-          image: image[bestTarget!.size[2]]!,
+          image: bestTargetImage,
         }
       : null;
   }
@@ -60,12 +61,13 @@ export function highestResAvailable(
   // if the best already loaded is not the best target
   // let's trigger the load of the best target
   if (bestLoaded) {
-    image[bestTarget!.size[2]]?.getChunks();
-    return image[bestLoaded.size[2]]
+    getImageChunks(bestTargetImage);
+    const bestLoadedImage = image[bestLoaded.size[2]];
+    return bestLoadedImage?.$isLoaded
       ? {
           width: bestLoaded.size[0],
           height: bestLoaded.size[1],
-          image: image[bestLoaded.size[2]]!,
+          image: bestLoadedImage,
         }
       : null;
   }
@@ -73,13 +75,20 @@ export function highestResAvailable(
   // if nothing is loaded, then start fetching all the images till the best
   for (let size of sortedSizes) {
     if (size.match <= bestTarget!.match) {
-      image[size.size[2]]?.getChunks();
+      getImageChunks(image[size.size[2]]);
     }
   }
 
   return null;
 }
 
+function getImageChunks(file: MaybeLoaded<FileStream> | undefined) {
+  if (!file || !file.$isLoaded) {
+    return undefined;
+  }
+  return file.getChunks();
+}
+
 function sizesMatchWanted(
   w: number,
   h: number,
@@ -117,7 +126,7 @@ export async function loadImage(
       },
     });
 
-    if (image === null || image.original === null) {
+    if (!image.$isLoaded) {
       return null;
     }
 
@@ -128,14 +137,14 @@ export async function loadImage(
     };
   }
 
-  if (!imageOrId.original) {
+  if (!imageOrId.original.$isLoaded) {
     console.warn("Unable to find the original image");
     return null;
   }
 
   const loadedOriginal = await FileStream.load(imageOrId.original.$jazz.id);
 
-  if (!loadedOriginal) {
+  if (!loadedOriginal.$isLoaded) {
     console.warn("Unable to find the original image");
     return null;
   }
@@ -153,12 +162,12 @@ export async function loadImageBySize(
   wantedHeight: number,
 ): Promise<{ width: number; height: number; image: FileStream } | null> {
   // @ts-expect-error The resolved type for CoMap does not include catchall properties
-  const image: ImageDefinition | null =
+  const image: MaybeLoaded<ImageDefinition> =
     typeof imageOrId === "string"
       ? await ImageDefinition.load(imageOrId)
       : imageOrId;
 
-  if (image === null) {
+  if (image.$isLoaded === false) {
     return null;
   }
 
@@ -200,7 +209,7 @@ export async function loadImageBySize(
 
   const loadedFile = await FileStream.load(file.id);
 
-  if (!loadedFile) {
+  if (!loadedFile.$isLoaded) {
     return null;
   }
 

package/src/react/hooks.tsx

@@ -50,8 +50,8 @@ export {
   experimental_useInboxSender,
   useJazzContext,
   useAccount,
-  useCoStateWithSelector,
-  useAccountWithSelector,
+  useAgent,
+  useLogOut,
   useSyncConnectionStatus,
   useCoValueSubscription,
   useAccountSubscription,

package/src/react/index.ts

@@ -7,8 +7,8 @@ export {
   experimental_useInboxSender,
   useJazzContext,
   useAuthSecretStorage,
-  useCoStateWithSelector,
-  useAccountWithSelector,
+  useAgent,
+  useLogOut,
   useSyncConnectionStatus,
   useCoValueSubscription,
   useAccountSubscription,

package/src/react/media/image.tsx

@@ -1,4 +1,4 @@
-import { ImageDefinition } from "jazz-tools";
+import { CoValueLoadingState, ImageDefinition } from "jazz-tools";
 import {
   type JSX,
   forwardRef,
@@ -87,7 +87,15 @@ export const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
   { imageId, width, height, ...props },
   ref,
 ) {
-  const image = useCoState(ImageDefinition, imageId);
+  const image = useCoState(ImageDefinition, imageId, {
+    select: (image) => {
+      if (image.$isLoaded) {
+        return image;
+      } else if (image.$jazz.loadingState === CoValueLoadingState.LOADING) {
+        return undefined;
+      } else return null;
+    },
+  });
   const lastBestImage = useRef<[string, string] | null>(null);
 
   /**

package/src/react/tests/useAcceptInvite.test.ts

@@ -1,6 +1,7 @@
 // @vitest-environment happy-dom
 
 import { CoMap, Group, ID, co, coField, z } from "jazz-tools";
+import { assertLoaded } from "jazz-tools/testing";
 import { describe, expect, it } from "vitest";
 import { createInviteLink, useAcceptInvite } from "../index.js";
 import { createJazzTestAccount, linkAccounts } from "../testing.js";
@@ -50,6 +51,7 @@ describe("useAcceptInvite", () => {
       loadAs: account,
     });
 
-    expect(accepted?.value).toEqual("hello");
+    assertLoaded(accepted);
+    expect(accepted.value).toEqual("hello");
   });
 });