From 74933a778c7b80976df0745ee9e719401f06421a Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Tue, 2 Jul 2024 21:50:22 +1000 Subject: [PATCH] feat: improve devMode to have hidden menu items --- src/interface/components/TabbedContainer.tsx | 2 +- src/interface/hooks/settingsState.ts | 8 +- src/interface/pages/SettingsPage/Settings.tsx | 113 +++++++++++------- src/interface/types/AppProps.ts | 1 + src/types/storage.ts | 1 + 5 files changed, 77 insertions(+), 48 deletions(-) diff --git a/src/interface/components/TabbedContainer.tsx b/src/interface/components/TabbedContainer.tsx index 67dd567b..3f2e3119 100644 --- a/src/interface/components/TabbedContainer.tsx +++ b/src/interface/components/TabbedContainer.tsx @@ -85,7 +85,7 @@ const TabbedContainer: React.FC = ({ tabs }) => { className='flex' > {tabs.map((tab, index) => ( -
{tab.content}
diff --git a/src/interface/hooks/settingsState.ts b/src/interface/hooks/settingsState.ts index 3f2024c2..4919c1df 100644 --- a/src/interface/hooks/settingsState.ts +++ b/src/interface/hooks/settingsState.ts @@ -27,11 +27,11 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) => selectedTheme: result.selectedTheme, timeFormat: result.timeFormat, animations: result.animations, - defaultPage: result.defaultPage + defaultPage: result.defaultPage, + devMode: result.devMode || false }); }); }); - const keyToStateMap = useMemo(() => ({ "notificationcollector": "notificationCollector", "lessonalert": "lessonAlerts", @@ -45,12 +45,12 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) => "selectedTheme": "selectedTheme", "timeFormat": "timeFormat", "animations": "animations", - "defaultPage": "defaultPage" + "defaultPage": "defaultPage", + "devMode": "devMode" }), []); const storageChangeListener = (changes: browser.Storage.StorageChange) => { for (const [key, { newValue }] of Object.entries(changes)) { - console.log(key, newValue) if (key === "DarkMode") { if (key === "DarkMode" && newValue) { document.body.classList.add('dark'); diff --git a/src/interface/pages/SettingsPage/Settings.tsx b/src/interface/pages/SettingsPage/Settings.tsx index 9f3ceccb..c4c8b198 100644 --- a/src/interface/pages/SettingsPage/Settings.tsx +++ b/src/interface/pages/SettingsPage/Settings.tsx @@ -1,67 +1,75 @@ import Switch from '../../components/Switch'; import Slider from '../../components/Slider'; import PickerSwatch from '../../components/PickerSwatch'; +import Select from '../../components/Select'; import { SettingsList } from '../../types/SettingsProps'; import { useSettingsContext } from '../../SettingsContext'; -import browser from 'webextension-polyfill' -import { memo, useState } from 'react'; -import { toast } from 'react-toastify'; -import Select from '../../components/Select'; +import browser from 'webextension-polyfill'; +import { memo, useCallback } from 'react'; const Settings: React.FC = () => { const { settingsState, setSettingsState } = useSettingsContext(); - const [inputSequence, setInputSequence] = useState(''); - const [devMode, setDevMode] = useState(false); - - const handleSequenceClick = () => { - setInputSequence(''); // Reset sequence on logo click - document.addEventListener('keydown', handleKeyDown); - }; - const handleKeyDown = (event: KeyboardEvent) => { - setInputSequence((prevSequence) => { - const newSequence = prevSequence + event.key.toLowerCase(); - if (newSequence.includes('dev')) { + const handleDevModeToggle = useCallback(() => { + const secretSequence = 'dev'; + let typedSequence = ''; + let timeoutId: NodeJS.Timeout; + + const handleKeyDown = (event: KeyboardEvent) => { + typedSequence += event.key.toLowerCase(); + + if (typedSequence.includes(secretSequence)) { document.removeEventListener('keydown', handleKeyDown); - toast.success('Dev mode enabled!'); - setInputSequence(''); - setDevMode(true); + clearTimeout(timeoutId); + + setSettingsState(prevState => ({ + ...prevState, + devMode: !prevState.devMode + })); + + alert(`Dev mode is now ${!settingsState.devMode ? 'enabled' : 'disabled'}`); } - return newSequence; - }); - }; - const switchChange = (key: string, value: boolean | string) => { - setSettingsState({ - ...settingsState, - [key]: value, - }); - }; + // Clear the sequence after 2 seconds of inactivity + clearTimeout(timeoutId); + timeoutId = setTimeout(() => { + typedSequence = ''; + }, 2000); + }; - const sliderChange = (key: string, value: number) => { - setSettingsState({ - ...settingsState, + document.addEventListener('keydown', handleKeyDown); + + // Cleanup function to remove the event listener + return () => { + document.removeEventListener('keydown', handleKeyDown); + clearTimeout(timeoutId); + }; + }, [setSettingsState, settingsState.devMode]); + + const handleSettingChange = useCallback((key: string, value: boolean | string | number) => { + setSettingsState(prevState => ({ + ...prevState, [key]: value, - }); - }; + })); + }, [setSettingsState]); const settings: SettingsList[] = [ { title: "Transparency Effects", description: "Enables transparency effects on certain elements such as blur. (May impact battery life)", - modifyElement: switchChange('transparencyEffects', isOn)} /> + modifyElement: handleSettingChange('transparencyEffects', isOn)} /> }, { title: "Animated Background", description: "Adds an animated background to BetterSEQTA. (May impact battery life)", - modifyElement: switchChange('animatedBackground', isOn)} /> + modifyElement: handleSettingChange('animatedBackground', isOn)} /> }, { title: "Animated Background Speed", description: "Controls the speed of the animated background.", - modifyElement: sliderChange('animatedBackgroundSpeed', value)} /> + modifyElement: handleSettingChange('animatedBackgroundSpeed', value)} /> }, { title: "Custom Theme Colour", @@ -76,27 +84,27 @@ const Settings: React.FC = () => { { title: "Animations", description: "Enables animations on certain pages.", - modifyElement: switchChange('animations', isOn)} /> + modifyElement: handleSettingChange('animations', isOn)} /> }, { title: "Notification Collector", description: "Uncaps the 9+ limit for notifications, showing the real number.", - modifyElement: switchChange('notificationCollector', isOn)} /> + modifyElement: handleSettingChange('notificationCollector', isOn)} /> }, { title: "Lesson Alerts", description: "Sends a native browser notification ~5 minutes prior to lessons.", - modifyElement: switchChange('lessonAlerts', isOn)} /> + modifyElement: handleSettingChange('lessonAlerts', isOn)} /> }, { title: "12 Hour Time", description: "Prefer 12 hour time format for SEQTA", - modifyElement: switchChange('timeFormat', isOn ? "12" : "24")} /> + modifyElement: handleSettingChange('timeFormat', isOn ? "12" : "24")} /> }, { title: "Default Page", description: "The page to load when SEQTA Learn is opened.", - modifyElement: handleSettingChange('defaultPage', value)} options={[ { value: 'home', label: 'Home' }, { value: 'dashboard', label: 'Dashboard' }, { value: 'timetable', label: 'Timetable' }, @@ -109,7 +117,7 @@ const Settings: React.FC = () => { { title: "BetterSEQTA+", description: "Enables BetterSEQTA+ features", - modifyElement: switchChange('betterSEQTAPlus', isOn)} /> + modifyElement: handleSettingChange('betterSEQTAPlus', isOn)} /> } ]; @@ -118,7 +126,7 @@ const Settings: React.FC = () => { {settings.map((setting, index) => (
-

{setting.title}

+

{setting.title}

{setting.description}

@@ -126,8 +134,27 @@ const Settings: React.FC = () => {
))} + + {settingsState.devMode && ( + <> +
+
+

Dev Mode

+

Enables dev mode

+
+ handleSettingChange('devMode', isOn)} /> +
+
+
+

Sensitive Hider

+

Replace sensitive content with mock data

+
+ +
+ + )} ); }; -export default memo(Settings); +export default memo(Settings); \ No newline at end of file diff --git a/src/interface/types/AppProps.ts b/src/interface/types/AppProps.ts index 60da8baf..fad51e0c 100644 --- a/src/interface/types/AppProps.ts +++ b/src/interface/types/AppProps.ts @@ -12,6 +12,7 @@ export interface SettingsState { timeFormat?: string; animations: boolean; defaultPage: string; + devMode: boolean; } interface Shortcut { diff --git a/src/types/storage.ts b/src/types/storage.ts index 84581c35..ca8039fe 100644 --- a/src/types/storage.ts +++ b/src/types/storage.ts @@ -36,6 +36,7 @@ export interface SettingsState { timeFormat?: string; animations: boolean; defaultPage: string; + devMode?: boolean; } interface ToggleItem {