chore: refactored view showing stuff

Enubia · May 10, 2023 · 2fe4112 · 2fe4112
1 parent 704c12b
commit 2fe4112
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 143 deletions.
diff --git a/electron/main/background.ts b/electron/main/background.ts
@@ -60,7 +60,8 @@ app.on('ready', () => {
 			overlay = new Overlay(store).buildWindow(indexHtml);
 			new TrayIcon(store, overlay).buildTray(trayIconPath);
 			ipcEvents = new IpcEvents(store);
-			ipcEvents.registerEvents(overlay, indexHtml);
+			ipcEvents.registerWindow(overlay);
+			ipcEvents.registerEvents(indexHtml);
 
 			// only call auto-updater for prod environment
 			if (!process.env.VITE_DEV_SERVER_URL) {
@@ -86,7 +87,7 @@ app.on('activate', () => {
 			overlay = new Overlay(store).buildWindow(indexHtml);
 			// register the events and overlay again since they still hold a reference to a null object in case the overlay was recreated
 			ipcEvents.registerWindow(overlay);
-			ipcEvents.registerEvents(overlay, indexHtml);
+			ipcEvents.registerEvents(indexHtml);
 			// wait a second for the window to be created again so that it can handle events
 			setTimeout(() => {
 				overlay?.webContents.send(IpcEvent.Recreated);

diff --git a/electron/main/ipcEvents.ts b/electron/main/ipcEvents.ts
@@ -12,9 +12,7 @@ export default class IpcEvents {
 
 	constructor(private store: ElectronStore<AppStore>) {}
 
-	registerEvents(overlay: BrowserWindow | null, indexHtml: string) {
-		this.registerWindow(overlay);
-
+	registerEvents(indexHtml: string) {
 		this.rerender();
 		this.close();
 		this.setClickThrough();
@@ -28,7 +26,7 @@ export default class IpcEvents {
 	}
 
 	private rerender() {
-		ipcMain.on(IpcEvent.Rerender, (_event: Electron.IpcMainEvent, args: any) => {
+		ipcMain.on(IpcEvent.Rerender, (_event: Electron.IpcMainEvent, args: 'child' | 'parent') => {
 			if (args === 'child' && this.settings) {
 				this.settings.webContents.send(IpcEvent.Rerender);
 			}

diff --git a/shared/types/store.ts b/shared/types/store.ts
@@ -34,7 +34,7 @@ export type General = {
 };
 
 export type Updater = {
-	channel: 'latest' | 'beta' | 'alpa';
+	channel: 'latest' | 'beta';
 };
 
 export type AppStore = {

diff --git a/src/App.vue b/src/App.vue
@@ -8,11 +8,11 @@
 			:is-start-page="showStart"
 			:channel="chatOptions.channel"
 			:store="store"
-			@show-start="setShowStart"
-			@show-chat="setShowChat"
+			@show-start="showView('start')"
+			@show-chat="showView('chat')"
 			@vanish="ipcRenderer.send(IpcEvent.Vanish)"
 		/>
-		<MenuButtons :store="store" :is-chat="showChat" :is-external="showExternalSource" @back="setShowStart" />
+		<MenuButtons :store="store" :is-chat="showChat" :is-external="showExternalSource" @back="showView('start')" />
 	</header>
 	<main class="container-fluid">
 		<Start v-if="showStart" :store="store" @channel="enableChat" @source="enableExternalSource" />
@@ -32,7 +32,6 @@ import { AppStore } from '../shared/types';
 
 import MenuButtons from './components/header/Buttons.vue';
 import DropDownMenu from './components/header/Dropdown.vue';
-import Show from './helper/show';
 import Chat from './pages/Chat.vue';
 import ExternalSource from './pages/ExternalSource.vue';
 import Settings from './pages/Settings.vue';
@@ -68,26 +67,47 @@ const showApp = () => {
 	showMenuBar.value = !store.get('savedWindowState').isTransparent && !settings.value.isOpen;
 };
 
-const setShowStart = () => {
-	Show.Start({ showChat, showStart, showSettings, showExternalSource });
-};
-
-const setShowChat = () => {
-	Show.Chat({ showChat, showStart, showSettings, showExternalSource });
-};
-
-const setShowExternalSource = () => {
-	Show.ExternalSource({ showChat, showStart, showSettings, showExternalSource });
+const showView = <T = 'chat' | 'start' | 'settings' | 'externalSource'>(view: T) => {
+	switch (view) {
+		case 'chat':
+			showChat.value = true;
+			showStart.value = false;
+			showSettings.value = false;
+			showExternalSource.value = false;
+			break;
+
+		case 'start':
+			showChat.value = false;
+			showStart.value = true;
+			showSettings.value = false;
+			showExternalSource.value = false;
+			break;
+
+		case 'settings':
+			showChat.value = false;
+			showStart.value = false;
+			showSettings.value = true;
+			showExternalSource.value = false;
+			checkingVersion.value = false;
+			break;
+
+		case 'externalSource':
+			showChat.value = false;
+			showStart.value = false;
+			showSettings.value = false;
+			showExternalSource.value = true;
+			break;
+	}
 };
 
 const enableChat = (channel: string) => {
 	store.set('chatOptions.channel', channel);
-	setShowChat();
+	showView('chat');
 };
 
 const enableExternalSource = (source: string) => {
 	externalSource.value = source;
-	setShowExternalSource();
+	showView('externalSource');
 };
 
 const vanish = () => {
@@ -98,17 +118,17 @@ const vanish = () => {
 		document.querySelector('#app')?.setAttribute('vanished', 'true');
 
 		if (showExternalSource.value) {
-			setShowExternalSource();
+			showView('externalSource');
 		} else if (storeChatOptions.channel !== '') {
-			setShowChat();
+			showView('chat');
 		}
 
 		showMenuBar.value = false;
 	}
 };
 
 if (settings.value.isOpen) {
-	Show.Settings({ showChat, showStart, showSettings, checkingVersion, showExternalSource });
+	showView('settings');
 }
 
 ipcRenderer.on(IpcEvent.Rerender, () => settingsKey.value++);

diff --git a/src/helper/show.ts b/src/helper/show.ts
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
@@ -5,18 +5,20 @@
 				<nav>
 					<ul>
 						<li>
-							<a id="general" class="contrast" @click="setShowGeneral">{{ t('settings.aside.1') }}</a>
+							<a id="general" class="contrast" @click="showView('general')">
+								{{ t('settings.aside.1') }}
+							</a>
 						</li>
 						<li>
-							<a id="options" active class="contrast" @click="setShowOptions">
+							<a id="options" active class="contrast" @click="showView('options')">
 								{{ t('settings.aside.2') }}
 							</a>
 						</li>
 						<li>
-							<a id="css" class="contrast" @click="setShowCSS">{{ t('settings.aside.3') }}</a>
+							<a id="css" class="contrast" @click="showView('css')">{{ t('settings.aside.3') }}</a>
 						</li>
 						<li>
-							<a id="js" class="contrast" @click="setShowJS">{{ t('settings.aside.4') }}</a>
+							<a id="js" class="contrast" @click="showView('js')">{{ t('settings.aside.4') }}</a>
 						</li>
 					</ul>
 				</nav>
@@ -69,73 +71,76 @@ const showCSSEditor = ref(false);
 const showJSEditor = ref(false);
 const showUpdates = ref(false);
 
-const setShowGeneral = () => {
-	document.querySelector('#options')?.removeAttribute('active');
-	document.querySelector('#css')?.removeAttribute('active');
-	document.querySelector('#js')?.removeAttribute('active');
-	document.querySelector('#updates')?.removeAttribute('active');
-	document.querySelector('#general')?.setAttribute('active', 'true');
-
-	showJSEditor.value = false;
-	showCSSEditor.value = false;
-	showUpdates.value = false;
-	showOptions.value = false;
-	showGeneral.value = true;
+const showView = <T = 'general' | 'options' | 'css' | 'js' | 'updates'>(view: T) => {
+	switch (view) {
+		case 'general':
+			document.querySelector('#options')?.removeAttribute('active');
+			document.querySelector('#css')?.removeAttribute('active');
+			document.querySelector('#js')?.removeAttribute('active');
+			document.querySelector('#updates')?.removeAttribute('active');
+			document.querySelector('#general')?.setAttribute('active', 'true');
+
+			showJSEditor.value = false;
+			showCSSEditor.value = false;
+			showUpdates.value = false;
+			showOptions.value = false;
+			showGeneral.value = true;
+			break;
+
+		case 'options':
+			document.querySelector('#general')?.removeAttribute('active');
+			document.querySelector('#css')?.removeAttribute('active');
+			document.querySelector('#js')?.removeAttribute('active');
+			document.querySelector('#updates')?.removeAttribute('active');
+			document.querySelector('#options')?.setAttribute('active', 'true');
+
+			showGeneral.value = false;
+			showJSEditor.value = false;
+			showCSSEditor.value = false;
+			showUpdates.value = false;
+			showOptions.value = true;
+			break;
+
+		case 'css':
+			document.querySelector('#general')?.removeAttribute('active');
+			document.querySelector('#options')?.removeAttribute('active');
+			document.querySelector('#js')?.removeAttribute('active');
+			document.querySelector('#updates')?.removeAttribute('active');
+			document.querySelector('#css')?.setAttribute('active', 'true');
+
+			showGeneral.value = false;
+			showJSEditor.value = false;
+			showOptions.value = false;
+			showUpdates.value = false;
+			showCSSEditor.value = true;
+			break;
+
+		case 'js':
+			document.querySelector('#general')?.removeAttribute('active');
+			document.querySelector('#options')?.removeAttribute('active');
+			document.querySelector('#css')?.removeAttribute('active');
+			document.querySelector('#updates')?.removeAttribute('active');
+			document.querySelector('#js')?.setAttribute('active', 'true');
+
+			showGeneral.value = false;
+			showOptions.value = false;
+			showCSSEditor.value = false;
+			showUpdates.value = false;
+			showJSEditor.value = true;
+			break;
+
+		case 'updates':
+			// 	document.querySelector('#general')?.removeAttribute('active');
+			// 	document.querySelector('#options')?.removeAttribute('active');
+			// 	document.querySelector('#css')?.removeAttribute('active');
+			// 	document.querySelector('#js')?.removeAttribute('active');
+			// 	document.querySelector('#updates')?.setAttribute('active', 'true');
+			// 	showGeneral.value = false;
+			// 	showJSEditor.value = false;
+			// 	showOptions.value = false;
+			// 	showCSSEditor.value = false;
+			// 	showUpdates.value = true;
+			break;
+	}
 };
-
-const setShowOptions = () => {
-	document.querySelector('#general')?.removeAttribute('active');
-	document.querySelector('#css')?.removeAttribute('active');
-	document.querySelector('#js')?.removeAttribute('active');
-	document.querySelector('#updates')?.removeAttribute('active');
-	document.querySelector('#options')?.setAttribute('active', 'true');
-
-	showGeneral.value = false;
-	showJSEditor.value = false;
-	showCSSEditor.value = false;
-	showUpdates.value = false;
-	showOptions.value = true;
-};
-
-const setShowCSS = () => {
-	document.querySelector('#general')?.removeAttribute('active');
-	document.querySelector('#options')?.removeAttribute('active');
-	document.querySelector('#js')?.removeAttribute('active');
-	document.querySelector('#updates')?.removeAttribute('active');
-	document.querySelector('#css')?.setAttribute('active', 'true');
-
-	showGeneral.value = false;
-	showJSEditor.value = false;
-	showOptions.value = false;
-	showUpdates.value = false;
-	showCSSEditor.value = true;
-};
-
-const setShowJS = () => {
-	document.querySelector('#general')?.removeAttribute('active');
-	document.querySelector('#options')?.removeAttribute('active');
-	document.querySelector('#css')?.removeAttribute('active');
-	document.querySelector('#updates')?.removeAttribute('active');
-	document.querySelector('#js')?.setAttribute('active', 'true');
-
-	showGeneral.value = false;
-	showOptions.value = false;
-	showCSSEditor.value = false;
-	showUpdates.value = false;
-	showJSEditor.value = true;
-};
-
-// const setShowUpdates = () => {
-// 	document.querySelector('#general')?.removeAttribute('active');
-// 	document.querySelector('#options')?.removeAttribute('active');
-// 	document.querySelector('#css')?.removeAttribute('active');
-// 	document.querySelector('#js')?.removeAttribute('active');
-// 	document.querySelector('#updates')?.setAttribute('active', 'true');
-
-// 	showGeneral.value = false;
-// 	showJSEditor.value = false;
-// 	showOptions.value = false;
-// 	showCSSEditor.value = false;
-// 	showUpdates.value = true;
-// };
 </script>