fix: course major fixes (#348)

fix: major fixes
Selleo · Jan 9, 2025 · 039eaa7 · 039eaa7
1 parent 9f031eb
commit 039eaa7
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 78 deletions.
diff --git a/apps/web/app/components/RichText/toolbar/EditorToolbar.tsx b/apps/web/app/components/RichText/toolbar/EditorToolbar.tsx
@@ -11,7 +11,7 @@ import {
   Undo,
 } from "lucide-react";
 
-import { Toggle } from "~/components/ui/toggle";
+import { Button } from "~/components/ui/button";
 import { ToggleGroup, Toolbar } from "~/components/ui/toolbar";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
 
@@ -24,157 +24,138 @@ type EditorToolbarProps = {
 };
 
 const EditorToolbar = ({ editor }: EditorToolbarProps) => {
-  const checkIsWordSelected = () => {
-    const { from, to } = editor.state.selection;
-    const selectedText = editor.state.doc.textBetween(from, to);
-
-    return selectedText === "[word]";
+  const handleToggle = (action: () => void) => (event: React.MouseEvent) => {
+    event.preventDefault();
+    action();
   };
 
-  const isWordSelected = checkIsWordSelected();
-
   return (
     <Toolbar className="m-0 flex items-center justify-between p-2" aria-label="Formatting options">
       <TooltipProvider>
         <ToggleGroup className="flex flex-row items-center gap-x-1" type="multiple">
           <Tooltip>
             <TooltipTrigger>
-              <Toggle
+              <Button
                 size="sm"
-                onPressedChange={() => editor.chain().focus().toggleBold().run()}
-                disabled={!editor.can().chain().focus().toggleBold().run()}
-                pressed={editor.isActive("bold")}
+                className={`bg-transparent text-black ${editor.isActive("bold") ? "bg-blue-100" : "hover:bg-blue-100"}`}
+                onClick={handleToggle(() => editor.chain().focus().toggleBold().run())}
               >
                 <Bold className="h-4 w-4" />
-                <TooltipContent>Bold: Makes selected text bold</TooltipContent>
-              </Toggle>
+              </Button>
             </TooltipTrigger>
+            <TooltipContent>Bold: Makes selected text bold</TooltipContent>
           </Tooltip>
+
           <Tooltip>
             <TooltipTrigger>
-              <Toggle
+              <Button
                 size="sm"
-                onPressedChange={() => editor.chain().focus().toggleItalic().run()}
-                disabled={!editor.can().chain().focus().toggleItalic().run()}
-                pressed={editor.isActive("italic")}
-                value="italic"
+                className={`bg-transparent text-black ${editor.isActive("italic") ? "bg-blue-100" : "hover:bg-blue-100"}`}
+                onClick={handleToggle(() => editor.chain().focus().toggleItalic().run())}
               >
                 <Italic className="h-4 w-4" />
-              </Toggle>
+              </Button>
             </TooltipTrigger>
             <TooltipContent>Italic: Italicizes the selected text</TooltipContent>
           </Tooltip>
+
           <Tooltip>
             <TooltipTrigger>
-              <Toggle
+              <Button
                 size="sm"
-                onPressedChange={() => editor.chain().focus().toggleStrike().run()}
-                disabled={!editor.can().chain().focus().toggleStrike().run()}
-                pressed={editor.isActive("strike")}
+                className={`bg-transparent text-black ${editor.isActive("strike") ? "bg-blue-100" : "hover:bg-blue-100"}`}
+                onClick={handleToggle(() => editor.chain().focus().toggleStrike().run())}
               >
                 <Strikethrough className="h-4 w-4" />
-              </Toggle>
+              </Button>
             </TooltipTrigger>
             <TooltipContent>Strikethrough: Adds a line through the text</TooltipContent>
           </Tooltip>
+
           <Tooltip>
             <TooltipTrigger>
-              <Toggle
+              <Button
                 size="sm"
-                onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
-                pressed={editor.isActive("bulletList")}
+                className={`bg-transparent text-black ${editor.isActive("bulletList") ? "bg-blue-100" : "hover:bg-blue-100"}`}
+                onClick={handleToggle(() => editor.chain().focus().toggleBulletList().run())}
               >
                 <List className="h-4 w-4" />
-              </Toggle>
+              </Button>
             </TooltipTrigger>
             <TooltipContent>Bullet List: Starts a bulleted list</TooltipContent>
           </Tooltip>
+
           <Tooltip>
             <TooltipTrigger>
-              <Toggle
+              <Button
                 size="sm"
-                onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
-                pressed={editor.isActive("orderedList")}
+                className={`bg-transparent text-black ${editor.isActive("orderedList") ? "bg-blue-100" : "hover:bg-blue-100"}`}
+                onClick={handleToggle(() => editor.chain().focus().toggleOrderedList().run())}
               >
                 <ListOrdered className="h-4 w-4" />
-              </Toggle>
+              </Button>
             </TooltipTrigger>
             <TooltipContent>Ordered List: Starts a numbered list</TooltipContent>
           </Tooltip>
+
           <Tooltip>
             <TooltipTrigger>
-              <Toggle
+              <Button
                 size="sm"
-                onPressedChange={() => editor.chain().focus().toggleCodeBlock().run()}
-                pressed={editor.isActive("codeBlock")}
+                className={`bg-transparent text-black ${editor.isActive("codeBlock") ? "bg-blue-100" : "hover:bg-blue-100"}`}
+                onClick={handleToggle(() => editor.chain().focus().toggleCodeBlock().run())}
               >
                 <Code className="h-4 w-4" />
-              </Toggle>
+              </Button>
             </TooltipTrigger>
             <TooltipContent>Code Block: Formats text as code</TooltipContent>
           </Tooltip>
+
           <Tooltip>
             <TooltipTrigger>
-              <Toggle
+              <Button
                 size="sm"
-                onPressedChange={() => editor.chain().focus().toggleBlockquote().run()}
-                pressed={editor.isActive("blockquote")}
+                className={`bg-transparent text-black ${editor.isActive("blockquote") ? "bg-blue-100" : "hover:bg-blue-100"}`}
+                onClick={handleToggle(() => editor.chain().focus().toggleBlockquote().run())}
               >
                 <Quote className="h-4 w-4" />
-              </Toggle>
+              </Button>
             </TooltipTrigger>
             <TooltipContent>Quote: Formats text as a blockquote</TooltipContent>
           </Tooltip>
           <Tooltip>
             <TooltipTrigger>
-              <Toggle
+              <Button
                 size="sm"
-                onPressedChange={() => editor.chain().focus().setHorizontalRule().run()}
+                onClick={handleToggle(() => editor.chain().focus().setHorizontalRule().run())}
+                className={`bg-transparent text-black hover:bg-blue-100`}
               >
                 <Minus className="h-4 w-4" />
-              </Toggle>
+              </Button>
             </TooltipTrigger>
             <TooltipContent>Horizontal Rule: Inserts a horizontal line</TooltipContent>
           </Tooltip>
-          <Tooltip>
-            <TooltipTrigger>
-              <Toggle
-                size="sm"
-                onPressedChange={() => {
-                  const { from, to } = editor.state.selection;
-
-                  if (from !== to) {
-                    editor.chain().focus().insertContentAt({ from, to }, "[word]").run();
-                  }
-                }}
-                pressed={isWordSelected}
-              >
-                [w]
-              </Toggle>
-            </TooltipTrigger>
-            <TooltipContent>Word: Wraps selected text with [word]</TooltipContent>
-          </Tooltip>
           <FormatType editor={editor} />
         </ToggleGroup>
         <ToggleGroup
           className="flex flex-row gap-x-1 items-center invisible sm:visible"
           type="multiple"
         >
-          <Toggle
+          <Button
             size="sm"
-            onPressedChange={() => editor.chain().focus().undo().run()}
-            disabled={!editor.can().chain().focus().undo().run()}
+            onClick={handleToggle(() => editor.chain().focus().undo().run())}
+            className={`bg-transparent text-black ${editor.can().chain().focus().undo().run() ? "hover:bg-blue-100" : ""}`}
           >
             <Undo className="h-4 w-4" />
-          </Toggle>
+          </Button>
 
-          <Toggle
+          <Button
             size="sm"
-            onPressedChange={() => editor.chain().focus().redo().run()}
-            disabled={!editor.can().chain().focus().redo().run()}
+            onClick={handleToggle(() => editor.chain().focus().redo().run())}
+            className={`bg-transparent text-black ${editor.can().chain().focus().redo().run() ? "hover:bg-blue-100" : ""}`}
           >
             <Redo className="h-4 w-4" />
-          </Toggle>
+          </Button>
         </ToggleGroup>
       </TooltipProvider>
     </Toolbar>

diff --git a/apps/web/app/modules/Admin/AddCourse/AddCourse.tsx b/apps/web/app/modules/Admin/AddCourse/AddCourse.tsx
@@ -1,3 +1,4 @@
+import { useNavigate } from "@remix-run/react";
 import { useCallback, useState } from "react";
 
 import { useUploadFile } from "~/api/mutations/admin/useUploadFile";
@@ -29,6 +30,7 @@ const AddCourse = () => {
   const watchedImageUrl = form.watch("thumbnailUrl");
   const thumbnailUrl = form.getValues("thumbnailUrl");
   const maxDescriptionFieldLength = 800;
+  const navigate = useNavigate();
 
   const watchedDescriptionLength = form.watch("description").length;
   const descriptionFieldCharactersLeft = maxDescriptionFieldLength - watchedDescriptionLength;
@@ -181,7 +183,11 @@ const AddCourse = () => {
 
             <div className="pb-5">
               <div className="flex space-x-5 mt-5 mb-10">
-                <Button className="bg-white text-primary-800 border-2 rounded px-6 py-2">
+                <Button
+                  type="button"
+                  className="bg-white text-primary-800 border-2 rounded px-6 py-2"
+                  onClick={() => navigate("/admin/courses")}
+                >
                   Cancel
                 </Button>
                 <Button

diff --git a/.../EditCourse/CourseLessons/NewLesson/QuizLessonForm/components/FillInTheBlanksQuestion.tsx b/.../EditCourse/CourseLessons/NewLesson/QuizLessonForm/components/FillInTheBlanksQuestion.tsx
@@ -362,7 +362,7 @@ const FillInTheBlanksQuestion = ({ form, questionIndex }: FillInTheBlankQuestion
             </div>
             <>
               {errors?.questions?.[questionIndex] && (
-                <p className="text-red-500 text-sm ml-">
+                <p className="text-red-500 text-sm">
                   {errors?.questions?.[questionIndex]?.options?.message}
                 </p>
               )}

diff --git a/...ules/Admin/EditCourse/CourseLessons/NewLesson/QuizLessonForm/components/ScaleQuestion.tsx b/...ules/Admin/EditCourse/CourseLessons/NewLesson/QuizLessonForm/components/ScaleQuestion.tsx
@@ -98,7 +98,7 @@ const ScaleQuestion = ({ form, questionIndex }: ScaleQuestionProps) => {
                 className="grid grid-cols-1"
                 renderItem={(item, index: number) => (
                   <SortableList.Item id={item.displayOrder}>
-                    <div className="border border-neutral-200 p-2 pr-3 rounded-xl flex items-center space-x-2">
+                    <div className="border mt-2 border-neutral-200 p-2 pr-3 rounded-xl flex items-center space-x-2">
                       <SortableList.DragHandle>
                         <Icon name="DragAndDropIcon" className="cursor-move ml-4 mr-3" />
                       </SortableList.DragHandle>

diff --git a/...dmin/EditCourse/CourseLessons/NewLesson/QuizLessonForm/validators/quizLessonFormSchema.ts b/...dmin/EditCourse/CourseLessons/NewLesson/QuizLessonForm/validators/quizLessonFormSchema.ts
@@ -82,11 +82,10 @@ export const quizLessonFormSchema = z.object({
             code: z.ZodIssueCode.custom,
           });
         }
-
         if (
           (question.type === QuestionType.FILL_IN_THE_BLANKS_DND ||
             question.type === QuestionType.FILL_IN_THE_BLANKS_TEXT) &&
-          question.options?.some((option) => option.isCorrect !== true)
+          (!question.options || !question.options.some((option) => option.isCorrect === true))
         ) {
           ctx.addIssue({
             path: [index, "options"],

diff --git a/...eb/app/modules/Admin/EditCourse/CourseLessons/NewLesson/TextLessonForm/TextLessonForm.tsx b/...eb/app/modules/Admin/EditCourse/CourseLessons/NewLesson/TextLessonForm/TextLessonForm.tsx
@@ -14,7 +14,6 @@ import { useTextLessonForm } from "./hooks/useTextLessonForm";
 
 import type { Chapter, Lesson } from "../../../EditCourse.types";
 
-
 type TextLessonProps = {
   setContentTypeToDisplay: (contentTypeToDisplay: string) => void;
   chapterToEdit: Chapter | null;
@@ -88,7 +87,6 @@ const TextLessonForm = ({
                     {...field}
                   />
                 </FormControl>
-                <FormMessage />
               </FormItem>
             )}
           />

diff --git a/apps/web/app/modules/Admin/EditCourse/CourseSettings/CourseSettings.tsx b/apps/web/app/modules/Admin/EditCourse/CourseSettings/CourseSettings.tsx
@@ -55,6 +55,10 @@ const CourseSettings = ({
   const watchedTitle = form.watch("title");
   const watchedDescription = form.watch("description");
   const watchedCategoryId = form.getValues("categoryId");
+  const maxDescriptionFieldLength = 800;
+
+  const watchedDescriptionLength = watchedDescription.length;
+  const descriptionFieldCharactersLeft = maxDescriptionFieldLength - watchedDescriptionLength;
 
   const categoryName = useMemo(() => {
     return categories.find((category) => category.id === watchedCategoryId)?.title;
@@ -128,7 +132,15 @@ const CourseSettings = ({
                 name="description"
                 label="Description"
                 required
+                maxLength={maxDescriptionFieldLength}
               />
+              {descriptionFieldCharactersLeft <= 0 ? (
+                <p className="text-red-500 text-sm">You have reached the character limit.</p>
+              ) : (
+                <p className="text-neutral-800 mt-1">
+                  {descriptionFieldCharactersLeft} characters left
+                </p>
+              )}
               <FormField
                 control={form.control}
                 name="thumbnailS3Key"

diff --git a/apps/web/app/modules/Admin/EditCourse/compontents/CourseCardPreview.tsx b/apps/web/app/modules/Admin/EditCourse/compontents/CourseCardPreview.tsx
@@ -43,7 +43,7 @@ const CourseCardPreview = ({ imageUrl, title, description, category }: CourseCar
                 dangerouslySetInnerHTML={{ __html: description || "No description yet." }}
               />
               <div className="flex justify-center w-full mt-5">
-                <Button className="mt-4 mx-auto w-3/4">Enroll</Button>
+                <Button className="mt-4 mx-auto w-3/4 cursor-default">Enroll</Button>
               </div>
             </CardContent>
           </Card>