CLASSROOMIO-T-80: Replace sapper with sveltekit
This commit is contained in:
Rotimi Best
@@ -0,0 +1,388 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { derived } from 'svelte/store';
|
||||
import { goto } from '$app/navigation';
|
||||
import { dev } from '$app/environment';
|
||||
import { page, navigating } from '$app/stores';
|
||||
import isEmpty from 'lodash/isEmpty';
|
||||
import * as Sentry from '@sentry/browser';
|
||||
import { Integrations } from '@sentry/tracing';
|
||||
import { CaptureConsole } from '@sentry/integrations';
|
||||
import { Theme } from 'carbon-components-svelte';
|
||||
import { Moon } from 'svelte-loading-spinners';
|
||||
import LandingNavigation from '$lib/components/Navigation/index.svelte';
|
||||
import OrgNavigation from '$lib/components/Navigation/app.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 Backdrop from '$lib/components/Backdrop/index.svelte';
|
||||
import OrgSideBar from '$lib/components/Org/SideBar.svelte';
|
||||
import LMSSideBar from '$lib/components/LMS/SideBar.svelte';
|
||||
// import SideBar from "../components/SideBar/index.svelte";
|
||||
// import Footer from '$lib/components/Footer/index.svelte';
|
||||
import Apps from '$lib/components/Apps/index.svelte';
|
||||
import PlayQuiz from '$lib/components/Org/Quiz/Play/index.svelte';
|
||||
import {
|
||||
isCoursesPage,
|
||||
isOrgPage,
|
||||
isLMSPage,
|
||||
isQuizPage,
|
||||
} from '$lib/utils/functions/app';
|
||||
import showAppsSideBar from '$lib/utils/functions/showAppsSideBar';
|
||||
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 { ROUTES_TO_HIDE_NAV, ROUTE } from '$lib/utils/constants/routes';
|
||||
import { getOrganizations, getCurrentOrg } from '$lib/utils/services/org';
|
||||
import { toggleBodyByTheme } from '$lib/utils/functions/app';
|
||||
import { appStore } from '$lib/utils/store/app';
|
||||
import { currentOrg } from '$lib/utils/store/org';
|
||||
import { blockedSubdomain } from '$lib/utils/constants/app';
|
||||
|
||||
import '../app.postcss';
|
||||
|
||||
let supabase = getSupabase();
|
||||
let path = $page.url.pathname.replace('/', '');
|
||||
let theme = 'white';
|
||||
let skipAuth = false;
|
||||
|
||||
const delayedPreloading = derived(navigating, (currentPreloading, set) => {
|
||||
setTimeout(() => set(currentPreloading), 250);
|
||||
});
|
||||
|
||||
function setupSentry() {
|
||||
if (!dev) {
|
||||
Sentry.init({
|
||||
dsn: 'https://[email protected]/5999999',
|
||||
integrations: [
|
||||
new Integrations.BrowserTracing(),
|
||||
new CaptureConsole({
|
||||
levels: ['error'],
|
||||
}),
|
||||
],
|
||||
environment: !dev ? 'production' : 'development',
|
||||
// Set tracesSampleRate to 1.0 to capture 100%
|
||||
// of transactions for performance monitoring.
|
||||
// We recommend adjusting this value in production
|
||||
tracesSampleRate: 1.0,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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 profile', authUser);
|
||||
|
||||
// Check if user has profile
|
||||
let {
|
||||
data: profileData,
|
||||
error,
|
||||
status,
|
||||
} = await supabase
|
||||
.from('profile')
|
||||
.select(`*`)
|
||||
.eq('id', authUser?.id)
|
||||
.single();
|
||||
|
||||
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 { data, error } = await supabase
|
||||
.from('profile')
|
||||
.insert({
|
||||
id: authUser.id,
|
||||
username: regexUsernameMatch[1] + '1669991321770',
|
||||
fullname: regexUsernameMatch[1],
|
||||
email: authUser.email,
|
||||
})
|
||||
.select();
|
||||
|
||||
// Profile created, go to profile page
|
||||
if (!error && data) {
|
||||
$user.fetchingUser = false;
|
||||
$user.isLoggedIn = true;
|
||||
$user.currentSession = authUser;
|
||||
|
||||
profile.set(data[0]);
|
||||
|
||||
// Set user in sentry
|
||||
Sentry.setUser($profile);
|
||||
|
||||
if ($appStore.isStudentDomain) {
|
||||
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;
|
||||
}
|
||||
|
||||
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
|
||||
Sentry.setUser($profile);
|
||||
|
||||
const orgRes = await getOrganizations($profile.id);
|
||||
|
||||
// student redirect
|
||||
if ($appStore.isStudentDomain) {
|
||||
if (params.has('redirect')) {
|
||||
goto(params.get('redirect') || '');
|
||||
} else {
|
||||
goto('/lms');
|
||||
}
|
||||
} else {
|
||||
if (isEmpty(orgRes.orgs)) {
|
||||
goto(ROUTE.ONBOARDING);
|
||||
} else if (
|
||||
['login', 'signup', 'onboarding'].some((r) => path.includes(r)) ||
|
||||
path === '' // for home page
|
||||
) {
|
||||
// By default redirect to first organization
|
||||
goto(`/org/${orgRes.currentOrg.siteName}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setOrgBasedOnUrl(host) {
|
||||
if (typeof window !== 'undefined') {
|
||||
const debug = localStorage.getItem('role') === 'student';
|
||||
const matches = host.match(/([a-z0-9]+).*classroomio[.]com/);
|
||||
const subdomain = matches?.[1] ?? '';
|
||||
|
||||
if (!blockedSubdomain.includes(subdomain)) {
|
||||
const answer = Array.isArray(matches)
|
||||
? !!subdomain && subdomain !== 'www'
|
||||
: false;
|
||||
|
||||
$appStore.isStudentDomain = debug || answer;
|
||||
$appStore.siteNameFromDomain = debug ? 'codingdojo' : subdomain;
|
||||
}
|
||||
skipAuth = debug || subdomain === 'play';
|
||||
}
|
||||
}
|
||||
|
||||
function handleResize() {
|
||||
isMobile.update(() => window.innerWidth <= 760);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
console.log(
|
||||
'Welcome to ClassroomIO, we are grateful you chose us.',
|
||||
$page.url.host,
|
||||
`\nIs student domain: ${$appStore.isStudentDomain}`
|
||||
);
|
||||
// Disable GA on localhost
|
||||
if (dev) {
|
||||
console.log('disable GA');
|
||||
window['ga-disable-G-C7WBN0S06R'] = true;
|
||||
}
|
||||
|
||||
setupSentry();
|
||||
|
||||
handleResize();
|
||||
|
||||
// if (
|
||||
// !localStorage.getItem('supabase.auth.token') &&
|
||||
// !isPublicRoute($page.url.pathname)
|
||||
// ) {
|
||||
// console.log(
|
||||
// 'No auth token and is not a public route, redirect to login',
|
||||
// path
|
||||
// );
|
||||
// return goto('/login');
|
||||
// }
|
||||
|
||||
const { data: authListener } = supabase.auth.onAuthStateChange(
|
||||
(event, session) => {
|
||||
// Log key events
|
||||
console.log(`event`, event);
|
||||
if (event == 'PASSWORD_RECOVERY') {
|
||||
console.log('PASSWORD RESET');
|
||||
}
|
||||
|
||||
if (path.includes('reset')) {
|
||||
console.log('Dont change auth when on reset page');
|
||||
return;
|
||||
}
|
||||
|
||||
// Skip Authentication
|
||||
if (skipAuth) return;
|
||||
|
||||
// Authentication Steps
|
||||
if (event === 'SIGNED_IN') {
|
||||
$user.fetchingUser = true;
|
||||
getProfile();
|
||||
} else {
|
||||
console.log('not logged in, go to login');
|
||||
return goto('/login');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Update theme - dark or light mode
|
||||
$appStore.isDark = localStorage.getItem('theme') === 'dark';
|
||||
toggleBodyByTheme($appStore.isDark);
|
||||
|
||||
if ($appStore.isStudentDomain) {
|
||||
getCurrentOrg($appStore.siteNameFromDomain);
|
||||
}
|
||||
|
||||
return () => {
|
||||
authListener?.unsubscribe();
|
||||
};
|
||||
});
|
||||
|
||||
$: path = $page.url.pathname.replace('/', '');
|
||||
$: theme = $appStore.isDark ? 'g100' : 'white';
|
||||
$: setOrgBasedOnUrl($page.url.host);
|
||||
</script>
|
||||
|
||||
<svelte:window on:resize={handleResize} />
|
||||
|
||||
<svelte:head>
|
||||
<link href="/css/carbon.css" rel="stylesheet" />
|
||||
</svelte:head>
|
||||
|
||||
<Theme bind:theme />
|
||||
|
||||
<Snackbar />
|
||||
|
||||
{#if skipAuth}
|
||||
<PlayQuiz />
|
||||
{:else if $appStore.isStudentDomain && !path}
|
||||
<OrgLandingPage />
|
||||
{:else}
|
||||
<main class="dark:bg-gray-800">
|
||||
{#if $navigating && $delayedPreloading}
|
||||
<Backdrop>
|
||||
<Moon size="60" color="#1d4ed8" unit="px" duration="1s" />
|
||||
</Backdrop>
|
||||
{/if}
|
||||
{#if !ROUTES_TO_HIDE_NAV.includes($page.url.pathname) && !isCoursesPage(path)}
|
||||
{#if isOrgPage($page.url.pathname) || $page.url.pathname.includes('profile')}
|
||||
<OrgNavigation />
|
||||
{:else if isLMSPage($page.url.pathname)}
|
||||
<LMSNavigation />
|
||||
{:else}
|
||||
<LandingNavigation
|
||||
logo={$appStore.isStudentDomain ? $currentOrg.avatar_url : undefined}
|
||||
orgName={$appStore.isStudentDomain ? $currentOrg.name : undefined}
|
||||
disableLogin={false}
|
||||
/>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<div class="flex justify-between">
|
||||
{#if isOrgPage($page.url.pathname)}
|
||||
<div class="org-root w-full flex items-center justify-between">
|
||||
{#if !isQuizPage($page.url.pathname)}
|
||||
<OrgSideBar />
|
||||
{/if}
|
||||
<div class="org-slot bg-white dark:bg-gray-800">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
{:else if isLMSPage($page.url.pathname)}
|
||||
<div class="org-root w-full flex items-center justify-between">
|
||||
<LMSSideBar />
|
||||
<div class="org-slot bg-white dark:bg-gray-800">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<slot />
|
||||
{/if}
|
||||
|
||||
{#if showAppsSideBar(path)}
|
||||
<Apps />
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{#if !['about', ''].includes(path)}
|
||||
<!-- <Footer /> -->
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
main {
|
||||
background-color: #fafbfc;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.org-root {
|
||||
height: calc(100vh - 44px);
|
||||
}
|
||||
.org-slot {
|
||||
min-width: calc(100vw - 250px);
|
||||
height: calc(100vh - 44px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
:global(a:hover) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
:global(:root) {
|
||||
--main-primary-color: rgba(29, 78, 216, 1);
|
||||
--border-color: #eaecef;
|
||||
--app-background-color: #fafbfc;
|
||||
}
|
||||
|
||||
:global(.app-background-color) {
|
||||
background-color: var(--app-background-color);
|
||||
}
|
||||
|
||||
:global(.bx--data-table-container) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(.dark svg.dark path) {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
:global(.border-c) {
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
:global(.border-bottom-c) {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user