From 663cc126e1bfea0150979dc5d10fbf0bae47672e Mon Sep 17 00:00:00 2001 From: ERNEST ASARE-ASIEDU Date: Sun, 9 Jul 2023 05:34:19 -0400 Subject: [PATCH] Fix/firefoxshortcut (#5) * Fix: broken getShortcut on firefox * Chore: update runtimehandler refs * Refactor: move debugShow show to context with context selector Update: old and new ui to ref useDebugShow --- src/background/index.ts | 6 ++-- src/popup/context.tsx | 67 +++++++++++++++++++++++++++++++++++++++++ src/popup/index.tsx | 14 +++++++-- src/popup/indexNew.tsx | 6 ++-- src/popup/indexOld.tsx | 7 +++-- src/popup/shorcut.tsx | 14 ++++++++- 6 files changed, 102 insertions(+), 12 deletions(-) create mode 100644 src/popup/context.tsx diff --git a/src/background/index.ts b/src/background/index.ts index 3355429..30ba2fb 100644 --- a/src/background/index.ts +++ b/src/background/index.ts @@ -92,7 +92,7 @@ const messageListener = (request, sender: chrome.runtime.MessageSender, sendResp break; } case 'getShortcut': { - chrome.commands + runTimeHandler.commands .getAll() .then((commands) => { const [commandEntry = undefined] = commands.filter(({ name }) => /toggle-bionic/.test(name)); @@ -144,6 +144,6 @@ function onInstallHandler(event: chrome.runtime.InstalledDetails) { chrome.runtime.onInstalled.addListener(onInstallHandler); -chrome?.commands?.onCommand?.addListener(commandListener); +runTimeHandler.commands.onCommand?.addListener(commandListener); -runTimeHandler.runtime.onMessage.addListener(messageListener); +(runTimeHandler as typeof chrome).runtime.onMessage.addListener(messageListener); diff --git a/src/popup/context.tsx b/src/popup/context.tsx new file mode 100644 index 0000000..00f2e22 --- /dev/null +++ b/src/popup/context.tsx @@ -0,0 +1,67 @@ +import { Storage } from '@plasmohq/storage'; +import { createContext, useContext, useEffect, useReducer } from 'react'; + +let storage = { + key: 'context.store', + api: new Storage({ area: 'local' }), + get value() { + return this.api.get(this.key) as typeof rawValues; + }, + set value(newStore) { + this.api.set(this.key, newStore); + }, +}; + +const rawValues = { + isDebugDataVisible: !/production/i.test(process.env.NODE_ENV), +}; + +const initialPopupContextValue = { + ...rawValues, + dispatch: function ([action, value]: [Tkey, typeof rawValues[Tkey]]) { + return; + }, +}; + +function reducer(state, [action, data]: [Tkey, typeof rawValues[Tkey]]): typeof rawValues { + let result = state; + switch (action) { + case 'isDebugDataVisible': { + result = { ...state, [action]: data }; + break; + } + } + + storage.value = result; + return result; +} + +const PopupContext = createContext(initialPopupContextValue); + +export default function PopupContextProvider({ children }) { + const [store, dispatch] = useReducer(reducer, initialPopupContextValue); + + const loadFromStorage = () => { + (async () => { + const savedStore: typeof rawValues = await storage.value; + + if (!savedStore) { + return; + } + + for (const [key, val] of Object.entries(savedStore)) { + dispatch([key as keyof typeof store, val]); + } + })(); + }; + + useEffect(loadFromStorage, []); + + return {children}; +} + +export function usePopupContext() { + const { dispatch, ...store } = useContext(PopupContext); + + return { store, dispatch }; +} diff --git a/src/popup/index.tsx b/src/popup/index.tsx index 8638012..88fa3b5 100644 --- a/src/popup/index.tsx +++ b/src/popup/index.tsx @@ -13,8 +13,10 @@ import documentParser from '~services/documentParser'; import defaultPrefs from '~services/preferences'; import runTimeHandler from '~services/runTimeHandler'; +import PopupContextProvider from './context'; import IndexPopupNew from './indexNew'; import IndexPopupOld from './indexOld'; +import { useShowDebugSwitch } from './shorcut'; const badCapScroll = /safari/i.test(process.env.TARGET) ? { overflowY: 'scroll', height: '600px' } : {}; @@ -36,7 +38,7 @@ const FIRST_FOOTER_MESSAGE_INDEX = 1; function IndexPopup() { const [activeTab, setActiveTab] = useState(null as chrome.tabs.Tab); const [footerMessageIndex, setFooterMeessageIndex] = useState(null); - const [isDebugDataVisible, setIsDebugDataVisible] = useState(!/production/i.test(process.env.NODE_ENV)); + const [isDebugDataVisible, setIsDebugDataVisible] = useShowDebugSwitch(); const getTabOriginfn = useCallback(async () => await TabHelper.getTabOrigin(await TabHelper.getActiveTab(true)), [TabHelper]); @@ -139,4 +141,12 @@ function IndexPopup() { ); } -export default IndexPopup; +function PopupShell() { + return ( + + + + ); +} + +export default PopupShell; diff --git a/src/popup/indexNew.tsx b/src/popup/indexNew.tsx index 310556d..0055e45 100644 --- a/src/popup/indexNew.tsx +++ b/src/popup/indexNew.tsx @@ -21,7 +21,7 @@ import documentParser from '~services/documentParser'; import defaultPrefs from '~services/preferences'; import runTimeHandler from '~services/runTimeHandler'; -import Shortcut, { ShortcutGuide } from './shorcut'; +import Shortcut, { ShortcutGuide, useShowDebugSwitch } from './shorcut'; const popupLogStyle = 'background:cyan;color:brown'; @@ -41,7 +41,7 @@ const FIRST_FOOTER_MESSAGE_INDEX = 1; function IndexPopupNew() { const [activeTab, setActiveTab] = useState(null as chrome.tabs.Tab); const [footerMessageIndex, setFooterMeessageIndex] = useState(null); - const [isDebugDataVisible, setIsDebugDataVisible] = useState(!/production/i.test(process.env.NODE_ENV)); + const [isDebugDataVisible, setIsDebugDataVisible] = useShowDebugSwitch(); const getTabOriginfn = useCallback(async () => await TabHelper.getTabOrigin(await TabHelper.getActiveTab(true)), [TabHelper]); @@ -142,7 +142,7 @@ function IndexPopupNew() { }; setTabSession({ ...tabSession, brMode: newBrMode }); - runTimeHandler.runtime.sendMessage(payload, () => Logger.LogLastError()); + (runTimeHandler as typeof chrome).runtime.sendMessage(payload, () => Logger.LogLastError()); TabHelper.getActiveTab(true).then((tab) => chrome.tabs.sendMessage(tab.id, payload, () => Logger.LogLastError())); }; diff --git a/src/popup/indexOld.tsx b/src/popup/indexOld.tsx index 8b5018c..e5f4adc 100644 --- a/src/popup/indexOld.tsx +++ b/src/popup/indexOld.tsx @@ -20,7 +20,8 @@ import { import documentParser from '~services/documentParser'; import defaultPrefs from '~services/preferences'; import runTimeHandler from '~services/runTimeHandler'; -import Shortcut, { ShortcutGuide } from './shorcut'; + +import Shortcut, { ShortcutGuide, useShowDebugSwitch } from './shorcut'; const popupLogStyle = 'background:cyan;color:brown'; @@ -39,7 +40,7 @@ const FIRST_FOOTER_MESSAGE_INDEX = 1; function IndexPopupOld() { const [activeTab, setActiveTab] = useState(null as chrome.tabs.Tab); const [footerMessageIndex, setFooterMeessageIndex] = useState(null); - const [isDebugDataVisible, setIsDebugDataVisible] = useState(!/production/i.test(process.env.NODE_ENV)); + const [isDebugDataVisible, setIsDebugDataVisible] = useShowDebugSwitch(); const [prefs, setPrefs] = usePrefs(async () => await TabHelper.getTabOrigin(await TabHelper.getActiveTab(true)), true, process.env.TARGET); @@ -136,7 +137,7 @@ function IndexPopupOld() { }; setTabSession({ ...tabSession, brMode: newBrMode }); - runTimeHandler.runtime.sendMessage(payload, () => Logger.LogLastError()); + (runTimeHandler as typeof chrome).runtime.sendMessage(payload, () => Logger.LogLastError()); TabHelper.getActiveTab(true).then((tab) => chrome.tabs.sendMessage(tab.id, payload, () => Logger.LogLastError())); }; diff --git a/src/popup/shorcut.tsx b/src/popup/shorcut.tsx index 756bfe1..82c2c56 100644 --- a/src/popup/shorcut.tsx +++ b/src/popup/shorcut.tsx @@ -3,11 +3,13 @@ import { useEffect, useState } from 'react'; import Logger from '~services/Logger'; import runTimeHandler from '~services/runTimeHandler'; +import { usePopupContext } from './context'; + export function useShortcut() { const [shortcut, setShortcut] = useState(undefined); const getShortcut = () => { - runTimeHandler.runtime + (runTimeHandler as typeof chrome).runtime .sendMessage({ message: 'getShortcut' }) .then((shortcutResponse) => setShortcut(shortcutResponse)) .catch(Logger.logError); @@ -40,3 +42,13 @@ export default function Shortcut() { ); } + +export function useShowDebugSwitch() { + const { + store: { isDebugDataVisible }, + dispatch, + } = usePopupContext(); + + const setIsDebugDataVisible = (value: typeof isDebugDataVisible) => dispatch(['isDebugDataVisible', value]); + return [isDebugDataVisible, setIsDebugDataVisible] as [typeof isDebugDataVisible, typeof setIsDebugDataVisible]; +}