From c1a64051e17f5c925523d1f32fb08702c006b558 Mon Sep 17 00:00:00 2001
From: mateuszszczecina <m.szczecina@selleo.com>
Date: Tue, 26 Nov 2024 09:06:09 +0100
Subject: [PATCH] feat: 388 refactor image ulopading input

---
 apps/web/app/assets/svgs/index.ts             |  1 +
 apps/web/app/assets/svgs/trash-icon.svg       |  3 ++
 .../FileUploadInput/ImageUploadInput.tsx      | 33 +++++++++--------
 .../app/modules/Admin/AddCourse/AddCourse.tsx | 36 +++++++++---------
 .../AddCourse/hooks/useAddCourseForm.tsx      |  5 +--
 .../validators/addCourseFormSchema.ts         |  1 -
 .../CourseSettings/CourseSettings.tsx         | 14 ++++---
 .../modules/Admin/EditCourse/EditCourse.tsx   |  6 +--
 .../compontents/CourseCardPreview.tsx         |  6 ++-
 .../EditCourse/compontents/NavigationTabs.tsx | 37 +++++++------------
 10 files changed, 70 insertions(+), 72 deletions(-)
 create mode 100644 apps/web/app/assets/svgs/trash-icon.svg

diff --git a/apps/web/app/assets/svgs/index.ts b/apps/web/app/assets/svgs/index.ts
index 55d89f4d..946e37ed 100644
--- a/apps/web/app/assets/svgs/index.ts
+++ b/apps/web/app/assets/svgs/index.ts
@@ -19,6 +19,7 @@ export { default as User } from "./user.svg?react";
 export { default as Course } from "./course.svg?react";
 export { default as Category } from "./category.svg?react";
 export { default as UploadImageIcon } from "./upload-image.svg?react";
+export { default as TrashIcon } from "./trash-icon.svg?react";
 export { default as Lesson } from "./lesson.svg?react";
 export { default as LessonContent } from "./lesson-content.svg?react";
 export { default as Email } from "./email.svg?react";
diff --git a/apps/web/app/assets/svgs/trash-icon.svg b/apps/web/app/assets/svgs/trash-icon.svg
new file mode 100644
index 00000000..3712b71c
--- /dev/null
+++ b/apps/web/app/assets/svgs/trash-icon.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.3355 3.2485H1.66443M8.31303 6.24975V10.0013M5.68694 6.24975V10.0013M9.36192 13.0026H4.63805C3.85392 13.0026 3.20199 12.3988 3.14184 11.617L2.49811 3.2485H11.5019L10.8581 11.617C10.798 12.3988 10.1461 13.0026 9.36192 13.0026ZM5.1242 0.997559H8.87577C9.29015 0.997559 9.62608 1.33348 9.62608 1.74787V3.2485H4.37389V1.74787C4.37389 1.33348 4.70982 0.997559 5.1242 0.997559Z" stroke="#FCFCFC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/apps/web/app/components/FileUploadInput/ImageUploadInput.tsx b/apps/web/app/components/FileUploadInput/ImageUploadInput.tsx
index 2b09432d..dd9802d6 100644
--- a/apps/web/app/components/FileUploadInput/ImageUploadInput.tsx
+++ b/apps/web/app/components/FileUploadInput/ImageUploadInput.tsx
@@ -12,24 +12,30 @@ interface ImageUploadProps {
 const ImageUploadInput = ({ field, handleImageUpload, isUploading }: ImageUploadProps) => {
   return (
     <div className="flex items-center justify-center flex-col gap-y-2">
-      <div className="w-full h-[20rem] border-solid border-2 border-gray-300 flex justify-center items-center bg-gray-100 relative cursor-pointer overflow-hidden flex-col">
+      <div className="w-full h-[20rem] rounded-lg border-solid border-2 border-gray-300 flex justify-center items-center bg-gray-100 relative cursor-pointer overflow-hidden flex-col">
         {field.value && (
           <img src={field.value} alt="Uploaded" className="w-full h-full object-cover" />
         )}
+        <div
+          className={`absolute inset-0 flex flex-col items-center justify-center text-center ${
+            field.value ? "text-white" : ""
+          }`}
+        >
+          <Icon name="UploadImageIcon" />
 
-        {!field.value && (
-          <div>
-            <Icon name="UploadImageIcon" />
+          <div className="flex items-center justify-center mt-2">
+            <span className={`text-lg font-semibold text-[#7CA3DE]`}>
+              {field.value ? "Click to replace" : "Click to upload"}
+            </span>
+            <span className="ml-2 text-lg font-semibold">or drag and drop</span>
           </div>
-        )}
 
-        {!field.value && (
-          <div className="flex items-center justify-center">
-            <span className="text-blue-500 text-lg font-semibold">Click to upload</span>
-            <span className="text-black text-lg font-semibold ml-2">or drag and drop</span>
+          <div
+            className={`text-sm w-full px-2 mt-2 ${field.value ? "text-white" : "text-gray-600"}`}
+          >
+            {field.value ? "SVG, PNG, JPG (max. to 20MB)" : "SVG, PNG, JPG or GIF (max. 800x400px)"}
           </div>
-        )}
-
+        </div>
         <input
           type="file"
           accept="image/*"
@@ -42,11 +48,6 @@ const ImageUploadInput = ({ field, handleImageUpload, isUploading }: ImageUpload
           disabled={isUploading}
           className="absolute inset-0 opacity-0 cursor-pointer"
         />
-        {!field.value && (
-          <div className="text-center mt-2 text-gray-600 text-sm w-full px-2">
-            SVG, PNG, JPG or GIF (max. 20MB)
-          </div>
-        )}
       </div>
     </div>
   );
diff --git a/apps/web/app/modules/Admin/AddCourse/AddCourse.tsx b/apps/web/app/modules/Admin/AddCourse/AddCourse.tsx
index 6732eff8..861f29c0 100644
--- a/apps/web/app/modules/Admin/AddCourse/AddCourse.tsx
+++ b/apps/web/app/modules/Admin/AddCourse/AddCourse.tsx
@@ -8,7 +8,6 @@ import ImageUploadInput from "~/components/FileUploadInput/ImageUploadInput";
 import { Icon } from "~/components/Icon";
 import Editor from "~/components/RichText/Editor";
 import { Button } from "~/components/ui/button";
-import { Card } from "~/components/ui/card";
 import { Form, FormControl, FormField, FormItem, FormMessage } from "~/components/ui/form";
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
@@ -28,7 +27,7 @@ const AddCourse = () => {
   const { data: categories } = useCategoriesSuspense();
   const [isUploading, setIsUploading] = useState(false);
   const { mutateAsync: uploadFile } = useUploadFile();
-  const { isValid: isFormValid, isDirty } = form.formState;
+  const { isValid: isFormValid } = form.formState;
   const watchedImageUrl = form.watch("imageUrl");
   const imageUrl = form.getValues("imageUrl");
 
@@ -49,12 +48,10 @@ const AddCourse = () => {
 
   return (
     <div className="flex h-screen bg-white">
-      <div className="w-2/5 flex items-center justify-center">
-        <Card className="bg-gray-100 p-6 rounded-lg shadow-md w-4/5 h-[65rem] flex items-center justify-center">
-          <img src={SplashScreenImage} alt="splashScreenImage" className="rounded" />
-        </Card>
+      <div className="w-1/2 flex items-center justify-center">
+        <img src={SplashScreenImage} alt="splashScreenImage" className="rounded" />
       </div>
-      <div className="w-3/5 mt-[6.5rem]">
+      <div className="w-1/2 mt-[1rem]">
         <Button
           onClick={() => navigate("/admin/courses")}
           className="border-2 border-beige-500 bg-white text-blue-500 py-2 px-6 rounded"
@@ -162,21 +159,26 @@ const AddCourse = () => {
             {watchedImageUrl && (
               <Button
                 onClick={() => form.setValue("imageUrl", "")}
-                className="bg-red-500 text-white py-2 px-6 rounded mb-4"
+                className="bg-red-500 text-white py-2 px-6 rounded mb-4 mt-4"
               >
+                <Icon name="TrashIcon" className="mr-2" />
                 Remove Thumbnail
               </Button>
             )}
 
-            <div className="flex space-x-5 mt-5">
-              <Button className="bg-white text-blue-500 border-2 rounded px-6 py-2">Cancel</Button>
-              <Button
-                type="submit"
-                className="bg-blue-500 text-white rounded px-6 py-2"
-                disabled={isFormValid || isUploading || !isDirty}
-              >
-                Proceed
-              </Button>
+            <div className="pb-5">
+              <div className="flex space-x-5 mt-5 mb-10">
+                <Button className="bg-white text-blue-500 border-2 rounded px-6 py-2">
+                  Cancel
+                </Button>
+                <Button
+                  type="submit"
+                  className="bg-blue-500 text-white rounded px-6 py-2"
+                  disabled={!isFormValid || isUploading}
+                >
+                  Proceed
+                </Button>
+              </div>
             </div>
           </form>
         </Form>
diff --git a/apps/web/app/modules/Admin/AddCourse/hooks/useAddCourseForm.tsx b/apps/web/app/modules/Admin/AddCourse/hooks/useAddCourseForm.tsx
index c899d764..86f5a55b 100644
--- a/apps/web/app/modules/Admin/AddCourse/hooks/useAddCourseForm.tsx
+++ b/apps/web/app/modules/Admin/AddCourse/hooks/useAddCourseForm.tsx
@@ -17,7 +17,6 @@ export const useAddCourseForm = () => {
     defaultValues: {
       title: "",
       description: "",
-      state: "draft",
       categoryId: "",
       imageUrl: "",
     },
@@ -25,10 +24,10 @@ export const useAddCourseForm = () => {
 
   const onSubmit = (values: AddCourseFormValues) => {
     createCourse({
-      data: { ...values },
+      data: { ...values, state: "draft" },
     }).then(({ data }) => {
       queryClient.invalidateQueries({ queryKey: ALL_COURSES_QUERY_KEY });
-      navigate(`/admin/courses/${data.id}`);
+      navigate(`/admin/beta-courses/${data.id}`);
     });
   };
 
diff --git a/apps/web/app/modules/Admin/AddCourse/validators/addCourseFormSchema.ts b/apps/web/app/modules/Admin/AddCourse/validators/addCourseFormSchema.ts
index 5535fc7c..8ded61a7 100644
--- a/apps/web/app/modules/Admin/AddCourse/validators/addCourseFormSchema.ts
+++ b/apps/web/app/modules/Admin/AddCourse/validators/addCourseFormSchema.ts
@@ -3,7 +3,6 @@ import { z } from "zod";
 export const addCourseFormSchema = z.object({
   title: z.string().min(2, "Title must be at least 2 characters."),
   description: z.string().min(2, "Description must be at least 2 characters."),
-  state: z.enum(["draft", "published"]),
   categoryId: z.string().min(1, "Category is required"),
   imageUrl: z.union([z.string().url("Invalid image URL"), z.string().length(0)]).optional(),
 });
diff --git a/apps/web/app/modules/Admin/EditCourse/CourseSettings/CourseSettings.tsx b/apps/web/app/modules/Admin/EditCourse/CourseSettings/CourseSettings.tsx
index b74e2e3b..c71d2402 100644
--- a/apps/web/app/modules/Admin/EditCourse/CourseSettings/CourseSettings.tsx
+++ b/apps/web/app/modules/Admin/EditCourse/CourseSettings/CourseSettings.tsx
@@ -4,6 +4,7 @@ import { useCallback, useMemo, useState } from "react";
 import { useUploadFile } from "~/api/mutations/admin/useUploadFile";
 import { useCategoriesSuspense } from "~/api/queries/useCategories";
 import ImageUploadInput from "~/components/FileUploadInput/ImageUploadInput";
+import { Icon } from "~/components/Icon";
 import Editor from "~/components/RichText/Editor";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader } from "~/components/ui/card";
@@ -68,7 +69,7 @@ const CourseSettings = ({ title, description, categoryId, imageUrl }: CourseSett
 
   return (
     <div className="w-full flex gap-4 ">
-      <Card className="p-6 shadow-md border border-gray-200 w-7/10 flex-grow">
+      <Card className="p-4 shadow-md border border-gray-200 w-7/10 flex-grow">
         <CardHeader>
           <h5 className="text-xl font-semibold">Basic settings</h5>
         </CardHeader>
@@ -82,8 +83,8 @@ const CourseSettings = ({ title, description, categoryId, imageUrl }: CourseSett
                 render={({ field }) => (
                   <FormItem>
                     <Label htmlFor="title" className="text-right">
-                      <span className="text-red-500">*</span>
-                      Course title
+                      <span className="text-red-500 mr-1">*</span>
+                      Title
                     </Label>
                     <FormControl>
                       <Input id="title" {...field} required />
@@ -98,7 +99,7 @@ const CourseSettings = ({ title, description, categoryId, imageUrl }: CourseSett
                 render={({ field }) => (
                   <FormItem className="mt-5">
                     <Label htmlFor="description" className="text-right">
-                      <span className="text-red-500">*</span>
+                      <span className="text-red-500 mr-1">*</span>
                       Description
                     </Label>
                     <FormControl>
@@ -120,7 +121,7 @@ const CourseSettings = ({ title, description, categoryId, imageUrl }: CourseSett
                 render={({ field }) => (
                   <FormItem className="flex-1 mt-5">
                     <Label htmlFor="categoryId" className="text-right">
-                      <span className="text-red-500">*</span>
+                      <span className="text-red-500 mr-1">*</span>
                       Category
                     </Label>
                     <Select onValueChange={field.onChange} defaultValue={field.value}>
@@ -167,8 +168,9 @@ const CourseSettings = ({ title, description, categoryId, imageUrl }: CourseSett
                 {watchedImageUrl && (
                   <Button
                     onClick={() => form.setValue("imageUrl", "")}
-                    className="bg-red-500 text-white py-2 px-6 rounded mb-4"
+                    className="bg-red-500 text-white py-2 px-6 rounded mb-4 mt-4"
                   >
+                    <Icon name="TrashIcon" className="mr-2" />
                     Remove Thumbnail
                   </Button>
                 )}
diff --git a/apps/web/app/modules/Admin/EditCourse/EditCourse.tsx b/apps/web/app/modules/Admin/EditCourse/EditCourse.tsx
index 4d93850b..9dee7fd6 100644
--- a/apps/web/app/modules/Admin/EditCourse/EditCourse.tsx
+++ b/apps/web/app/modules/Admin/EditCourse/EditCourse.tsx
@@ -12,7 +12,7 @@ import type { NavigationTab } from "./EditCourse.types";
 const Lesson = () => (
   <Card className="p-6 shadow-md border border-gray-200">
     <CardHeader>
-      <h5 className="text-xl font-semibold">Lesson</h5>
+      <h5 className="text-xl font-semibold">Curriculum</h5>
     </CardHeader>
     <CardContent>
       <p>Here you can add and manage lessons for your course.</p>
@@ -82,8 +82,8 @@ const EditCourse = () => {
     <div className="p-6">
       <Card className="shadow-md border border-gray-200">
         <CardHeader>
-          <h4 className="text-neutral-950 text-2xl font-bold leading-10 pb-1 mb-1">
-            Create new course
+          <h4 className="text-neutral-950 text-2xl font-bold leading-10 pb-1">
+            {course?.title || ""}
           </h4>
         </CardHeader>
         <CardContent>
diff --git a/apps/web/app/modules/Admin/EditCourse/compontents/CourseCardPreview.tsx b/apps/web/app/modules/Admin/EditCourse/compontents/CourseCardPreview.tsx
index 3c493048..b0c5c0ec 100644
--- a/apps/web/app/modules/Admin/EditCourse/compontents/CourseCardPreview.tsx
+++ b/apps/web/app/modules/Admin/EditCourse/compontents/CourseCardPreview.tsx
@@ -1,6 +1,7 @@
 import DefaultCoursePhoto from "~/assets/default-photo-course.svg";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader } from "~/components/ui/card";
+import { UserProfile } from "~/modules/Dashboard/DashboardNavigation/UserProfile";
 
 type CourseCardPreviewProps = {
   imageUrl?: string;
@@ -34,11 +35,12 @@ const CourseCardPreview = ({ imageUrl, title, description, category }: CourseCar
             </CardHeader>
             <CardContent className="flex flex-col justify-between p-3">
               <h1 className="font-bold text-left break-words">{title || "Untitled"}</h1>
+              <UserProfile />
               <div
-                className="description text-left break-words mt-10 line-clamp-3 text-gray-500"
+                className="description text-left break-words line-clamp-3 text-gray-500"
                 dangerouslySetInnerHTML={{ __html: description || "No description yet." }}
               />
-              <div className="flex justify-center w-full mt-10">
+              <div className="flex justify-center w-full mt-5">
                 <Button className="mt-4 mx-auto w-3/4">Enroll</Button>
               </div>
             </CardContent>
diff --git a/apps/web/app/modules/Admin/EditCourse/compontents/NavigationTabs.tsx b/apps/web/app/modules/Admin/EditCourse/compontents/NavigationTabs.tsx
index f13a92c6..755dbcc7 100644
--- a/apps/web/app/modules/Admin/EditCourse/compontents/NavigationTabs.tsx
+++ b/apps/web/app/modules/Admin/EditCourse/compontents/NavigationTabs.tsx
@@ -6,6 +6,15 @@ type NavigationTabsProps = {
   setNavigationTabState: (navigationTabState: NavigationTab) => void;
 };
 
+const TabTrigger = ({ value, children }: { value: string; children: React.ReactNode }) => (
+  <Tabs.Trigger
+    className="text-gray-700 hover:text-black text-lg px-4 py-2 data-[state=active]:border-b-2 data-[state=active]:border-black"
+    value={value}
+  >
+    {children}
+  </Tabs.Trigger>
+);
+
 const NavigationTabs = ({ setNavigationTabState }: NavigationTabsProps) => {
   const handleValueChange = (value: string) => {
     setNavigationTabState(value as NavigationTab);
@@ -14,30 +23,10 @@ const NavigationTabs = ({ setNavigationTabState }: NavigationTabsProps) => {
   return (
     <Tabs.Root className="flex flex-col" defaultValue="Settings" onValueChange={handleValueChange}>
       <Tabs.List className="flex items-center gap-5 border-b border-gray-200">
-        <Tabs.Trigger
-          className="text-gray-700 hover:text-black text-lg px-4 py-2 data-[state=active]:border-b-2 data-[state=active]:border-black"
-          value="Settings"
-        >
-          Settings
-        </Tabs.Trigger>
-        <Tabs.Trigger
-          className="text-gray-700 hover:text-black text-lg px-4 py-2 data-[state=active]:border-b-2 data-[state=active]:border-black"
-          value="Lesson"
-        >
-          Lesson
-        </Tabs.Trigger>
-        <Tabs.Trigger
-          className="text-gray-700 hover:text-black text-lg px-4 py-2 data-[state=active]:border-b-2 data-[state=active]:border-black"
-          value="Pricing"
-        >
-          Pricing
-        </Tabs.Trigger>
-        <Tabs.Trigger
-          className="text-gray-700 hover:text-black text-lg px-4 py-2 data-[state=active]:border-b-2 data-[state=active]:border-black"
-          value="Status"
-        >
-          Status
-        </Tabs.Trigger>
+        <TabTrigger value="Settings">Settings</TabTrigger>
+        <TabTrigger value="Lesson">Curriculum</TabTrigger>
+        <TabTrigger value="Pricing">Pricing</TabTrigger>
+        <TabTrigger value="Status">Status</TabTrigger>
       </Tabs.List>
     </Tabs.Root>
   );