From d82d507e0d732104cb703cd53502ff000a3f7f17 Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Sun, 21 Jan 2024 14:35:28 +0100
Subject: [PATCH] Make popout ask for permission

---
 src/components/PermissionMissingScreen.tsx | 19 +++++++++++++++++++
 src/hooks/useDomainWhitelist.ts            | 12 +++++++++---
 src/hooks/usePermission.ts                 |  2 +-
 src/popup.tsx                              | 11 ++++++++++-
 4 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 src/components/PermissionMissingScreen.tsx

diff --git a/src/components/PermissionMissingScreen.tsx b/src/components/PermissionMissingScreen.tsx
new file mode 100644
index 0000000..2d57e44
--- /dev/null
+++ b/src/components/PermissionMissingScreen.tsx
@@ -0,0 +1,19 @@
+import { Icon } from '~components/Icon';
+
+import '~tabs/PermissionGrant.css';
+
+export interface PermissionMissingProps {
+  onGrant?: () => void;
+}
+
+export function PermissionMissingScreen(props: PermissionMissingProps) {
+  return (
+    <div className="disabled">
+      <Icon name="warningCircle" />
+      <p style={{ paddingBottom: 25, paddingTop: 10 }}>The extension is missing permissions it needs to function</p>
+      <button type="button" className="grant-permission-btn" onClick={props.onGrant}>
+        Grant Permission
+      </button>
+    </div>
+  );
+}
diff --git a/src/hooks/useDomainWhitelist.ts b/src/hooks/useDomainWhitelist.ts
index 00adc44..73b8e51 100644
--- a/src/hooks/useDomainWhitelist.ts
+++ b/src/hooks/useDomainWhitelist.ts
@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 
+import { usePermission } from '~hooks/usePermission';
 import { useDomainStorage } from '~utils/storage';
 
 export function useDomainWhitelist() {
@@ -25,11 +26,16 @@ export function useDomainWhitelist() {
 export function useToggleWhitelistDomain(domain: string) {
   const { domainWhitelist, addDomain, removeDomain } = useDomainWhitelist();
   const isWhitelisted = domainWhitelist.includes(domain);
+  const { grantPermission } = usePermission();
 
   const toggle = useCallback(() => {
-    if (isWhitelisted) removeDomain(domain);
-    else addDomain(domain);
-  }, [isWhitelisted, domain, addDomain, removeDomain]);
+    if (!isWhitelisted) {
+      addDomain(domain);
+      return;
+    }
+
+    removeDomain(domain);
+  }, [isWhitelisted, domain, addDomain, removeDomain, grantPermission]);
 
   return {
     toggle,
diff --git a/src/hooks/usePermission.ts b/src/hooks/usePermission.ts
index 826693c..9f72045 100644
--- a/src/hooks/usePermission.ts
+++ b/src/hooks/usePermission.ts
@@ -12,7 +12,7 @@ export function usePermission() {
   const { addDomain } = useDomainWhitelist();
   const [permission, setPermission] = useState(false);
 
-  const grantPermission = useCallback(async (domain: string) => {
+  const grantPermission = useCallback(async (domain?: string) => {
     const granted = await chrome.permissions.request({
       origins: ['<all_urls>'],
     });
diff --git a/src/popup.tsx b/src/popup.tsx
index 12644da..1980551 100644
--- a/src/popup.tsx
+++ b/src/popup.tsx
@@ -1,19 +1,28 @@
 import { BottomLabel } from '~components/BottomLabel';
 import { DisabledScreen } from '~components/DisabledScreen';
 import { Frame } from '~components/Frame';
+import { PermissionMissingScreen } from '~components/PermissionMissingScreen';
 import { ToggleButton } from '~components/ToggleButton';
 import { useDomain } from '~hooks/useDomain';
 import { useToggleWhitelistDomain } from '~hooks/useDomainWhitelist';
 import './Popup.css';
+import { usePermission } from '~hooks/usePermission';
 
 function IndexPopup() {
   const domain = useDomain();
   const { isWhitelisted, toggle } = useToggleWhitelistDomain(domain);
+  const { grantPermission, hasPermission } = usePermission();
+
+  let page = 'toggle';
+  if (!hasPermission) page = 'perm';
+  else if (!domain) page = 'disabled';
 
   return (
     <Frame>
       <div className="popup">
-        {!domain ? <DisabledScreen /> : <ToggleButton active={isWhitelisted} onClick={toggle} domain={domain} />}
+        {page === 'toggle' ? <ToggleButton active={isWhitelisted} onClick={toggle} domain={domain} /> : null}
+        {page === 'disabled' ? <DisabledScreen /> : null}
+        {page === 'perm' ? <PermissionMissingScreen onGrant={grantPermission} /> : null}
         <BottomLabel />
       </div>
     </Frame>