Refactor stores

src/lib/components/ConnectionIndicator.svelte

@@ -3,7 +3,6 @@
 	import { Icon } from '@steeze-ui/svelte-icon';
 	import { Wifi } from '@steeze-ui/heroicons';
 
-	import { socket } from '../../store';
 	import { onMount } from 'svelte';
 
 	let connectionState: ConnectionState = 'connecting';

src/lib/components/HolomemGacha.svelte

@@ -3,7 +3,7 @@
 	import { fade } from 'svelte/transition';
 	import { GACHA_STATE, type GachaState, type Holomem } from '../../custom';
 	import { holomemGachaPool } from '../../const';
-	import { nickname } from '../../store';
+	import { nickname } from '$lib/stores/userinfo';
 
 	let gachaState: GachaState = GACHA_STATE.NOT_PLAYED;
 	let result: Holomem;

src/store.ts → src/lib/stores/toasts.ts

@@ -1,11 +1,6 @@
-import type { Channel, Socket } from 'phoenix';
 import { writable } from 'svelte/store';
-import type { Toast } from './custom';
+import type { Toast } from '../../custom';
 
-export const nickname = writable<string>('anonymous');
-export const userToken = writable<string | null>(null);
-export const socket = writable<Socket | null>(null);
-export const notificationsChannel = writable<Channel | null>(null);
 export const toastStore = writable<Toast | null>(null);
 
 /**

src/lib/stores/userinfo.ts

@@ -0,0 +1,7 @@
+import { generateNickname } from 'hololive-nick-gen';
+import { persisted } from 'svelte-persisted-store';
+import { writable } from 'svelte/store';
+
+// export const nickname = writable<string>('anonymous');
+export const nickname = persisted('nickname', generateNickname());
+export const userToken = writable<string | null>(null);

src/routes/+layout.svelte

@@ -1,14 +1,8 @@
 <script lang="ts">
 	import '../app.css';
 
-	import {
-		nickname,
-		userToken,
-		socket,
-		notificationsChannel,
-		toastStore,
-		setToast
-	} from '../store';
+	import { setToast, toastStore } from '$lib/stores/toasts';
+	import { userToken } from '$lib/stores/userinfo';
 
 	import Navigation from '$lib/components/Navigation.svelte';
 	import Toast from '$lib/components/Toast.svelte';
@@ -20,18 +14,11 @@
 	onMount(async () => {
 		// Initialize the stores with the nickname and user token found locally
 		// If first time using the app, generate a new nickname
-		$nickname = localStorage.getItem('nickname') || generateNickname();
 		$userToken = localStorage.getItem('userToken');
 
-		nickname.subscribe((value) => {
-			localStorage.setItem('nickname', value);
-		});
-
 		// Bind stuff to window for debugging
 		if (dev || localStorage.getItem('debug') === 'true') {
 			Object.assign(window, {
-				socket: $socket,
-				notificationsChannel: $notificationsChannel,
 				setToast: setToast
 			});
 		}

src/routes/+layout.ts

@@ -16,6 +16,8 @@ async function startupTasks() {
 	await updateExpectedStamps();
 }
 
+// Fetched expected stamp data from supabase and creates object in store
+// With hash as key and rest of stamp data as value
 async function updateExpectedStamps() {
 	console.log('Fetching stamp data...');
 	const { data } = await supabase.from('stamps').select('*');

src/routes/profile/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 	import { onMount } from 'svelte';
-	import { setToast, nickname } from '../../store';
+	import { setToast } from '$lib/stores/toasts';
+	import { nickname } from '$lib/stores/userinfo';
 	import { TOAST_TYPE } from '../../custom';
 
 	let userToken = '';
@@ -26,7 +27,7 @@
 				return;
 			}
 
-			$nickname = newNicknameValue;
+			nickname.set(newNicknameValue);
 
 			if (userToken !== '' && userToken !== null) {
 				setToast({
@@ -60,9 +61,9 @@
 		bind:value={$nickname}
 		class="input-bordered input-secondary input w-full max-w-xs"
 	/>
-	<button class="btn-secondary btn rounded-full" on:click={handleSetNickname}>
+	<!-- <button class="btn-secondary btn rounded-full" on:click={handleSetNickname}>
 		Set nickname
-	</button>
+	</button> -->
 
-	<p>Your nickname is used to identify you in the leaderboards and realtime events.</p>
+	<!-- <p>Your nickname is used to identify you in the leaderboards and realtime events.</p> -->
 </div>

src/routes/scanner/+page.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
 
-	import { setToast } from '../../store';
-
 	import QrScanner from 'qr-scanner';
 
 	import { sha256 } from '../../crypto';
@@ -13,6 +11,7 @@
 	import { fade } from 'svelte/transition';
 	import { get } from 'svelte/store';
 	import { expectedStamps } from '$lib/stores/stamps';
+	import { setToast } from '$lib/stores/toasts';
 
 	let state: ScannerState = 'STOPPED';