From 804e5cdeb980f83e37d5d688a00d4a6b61e690a1 Mon Sep 17 00:00:00 2001 From: tunny17 Date: Thu, 5 Oct 2023 09:22:39 +0000 Subject: [PATCH] CLASSROOMIO-T-177: Upload Widget improve banner image Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-177 Merge branch 'CLASSROOMIO-T-177' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-177 CLASSROOMIO-T-177: Moved API call to backend general ux improvements Merge branch 'CLASSROOMIO-T-177' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-177 CLASSROOMIO-T-177: Resolved Feedbacks CLASSROOMIO-T-177: UI improvements CLASSROOMIO-T-177: fix styling or image CLASSROOMIO-T-177: Resolved Feedbacks CLASSROOMIO-T-177: Landing Page Max Width CLASSROOMIO-T-177: Refactor Upload Widget Merge branch 'main' into CLASSROOMIO-T-177 CLASSROOMIO-T-177: Completion of Upload Widget Merge branch 'main' into CLASSROOMIO-T-177 CLASSROOMIO-T-177: Widget Test Co-authored-by: Rotimi Best Co-authored-by: Tunji Adeyemi Merge-request: CLASSROOMIO-MR-86 Merged-by: Best Admin --- package.json | 2 +- .../Lesson/Exercises/NewExerciseModal.svelte | 4 +- .../Course/components/Navigation/index.svelte | 8 +- .../Course/components/Settings/index.svelte | 61 ++---- .../components/Editor/HeaderForm.svelte | 65 +------ .../components/CourseLandingPage/index.svelte | 28 ++- src/lib/components/CourseLandingPage/store.js | 4 + .../Courses/components/Card/index.svelte | 2 +- src/lib/components/Form/TextField.svelte | 4 +- src/lib/components/Tabs/index.svelte | 2 +- src/lib/components/UploadWidget/index.svelte | 173 ++++++++++++++++++ src/lib/components/UploadWidget/utils.ts | 24 +++ src/routes/api/unsplash/+server.ts | 33 ++++ .../lessons/[...lessonParams]/+page.svelte | 2 +- 14 files changed, 287 insertions(+), 125 deletions(-) create mode 100644 src/lib/components/UploadWidget/index.svelte create mode 100644 src/lib/components/UploadWidget/utils.ts create mode 100644 src/routes/api/unsplash/+server.ts diff --git a/package.json b/package.json index 937f376c..a5de02c9 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,6 @@ "@types/paystack": "^2.0.1", "@types/pluralize": "0.0.30", "ai": "^2.1.31", - "axios": "^1.4.0", "body-parser": "^1.20.2", "canvas-confetti": "^1.6.0", "cookie-parser": "^1.4.6", @@ -43,6 +42,7 @@ "pluralize": "^8.0.0", "sirv": "^2.0.3", "svelte-email": "^0.0.4", + "unsplash-js": "^7.0.18", "wait-on": "^7.0.1", "zod": "^3.21.4" }, diff --git a/src/lib/components/Course/components/Lesson/Exercises/NewExerciseModal.svelte b/src/lib/components/Course/components/Lesson/Exercises/NewExerciseModal.svelte index 91d62951..3f0ad829 100644 --- a/src/lib/components/Course/components/Lesson/Exercises/NewExerciseModal.svelte +++ b/src/lib/components/Course/components/Lesson/Exercises/NewExerciseModal.svelte @@ -73,7 +73,7 @@ type ? 'border-primary-400' : `border-gray-200 dark:border-gray-400 ${ - !option.isDisabled && 'hover:scale-90' + !option.isDisabled && 'hover:scale-95' }`} flex flex-col {option.isDisabled && 'cursor-not-allowed opacity-60'} transition-all ease-in-out" type="button" @@ -145,7 +145,7 @@
{#each TEMPLATES[selectedTag] as template} +

+ Images wider than 1500 pixels work best. +

+

The maximum size per file is 5 MB.

+
+ + + +
+
+ + +
+ {#if unsplashImages && unsplashImages.length > 0} +
+ {#each unsplashImages as unsplashImages (unsplashImages.id)} +
+ {unsplashImages.alt_description} handleImageClick(unsplashImages.urls.regular)} + /> +
+ {/each} +
+ {:else} +

No images available.

+ {/if} +
+ + + + + diff --git a/src/lib/components/UploadWidget/utils.ts b/src/lib/components/UploadWidget/utils.ts new file mode 100644 index 00000000..50d81a07 --- /dev/null +++ b/src/lib/components/UploadWidget/utils.ts @@ -0,0 +1,24 @@ +import { supabase } from '$lib/utils/functions/supabase'; + +export async function queryUnsplash(searchQuery: string) { + const { data } = await supabase.auth.getSession(); + const accessToken = data.session?.access_token || ''; + + try { + const response = await fetch('/api/unsplash', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: accessToken + }, + body: JSON.stringify({ searchQuery }) + }); + if (!response.ok) { + throw new Error(await response.text()); + } + const result = await response.json(); + return result.photos; + } catch (error) { + console.error('Error sending fetch request', error); + } +} \ No newline at end of file diff --git a/src/routes/api/unsplash/+server.ts b/src/routes/api/unsplash/+server.ts new file mode 100644 index 00000000..2075ba9b --- /dev/null +++ b/src/routes/api/unsplash/+server.ts @@ -0,0 +1,33 @@ +import { json } from '@sveltejs/kit'; +import { UNSPLASH_API_KEY } from '$env/static/private'; + +const UNSPLASH_API_URL = `https://api.unsplash.com/search/photos?page=2&per_page=15&auto=format&fit=crop&w=2970&q=80&client_id=${UNSPLASH_API_KEY}`; + +// API to fetch photos from Unsplash +export async function POST({ request }) { + const body = await request.json(); + const { searchQuery } = body; + + const query = searchQuery || 'rocks'; + + try { + const response = await fetch(`${UNSPLASH_API_URL}&query=${encodeURIComponent(query)}`, { + method: 'GET', + }); + + if (!response.ok) { + throw new Error('Unable to fetch photos from Unsplash API'); + } + + const data = await response.json(); + + return json({ + success: true, + photos: data.results, + }); + } catch (error) { + console.error(error); + + return json({ success: false, message: 'Error fetching photos from Unsplash' }, { status: 500 }); + } +} diff --git a/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte b/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte index 8ee57ba6..42658bf4 100644 --- a/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte +++ b/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte @@ -306,7 +306,7 @@ class="px-2 my-2 pr-4 border-t-0 border-b-0 border-l-0 border border-gray-300 flex items-center" on:click={() => goto(path)} > - + {/if}