Fix: logout bug and removed current_user writable

coding-standards.md

@@ -9,8 +9,8 @@ Bad: user_id, user-id
 
 ### Writables and HTML components
 
-Good: current_user
-Bad: currentUser, current-user
+Good: user_rule
+Bad: userRole, user-role
 
 ### Query Params
 

src/app.d.ts

@@ -9,7 +9,6 @@ declare namespace App {
 			userId?: string
 			user?: any
 		}
-		isBanned?: boolean
 	}
 	// interface PageData {}
 	// interface Error {}

src/hooks.server.ts

@@ -9,15 +9,15 @@ import {
 } from '$lib/stores/remoteConfigStore'
 import { Authenticate } from '$lib/authentication/authentication'
 import { get } from '$lib/api'
-import { current_user, user_role } from '$lib/stores/authStore'
+import { user_role } from '$lib/stores/authStore'
 
 export const handle: Handle = async ({ event, resolve }) => {
 	const pathname = event.url.pathname
+
 	const userId = event.url.searchParams.get('userId') || event.cookies.get('userId') || ''
 	let token = event.url.searchParams.get('token') || event.cookies.get('token') || ''
 
-	let user: any = event.locals.user?.user || '',
-		isBanned = false
+	let user: any = event.locals.user?.user || ''
 	const role = getWritableVal(user_role)
 	let maintenance_mode
 	const remoteConfigs = await get('remote-configs', { userId, token })
@@ -45,7 +45,6 @@ export const handle: Handle = async ({ event, resolve }) => {
 					token = response.freshJwt
 				}
 				user = response.user
-				current_user.set(user)
 			}
 		}
 
@@ -85,19 +84,18 @@ export const handle: Handle = async ({ event, resolve }) => {
 				user
 			}
 		}
+	} else {
+		return await resolve(event)
 	}
 
 	if (user && user.isBanned) {
-		isBanned = true
-		const cookieItem = ['token', 'userId']
+		const cookieItem = ['token', 'userId', 'user']
 		cookieItem.forEach((item) => {
 			event.cookies.set(item, '', {
 				path: '/',
 				expires: new Date(0)
 			})
 		})
-		user_role.set('user')
-		event.locals['isBanned'] = isBanned
 	}
 
 	if (

src/lib/components/Browse/SearchBar.svelte

@@ -3,8 +3,8 @@
 	import IconCross from '$lib/assets/icons/IconCross.svelte'
 	import IconSearch from '$lib/assets/icons/IconSearch.svelte'
 	import DrawerCreateChannel from './DrawerCreateChannel.svelte'
-	import { current_user } from '$lib/stores/authStore'
 	import { is_login_modal_open } from '$lib/stores/helperStore'
+	import { page } from '$app/stores'
 
 	export let searchPage = false
 	export let searchQuery: string | null = ''
@@ -36,7 +36,7 @@
 				for="create-channel-drawer"
 				class="btn w-[21rem] btn-primary gap-2 drawer-button"
 				on:click={() => {
-					if ($current_user) {
+					if ($page.data?.user) {
 						showDrawer = true
 					} else {
 						$is_login_modal_open = true

src/lib/components/Channel/Chat/CollapseViewChannel.svelte

@@ -3,7 +3,7 @@
 	import IconChatDownChevron from '$lib/assets/icons/chat/IconChatDownChevron.svelte'
 	import { techList } from '$lib/stores/channelStore'
 	import { onMount } from 'svelte'
-	import { current_user } from '$lib/stores/authStore'
+	import { page } from '$app/stores'
 
 	export let channel: any
 
@@ -12,7 +12,7 @@
 
 	onMount(async () => {
 		host = await get(`users/search/id?userId=${channel.user}`)
-		isHost = channel.user !== $current_user?._id
+		isHost = channel.user !== $page.data.user.user?._id
 	})
 
 	const copyToClipboard = async (text: string) => {

src/lib/components/MainDrawer/DrawerMain.svelte

@@ -18,7 +18,9 @@
 	import IconDrawerAdmin from '$lib/assets/icons/drawer/IconDrawerAdmin.svelte'
 	import { goto } from '$app/navigation'
 	import { env } from '$env/dynamic/public'
-	import { current_user, user_role } from '$lib/stores/authStore'
+	import { page } from '$app/stores'
+	import { user_role } from '$lib/stores/authStore'
+
 	import {
 		is_maintenance_mode_enabled
 		// is_feature_mint_page_enabled,
@@ -34,17 +36,12 @@
 
 	export var nav_drawer: HTMLInputElement
 
-	function logout() {
-		setTimeout(() => {
-			$current_user = null
-		}, 500)
-		goto('/logout')
-	}
+	$: currentUser = $page.data?.user?.user
 
-	let exp = 512 //Math.floor(Math.random() * (10000 - 0 + 1) + 0) //$current_user.exp
+	let exp = 512 //Math.floor(Math.random() * (10000 - 0 + 1) + 0) //currentUser.exp
 	let levelAndBarValue = levelAndBarValueFromExp(exp)
-	let progressBarLevel = levelAndBarValue.level //levelFromExp(exp) //$current_user.exp
-	let progressBarValue = levelAndBarValue.barValue //barValueFromExp(exp) //$current_user.exp
+	let progressBarLevel = levelAndBarValue.level //levelFromExp(exp) //currentUser.exp
+	let progressBarValue = levelAndBarValue.barValue //barValueFromExp(exp) //currentUser.exp
 	let progressBarColor = colorFromLevel(progressBarLevel)
 </script>
 
@@ -61,25 +58,25 @@
 				</li>
 			</ul>
 		</div>
-		{#if $current_user}
+		{#if currentUser}
 			<li>
 				<a href="/profile/me" class="hero rounded-md cursor-pointer">
 					<div>
 						<div class="hero-content">
 							<div class="max-w-md">
-								<div class="avatar online">
+								<div class="avatar {currentUser.isOnline ? 'online' : 'offline'}">
 									<div
 										class="w-24 mask mask-squircle ring ring-primary ring-offset-base-100 ring-offset-2">
-										<img src={$current_user.avatar} alt="" />
+										<img src={currentUser.avatar} alt="" />
 									</div>
 								</div>
 							</div>
 							<div class="grid grid-cols-3 gap-1">
-								<div class="col-span-3 tooltip flex" data-tip={$current_user.displayName}>
-									<p class="truncate">{$current_user.displayName}</p>
+								<div class="col-span-3 tooltip flex" data-tip={currentUser.displayName}>
+									<p class="truncate">{currentUser.displayName}</p>
 								</div>
-								<div class="col-span-3 tooltip flex" data-tip="@{$current_user.username}">
-									<p class=" text-pink-500 truncate">@{$current_user.username}</p>
+								<div class="col-span-3 tooltip flex" data-tip="@{currentUser.username}">
+									<p class=" text-pink-500 truncate">@{currentUser.username}</p>
 								</div>
 								<IconDrawerStreak />
 								<p class="col-span-2 tooltip text-start" data-tip="62 day streak">62 d</p>
@@ -100,7 +97,7 @@
 		{/if}
 		<!-- Sidebar content here -->
 
-		{#if $current_user && $user_role === 'admin'}
+		{#if currentUser && $user_role === 'admin'}
 			<li>
 				<a href="/admin">
 					<IconDrawerAdmin />
@@ -114,7 +111,7 @@
 				Browse
 			</a>
 		</li>
-		<!-- {#if $current_user}
+		<!-- {#if currentUser}
 			<li>
 				<a href="">
 					<IconDrawerMessages />
@@ -123,7 +120,7 @@
 				</a>
 			</li>
 		{/if} -->
-		<!-- {#if $current_user && $isFeatureVideoResponsesEnabled}
+		<!-- {#if currentUser && $isFeatureVideoResponsesEnabled}
 			<li>
 				<a href="/videos">
 					<IconDrawerVideos />
@@ -136,7 +133,7 @@
 					Creator Space</a>
 			</li>
 		{/if}
-		{#if $current_user && $isFeatureMintPageEnabled}
+		{#if currentUser && $isFeatureMintPageEnabled}
 			<li>
 				<a
 					href="https://mint.codecrow.io"
@@ -148,7 +145,7 @@
 				</a>
 			</li>
 		{/if}
-		{#if $current_user && $isFeaturePremiumPageEnabled}
+		{#if currentUser && $isFeaturePremiumPageEnabled}
 			<li>
 				<a href="/premium" class="text-pink-500">
 					<IconDrawerPremium />
@@ -173,19 +170,21 @@
 				</ul>
 			</div>
 		</li>
-		{#if $current_user}
+		{#if currentUser}
 			<li>
 				<a href="/settings">
 					<IconDrawerSettings />
 					Settings</a>
 			</li>
 		{/if}
-		{#if $current_user}
-			<li>
-				<button on:click={logout}>
-					<IconDrawerLogOut />
-					Log Out</button>
-			</li>
+		{#if currentUser}
+			<form action="/logout" method="POST">
+				<li>
+					<button type="submit">
+						<IconDrawerLogOut />
+						Log out</button>
+				</li>
+			</form>
 		{:else}
 			<li>
 				<button

src/lib/components/MainDrawer/DrawerSmall.svelte

@@ -12,8 +12,8 @@
 	import IconDrawerLogOut from '$lib/assets/icons/drawer/IconDrawerLogOut.svelte'
 	import IconDrawerAdmin from '$lib/assets/icons/drawer/IconDrawerAdmin.svelte'
 	import { goto } from '$app/navigation'
-	import { env } from '$env/dynamic/public'
-	import { current_user, user_role } from '$lib/stores/authStore'
+	import { page } from '$app/stores'
+	import { user_role } from '$lib/stores/authStore'
 	import {
 		is_maintenance_mode_enabled,
 		is_feature_mint_page_enabled,
@@ -29,17 +29,12 @@
 
 	export let nav_drawer: HTMLInputElement
 
-	function logout() {
-		setTimeout(() => {
-			$current_user = null
-		}, 500)
-		goto('/logout')
-	}
+	$: currentUser = $page.data?.user?.user
 
-	let exp = 512 //Math.floor(Math.random() * (10000 - 0 + 1) + 0) //$current_user.exp
+	let exp = 512 //Math.floor(Math.random() * (10000 - 0 + 1) + 0) //currentUser.exp
 	let levelAndBarValue = levelAndBarValueFromExp(exp)
-	let progressBarLevel = levelAndBarValue.level //levelFromExp(exp) //$current_user.exp
-	let progressBarValue = levelAndBarValue.barValue //barValueFromExp(exp) //$current_user.exp
+	let progressBarLevel = levelAndBarValue.level //levelFromExp(exp) //currentUser.exp
+	let progressBarValue = levelAndBarValue.barValue //barValueFromExp(exp) //currentUser.exp
 	let progressBarColor = colorFromLevel(progressBarLevel)
 </script>
 
@@ -56,22 +51,22 @@
 				</li>
 			</ul>
 		</div>
-		{#if $current_user}
+		{#if currentUser}
 			<li class="w-full">
 				<a href="/profile/me" class="rounded-md justify-center">
 					<div>
 						<div>
-							<div class="avatar online">
+							<div class="avatar {currentUser.isOnline ? 'online' : 'offline'}">
 								<div
 									class="w-12 mask mask-squircle ring ring-primary ring-offset-base-100 ring-offset-2">
-									<img src={$current_user.avatar} alt="" />
+									<img src={currentUser.avatar} alt="" />
 								</div>
 							</div>
 						</div>
 						<!-- <div class="grid grid-cols-1 gap-1">
-							<p>{$current_user.displayName || 'Gagan Suie'}</p>
+							<p>{currentUser.displayName || 'Gagan Suie'}</p>
 							<p class="text-pink-500 w-12 truncate">
-								@{$current_user.username}
+								@{currentUser.username}
 							</p>
 						</div> -->
 						<div class="tooltip" data-tip="level {progressBarLevel}">
@@ -88,7 +83,7 @@
 
 		<!-- Sidebar content here -->
 
-		{#if $current_user && $user_role === 'admin'}
+		{#if currentUser && $user_role === 'admin'}
 			<li>
 				<a href="/admin">
 					<IconDrawerAdmin />
@@ -100,15 +95,15 @@
 				<IconDrawerHome />
 			</a>
 		</li>
-		<!-- {#if $current_user}
+		<!-- {#if currentUser}
 			<li>
 				<a href="">
 					<IconDrawerMessages />
 					<IconDrawerChevron />
 				</a>
 			</li>
 		{/if} -->
-		{#if $current_user && $is_feature_video_responses_enabled}
+		{#if currentUser && $is_feature_video_responses_enabled}
 			<li>
 				<a href="/videos">
 					<IconDrawerVideos />
@@ -118,7 +113,7 @@
 				<a href="/creator-space"> <IconDrawerCreatorSpace /></a>
 			</li>
 		{/if}
-		{#if $current_user && $is_feature_mint_page_enabled}
+		{#if currentUser && $is_feature_mint_page_enabled}
 			<li>
 				<a
 					href="https://mint.codecrow.io"
@@ -129,7 +124,7 @@
 				</a>
 			</li>
 		{/if}
-		{#if $current_user && $is_feature_premium_page_enabled}
+		{#if currentUser && $is_feature_premium_page_enabled}
 			<li>
 				<a href="/premium" class="text-pink-500">
 					<IconDrawerPremium />
@@ -150,19 +145,19 @@
 				</ul>
 			</div>
 		</li>
-		{#if $current_user}
+		{#if currentUser}
 			<li>
 				<a href="/settings">
 					<IconDrawerSettings />
 				</a>
 			</li>
 		{/if}
-		{#if $current_user}
-			<li>
-				<button on:click={logout}>
-					<IconDrawerLogOut />
-				</button>
-			</li>
+		{#if currentUser}
+			<form action="/logout" method="POST">
+				<li>
+					<button type="submit"> <IconDrawerLogOut /></button>
+				</li>
+			</form>
 		{:else}
 			<li>
 				<button

src/lib/stores/authStore.ts

@@ -1,6 +1,3 @@
-import { env } from '$env/dynamic/public'
 import { writable, type Writable } from 'svelte/store'
 
-export const current_user: Writable<any> = writable(null)
-
 export const user_role: Writable<any> = writable(null)

src/lib/stores/chatStore.ts

@@ -1,7 +1,5 @@
 import { writable, type Writable } from 'svelte/store'
 import { env } from '$env/dynamic/public'
-import { current_user } from './authStore'
-import { currentChannel } from './channelStore'
 
 let lastMessageSendDate: Date = new Date()
 let skip = 0