From ecbd75b00f4abd0d1e97721d13823d9499d362b8 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Wed, 13 Sep 2023 06:38:12 +0100
Subject: [PATCH] Webflow course card clone

---
 .../Courses/components/Card/index.svelte      | 118 ++++++++----------
 src/lib/components/Courses/index.svelte       |   1 -
 .../components/Org/LandingPage/index.svelte   |   2 +-
 .../utils/functions/routes/isPublicRoute.js   |   2 +-
 .../functions/routes/shouldRedirectOnAuth.ts  |   3 +
 src/lib/utils/services/org/index.js           |   6 +-
 src/routes/+layout.svelte                     |  10 +-
 7 files changed, 64 insertions(+), 78 deletions(-)
 create mode 100644 src/lib/utils/functions/routes/shouldRedirectOnAuth.ts

diff --git a/src/lib/components/Courses/components/Card/index.svelte b/src/lib/components/Courses/components/Card/index.svelte
index 308152ad..b9192136 100644
--- a/src/lib/components/Courses/components/Card/index.svelte
+++ b/src/lib/components/Courses/components/Card/index.svelte
@@ -1,18 +1,14 @@
 <script lang="ts">
-  import Dropdown from '$lib/components/Dropdown/index.svelte';
-  import { copyCourseModal } from '$lib/components/Courses/store';
-  import { ROLE } from '$lib/utils/constants/roles';
+  import { Tag } from 'carbon-components-svelte';
+  // import { ROLE } from '$lib/utils/constants/roles';
   import getCurrencyFormatter from '$lib/utils/functions/getCurrencyFormatter';
-  import OverflowMenuHorizontalIcon from 'carbon-icons-svelte/lib/OverflowMenuHorizontal.svelte';
-  import ArrowRight from 'carbon-icons-svelte/lib/ArrowRight.svelte';
-  // import { deleteCourse } from '$lib/utils/services/courses';
 
   export let bannerImage: string | undefined;
   export let id = '';
   export let slug = '';
   export let title = '';
   export let description = '';
-  export let role_id = ROLE.STUDENT;
+  // export let role_id = ROLE.STUDENT;
   export let isPublished = false;
   export let cost = 0;
   export let totalLessons = 0;
@@ -22,89 +18,75 @@
 
   let formatter = getCurrencyFormatter(currency);
 
-  function getOptions() {
-    return [
-      {
-        label: 'Make a copy',
-        // Show this option only if user has admin control over this course.
-        show: () => role_id === ROLE.ADMIN || role_id === ROLE.TUTOR,
-        onClick() {
-          // IIFI of copyCourseModal
-          (() => {
-            $copyCourseModal.id = id;
-            $copyCourseModal.open = true;
-            $copyCourseModal.title = `Copy of ${title}`;
-          })();
-        }
-      }
-      // {
-      //   label: 'Delete',
-      //   show: () => role_id === ROLE.TUTOR,
-      //   onClick() {
-      //     (async () => {
-      //       await deleteCourse(id);
-      //       onDelete(id);
-      //       console.log('Deleting');
-      //     })();
-      //   }
-      // }
-    ].filter((option) => option.show());
-  }
+  // function getOptions() {
+  //   return [
+  //     {
+  //       label: 'Make a copy',
+  //       // Show this option only if user has admin control over this course.
+  //       show: () => role_id === ROLE.ADMIN || role_id === ROLE.TUTOR,
+  //       onClick() {
+  //         // IIFI of copyCourseModal
+  //         (() => {
+  //           $copyCourseModal.id = id;
+  //           $copyCourseModal.open = true;
+  //           $copyCourseModal.title = `Copy of ${title}`;
+  //         })();
+  //       }
+  //     }
+  //     // {
+  //     //   label: 'Delete',
+  //     //   show: () => role_id === ROLE.TUTOR,
+  //     //   onClick() {
+  //     //     (async () => {
+  //     //       await deleteCourse(id);
+  //     //       onDelete(id);
+  //     //       console.log('Deleting');
+  //     //     })();
+  //     //   }
+  //     // }
+  //   ].filter((option) => option.show());
+  // }
 </script>
 
 <a rel="prefetch" href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}`} class=" text-black">
   <div
-    class="root w-full md:w-80 border bg-gray-100 dark:bg-gray-800 mb-4 rounded-md hover:shadow-2xl transition ease-in-out relative"
+    class="border border-gray w-full max-w-[400px] relative hover:shadow-lg transition-all ease-in-out"
   >
-    {#if !isOnLandingPage}
-      <Dropdown options={getOptions()} classNames="absolute top-4 right-4" isIcon={true}>
-        <div class="p-1 rounded-full bg-white dark:bg-gray-600">
-          <OverflowMenuHorizontalIcon size={20} class="carbon-icon dark:text-white" />
-        </div>
-      </Dropdown>
-    {/if}
-    <img
-      class="h-2/5 w-full rounded-tl rounded-tr"
-      src={bannerImage ?? '/images/classroomio-course-img-template.jpg'}
-      alt="Course Logo"
-    />
-    <div class="px-3 py-5">
-      <h4 class="dark:text-white title text-md font-bold">
-        {title}
-      </h4>
-      <p
-        class="description text-left text-sm font-small flex flex-col text-gray-500 dark:text-white my-3"
-        title={description}
-      >
+    <div class="p-4">
+      <div class=" mb-5">
+        <img
+          class="h-2/5 w-full rounded"
+          src={bannerImage ?? '/images/classroomio-course-img-template.jpg'}
+          alt="Course Logo"
+        />
+      </div>
+
+      <h3 class="text-xl dark:text-white title">{title}</h3>
+      <p class="mt-2 text-sm text-gray-500 dark:text-gray-300 description">
         {description}
       </p>
-      <div class="flex justify-between">
-        <p class="dark:text-white">{totalLessons} lessons</p>
+    </div>
 
+    <div class="px-4 border border-gray border-b-0 border-l-0 border-r-0 footer">
+      <p class="text-xs pt-2 pl-2 dark:text-white">{totalLessons} lessons</p>
+      <p class="text-xs py-2">
         {#if isOnLandingPage}
-          <ArrowRight size={24} class="carbon-class" />
+          <span class="px-2">{!cost ? 'Free' : formatter.format(cost)}</span>
         {:else}
-          <div class="rounded dark:text-white bg-{isPublished ? 'green' : 'red'}-200 py-1 px-2">
+          <Tag type={isPublished ? 'green' : 'cool-gray'}>
             {#if isPublished}
               Published
             {:else}
               Unpublished
             {/if}
-          </div>
+          </Tag>
         {/if}
-      </div>
-      <p class="dark:text-white text-gray-500 text-xs mt-1">
-        {!cost ? 'free' : formatter.format(cost)}
       </p>
     </div>
   </div>
 </a>
 
 <style>
-  .root {
-    min-height: 370px;
-  }
-
   a,
   a:hover {
     text-decoration: none;
diff --git a/src/lib/components/Courses/index.svelte b/src/lib/components/Courses/index.svelte
index f08625ab..e37f023e 100644
--- a/src/lib/components/Courses/index.svelte
+++ b/src/lib/components/Courses/index.svelte
@@ -21,7 +21,6 @@
     {#each $courses as courseData}
       <Card
         id={courseData.id}
-        logo={courseData.logo}
         bannerImage={courseData.banner_image}
         title={courseData.title}
         description={courseData.description}
diff --git a/src/lib/components/Org/LandingPage/index.svelte b/src/lib/components/Org/LandingPage/index.svelte
index f721b0a9..df8fb79b 100644
--- a/src/lib/components/Org/LandingPage/index.svelte
+++ b/src/lib/components/Org/LandingPage/index.svelte
@@ -305,7 +305,7 @@
         {/if}
 
         {#if $courses.length > 3}
-          <div class="w-full flex justify-center">
+          <div class="w-full mt-3 flex justify-center">
             <PrimaryButton
               variant={VARIANTS.OUTLINED}
               onClick={() => (viewAll = !viewAll)}
diff --git a/src/lib/utils/functions/routes/isPublicRoute.js b/src/lib/utils/functions/routes/isPublicRoute.js
index 73d92ae2..49c9a843 100644
--- a/src/lib/utils/functions/routes/isPublicRoute.js
+++ b/src/lib/utils/functions/routes/isPublicRoute.js
@@ -1,6 +1,6 @@
 import { PUBLIC_ROUTES } from '$lib/utils/constants/routes';
 
-export default (route) => {
+export default (route = '') => {
   return PUBLIC_ROUTES.some((publicRoute) => {
     const regex = new RegExp(publicRoute, 'g');
     return regex.test(route);
diff --git a/src/lib/utils/functions/routes/shouldRedirectOnAuth.ts b/src/lib/utils/functions/routes/shouldRedirectOnAuth.ts
new file mode 100644
index 00000000..09288ff3
--- /dev/null
+++ b/src/lib/utils/functions/routes/shouldRedirectOnAuth.ts
@@ -0,0 +1,3 @@
+export default (path: string): boolean => {
+  return ['login', 'signup', 'onboarding'].some((r) => path.includes(r)) || path === '';
+};
diff --git a/src/lib/utils/services/org/index.js b/src/lib/utils/services/org/index.js
index 7767aeec..c6b85626 100644
--- a/src/lib/utils/services/org/index.js
+++ b/src/lib/utils/services/org/index.js
@@ -90,7 +90,11 @@ export async function getOrganizations(userId) {
     });
 
     orgs.set(orgsArray);
-    currentOrg.set(orgsArray[0]);
+
+    const _cOrg = get(currentOrg);
+    if (!_cOrg.siteName) {
+      currentOrg.set(orgsArray[0]);
+    }
   }
 
   return {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a198cc5a..d41e90c9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -36,6 +36,7 @@
   import { currentOrg } 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 AddOrgModal from '$lib/components/Org/AddOrgModal/AddOrgModal.svelte';
 
   import '../app.postcss';
@@ -174,10 +175,7 @@
           goto(ROUTE.ONBOARDING);
         } else if (params.has('redirect')) {
           goto(params.get('redirect') || '');
-        } else if (
-          ['login', 'signup', 'onboarding', 'invite'].some((r) => path.includes(r)) ||
-          path === '' // for home page
-        ) {
+        } else if (shouldRedirectOnAuth(path)) {
           // By default redirect to first organization
           goto(`/org/${orgRes.currentOrg.siteName}`);
         }
@@ -317,14 +315,14 @@
           {#if !isQuizPage($page.url.pathname)}
             <OrgSideBar />
           {/if}
-          <div class="org-slot bg-white dark:bg-gray-800 w-full">
+          <div class="org-slot w-full 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 w-full">
+          <div class="org-slot w-full bg-white dark:bg-gray-800">
             <slot />
           </div>
         </div>