From e71606b9907fb67b981b14e5f94f891d9f5d3077 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Wed, 11 Sep 2024 11:35:55 +0200
Subject: [PATCH] ui: move spot cta up

---
 .../components/Spots/SpotsList/EmptyPage.tsx  | 56 +---------------
 .../components/Spots/SpotsList/InstallCTA.tsx | 64 +++++++++++++++++++
 .../app/components/Spots/SpotsList/index.tsx  |  2 +
 3 files changed, 67 insertions(+), 55 deletions(-)
 create mode 100644 frontend/app/components/Spots/SpotsList/InstallCTA.tsx

diff --git a/frontend/app/components/Spots/SpotsList/EmptyPage.tsx b/frontend/app/components/Spots/SpotsList/EmptyPage.tsx
index 387ab29f6..3a6737289 100644
--- a/frontend/app/components/Spots/SpotsList/EmptyPage.tsx
+++ b/frontend/app/components/Spots/SpotsList/EmptyPage.tsx
@@ -1,40 +1,9 @@
-import { ChromeOutlined } from '@ant-design/icons';
-import { Alert, Button, Modal } from 'antd';
-import { ArrowUpRight } from 'lucide-react';
+import { Modal } from 'antd';
 import React, { useState } from 'react';
 
 function EmptyPage() {
-  const extKey = '__$spot_ext_exist$__';
-  const [extExist, setExtExist] = React.useState<boolean>(false);
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
 
-  React.useEffect(() => {
-    let int: any;
-    const v = localStorage.getItem(extKey);
-    if (v) {
-      setExtExist(true);
-    } else {
-      int = setInterval(() => {
-        window.postMessage({ type: 'orspot:ping' }, '*');
-      });
-      const onSpotMsg = (e) => {
-        if (e.data.type === 'orspot:pong') {
-          setExtExist(true);
-          localStorage.setItem(extKey, '1');
-          clearInterval(int);
-          int = null;
-          window.removeEventListener('message', onSpotMsg);
-        }
-      };
-      window.addEventListener('message', onSpotMsg);
-    }
-    return () => {
-      if (int) {
-        clearInterval(int);
-      }
-    };
-  }, []);
-
   const handleWatchClick = () => {
     setIsModalVisible(true);
   };
@@ -51,29 +20,6 @@ function EmptyPage() {
         }
       >
         <div className="w-3/4 flex flex-col gap-3 justify-center items-center ">
-          {extExist ? null : (
-            <Alert
-              message="It looks like you haven’t installed the Spot extension yet."
-              type="warning"
-              action={
-                <Button
-                  type="primary"
-                  icon={<ChromeOutlined />}
-                  className="text-lg"
-                  onClick={() =>
-                    window.open(
-                      'https://chromewebstore.google.com/detail/openreplay-spot-record-re/ckigbicapkkgfomcfmcbaaplllopgbid?pli=1',
-                      '_blank'
-                    )
-                  }
-                >
-                  Get Chrome Extension <ArrowUpRight />
-                </Button>
-              }
-              className="w-full justify-between font-medium text-lg rounded-lg border-0 mb-4"
-            />
-          )}
-
           <a
             href="#"
             onClick={handleWatchClick}
diff --git a/frontend/app/components/Spots/SpotsList/InstallCTA.tsx b/frontend/app/components/Spots/SpotsList/InstallCTA.tsx
new file mode 100644
index 000000000..046a96971
--- /dev/null
+++ b/frontend/app/components/Spots/SpotsList/InstallCTA.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import { ChromeOutlined } from '@ant-design/icons';
+import { Alert, Button } from 'antd';
+import { ArrowUpRight } from 'lucide-react';
+
+function InstallCTA() {
+  const extKey = '__$spot_ext_exist$__';
+  const [extExist, setExtExist] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    let int: any;
+    const v = localStorage.getItem(extKey);
+    if (v) {
+      setExtExist(true);
+    } else {
+      int = setInterval(() => {
+        window.postMessage({ type: 'orspot:ping' }, '*');
+      });
+      const onSpotMsg = (e: any) => {
+        if (e.data.type === 'orspot:pong') {
+          setExtExist(true);
+          localStorage.setItem(extKey, '1');
+          clearInterval(int);
+          int = null;
+          window.removeEventListener('message', onSpotMsg);
+        }
+      };
+      window.addEventListener('message', onSpotMsg);
+    }
+    return () => {
+      if (int) {
+        clearInterval(int);
+      }
+    };
+  }, []);
+  return (
+    <>
+    {extExist ? null : (
+        <Alert
+          message="It looks like you haven’t installed the Spot extension yet."
+          type="warning"
+          action={
+            <Button
+              type="primary"
+              icon={<ChromeOutlined />}
+              className="text-lg"
+              onClick={() =>
+                window.open(
+                  'https://chromewebstore.google.com/detail/openreplay-spot-record-re/ckigbicapkkgfomcfmcbaaplllopgbid?pli=1',
+                  '_blank'
+                )
+              }
+            >
+              Get Chrome Extension <ArrowUpRight />
+            </Button>
+          }
+          className="w-full justify-between font-medium text-lg rounded-lg border-0 mb-4"
+        />
+      )}
+    </>
+  )
+}
+
+export default InstallCTA
\ No newline at end of file
diff --git a/frontend/app/components/Spots/SpotsList/index.tsx b/frontend/app/components/Spots/SpotsList/index.tsx
index a93e4bd43..fde706625 100644
--- a/frontend/app/components/Spots/SpotsList/index.tsx
+++ b/frontend/app/components/Spots/SpotsList/index.tsx
@@ -11,6 +11,7 @@ import { Loader, NoContent, Pagination } from 'UI';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 import EmptyPage from './EmptyPage';
+import InstallCTA from "./InstallCTA";
 import SpotListItem from './SpotListItem';
 import SpotsListHeader from './SpotsListHeader';
 
@@ -76,6 +77,7 @@ function SpotsList() {
   const isEmpty = spotStore.total === 0 && spotStore.query === '';
   return (
     <div className={'relative w-full mx-auto'} style={{ maxWidth: 1360 }}>
+      <InstallCTA />
       <div
         className={
           'flex mx-auto p-2 px-4 bg-white rounded-lg shadow-sm w-full z-50 border-b'