From 203bbe21064a3f417cddc332c2370382524b3bac Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sun, 8 Oct 2023 18:14:13 +0100
Subject: [PATCH] better apps UX, fix login not triggering redirect on org site

---
 .../Apps/components/Comments/index.svelte         |  6 +++---
 .../Apps/components/Poll/components/Poll.svelte   |  2 +-
 .../components/Apps/components/Poll/index.svelte  |  6 +++---
 src/lib/components/Apps/index.svelte              |  8 ++------
 src/lib/utils/types/index.ts                      |  2 +-
 src/routes/login/+page.svelte                     | 15 ++++++++++-----
 6 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/Apps/components/Comments/index.svelte b/src/lib/components/Apps/components/Comments/index.svelte
index 552f221f..067c8071 100644
--- a/src/lib/components/Apps/components/Comments/index.svelte
+++ b/src/lib/components/Apps/components/Comments/index.svelte
@@ -50,7 +50,7 @@
         comment: comment,
         name: 'You',
         avatar: $profile.avatar_url,
-        commentAt: new Date().getTime().toLocaleString()
+        commentAt: new Date()
       }
     ];
     scrollToBottom();
@@ -194,7 +194,7 @@
   </div>
 </PageNav>
 
-<div bind:this={bodyRef} class="overflow-auto h-[90%] pb-10 px-2 min-w-[300px] max-w-[350px]">
+<div bind:this={bodyRef} class="overflow-y-auto h-[87%] pb-10 px-2 md:min-w-[300px]">
   {#each comments as comment}
     <div class="pb-2 mt-2">
       <div class="flex items-start">
@@ -212,7 +212,7 @@
           </p>
         </div>
       </div>
-      <article class="prose prose-sm sm:prose ml-8">
+      <article class="prose prose-sm sm:prose ml-8 max-w-[300px]">
         {comment.comment}
       </article>
     </div>
diff --git a/src/lib/components/Apps/components/Poll/components/Poll.svelte b/src/lib/components/Apps/components/Poll/components/Poll.svelte
index b04895fc..35457283 100644
--- a/src/lib/components/Apps/components/Poll/components/Poll.svelte
+++ b/src/lib/components/Apps/components/Poll/components/Poll.svelte
@@ -148,7 +148,7 @@
         >
           {#if hasUserVoted}
             <span
-              class="progress absolute top-0 left-0 {didUserSelect(option)
+              class="progress absolute top-0 text-black left-0 {didUserSelect(option)
                 ? 'bg-primary-700'
                 : 'bg-gray-300'} h-full bg-opacity-25"
               style="width: {calculatePercent(poll.options, option)}%;"
diff --git a/src/lib/components/Apps/components/Poll/index.svelte b/src/lib/components/Apps/components/Poll/index.svelte
index ebcb3cf3..34ff9ee5 100644
--- a/src/lib/components/Apps/components/Poll/index.svelte
+++ b/src/lib/components/Apps/components/Poll/index.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import PageNav from '$lib/components/PageNav/index.svelte';
   import CloseButton from '$lib/components/Buttons/Close/index.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
@@ -7,7 +7,7 @@
   import Poll from './components/Poll.svelte';
   import Tabs from './components/Tabs.svelte';
 
-  export let handleClose;
+  export let handleClose = () => {};
 
   const users = [
     {
@@ -147,7 +147,7 @@
   </div>
 </PageNav>
 
-<div class="m-2 overlow-auto">
+<div class="m-2 overlow-y-auto min-w-[300px]">
   {#if shouldCreatePoll}
     <CreatePollForm onSubmit={handlePollCreate} onCancel={handleCreatePoll} />
   {:else}
diff --git a/src/lib/components/Apps/index.svelte b/src/lib/components/Apps/index.svelte
index 968ad315..3bf3b9b0 100644
--- a/src/lib/components/Apps/index.svelte
+++ b/src/lib/components/Apps/index.svelte
@@ -75,12 +75,9 @@
   }
 
   function startDragging(event: MouseEvent) {
-    console.log('start dragging');
     $isDown = true;
     setTimeout(() => {
-      console.log('is down', $isDown);
       if (event.button === 0 && $apps.selectedApp && $isDown) {
-        console.log('start dragging if');
         event.preventDefault();
         const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 5;
         const isNearRightBorder = appContentRef.getBoundingClientRect().right - event.clientX < 5;
@@ -90,7 +87,6 @@
           event.clientX >= 0 &&
           event.clientX <= window.innerWidth
         ) {
-          console.log('is dragging');
           isDragging = true;
           resize = true;
           startX = event.clientX;
@@ -194,7 +190,7 @@
         <SendAlt size={24} class="carbon-icon dark:text-white" />
       </IconButton>
     </div>
-    <div class="mb-2">
+    <!-- <div class="mb-2">
       <IconButton
         toolTipProps={{ title: 'QandA', hotkeys: ['A', '2'] }}
         value={APPS_CONSTANTS.APPS.QANDA}
@@ -213,7 +209,7 @@
       >
         <AlignBoxTopLeft size={24} class="carbon-icon dark:text-white" />
       </IconButton>
-    </div>
+    </div> -->
     <div class="mb-2">
       <IconButton
         toolTipProps={{ title: 'Poll', hotkeys: ['A', '4'] }}
diff --git a/src/lib/utils/types/index.ts b/src/lib/utils/types/index.ts
index f1a0aa75..b7e829c5 100644
--- a/src/lib/utils/types/index.ts
+++ b/src/lib/utils/types/index.ts
@@ -74,7 +74,7 @@ export interface LessonComment {
   name: string;
   avatar: string;
   comment: string;
-  commentAt: string;
+  commentAt: string | Date;
 }
 
 // Generated from https://supabase-schema.vercel.app/
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index ca301c68..be80e250 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { page } from '$app/stores';
   import TextField from '$lib/components/Form/TextField.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
@@ -7,6 +7,7 @@
   import { LOGIN_FIELDS } from '$lib/utils/constants/authentication';
   import AuthUI from '$lib/components/AuthUI/index.svelte';
   import { currentOrg } from '$lib/utils/store/org';
+  import { onDestroy } from 'svelte';
 
   let formRef;
   let supabase = getSupabase();
@@ -14,6 +15,7 @@
   let submitError;
   let loading = false;
   let errors = {};
+  let reloadTimeout: NodeJS.Timeout;
 
   let query = new URLSearchParams($page.url.search);
   let redirect = query.get('redirect');
@@ -36,18 +38,21 @@
       console.log('data', data);
       if (error) throw error;
 
-      // reload page on org site cause for some reason the authlistener on +layout.svelte doesn't run
-      // on org site
-      if ($currentOrg.id && redirect) {
+      // reload page on org site cause for some reason the authlistener on +layout.svelte doesn't run sometimes
+      reloadTimeout = setTimeout(() => {
         console.log('Forcing full page reload for auth listener');
         window.location.reload();
-      }
+      }, 1500);
     } catch (error) {
       submitError = error.error_description || error.message;
     } finally {
       loading = false;
     }
   }
+
+  onDestroy(() => {
+    clearTimeout(reloadTimeout);
+  });
 </script>
 
 <svelte:head>