From 28f040db84aa19c75d9052f0fc43d22f28f336ee Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Fri, 20 Oct 2023 09:06:07 +0100
Subject: [PATCH] ux improvements in course creation

---
 .../Course/components/Navigation/index.svelte   |  8 ++++----
 .../Course/components/Settings/index.svelte     | 16 ++++++++++++++--
 src/lib/components/UploadWidget/index.svelte    | 17 +++++++++++------
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/Course/components/Navigation/index.svelte b/src/lib/components/Course/components/Navigation/index.svelte
index f4bcc403..a42d7b68 100644
--- a/src/lib/components/Course/components/Navigation/index.svelte
+++ b/src/lib/components/Course/components/Navigation/index.svelte
@@ -211,16 +211,16 @@
         hideSortIcon: true
       },
       {
-        label: 'Settings',
-        to: getNavItemRoute($course.id, 'settings'),
+        label: 'Landing Page',
+        to: getNavItemRoute($course.id, 'landingpage'),
         hideSortIcon: true,
         show() {
           return !isStudent;
         }
       },
       {
-        label: 'Landing Page',
-        to: getNavItemRoute($course.id, 'landingpage'),
+        label: 'Settings',
+        to: getNavItemRoute($course.id, 'settings'),
         hideSortIcon: true,
         show() {
           return !isStudent;
diff --git a/src/lib/components/Course/components/Settings/index.svelte b/src/lib/components/Course/components/Settings/index.svelte
index b1e87ded..cd8b5db3 100644
--- a/src/lib/components/Course/components/Settings/index.svelte
+++ b/src/lib/components/Course/components/Settings/index.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { Grid, Row, Column, Toggle } from 'carbon-components-svelte';
+  import { CodeSnippet, Grid, Row, Column, Toggle } from 'carbon-components-svelte';
 
   import SectionTitle from '$lib/components/Org/SectionTitle.svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
@@ -212,7 +212,7 @@
 
   <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
     <Column sm={8} md={8} lg={8}>
-      <SectionTitle>Update course details</SectionTitle>
+      <SectionTitle>Course details</SectionTitle>
     </Column>
 
     <Column sm={8} md={8} lg={8}>
@@ -230,6 +230,18 @@
         bind:value={$settings.course_description}
         errorMessage={errors.description}
       />
+      <div class="">
+        <p class="text-md">Course Link</p>
+        {#if $course.slug}
+          <CodeSnippet
+            wrapText
+            type="multi"
+            code={`https://${$currentOrg.siteName}.classroomio.com/course/${$course.slug}`}
+          />
+        {:else}
+          <CodeSnippet code="Setup landing page to get course link" />
+        {/if}
+      </div>
     </Column>
   </Row>
   <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
diff --git a/src/lib/components/UploadWidget/index.svelte b/src/lib/components/UploadWidget/index.svelte
index 49401194..2d6160d7 100644
--- a/src/lib/components/UploadWidget/index.svelte
+++ b/src/lib/components/UploadWidget/index.svelte
@@ -7,6 +7,7 @@
   import Modal from '$lib/components/Modal/index.svelte';
   import { handleOpenWidget } from '$lib/components/CourseLandingPage/store';
   import { queryUnsplash } from './utils';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
 
   export let imageURL = '';
 
@@ -16,6 +17,7 @@
     { label: 'Upload', value: 'upload' }
   ];
 
+  let isUploading = false;
   let currentTab = tabs[0].value;
   let searchQuery = '';
   let unsplashImages: {
@@ -30,7 +32,6 @@
     alt_description: string;
   }[] = [];
   let fileInput: HTMLInputElement;
-  let imagebuffer;
 
   const onChange = (tabValue: string) => () => (currentTab = tabValue);
 
@@ -45,13 +46,13 @@
       let reader = new FileReader();
       reader.readAsDataURL(file);
       reader.onload = (e) => {
-        imagebuffer = file;
         uploadImage(file);
       };
     }
   };
 
   const uploadImage = async (image: File) => {
+    isUploading = true;
     if (!image) {
       return;
     }
@@ -65,6 +66,7 @@
       const { data: response } = await supabase.storage.from('avatars').getPublicUrl(filename);
       imageURL = response.publicUrl;
     }
+    isUploading = false;
 
     snackbar.success(`Complete :)`);
     $handleOpenWidget.open = false;
@@ -104,11 +106,14 @@
               style="display: none;"
               bind:this={fileInput}
               on:change={onFileSelected}
+              disabled={isUploading}
+            />
+            <PrimaryButton
+              label="Upload Image"
+              onClick={handleUpload}
+              isLoading={isUploading}
+              className="w-full font-semibold m-auto"
             />
-            <button
-              on:click={handleUpload}
-              class="py-2 w-full font-semibold hover:bg-gray-200 border-[1px]">Upload Image</button
-            >
             <p class="text-center text-sm text-gray-500 my-2">
               Images wider than 1500 pixels work best.
             </p>