From c07c119b5bb9a629807f8e7459f9a4e9b12b6c3d Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Wed, 13 Sep 2023 20:22:15 +0100
Subject: [PATCH] Store last viewed org in local storage for better UX

---
 .../Courses/components/Card/index.svelte         |  8 ++++++--
 src/lib/components/LMS/SideBar.svelte            |  4 ++--
 src/lib/components/Org/SideBar.svelte            |  4 ++--
 .../components/OrgSelector/OrgSelector.svelte    | 15 +++++++++------
 .../OrgSelector/OrgSelectorItem.svelte           |  2 +-
 src/lib/utils/services/org/index.js              | 16 +++++++++++++---
 6 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/Courses/components/Card/index.svelte b/src/lib/components/Courses/components/Card/index.svelte
index 9d8847a4..2c619344 100644
--- a/src/lib/components/Courses/components/Card/index.svelte
+++ b/src/lib/components/Courses/components/Card/index.svelte
@@ -48,9 +48,13 @@
   // }
 </script>
 
-<a rel="prefetch" href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}`} class=" text-black">
+<a
+  rel="prefetch"
+  href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}`}
+  class=" text-black w-fit"
+>
   <div
-    class="border border-gray w-full max-w-[400px] relative hover:shadow-lg transition-all ease-in-out"
+    class="border border-gray w-full max-w-[350px] relative hover:shadow-lg transition-all ease-in-out"
   >
     <div class="p-4">
       <div class=" mb-5">
diff --git a/src/lib/components/LMS/SideBar.svelte b/src/lib/components/LMS/SideBar.svelte
index 74f94005..b916b2b2 100644
--- a/src/lib/components/LMS/SideBar.svelte
+++ b/src/lib/components/LMS/SideBar.svelte
@@ -53,8 +53,8 @@
 <aside
   class={`${
     $menu.hidden
-      ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-[9999]'
-      : 'translate-x-0 absolute md:relative z-[9999]'
+      ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-40'
+      : 'translate-x-0 absolute md:relative z-40'
   } overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-700 h-[calc(100vh-48px)]`}
 >
   <div class="h-full flex flex-col">
diff --git a/src/lib/components/Org/SideBar.svelte b/src/lib/components/Org/SideBar.svelte
index d7faf191..c497b403 100644
--- a/src/lib/components/Org/SideBar.svelte
+++ b/src/lib/components/Org/SideBar.svelte
@@ -61,8 +61,8 @@
 <aside
   class={`${
     $menu.hidden
-      ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-[9999]'
-      : 'translate-x-0 absolute md:relative z-[9999]'
+      ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-40'
+      : 'translate-x-0 absolute md:relative z-40'
   } overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-800 h-[calc(100vh-48px)] border border-l-0 border-t-0 border-b-0 border-r-1`}
 >
   <div class="h-full flex flex-col">
diff --git a/src/lib/components/OrgSelector/OrgSelector.svelte b/src/lib/components/OrgSelector/OrgSelector.svelte
index c39ce4fc..4321a968 100644
--- a/src/lib/components/OrgSelector/OrgSelector.svelte
+++ b/src/lib/components/OrgSelector/OrgSelector.svelte
@@ -5,15 +5,22 @@
   import { currentOrg, orgs, currentOrgPath } from '$lib/utils/store/org';
   import { goto } from '$app/navigation';
   import { newOrgModal } from '$lib/components/Org/store';
+  import type { CurrentOrg } from '$lib/utils/types/org';
 
   export let canAddOrg = true;
   let open = false;
 
   function handleAddOrg() {
-    console.log('add org modal');
     open = false;
     $newOrgModal.open = true;
   }
+
+  function onClick(org: CurrentOrg) {
+    localStorage.setItem('classroomio_org_sitename', org.siteName);
+    currentOrg.set(org);
+    goto($currentOrgPath);
+    open = false;
+  }
 </script>
 
 <div class="mt-5 relative" data-outline>
@@ -45,11 +52,7 @@
           avatarText={org.shortName}
           text={org.name}
           hasDivider={true}
-          onClick={() => {
-            currentOrg.set(org);
-            goto($currentOrgPath);
-            open = false;
-          }}
+          onClick={() => onClick(org)}
         />
       {/each}
 
diff --git a/src/lib/components/OrgSelector/OrgSelectorItem.svelte b/src/lib/components/OrgSelector/OrgSelectorItem.svelte
index da34ce01..5a7515b3 100644
--- a/src/lib/components/OrgSelector/OrgSelectorItem.svelte
+++ b/src/lib/components/OrgSelector/OrgSelectorItem.svelte
@@ -15,7 +15,7 @@
 
 <div class="relative">
   <button
-    class="{disabled && 'opacity-25'} flex items-center w-60 py-2 px-3 {hasDivider &&
+    class="{disabled && 'opacity-25'} flex items-center w-[14rem] py-2 px-3 {hasDivider &&
       'border-b border-gray-100'} {active && 'bg-primary-100 dark:bg-gray-500'}"
     on:click={onClick}
   >
diff --git a/src/lib/utils/services/org/index.js b/src/lib/utils/services/org/index.js
index c6b85626..322b7242 100644
--- a/src/lib/utils/services/org/index.js
+++ b/src/lib/utils/services/org/index.js
@@ -91,15 +91,25 @@ export async function getOrganizations(userId) {
 
     orgs.set(orgsArray);
 
-    const _cOrg = get(currentOrg);
-    if (!_cOrg.siteName) {
+    if (localStorage) {
+      const lastOrgSiteName = localStorage.getItem('classroomio_org_sitename');
+
+      const lastOrg = orgsArray.find((org) => org.siteName === lastOrgSiteName);
+
+      if (lastOrg) {
+        currentOrg.set(lastOrg);
+      }
+    }
+
+    const _currentOrg = get(currentOrg);
+    if (!_currentOrg.siteName) {
       currentOrg.set(orgsArray[0]);
     }
   }
 
   return {
     orgs: orgsArray,
-    currentOrg: orgsArray[0],
+    currentOrg: get(currentOrg),
     error
   };
 }