chore: refactor +layout.svelte

.vscode/settings.json

@@ -16,5 +16,9 @@
     "http",
     "net"
   ],
-  "deno.importMap": "./supabase/functions/import_map.json"
+  "deno.importMap": "./supabase/functions/import_map.json",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": true
+  }
 }

apps/dashboard/src/lib/utils/functions/appSetup.ts

@@ -0,0 +1,222 @@
+import { dev } from '$app/environment';
+import { goto } from '$app/navigation';
+import { page } from '$app/stores';
+import { ROLE } from '$lib/utils/constants/roles';
+import { ROUTE } from '$lib/utils/constants/routes';
+import isPublicRoute from '$lib/utils/functions/routes/isPublicRoute';
+import shouldRedirectOnAuth from '$lib/utils/functions/routes/shouldRedirectOnAuth';
+import { supabase } from '$lib/utils/functions/supabase';
+import { setTheme } from '$lib/utils/functions/theme';
+import { handleLocaleChange } from '$lib/utils/functions/translations';
+import { getOrganizations } from '$lib/utils/services/org';
+import { identifyPosthogUser, initPosthog } from '$lib/utils/services/posthog';
+import { initSentry, setSentryUser } from '$lib/utils/services/sentry';
+import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
+import { profile, user } from '$lib/utils/store/user';
+import isEmpty from 'lodash/isEmpty';
+import { get } from 'svelte/store';
+
+export function setupAnalytics() {
+  // Set up sentry
+  initSentry();
+
+  // Set up posthog
+  initPosthog();
+
+  // Disable umami on localhost
+  if (dev) {
+    localStorage.setItem('umami.disabled', '1');
+  }
+}
+
+function setAnalyticsUser() {
+  const profileStore = get(profile);
+
+  if (!profileStore.id) return;
+
+  setSentryUser({
+    id: profileStore.id,
+    username: profileStore.username,
+    email: profileStore.email,
+    fullname: profileStore.fullname
+  });
+
+  identifyPosthogUser(profileStore.id, {
+    email: profileStore.email,
+    name: profileStore.fullname
+  });
+}
+
+export async function getProfile({
+  path,
+  queryParam,
+  isOrgSite,
+  orgSiteName
+}: {
+  path: string;
+  queryParam: string;
+  isOrgSite: boolean;
+  orgSiteName: string;
+}) {
+  const pageStore = get(page);
+  const profileStore = get(profile);
+  const currentOrgStore = get(currentOrg);
+  const currentOrgDomainStore = get(currentOrgDomain);
+
+  const params = new URLSearchParams(window.location.search);
+  // Get user profile
+  const {
+    data: { session }
+  } = await supabase.auth.getSession();
+  const { user: authUser } = session || {};
+  console.log('Get user', authUser);
+
+  if (!authUser && !isPublicRoute(pageStore.url?.pathname)) {
+    return goto('/login?redirect=/' + path + queryParam);
+  }
+
+  // Skip refetching profile, if already in store
+  if (profileStore.id) return;
+
+  // Check if user has profile
+  let {
+    data: profileData,
+    error,
+    status
+  } = await supabase
+    .from('profile')
+    .select(`*`)
+    .eq('id', authUser?.id)
+    .single();
+  console.log('Get profile', profileData);
+
+  if (error && !profileData && status === 406 && authUser) {
+    // User wasn't found, create profile
+    console.log(`User wasn't found, create profile`);
+
+    const [regexUsernameMatch] = [...(authUser.email?.matchAll(/(.*)@/g) || [])];
+
+    const isGoogleAuth = !!authUser.app_metadata?.providers?.includes('google');
+
+    const { data: newProfileData, error } = await supabase
+      .from('profile')
+      .insert({
+        id: authUser.id,
+        username: regexUsernameMatch[1] + `${new Date().getTime()}`,
+        fullname: regexUsernameMatch[1],
+        email: authUser.email,
+        is_email_verified: isGoogleAuth,
+        verified_at: isGoogleAuth ? new Date().toDateString() : undefined
+      })
+      .select();
+
+    // Profile created, go to onboarding or lms
+    if (!error && newProfileData) {
+      user.update((_user) => ({
+        ..._user,
+        fetchingUser: false,
+        isLoggedIn: true,
+        currentSession: authUser
+      }));
+
+      profile.set(newProfileData[0]);
+
+      setAnalyticsUser();
+
+      // Fetch language
+      handleLocaleChange(profileStore.locale);
+
+      if (isOrgSite) {
+        const { data, error } = await supabase
+          .from('organizationmember')
+          .insert({
+            organization_id: currentOrgStore.id,
+            profile_id: profileStore.id,
+            role_id: 3
+          })
+          .select();
+        if (error) {
+          console.error('Error adding user to organisation', error);
+        } else {
+          console.log('Success adding user to organisation', data);
+          const memberId = data?.[0]?.id || '';
+
+          currentOrg.update((_currentOrg) => ({
+            ..._currentOrg,
+            memberId
+          }));
+        }
+
+        if (params.get('redirect')) {
+          goto(params.get('redirect') || '');
+        } else {
+          goto('/lms');
+        }
+        return;
+      }
+
+      // On invite page, don't go to onboarding
+      if (!path.includes('invite')) {
+        goto(ROUTE.ONBOARDING);
+      }
+    }
+
+    user.update((_user) => ({
+      ..._user,
+      fetchingUser: false
+    }));
+  } else if (profileData) {
+    // Profile exists, go to profile page
+    user.update((_user) => ({
+      ..._user,
+      fetchingUser: false,
+      isLoggedIn: true,
+      currentSession: authUser
+    }));
+
+    profile.set(profileData);
+
+    // Set user in sentry
+    setAnalyticsUser();
+
+    // Fetch language
+    handleLocaleChange(profileStore.locale);
+
+    const orgRes = await getOrganizations(profileData.id, isOrgSite, orgSiteName);
+
+    const isStudentAccount = orgRes.currentOrg.role_id == ROLE.STUDENT;
+
+    // student redirect
+    if (isOrgSite) {
+      if (params.has('redirect')) {
+        goto(params.get('redirect') || '');
+      } else if (shouldRedirectOnAuth(path)) {
+        goto('/lms');
+      }
+    } else {
+      if (isStudentAccount) {
+        // Check if the student logged into the dashboard.
+        console.log('Student logged into dashboard');
+        if (dev) {
+          goto('/lms');
+        } else {
+          window.location.replace(`${currentOrgDomainStore}/lms`);
+        }
+      } else if (isEmpty(orgRes.orgs) && !path.includes('invite')) {
+        // Not on invite page or no org, go to onboarding
+        goto(ROUTE.ONBOARDING);
+      } else if (params.has('redirect')) {
+        goto(params.get('redirect') || '');
+      } else if (shouldRedirectOnAuth(path)) {
+        // By default redirect to first organization
+        goto(`/org/${orgRes.currentOrg.siteName}`);
+      }
+    }
+
+    setTheme(orgRes?.currentOrg?.theme);
+  }
+
+  if (!profileData && !isPublicRoute(pageStore.url?.pathname)) {
+    goto('/login?redirect=/' + path);
+  }
+}

apps/dashboard/src/routes/+layout.svelte

@@ -1,44 +1,35 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { browser } from '$app/environment';
-  import { MetaTags } from 'svelte-meta-tags';
-  import { goto } from '$app/navigation';
-  import { browser, dev } from '$app/environment';
   import { page } from '$app/stores';
-  import isEmpty from 'lodash/isEmpty';
+  import Apps from '$lib/components/Apps/index.svelte';
-  import merge from 'lodash/merge';
+  import { course } from '$lib/components/Course/store';
-  import { Theme } from 'carbon-components-svelte';
-  import type { CarbonTheme } from 'carbon-components-svelte/types/Theme/Theme.svelte';
-  import LandingNavigation from '$lib/components/Navigation/index.svelte';
-  import PageLoadProgressBar from '$lib/components/Progress/PageLoadProgressBar.svelte';
   import OrgNavigation from '$lib/components/Navigation/app.svelte';
+  import LandingNavigation from '$lib/components/Navigation/index.svelte';
   import LMSNavigation from '$lib/components/Navigation/lms.svelte';
   import OrgLandingPage from '$lib/components/Org/LandingPage/index.svelte';
-  import Snackbar from '$lib/components/Snackbar/index.svelte';
-  import Restricted from '$lib/components/Page/Restricted.svelte';
-  import Apps from '$lib/components/Apps/index.svelte';
   import PlayQuiz from '$lib/components/Org/Quiz/Play/index.svelte';
-  import { course } from '$lib/components/Course/store';
+  import Restricted from '$lib/components/Page/Restricted.svelte';
-  import { isCoursesPage, isOrgPage, isLMSPage } from '$lib/utils/functions/app';
+  import PageLoadProgressBar from '$lib/components/Progress/PageLoadProgressBar.svelte';
-  import showAppsSideBar from '$lib/utils/functions/showAppsSideBar';
+  import Snackbar from '$lib/components/Snackbar/index.svelte';
-  import isPublicRoute from '$lib/utils/functions/routes/isPublicRoute';
-  import { user, profile } from '$lib/utils/store/user';
-  import { getSupabase } from '$lib/utils/functions/supabase';
-  import { isMobile } from '$lib/utils/store/useMobile';
-  import { ROUTE } from '$lib/utils/constants/routes';
-  import { getOrganizations } from '$lib/utils/services/org';
-  import { toggleBodyByMode } from '$lib/utils/functions/app';
-  import { globalStore } from '$lib/utils/store/app';
-  import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
-  import { setTheme } from '$lib/utils/functions/theme';
-  import hideNavByRoute from '$lib/utils/functions/routes/hideNavByRoute';
-  import shouldRedirectOnAuth from '$lib/utils/functions/routes/shouldRedirectOnAuth';
-  import { identifyPosthogUser, initPosthog, initOrgAnalytics } from '$lib/utils/services/posthog';
-  import { initSentry, setSentryUser } from '$lib/utils/services/sentry';
   import UpgradeModal from '$lib/components/Upgrade/Modal.svelte';
-  import { handleLocaleChange } from '$lib/utils/functions/translations';
+  import { isCoursesPage, isLMSPage, isOrgPage, toggleBodyByMode } from '$lib/utils/functions/app';
+  import { getProfile, setupAnalytics } from '$lib/utils/functions/appSetup';
+  import hideNavByRoute from '$lib/utils/functions/routes/hideNavByRoute';
+  import showAppsSideBar from '$lib/utils/functions/showAppsSideBar';
+  import { getSupabase } from '$lib/utils/functions/supabase';
+  import { setTheme } from '$lib/utils/functions/theme';
+  import { initOrgAnalytics } from '$lib/utils/services/posthog';
+  import { globalStore } from '$lib/utils/store/app';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { isMobile } from '$lib/utils/store/useMobile';
+  import { user } from '$lib/utils/store/user';
+  import { Theme } from 'carbon-components-svelte';
+  import type { CarbonTheme } from 'carbon-components-svelte/types/Theme/Theme.svelte';
+  import merge from 'lodash/merge';
+  import { onMount } from 'svelte';
+  import { MetaTags } from 'svelte-meta-tags';
 
   import '../app.postcss';
-  import { ROLE } from '$lib/utils/constants/roles';
 
   export let data;
 
@@ -47,173 +38,6 @@
   let queryParam = $page.url?.search;
   let carbonTheme: CarbonTheme = 'white';
 
-  function setupAnalytics() {
-    // Set up sentry
-    initSentry();
-
-    // Set up posthog
-    initPosthog();
-
-    // Disable umami on localhost
-    if (dev) {
-      localStorage.setItem('umami.disabled', '1');
-    }
-  }
-
-  function setAnalyticsUser() {
-    if ($profile.id) {
-      setSentryUser({
-        id: $profile.id,
-        username: $profile.username,
-        email: $profile.email,
-        fullname: $profile.fullname
-      });
-
-      identifyPosthogUser($profile.id, { email: $profile.email, name: $profile.fullname });
-    }
-  }
-
-  async function getProfile() {
-    const params = new URLSearchParams(window.location.search);
-    // Get user profile
-    const {
-      data: { session }
-    } = await supabase.auth.getSession();
-    const { user: authUser } = session || {};
-    console.log('Get user', authUser);
-
-    if (!authUser && !isPublicRoute($page.url?.pathname)) {
-      return goto('/login?redirect=/' + path + queryParam);
-    }
-
-    // Skip refetching profile, if already in store
-    if ($profile.id) return;
-
-    // Check if user has profile
-    let {
-      data: profileData,
-      error,
-      status
-    } = await supabase.from('profile').select(`*`).eq('id', authUser?.id).single();
-    console.log('Get profile', profileData);
-
-    if (error && !profileData && status === 406 && authUser) {
-      // User wasn't found, create profile
-      console.log(`User wasn't found, create profile`);
-
-      const [regexUsernameMatch] = [...(authUser.email?.matchAll(/(.*)@/g) || [])];
-
-      const isGoogleAuth = !!authUser.app_metadata?.providers?.includes('google');
-
-      const { data: newProfileData, error } = await supabase
-        .from('profile')
-        .insert({
-          id: authUser.id,
-          username: regexUsernameMatch[1] + `${new Date().getTime()}`,
-          fullname: regexUsernameMatch[1],
-          email: authUser.email,
-          is_email_verified: isGoogleAuth,
-          verified_at: isGoogleAuth ? new Date().toDateString() : undefined
-        })
-        .select();
-
-      // Profile created, go to onboarding or lms
-      if (!error && newProfileData) {
-        $user.fetchingUser = false;
-        $user.isLoggedIn = true;
-        $user.currentSession = authUser;
-
-        profile.set(newProfileData[0]);
-
-        setAnalyticsUser();
-
-        // Fetch language
-        handleLocaleChange($profile.locale);
-
-        if (data.isOrgSite) {
-          const { data, error } = await supabase
-            .from('organizationmember')
-            .insert({
-              organization_id: $currentOrg.id,
-              profile_id: $profile.id,
-              role_id: 3
-            })
-            .select();
-          if (error) {
-            console.error('Error adding user to organisation', error);
-          } else {
-            console.log('Success adding user to organisation', data);
-            const memberId = data?.[0]?.id || '';
-
-            $currentOrg.memberId = memberId;
-          }
-
-          if (params.get('redirect')) {
-            goto(params.get('redirect') || '');
-          } else {
-            goto('/lms');
-          }
-          return;
-        }
-
-        // On invite page, don't go to onboarding
-        if (!path.includes('invite')) {
-          goto(ROUTE.ONBOARDING);
-        }
-      }
-      $user.fetchingUser = false;
-    } else if (profileData) {
-      // Profile exists, go to profile page
-      $user.fetchingUser = false;
-      $user.isLoggedIn = true;
-      $user.currentSession = authUser;
-      profile.set(profileData);
-
-      // Set user in sentry
-      setAnalyticsUser();
-
-      // Fetch language
-      handleLocaleChange($profile.locale);
-
-      const orgRes = await getOrganizations(profileData.id, data.isOrgSite, data.orgSiteName);
-
-      const isStudentAccount = orgRes.currentOrg.role_id == ROLE.STUDENT;
-
-      // student redirect
-      if (data.isOrgSite) {
-        if (params.has('redirect')) {
-          goto(params.get('redirect') || '');
-        } else if (shouldRedirectOnAuth(path)) {
-          goto('/lms');
-        }
-      } else {
-        if (isStudentAccount) {
-          // Check if the student logged into the dashboard.
-          console.log('Student logged into dashboard');
-          if (dev) {
-            goto('/lms');
-          } else {
-            window.location.replace(`${$currentOrgDomain}/lms`);
-          }
-        } else if (isEmpty(orgRes.orgs) && !path.includes('invite')) {
-          // Not on invite page or no org, go to onboarding
-          goto(ROUTE.ONBOARDING);
-        } else if (params.has('redirect')) {
-          goto(params.get('redirect') || '');
-        } else if (shouldRedirectOnAuth(path)) {
-          // By default redirect to first organization
-          goto(`/org/${orgRes.currentOrg.siteName}`);
-        }
-      }
-
-      setTheme(orgRes?.currentOrg?.theme);
-    }
-
-    if (!profileData && !isPublicRoute($page.url?.pathname)) {
-      goto('/login?redirect=/' + path);
-    }
-  }
-
   function handleResize() {
     isMobile.update(() => window.innerWidth <= 760);
   }
@@ -258,7 +82,12 @@
       // Authentication Steps
       if (event === 'SIGNED_IN' || event === 'INITIAL_SESSION') {
         $user.fetchingUser = true;
-        getProfile().then(() => {
+        getProfile({
+          path,
+          queryParam,
+          isOrgSite: data.isOrgSite,
+          orgSiteName: data.orgSiteName
+        }).then(() => {
           $user.fetchingUser = false;
         });
       }
@@ -305,7 +134,7 @@
 {:else if data.isOrgSite && !path}
   <OrgLandingPage orgSiteName={data.orgSiteName} org={data.org} />
 {:else}
-  <main class="dark:bg-black">
+  <main class="font-roboto dark:bg-black">
     {#if !hideNavByRoute($page.url?.pathname)}
       {#if isOrgPage($page.url?.pathname) || $page.url?.pathname.includes('profile') || isCoursesPage(path)}
         <OrgNavigation bind:title={$course.title} isCoursePage={isCoursesPage(path)} />