#19: Implement supabase local setup

.gitignore

@@ -14,3 +14,5 @@ package-lock.json
 .env.sentry-build-plugin
 
 /_supascripts/
+data.sql
+changes.sql

src/lib/components/Chip/Text.svelte

@@ -1,6 +1,6 @@
-<script>
+<script lang="ts">
   export let className = '';
-  export let value = '';
+  export let value: string | number = '';
   export let size = '';
   export let shape = 'rounded-md';
 </script>

src/lib/components/Course/components/Lesson/AddLessonModal.svelte

@@ -65,7 +65,7 @@
   >
     <div class="mr-5">
       <TextChip
-        value={getLessonOrder(lesson.id)}
+        value={getLessonOrder(lesson.id || '')}
         size="sm"
         shape="rounded-full"
         className="bg-primary-200 text-primary-600 text-xs"

src/lib/components/Form/TextField.svelte

@@ -5,13 +5,13 @@
 
   export let label = '';
   export let placeholder = '';
-  export let value: string | number | null;
+  export let value: string | number | null = null;
   export let name = '';
   export let onKeyDown = (e) => {};
   export let className = '';
   export let inputClassName = '';
   export let labelClassName = 'font-light';
-  export let bgColor = 'bg-gray-100 focus:bg-primary-50 dark:bg-neutral-800 dark:text-white';
+  export let bgColor = 'bg-gray-100 focus:bg-primary-50 dark:bg-neutral-700 dark:text-white';
   export let type = 'text';
   export let isPassword = false;
   export let autoFocus = false;

src/lib/components/LMS/components/Profile.svelte

@@ -7,6 +7,7 @@
   import { profile } from '$lib/utils/store/user';
   import { snackbar } from '$lib/components/Snackbar/store';
   import LogoutButton from '$lib/components/Buttons/Logout/index.svelte';
+  import generateUUID from '$lib/utils/functions/generateUUID';
 
   let avatar = '';
   let loading = false;
@@ -21,7 +22,7 @@
       };
 
       if (avatar) {
-        const filename = `user/${$profile.username + Date.now()}.webp`;
+        const filename = `user/${generateUUID()}.webp`;
 
         const { data } = await supabase.storage.from('avatars').upload(filename, avatar, {
           cacheControl: '3600',

src/lib/components/Org/Settings/Profile.svelte

@@ -8,6 +8,7 @@
   import { profile } from '$lib/utils/store/user';
   import { snackbar } from '$lib/components/Snackbar/store';
   import LogoutButton from '$lib/components/Buttons/Logout/index.svelte';
+  import generateUUID from '$lib/utils/functions/generateUUID';
 
   let avatar = '';
   let loading = false;
@@ -23,7 +24,7 @@
       };
 
       if (avatar) {
-        const filename = `user/${$profile.username + Date.now()}.webp`;
+        const filename = `user/${generateUUID()}.webp`;
 
         const { data } = await supabase.storage.from('avatars').upload(filename, avatar, {
           cacheControl: '3600',

src/lib/components/WelcomeModal/WelcomeModal.svelte

@@ -15,7 +15,7 @@
   width="w-9/12"
   modalHeading="Welcome"
 >
-  <p class="text-black text-sm md:text-base lg:text-lg">
+  <p class="text-black dark:text-white text-sm md:text-base lg:text-lg">
     We at <a
       href="https://app.classroomio.com/"
       class="text-primary-700 no-underline hover:no-underline">ClassroomIO</a
@@ -26,5 +26,5 @@
     <span class="text-primary-700">Thank you for choosing us;</span> we deeply appreciate it and are
     at your service.
   </p>
-  <img src="/images/welcome-modal-banner.svg" alt="A welcome banner" class="w-full my-6" />
+  <img src="/images/welcome-img.svg" alt="A welcome banner" class="w-full my-6" />
 </Modal>

src/lib/utils/functions/generateUUID.ts

@@ -0,0 +1,18 @@
+export default function generateUUID() {
+  // Public Domain/MIT
+  var d = new Date().getTime(); //Timestamp
+  var d2 = (typeof performance !== 'undefined' && performance.now && performance.now() * 1000) || 0; //Time in microseconds since page-load or 0 if unsupported
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = Math.random() * 16; //random number between 0 and 16
+    if (d > 0) {
+      //Use timestamp until depleted
+      r = (d + r) % 16 | 0;
+      d = Math.floor(d / 16);
+    } else {
+      //Use microseconds since page-load if supported
+      r = (d2 + r) % 16 | 0;
+      d2 = Math.floor(d2 / 16);
+    }
+    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
+  });
+}

src/lib/utils/functions/supabase.ts

@@ -1,4 +1,8 @@
-import { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public';
+import {
+  PUBLIC_SUPABASE_ANON_KEY,
+  PUBLIC_SUPABASE_URL,
+  PUBLIC_SUPABASE_BUCKET_URL
+} from '$env/static/public';
 import { createClient, SupabaseClient } from '@supabase/supabase-js';
 import type { ConfigType } from '../types';
 
@@ -6,14 +10,14 @@ export let supabase: SupabaseClient;
 
 export const getSupabase = (config?: ConfigType) => {
   if (supabase) return supabase;
-
   config = {
     supabaseConfig: {
-      bucketPath: 'https://tapaozmyjsuykgerrfkt.supabase.in/storage/v1/object/sign/',
+      bucketPath: PUBLIC_SUPABASE_BUCKET_URL + '/storage/v1/object/sign/',
       url: PUBLIC_SUPABASE_URL || '',
       anonKey: PUBLIC_SUPABASE_ANON_KEY || ''
     }
   };
+  console.log('supabase config', config);
 
   supabase = createClient(config.supabaseConfig.url, config.supabaseConfig.anonKey);
 

supabase/seed.sql

@@ -0,0 +1,4 @@
+insert into storage.buckets
+  (id, name, public)
+values
+  ('avatars', 'avatars', true);