🧩 ui Refactor unsplash

CHANGELOG.md

@@ -16,7 +16,7 @@
     1. `@swy/ui/custom` → `@swy/ui/shared`
     2. `@swy/ui/dnd` → `@swy/ui/shared`
     3. `@swy/ui/form` → `@swy/ui/shared`
-  - Refactor components: `IconBlock`
+  - Refactor components: `IconBlock`, `Unsplash`
   - Rename: `IconPicker` → `EmojiPicker`
   - Remove unused shadcn components
   - Remove path alias

packages/ui/src/components/shared/unsplash/index.ts

@@ -1,2 +1 @@
-export type * from "./index.types";
-export * from "./unsplash-provider";
+export * from "./unsplash";

packages/ui/src/components/shared/unsplash/index.test.tsx → packages/ui/src/components/shared/unsplash/unsplash.test.tsx

@@ -1,10 +1,10 @@
 import { render } from "@testing-library/react";
 
-import { Unsplash } from ".";
+import { Unsplash } from "./unsplash";
 
 describe("<Unsplash />", () => {
   it("should render the default text", () => {
     const ui = render(<Unsplash apiKey="" />);
-    expect(ui.getByPlaceholderText(/Search for an image/i)).toBeDefined();
+    expect(ui.getByPlaceholderText(/Search for an image/i)).toBeInTheDocument();
   });
 });

packages/ui/src/components/shared/unsplash/unsplash-picker.tsx → packages/ui/src/components/shared/unsplash/unsplash.tsx

@@ -1,30 +1,28 @@
 "use client";
 
-import { useState } from "react";
-
 import { cn } from "@swy/ui/lib";
 import { Input } from "@swy/ui/shadcn";
 
 import { Spinner } from "../spinner";
 import { useUnsplash } from "./use-unsplash";
 
-export interface UnsplashPickerProps {
+export interface UnsplashProps {
+  /** @param apiKey - Unsplash Access Key */
+  apiKey: string;
   className?: string;
   onSelect?: (url: string) => void;
 }
 
-export const UnsplashPicker = ({
-  className,
-  onSelect,
-}: UnsplashPickerProps) => {
-  const [query, setQuery] = useState<string>("");
-  const { images, isLoading } = useUnsplash({ query, count: 24 });
+/**
+ * An `Unsplash` image browser
+ */
+export const Unsplash = ({ apiKey, className, onSelect }: UnsplashProps) => {
+  const { images, isLoading, setQuery } = useUnsplash({ apiKey });
 
   return (
     <div className={cn("max-h-[280px] w-full overflow-y-auto p-4", className)}>
       <Input
         id="unsplash"
-        value={query}
         onChange={(e) => setQuery(e.target.value)}
         placeholder="Search for an image..."
       />

packages/ui/src/components/shared/unsplash/use-unsplash.ts

@@ -1,47 +1,61 @@
 "use client";
 
-import useSWR, { type Fetcher } from "swr";
+import { useEffect, useMemo, useState, useTransition } from "react";
+import { createApi } from "unsplash-js";
 
 import { defaultImages } from "./constants";
-import type { UnsplashImage } from "./index.types";
-import { useUnsplashInternal } from "./unsplash-context";
 
-export interface UnsplashConfig {
-  query?: string;
-  count?: number;
+interface UnsplashImage {
+  id: string;
+  user: { name: string; portfolio_url: string };
+  links: { html: string };
+  urls: { thumb: string; full: string; regular: string; small: string };
+  description?: string;
 }
 
-export const useUnsplash = ({ query = "", count }: UnsplashConfig) => {
-  const { unsplash } = useUnsplashInternal();
-  const fetcher: Fetcher<UnsplashImage[], string> = async (key) => {
-    let search;
-    try {
-      const [, query] = key.split(":");
-      if (!query?.length) {
-        search = await unsplash.photos.getRandom({
-          collectionIds: ["317099"],
-          count,
+interface UnsplashConfig {
+  apiKey: string;
+}
+
+export const useUnsplash = ({ apiKey }: UnsplashConfig) => {
+  const unsplash = useMemo(
+    () => createApi({ accessKey: apiKey, fetch }),
+    [apiKey],
+  );
+  const [query, setQuery] = useState("");
+  const [images, setImages] = useState<UnsplashImage[]>();
+  const [isLoading, startTransition] = useTransition();
+
+  useEffect(() => {
+    const fetchImages = async (query: string, count = 24) => {
+      try {
+        if (query.length === 0) {
+          const search = await unsplash.photos.getRandom({
+            collectionIds: ["317099"],
+            count,
+          });
+          if (!search.response) throw new Error("Failed to get random photos");
+          return search.response as UnsplashImage[];
+        }
+
+        const search = await unsplash.search.getPhotos({
+          query,
+          perPage: count,
         });
-        if (!search.response) throw new Error("Failed to get random photos");
-        return search.response as UnsplashImage[];
+        if (!search.response) throw new Error(`Failed to get photos: ${query}`);
+        console.log(`search res: ${search.response.total}`);
+        return search.response.results as UnsplashImage[];
+      } catch (e) {
+        console.log("[unsplash] Failed to get images from Unsplash!");
+        console.log(e);
+        return defaultImages as UnsplashImage[];
       }
+    };
 
-      search = await unsplash.search.getPhotos({ query, perPage: count });
-      if (!search.response) throw new Error(`Failed to get photos: ${query}`);
-      return search.response.results as UnsplashImage[];
-    } catch (e) {
-      console.log(`[unsplash] Failed to get images from Unsplash!`);
-      console.log(e);
-      return defaultImages as UnsplashImage[];
-    }
-  };
-  const { data, isLoading, error, mutate } = useSWR<UnsplashImage[], Error>(
-    `unsplash:${query}`,
-    fetcher,
-    {
-      onError: (e) => console.log(`[unsplash] Error: ${e.message}`),
-      revalidateOnFocus: false,
-    },
-  );
-  return { images: data, isLoading, error, mutate };
+    startTransition(
+      () => void fetchImages(query).then((images) => setImages(images)),
+    );
+  }, [unsplash, query]);
+
+  return { isLoading, images, setQuery };
 };