@adland/react 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @adland/react
 
+## 0.11.0
+
+### Minor Changes
+
+- 99431e5: fix fetching ad
+
 ## 0.10.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adland/react",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/Ad.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useCallback } from "react";
 import { sendTrackRequest } from "../utils/sdk";
 import sdk from "@farcaster/miniapp-sdk";
-import { Loader, SquareDashed } from "lucide-react";
+import { FileWarningIcon, Loader, SquareDashed } from "lucide-react";
 import { type AdData } from "@adland/data";
 import { useFetch } from "../hooks/useFetch";
 import BasicAdBody from "./BasicAdBody";
@@ -13,6 +13,7 @@ import FarcasterProfileAdContent from "./content/FarcasterProfileAdContent";
 import { AdDataQueryError, AdProps } from "../types";
 import { getBaseUrl } from "../utils";
 import { adlandApiUrl } from "../utils/constants";
+import { fetchAd } from "../fetch";
 
 /**
  * Simple Ad component with built-in view and click tracking
@@ -39,36 +40,13 @@ export function Ad({
     error,
   } = useFetch<AdData>(
     `ad-data-${owner}-${slotId}`,
-    async () => {
-      const url = `${adlandApiUrl}/ad/owner/${owner.toLowerCase()}/slot/${slotId}`;
-
-      const res = await fetch(url, {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-
-      if (!res.ok) {
-        throw new Error(AdDataQueryError.ERROR);
-      }
-
-      const data = await res.json();
-
-      if (data.error) {
-        throw new Error(data.error);
-      }
-
-      return data;
-    },
+    () => fetchAd(owner, slotId),
     {
       enabled: !!owner && !!slotId,
     },
   );
   const networkBaseUrl = baseUrl ?? getBaseUrl(network);
 
-  console.log({ error, adData });
-
   const send = useCallback(
     (type: "view" | "click") => {
       const trackEndpoint = `${networkBaseUrl}/api/analytics/track`;
@@ -187,7 +165,7 @@ function ErrorAdContent({ error }: { error: unknown }) {
   return (
     <BasicAdBody>
       <div className="flex flex-row items-center gap-2">
-        <SquareDashed className="w-5 h-5 md:w-7 md:h-7" />
+        <FileWarningIcon className="w-5 h-5 md:w-7 md:h-7" />
         <p className="font-bold text-primary">ERROR</p>
       </div>
     </BasicAdBody>
@@ -216,7 +194,12 @@ function EmtpyAdContent({ data }: { data: { url: string } }) {
     >
       <div className="flex flex-row items-center gap-2">
         <SquareDashed className="w-5 h-5 md:w-7 md:h-7" />
-        <p className="font-bold text-primary">NO AD</p>
+        <p className="font-bold text-primary">
+          NO AD{" "}
+          <span className="text-xs text-muted-foreground/80 font-normal">
+            (Your ad here)
+          </span>
+        </p>
       </div>
     </BasicAdBody>
   );

package/src/fetch.ts

@@ -0,0 +1,28 @@
+import { AdDataQueryError } from "./types";
+import { adlandApiUrl } from "./utils/constants";
+
+export const fetchAd = async (owner: string, slotId: string) => {
+  const url = `${adlandApiUrl}/ad/owner/${owner.toLowerCase()}/slot/${slotId}`;
+
+  const res = await fetch(url, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (!res.ok) {
+    if (res.status === 404) {
+      throw new Error(AdDataQueryError.NO_AD);
+    }
+    throw new Error(AdDataQueryError.ERROR);
+  }
+
+  const data = await res.json();
+
+  if (data.error) {
+    throw new Error(data.error);
+  }
+
+  return data;
+};