ref: convert allowed list hook to context provider

packages/extension/src/view/devtools/components/cookies/cookiesListing/useAllowedList/index.tsx → packages/extension/src/view/devtools/stateProviders/useAllowedList/index.tsx

@@ -17,17 +17,47 @@
 /**
  * External dependencies.
  */
-import { useEffect, useRef, useState } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  type PropsWithChildren,
+} from 'react';
+import { noop } from '@ps-analysis-tool/common';
+import { createContext } from 'use-context-selector';
 
 /**
  * Internal dependencies.
  */
-import { getCurrentTab } from '../../../../../../utils/getCurrentTabId';
-import { useCookieStore } from '../../../../stateProviders/syncCookieStore';
-import setDomainsInAllowList from './setDomainsInAllowList';
-import getDotPrefixedDomain from './getDotPrefixedDomain';
+import { getCurrentTab } from '../../../../utils/getCurrentTabId';
+import { useCookieStore } from '../syncCookieStore';
+import setDomainsInAllowList from './utils/setDomainsInAllowList';
+import getDotPrefixedDomain from './utils/getDotPrefixedDomain';
+import useContextSelector from '../../../../utils/useContextSelector';
+
+export interface AllowedListContext {
+  state: {
+    domainsInAllowList: Set<string>;
+    isIncognito: boolean;
+  };
+  actions: {
+    setDomainsInAllowListCallback: (list: Set<string>) => void;
+  };
+}
+
+const initialState: AllowedListContext = {
+  state: {
+    domainsInAllowList: new Set(),
+    isIncognito: false,
+  },
+  actions: {
+    setDomainsInAllowListCallback: noop,
+  },
+};
+
+export const Context = createContext<AllowedListContext>(initialState);
 
-const useAllowedList = () => {
+export const Provider = ({ children }: PropsWithChildren) => {
   const { tabUrl, cookies } = useCookieStore(({ state }) => ({
     tabUrl: state.tabUrl,
     cookies: state.tabCookies,
@@ -96,11 +126,36 @@ const useAllowedList = () => {
     })();
   }, [cookies, tabUrl]);
 
-  return {
-    domainsInAllowList,
-    setDomainsInAllowListCallback,
-    isIncognito: isIncognito.current,
-  };
+  return (
+    <Context.Provider
+      value={{
+        state: {
+          domainsInAllowList,
+          isIncognito: isIncognito.current,
+        },
+        actions: {
+          setDomainsInAllowListCallback,
+        },
+      }}
+    >
+      {children}
+    </Context.Provider>
+  );
 };
 
-export default useAllowedList;
+export function useAllowedList(): AllowedListContext;
+export function useAllowedList<T>(
+  selector: (state: AllowedListContext) => T
+): T;
+
+/**
+ * Allowed list hook.
+ * @param selector Selector function to partially select state.
+ * @returns selected part of the state
+ */
+export function useAllowedList<T>(
+  selector: (state: AllowedListContext) => T | AllowedListContext = (state) =>
+    state
+) {
+  return useContextSelector(Context, selector);
+}

packages/extension/src/view/devtools/stateProviders/useAllowedList/utils/index.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default as getDotPrefixedDomain } from './getDotPrefixedDomain';
+export { default as isCookieDomainInAllowList } from './isCookieDomainInAllowList';
+export { default as onAllowListClick } from './onAllowListClick';
+export { default as removeFromAllowList } from './removeFromAllowList';
+export { default as setDomainsInAllowList } from './setDomainsInAllowList';
+export { default as setParentDomain } from './setParentDomain';

packages/extension/src/view/devtools/components/cookies/cookiesListing/useAllowedList/onAllowListClick.ts → packages/extension/src/view/devtools/stateProviders/useAllowedList/utils/onAllowListClick.ts

@@ -17,7 +17,7 @@
 /**
  * Internal dependencies.
  */
-import { ChromeStorage } from '../../../../../../store';
+import { ChromeStorage } from '../../../../../store';
 import removeFromAllowList from './removeFromAllowList';
 
 const onAllowListClick = async (

packages/extension/src/view/devtools/components/cookies/cookiesListing/useAllowedList/removeFromAllowList.ts → packages/extension/src/view/devtools/stateProviders/useAllowedList/utils/removeFromAllowList.ts

@@ -17,10 +17,7 @@
 /**
  * Internal dependencies.
  */
-import {
-  ChromeStorage,
-  type AllowedDomainObject,
-} from '../../../../../../store';
+import { ChromeStorage, type AllowedDomainObject } from '../../../../../store';
 
 /**
  * Remove object from allow list.

packages/extension/src/view/devtools/components/cookies/cookiesListing/useAllowedList/setParentDomain.ts → packages/extension/src/view/devtools/stateProviders/useAllowedList/utils/setParentDomain.ts

@@ -16,7 +16,7 @@
 /**
  * Internal dependencies.
  */
-import { ChromeStorage } from '../../../../../../store';
+import { ChromeStorage } from '../../../../../store';
 
 const setParentDomain = async (
   domain: string,