sync old link type with new conversions + performance update on app view links

prisma/schema.prisma

@@ -85,6 +85,7 @@ model Link {
     glow          Boolean        @default(false)
     trackings     LinkTracking[]
 
+    @@index([userId])
     @@index([name])
 }
 
@@ -105,7 +106,7 @@ model LinkTracking {
     actions   Int
     event     String
 
-    @@index([linkId])
+    @@index([createdAt, event, linkId])
 }
 
 model Log {

src/app/_components/app/links.tsx

@@ -10,7 +10,6 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Skeleton } from "@/components/ui/skeleton";
 import {
   Tooltip,
   TooltipContent,
@@ -36,7 +35,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { LogType, type Genre } from "@prisma/client";
+import { LogType } from "@prisma/client";
 import { CheckIcon, FileEditIcon } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import { Button } from "@/components/ui/button";
@@ -61,38 +60,21 @@ type LinkView = {
 };
 
 export function Links() {
-  // const { data: links, isLoading: linksLoading } = api.link.getAllView.useQuery();
   const [links] = api.link.getAllView.useSuspenseQuery();
-  const { data: genres, isLoading: genresLoading } = api.genre.getAll.useQuery();
-
-  if (genresLoading) return <LoadingCard />;
-  if (!links || !genres) return <p>Server error</p>;
 
   return (
     <div className="flex w-full flex-col">
       {links.length !== 0 ? (
-        <LinksTable links={links} genres={genres} />
+        <LinksTable links={links} />
       ) : (
         <p>Du hast noch keinen Link erstellt</p>
       )}
-      <CreateLink genres={genres} />
+      <CreateLink />
     </div>
   );
 }
 
-function LoadingCard() {
-  return (
-    <div className="flex flex-col space-y-3">
-      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
-      </div>
-    </div>
-  );
-}
-
-function CreateLink({ genres }: { genres: Genre[] }) {
+function CreateLink() {
   const { toast } = useToast();
   const utils = api.useUtils();
   const [name, setName] = useState<string>("");
@@ -113,6 +95,8 @@ function CreateLink({ genres }: { genres: Genre[] }) {
   const [imageFile, setImageFile] = useState<File | null>(null);
 
   const createLog = api.log.create.useMutation();
+  const { data: genres } =
+    api.genre.getAll.useQuery();
 
   const createLink = api.link.create.useMutation({
     onSuccess: async () => {
@@ -256,6 +240,8 @@ function CreateLink({ genres }: { genres: Genre[] }) {
     });
   };
 
+  if(!genres) return <p>Server Error</p>;
+
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -517,7 +503,7 @@ function CreateLink({ genres }: { genres: Genre[] }) {
   );
 }
 
-function LinksTable({ links, genres }: { links: LinkView[], genres: Genre[] }) {
+function LinksTable({ links }: { links: LinkView[] }) {
   const router = useRouter();
   const utils = api.useUtils();
   const { toast } = useToast();
@@ -627,7 +613,6 @@ function LinksTable({ links, genres }: { links: LinkView[], genres: Genre[] }) {
         <EditLink
           linkId={editingLink}
           onClose={() => setEditingLink(null)}
-          genres={genres}
         />
       )}
     </div>
@@ -636,11 +621,9 @@ function LinksTable({ links, genres }: { links: LinkView[], genres: Genre[] }) {
 
 function EditLink({
   linkId,
-  genres,
   onClose,
 }: {
   linkId: string;
-  genres: Genre[];
   onClose: () => void;
 }) {
   const [link] = api.link.get.useSuspenseQuery({ id: linkId });
@@ -664,6 +647,8 @@ function EditLink({
   const [glow, setGlow] = useState<boolean>(link!.glow);
   const [imageFile, setImageFile] = useState<File | null>(null);
 
+  const { data: genres } = api.genre.getAll.useQuery();
+
   const updateLink = api.link.update.useMutation({
     onSuccess: async () => {
       await utils.link.invalidate();
@@ -726,6 +711,8 @@ function EditLink({
     });
   }
 
+  if(!genres) return <p>Server error</p>;
+
   return (
     <Sheet open onOpenChange={(open) => !open && onClose()}>
       <SheetContent className="overflow-y-auto">

src/app/_components/links/user-link.tsx

@@ -27,6 +27,21 @@ type CustomerInfo = {
   client_ip_address: string;
   fbc: string | null;
   fbp: string | null;
+  countryCode: string | null;
+};
+
+// COOKIE LOGIC
+const setCookie = (name: string, value: string, minutes: number) => {
+  const date = new Date();
+  date.setTime(date.getTime() + minutes * 60 * 1000);
+  document.cookie = `${name}=${value}; expires=${date.toUTCString()}; path=/; SameSite=Strict`;
+};
+
+const getCookie = (name: string) => {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) return parts.pop()?.split(";").shift();
+  return null;
 };
 
 export function UserLink({
@@ -38,6 +53,7 @@ export function UserLink({
   fbc,
   viewEventId,
   clickEventId,
+  countryCode,
 }: {
   referer: string;
   link: MinLink;
@@ -47,6 +63,7 @@ export function UserLink({
   fbc: string | null;
   viewEventId: string;
   clickEventId: string;
+  countryCode: string | null;
 }) {
   const [pixelInit, setPixelInit] = useState(false);
   const sendPageView = api.meta.conversionEvent.useMutation();
@@ -56,48 +73,57 @@ export function UserLink({
     client_ip_address: clientIp,
     fbc,
     fbp,
+    countryCode,
   };
 
   useEffect(() => {
-    // @ts-expect-error || IGNORE
-    if (!pixelInit && !window.__pixelInitialized) {
-      setPixelInit(true);
-
-      // @ts-expect-error || IGNORE
-      window.__pixelInitialized = true;
-
       // @ts-expect-error || IGNORE
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-      window.fbq(
-        "trackCustom",
-        "SavvyLinkVisit",
-        {
-          content_name: link.name,
-          content_category: "visit",
-        },
-        { eventID: viewEventId },
-      );
-      sendPageView.mutate({
-        linkName: link.name,
-        eventName: "SavvyLinkVisit",
-        eventId: viewEventId,
-        testEventCode: link.testEventCode,
-        eventData: {
-          content_category: "visit",
-          content_name: link.name,
-        },
-        customerInfo: {
-          client_ip_address: clientIp,
-          client_user_agent: userAgent,
-          fbc,
-          fbp,
-        },
-        referer,
-        event_time: Math.floor(new Date().getTime() / 1000),
-      });
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+      if (!pixelInit && !window.__pixelInitialized) {
+        setPixelInit(true);
+
+        // @ts-expect-error || IGNORE
+        window.__pixelInitialized = true;
+
+        if (getCookie(`${link.name}_visit`)) return;
+
+        if (link.testEventCode || fbc) {
+          // @ts-expect-error || IGNORE
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+          window.fbq(
+            "trackCustom",
+            "SavvyLinkVisit",
+            {
+              content_name: link.name,
+              content_category: "visit",
+            },
+            { eventID: viewEventId },
+          );
+
+          sendPageView.mutate({
+            linkName: link.name,
+            eventName: "SavvyLinkVisit",
+            eventId: viewEventId,
+            testEventCode: link.testEventCode,
+            eventData: {
+              content_category: "visit",
+              content_name: link.name,
+            },
+            customerInfo: {
+              client_ip_address: clientIp,
+              client_user_agent: userAgent,
+              fbc,
+              fbp,
+              countryCode
+            },
+            referer,
+            event_time: Math.floor(new Date().getTime() / 1000),
+          });
+
+          setCookie(`${link.name}_visit`, "visited", 30);
+        }
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
   return (
     <Card className="border-none dark:bg-zinc-950">
@@ -214,34 +240,41 @@ export function StreamButton({
   });
 
   const buttonClick = () => {
-    // @ts-expect-error || IGNORE
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    window.fbq(
-      "trackCustom",
-      "SavvyLinkClick",
-      {
-        content_name: platform,
-        content_category: "click",
-      },
-      { eventID: clickEventId },
-    );
+    if (
+      (link.testEventCode || customerInfo.fbc) &&
+      !getCookie(`${link.name}_click`)
+    ) {
+      // @ts-expect-error || IGNORE
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      window.fbq(
+        "trackCustom",
+        "SavvyLinkClick",
+        {
+          content_name: platform,
+          content_category: "click",
+        },
+        { eventID: clickEventId },
+      );
 
-    sendEvent.mutate({
-      linkName: link.name,
-      eventName: "SavvyLinkClick",
-      eventId: clickEventId,
-      testEventCode: link.testEventCode,
-      eventData: {
-        content_category: "click",
-        content_name: platform,
-      },
-      customerInfo,
-      referer,
-      event_time: Math.floor(new Date().getTime() / 1000),
-    });
+      setCookie(`${link.name}_click`, "clicked", 30);
 
-    window.location.href = playLink;
-  }
+      sendEvent.mutate({
+        linkName: link.name,
+        eventName: "SavvyLinkClick",
+        eventId: clickEventId,
+        testEventCode: link.testEventCode,
+        eventData: {
+          content_category: "click",
+          content_name: platform,
+        },
+        customerInfo,
+        referer,
+        event_time: Math.floor(new Date().getTime() / 1000),
+      });
+    } else {
+      window.location.href = playLink;
+    }
+  };
 
   return (
     <div className="flex items-center justify-around border-t border-t-gray-400 py-4">
@@ -284,22 +317,27 @@ export function PlayButton({
   });
 
   const buttonClick = () => {
-    // @ts-expect-error || IGNORE
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    window.fbq(
-      "trackCustom",
-      "SmartSavvy Link Click",
-      {
-        content_name: "cover",
-        content_category: "click",
-      },
-      { eventID: clickEventId },
-    );
+    if (
+      (link.testEventCode || customerInfo.fbc) &&
+      !getCookie(`${link.name}_click`)
+    ) {
+      // @ts-expect-error || IGNORE
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      window.fbq(
+        "trackCustom",
+        "SavvyLinkClick",
+        {
+          content_name: "cover",
+          content_category: "click",
+        },
+        { eventID: clickEventId },
+      );
+
+      setCookie(`${link.name}_click`, "clicked", 30);
 
-    setTimeout(() => {
       sendEvent.mutate({
         linkName: link.name,
-        eventName: "SmartSavvy Link Click",
+        eventName: "SavvyLinkClick",
         eventId: clickEventId,
         testEventCode: link.testEventCode,
         eventData: {
@@ -310,7 +348,9 @@ export function PlayButton({
         referer,
         event_time: Math.floor(new Date().getTime() / 1000),
       });
-    }, 500);
+    } else {
+      window.location.href = link.spotifyUri ?? "";
+    }
   };