From f8ba29b015eb1088c2e613183bb315c99aa0de0c Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Fri, 19 Jan 2024 22:08:33 +0100
Subject: [PATCH] Fix file input click event in ThumbnailUpdate component

---
 .../EditCourseGeneral/EditCourseGeneral.tsx   |  8 ++
 .../EditCourseGeneral/ThumbnailUpdate.tsx     | 79 +++++++++++++++++++
 .../Dashboard/UI/CourseOverviewTop.tsx        |  2 +-
 apps/web/services/courses/courses.ts          | 12 ++-
 apps/web/services/utils/ts/requests.ts        |  9 +++
 5 files changed, 107 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/components/Dashboard/Course/EditCourseGeneral/ThumbnailUpdate.tsx

diff --git a/apps/web/components/Dashboard/Course/EditCourseGeneral/EditCourseGeneral.tsx b/apps/web/components/Dashboard/Course/EditCourseGeneral/EditCourseGeneral.tsx
index 163e0e22..9b6b9814 100644
--- a/apps/web/components/Dashboard/Course/EditCourseGeneral/EditCourseGeneral.tsx
+++ b/apps/web/components/Dashboard/Course/EditCourseGeneral/EditCourseGeneral.tsx
@@ -5,6 +5,7 @@ import * as Switch from '@radix-ui/react-switch';
 import * as Form from '@radix-ui/react-form';
 import React from 'react'
 import { useCourse, useCourseDispatch } from '../../../Contexts/CourseContext';
+import ThumbnailUpdate from './ThumbnailUpdate';
 
 
 type EditCourseStructureProps = {
@@ -131,6 +132,13 @@ function EditCourseGeneral(props: EditCourseStructureProps) {
                                 </Form.Control>
                             </FormField>
 
+                            <FormField name="thumbnail">
+                                <FormLabelAndMessage label='Thumbnail' />
+                                <Form.Control asChild>
+                                    <ThumbnailUpdate />
+                                </Form.Control>
+                            </FormField>
+
                             <FormField className="flex items-center h-10" name="public">
                                 <div className='flex my-auto items-center'>
                                     <label className="text-black text-[15px] leading-none pr-[15px]" htmlFor="public-course">
diff --git a/apps/web/components/Dashboard/Course/EditCourseGeneral/ThumbnailUpdate.tsx b/apps/web/components/Dashboard/Course/EditCourseGeneral/ThumbnailUpdate.tsx
new file mode 100644
index 00000000..68924b60
--- /dev/null
+++ b/apps/web/components/Dashboard/Course/EditCourseGeneral/ThumbnailUpdate.tsx
@@ -0,0 +1,79 @@
+import { useCourse } from '@components/Contexts/CourseContext';
+import { useOrg } from '@components/Contexts/OrgContext';
+import { getAPIUrl } from '@services/config/config';
+import { updateCourseThumbnail } from '@services/courses/courses';
+import { getCourseThumbnailMediaDirectory } from '@services/media/media';
+import { ArrowBigUpDash, UploadCloud } from 'lucide-react';
+import React from 'react'
+import { mutate } from 'swr';
+
+function ThumbnailUpdate() {
+    const course = useCourse() as any;
+    const org = useOrg() as any;
+    const [localThumbnail, setLocalThumbnail] = React.useState(null) as any;
+    const [isLoading, setIsLoading] = React.useState(false) as any;
+    const [error, setError] = React.useState('') as any;
+
+
+    const handleFileChange = async (event: any) => {
+        const file = event.target.files[0];
+        setLocalThumbnail(file);
+        setIsLoading(true);
+        const res = await updateCourseThumbnail(course.courseStructure.course_uuid, file)
+        mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`);
+        // wait for 1 second to show loading animation
+        await new Promise(r => setTimeout(r, 1500));
+        if (res.success === false) {
+            setError(res.HTTPmessage);
+        } else {
+            setIsLoading(false);
+            setError('');
+        }
+    };
+
+    return (
+        <div className='w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow'>
+            <div className='flex flex-col justify-center items-center h-full'>
+                <div className='flex flex-col justify-center items-center'>
+                    <div className='flex flex-col justify-center items-center'>
+                        {error && (
+                            <div className="flex justify-center bg-red-200 rounded-md text-red-950 space-x-2 items-center p-2 transition-all shadow-sm">
+                                <div className="text-sm font-semibold">{error}</div>
+                            </div>
+                        )}
+                        {localThumbnail ? (
+                            <img src={URL.createObjectURL(localThumbnail)} className={`${isLoading ? 'animate-pulse' : ''} shadow w-[200px] h-[100px] rounded-md`} />
+
+                        ) : (
+                            <img src={`${getCourseThumbnailMediaDirectory(org?.org_uuid, course.courseStructure.course_uuid, course.courseStructure.thumbnail_image)}`} className='shadow w-[200px] h-[100px] rounded-md' />
+                        )}
+
+                    </div>
+                    {isLoading ? (<div className='flex justify-center items-center'>
+                        <input type="file" id="fileInput" style={{ display: 'none' }} onChange={handleFileChange} />
+                        <div
+                            className='font-bold  animate-pulse antialiased items-center bg-green-200 text-gray text-sm rounded-md px-4 py-2 mt-4 flex'
+                        >
+                            <ArrowBigUpDash size={16} className='mr-2' />
+                            <span>Uploading</span>
+                        </div>
+                    </div>) : (
+
+                        <div className='flex justify-center items-center'>
+                            <input type="file" id="fileInput" style={{ display: 'none' }} onChange={handleFileChange} />
+                            <button
+                                className='font-bold antialiased items-center bg-gray-200 text-gray text-sm rounded-md px-4 py-2 mt-4 flex'
+                                onClick={() => document.getElementById('fileInput')?.click()}
+                            >
+                                <UploadCloud size={16} className='mr-2' />
+                                <span>Change Thumbnail</span>
+                            </button>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ThumbnailUpdate
\ No newline at end of file
diff --git a/apps/web/components/Dashboard/UI/CourseOverviewTop.tsx b/apps/web/components/Dashboard/UI/CourseOverviewTop.tsx
index e0f409cf..eff4d4a0 100644
--- a/apps/web/components/Dashboard/UI/CourseOverviewTop.tsx
+++ b/apps/web/components/Dashboard/UI/CourseOverviewTop.tsx
@@ -23,7 +23,7 @@ export function CourseOverviewTop({ params }: { params: CourseOverviewParams })
             <div className='flex'>
                 <div className='flex py-5 grow items-center'>
                     <Link href={getUriWithOrg(org?.slug, "") + `/course/${params.courseuuid}`}>
-                        {course?.courseStructure?.thumbnail ?
+                        {course?.courseStructure?.thumbnail_image ?
                         <img className="w-[100px] h-[57px] rounded-md drop-shadow-md" src={`${getCourseThumbnailMediaDirectory(org?.org_uuid, "course_" + params.courseuuid, course.courseStructure.thumbnail_image)}`} alt="" />
                         :
                         <Image width={100} className="h-[57px] rounded-md drop-shadow-md" src={EmptyThumbnailImage} alt="" />}
diff --git a/apps/web/services/courses/courses.ts b/apps/web/services/courses/courses.ts
index 5e2efae1..200557de 100644
--- a/apps/web/services/courses/courses.ts
+++ b/apps/web/services/courses/courses.ts
@@ -1,5 +1,5 @@
 import { getAPIUrl } from "@services/config/config";
-import { RequestBody, RequestBodyForm, RequestBodyWithAuthHeader, errorHandling } from "@services/utils/ts/requests";
+import { RequestBody, RequestBodyForm, RequestBodyWithAuthHeader, errorHandling, getResponseMetadata } from "@services/utils/ts/requests";
 
 /*
  This file includes only POST, PUT, DELETE requests
@@ -36,6 +36,14 @@ export async function getCourse(course_uuid: string, next: any) {
   return res;
 }
 
+export async function updateCourseThumbnail(course_uuid: any, thumbnail: any) {
+  const formData = new FormData();
+  formData.append("thumbnail", thumbnail);
+  const result: any = await fetch(`${getAPIUrl()}courses/${course_uuid}/thumbnail`, RequestBodyForm("PUT", formData, null));
+  const res = await getResponseMetadata(result);
+  return res;
+}
+
 export async function createNewCourse(org_id: string, course_body: any, thumbnail: any) {
   // Send file thumbnail as form data
   const formData = new FormData();
@@ -45,7 +53,7 @@ export async function createNewCourse(org_id: string, course_body: any, thumbnai
   formData.append("learnings", course_body.tags);
   formData.append("tags", course_body.tags);
   formData.append("about", course_body.description);
-  
+
   if (thumbnail) {
     formData.append("thumbnail", thumbnail);
   }
diff --git a/apps/web/services/utils/ts/requests.ts b/apps/web/services/utils/ts/requests.ts
index 3b3761fa..f3ae4f06 100644
--- a/apps/web/services/utils/ts/requests.ts
+++ b/apps/web/services/utils/ts/requests.ts
@@ -75,6 +75,15 @@ export const errorHandling = (res: any) => {
   return res.json();
 };
 
+export const getResponseMetadata = async (fetch_result: any) => {
+  const json = await fetch_result.json();
+  if (fetch_result.status === 200) {
+    return { success: true, data: json, status: fetch_result.status, HTTPmessage: fetch_result.statusText };
+  } else {
+    return { success: false, data: json, status: fetch_result.status, HTTPmessage: fetch_result.statusText };
+  }
+};
+
 export const revalidateTags = async (tags: string[], orgslug: string) => {
   const url = getUriWithOrg(orgslug, "");
   tags.forEach((tag) => {