feat: saving interactions for generate and copy locators

Author: The24thDS

src/components/LightLocatorsGeneratorTab.tsx

@@ -8,7 +8,9 @@ import {
   Textarea,
 } from "@mantine/core";
 import { useDocumentTitle, useInputState } from "@mantine/hooks";
+import { NetlifyFunctions } from "../constants";
 import { makeLocators } from "../utils/factories";
+import { netlifyFunctionInvoke } from "../utils/general";
 
 const gridColums = 12;
 
@@ -18,9 +20,37 @@ export default function LightLocatorsGeneratorTab() {
   const [generatedLocators, setGeneratedLocators] = useInputState("");
   useDocumentTitle("RMG Utils for Stellaris - Light Locators Generator");
 
-  const onGenerateClick = () => {
+  const onGenerateClick = async () => {
     const result = makeLocators(locators, stateTime);
     setGeneratedLocators(result.join("\n"));
+    try {
+      await netlifyFunctionInvoke(
+        NetlifyFunctions.SAVE_LOCATORS_INTEGRATIONS,
+        { "Content-Type": "application/json" },
+        { locators, stateTime, type: "generate" }
+      );
+    } catch (e) {
+      // TODO: Report to Sentry
+      console.error(e);
+    }
+  };
+
+  const onCopyClick = async (copy: Function) => {
+    copy();
+    try {
+      await netlifyFunctionInvoke(
+        NetlifyFunctions.SAVE_LOCATORS_INTEGRATIONS,
+        { "Content-Type": "application/json" },
+        {
+          locators: generatedLocators.split("\n").length,
+          stateTime,
+          type: "copy",
+        }
+      );
+    } catch (e) {
+      // TODO: Report to Sentry
+      console.error(e);
+    }
   };
 
   return (
@@ -73,7 +103,7 @@ export default function LightLocatorsGeneratorTab() {
               {({ copied, copy }) => (
                 <Button
                   color={copied ? "teal" : "blue"}
-                  onClick={copy}
+                  onClick={() => onCopyClick(copy)}
                   styles={{ root: { alignSelf: "flex-end" } }}
                   className="umami--click--copy-light-locators-button"
                 >

src/constants.ts

@@ -12,3 +12,7 @@ export const ROUTES = {
     name: "Privacy policy",
   },
 };
+
+export enum NetlifyFunctions {
+  SAVE_LOCATORS_INTEGRATIONS = "save_locators_interaction",
+}

src/utils/general.ts

@@ -1,5 +1,42 @@
+import { NetlifyFunctions } from "../constants";
+
 export const dateFormatter = new Intl.DateTimeFormat("default", {
   year: "numeric",
   month: "long",
   day: "numeric",
 });
+
+export const netlifyFunctionInvoke = async (
+  name: NetlifyFunctions,
+  headers = {},
+  body: Object | undefined,
+  options = { method: "POST" }
+) => {
+  let url = "";
+  // add host for local dev
+  if (import.meta.env.DEV) {
+    url += import.meta.env.VITE_NETLIFY_FUNCTIONS_LOCAL_SERVER;
+  }
+  // add netlify function path
+  url += `/.netlify/functions/${name}`;
+
+  const response = await fetch(url, {
+    ...options,
+    headers,
+    body: body ? JSON.stringify(body) : undefined,
+  });
+
+  if (!response.ok) {
+    throw new Error(`${response.status} ${response.statusText}`);
+  }
+
+  let content = await response.text();
+
+  try {
+    content = JSON.parse(content);
+  } catch (e) {
+    // content is not JSON
+  }
+
+  return content;
+};

src/vite-env.d.ts

@@ -1,2 +1,10 @@
 /// <reference types="vite/client" />
 declare const APP_VERSION: string;
+
+interface ImportMetaEnv {
+  readonly VITE_NETLIFY_FUNCTIONS_LOCAL_SERVER: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}