permission grant with domains

src/hooks/usePermission.ts

@@ -1,4 +1,6 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+
+import { useDomainWhitelist } from './useDomainWhitelist';
 
 export async function hasPermission() {
   return chrome.permissions.contains({
@@ -7,15 +9,17 @@ export async function hasPermission() {
 }
 
 export function usePermission() {
+  const { addDomain } = useDomainWhitelist();
   const [permission, setPermission] = useState(false);
 
-  const grantPermission = async () => {
+  const grantPermission = useCallback(async (domain: string) => {
     const granted = await chrome.permissions.request({
       origins: ['<all_urls>'],
     });
     setPermission(granted);
+    if (granted && domain) addDomain(domain);
     return granted;
-  };
+  }, []);
 
   useEffect(() => {
     hasPermission().then((has) => setPermission(has));

src/tabs/PermissionGrant.tsx

@@ -1,19 +1,28 @@
+import { useDomainWhitelist } from '~hooks/useDomainWhitelist';
 import { usePermission } from '~hooks/usePermission';
+import { makeUrlIntoDomain } from '~utils/domains';
 
 import './PermissionGrant.css';
 
 export default function PermissionGrant() {
+  const { domainWhitelist } = useDomainWhitelist();
   const { hasPermission, grantPermission } = usePermission();
 
   const queryParams = new URLSearchParams(window.location.search);
   const redirectUrl = queryParams.get('redirectUrl') ?? 'https://movie-web.app';
-  const domain = new URL(redirectUrl).hostname;
+  const domain = makeUrlIntoDomain(redirectUrl);
 
-  const handleGrantPermission = () => {
+  const permissionsGranted = domainWhitelist.includes(domain) && hasPermission;
-    grantPermission().then(() => {
+
+  const redirectBack = () => {
     chrome.tabs.getCurrent((tab) => {
       chrome.tabs.update(tab.id, { url: queryParams.get('redirectUrl') ?? 'https://movie-web.app' });
     });
+  };
+
+  const handleGrantPermission = () => {
+    grantPermission(domain).then(() => {
+      redirectBack();
     });
   };
 
@@ -30,7 +39,7 @@ export default function PermissionGrant() {
           </p>
         </div>
         <div className="footer">
-          <button type="button" className="go-back-btn">
+          <button type="button" className="go-back-btn" onClick={redirectBack}>
             Go back
           </button>
           <div style={{ flex: 1 }} />
@@ -38,7 +47,7 @@ export default function PermissionGrant() {
             type="button"
             className="grant-permission-btn"
             onClick={handleGrantPermission}
-            disabled={hasPermission}
+            disabled={permissionsGranted}
           >
             Grant Permission
           </button>