Add session json to gitignore

.gitignore

@@ -19,3 +19,5 @@ config/tunnel.pid
 
 # next build output
 .next/
+
+session.json

hooks/useAxios.js

@@ -0,0 +1,15 @@
+import Axios from "axios";
+import { useAppBridge } from "@shopify/app-bridge-react";
+import { getSessionToken } from "@shopify/app-bridge-utils";
+
+export function useAxios() {
+  const app = useAppBridge();
+  const instance = Axios.create();
+  instance.interceptors.request.use(function (config) {
+    return getSessionToken(app).then((token) => {
+      config.headers["Authorization"] = `Bearer ${token}`;
+      return config;
+    });
+  });
+  return [instance];
+}

package.json

@@ -35,9 +35,12 @@
     "graphql": "^14.5.8",
     "isomorphic-fetch": "^3.0.0",
     "koa": "^2.13.1",
+    "koa-body-parser": "^1.1.2",
     "koa-combine-routers": "^4.0.2",
+    "koa-mount": "^4.0.0",
     "koa-router": "^10.0.0",
     "koa-session": "^6.1.0",
+    "koa-static": "^5.0.0",
     "next": "^10.0.8",
     "next-env": "^1.1.0",
     "node-fetch": "^2.6.1",

pages/_app.js

@@ -7,6 +7,7 @@ import { authenticatedFetch } from "@shopify/app-bridge-utils";
 import "@shopify/polaris/dist/styles.css";
 import translations from "@shopify/polaris/locales/en.json";
 import ClientRouter from "../components/ClientRouter";
+import createApp from "@shopify/app-bridge";
 
 function MyProvider(props) {
   const app = useAppBridge();

pages/install.js

@@ -1,29 +1,37 @@
 import { Layout, Page, SettingToggle, TextStyle } from "@shopify/polaris";
-import React, { useState } from "react";
-import Axios from "axios";
-import { getSessionToken } from "@shopify/app-bridge-utils";
+import React, { useEffect, useState } from "react";
+import { useAxios } from "../hooks/useAxios";
+
 function install() {
-  const instance = Axios.create();
-  instance.interceptors.request.use(function (config) {
-    return getSessionToken(window.app).then((token) => {
-      config.headers["Authorization"] = `Bearer ${token}`;
-      return config;
-    });
-  });
+  const [axios] = useAxios();
   const [isInstalled, setIsInstalled] = useState(null);
+  const [scriptTagId, setScriptTagId] = useState();
   const titleDescription = isInstalled ? "Uninstall" : "Install";
   const bodyDescription = isInstalled ? "installed" : "uninstalled";
+
+  async function fetchScriptTags() {
+    const { data } = await axios.get(
+      `https://il-shopify2.loca.lt/script_tag/all`
+    );
+    console.log("my initial script tag status: ", data);
+    setIsInstalled(data.installed);
+    if (data.details.length > 0) {
+      setScriptTagId(data.details[0].id);
+    }
+  }
+  useEffect(() => {
+    fetchScriptTags();
+  }, []);
+
   async function handleAction() {
     if (!isInstalled) {
-      try {
-        const response = instance.post("https://il-shopify.loca.lt/script_tag");
-        console.log(response.data);
-      } catch (err) {
-        console.log(err);
-      }
+      axios.post(`https://il-shopify2.loca.lt/script_tag`);
+    } else {
+      axios.delete(`https://il-shopify2.loca.lt/script_tag/?id=${scriptTagId}`);
     }
     setIsInstalled((oldValue) => !oldValue);
   }
+
   return (
     <Page>
       <Layout.AnnotatedSection

server/controllers/script_tag_controller.js

@@ -1,23 +1,51 @@
-import axios from "axios";
-
-export async function createScriptTag(shop, token) {
-  const url = getCreateScriptTagUrl(shop);
-  const headers = {
-    "Content-Type": "application/json",
-    "X-Shopify-Access-Token": token,
-  };
-  const body = {
-    script_tag: {
-      event: "onload",
-      src: "https://google.com",
-    },
-  };
-  try {
-    const result = await axios.post(url, body, headers);
-    console.log(result.data);
-  } catch (err) {
-    console.error("Error creating a new tag: ", err);
+import { DataType } from "@shopify/shopify-api";
+
+export async function createScriptTag(client) {
+  if (client) {
+    const data = {
+      script_tag: {
+        event: "onload",
+        src: "https://google.com",
+      },
+    };
+    const result = await client.post({
+      path: "script_tags",
+      data,
+      type: DataType.JSON,
+    });
+    console.log(`Result for the rest request using shopify is`, result);
+    return result;
+  }
+  console.error("Could not make the rest request as the client does not exist");
+}
+
+export async function getAllScriptTags(client, src) {
+  if (!client) {
+    console.error(
+      "Could not make the rest request as the client does not exist"
+    );
+    return;
+  }
+  const result = await client.get({
+    path: "script_tags",
+    query: `"src": "google.com"`,
+  });
+  const matchSrc = result.body.script_tags.filter((tag) => tag.src === src);
+  return matchSrc;
+}
+
+export async function deleteScriptTagById(client, id) {
+  if (!client) {
+    console.error(
+      "Could not make the rest request as the client does not exist"
+    );
+    return;
   }
+  const result = await client.delete({
+    path: `script_tags/${id}`,
+  });
+  console.log(result);
+  return result;
 }
 
 function getBaseUrl(shop) {