chore: improve validations for editing after publish

- updated validations for playbook and play creation - improved form descriptions - cleaned up styles for consistency on teacher flow again Fixes #284
and-voila · Nov 3, 2023 · 28b3cc9 · 28b3cc9
1 parent 063bba8
commit 28b3cc9
Show file tree

Hide file tree

Showing 21 changed files with 153 additions and 75 deletions.
diff --git a/...board)/(learn)/learn/(dashboard)/teacher/courses/[courseId]/chapters/[chapterId]/page.tsx b/...board)/(learn)/learn/(dashboard)/teacher/courses/[courseId]/chapters/[chapterId]/page.tsx
@@ -62,7 +62,7 @@ const ChapterIdPage = async ({
               href={`/learn/teacher/courses/${params.courseId}`}
               className="mb-6 flex items-center text-sm transition hover:opacity-75"
             >
-              <Icons.arrowLeft className="mr-2 h-4 w-4" />
+              <Icons.arrowLeft className="mr-2 h-4 w-4 text-brand" />
               Back to playbook setup
             </Link>
             <div className="flex w-full items-center justify-between">

diff --git a/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/teacher/courses/[courseId]/page.tsx b/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/teacher/courses/[courseId]/page.tsx
@@ -57,7 +57,7 @@ const CourseIdPage = async ({ params }: { params: { courseId: string } }) => {
     course.preview,
     course.description,
     course.imageUrl,
-    course.price,
+    course.price !== null && course.price !== undefined,
     course.categoryId,
     course.chapters.some((chapter) => chapter.isPublished),
   ];
@@ -77,7 +77,7 @@ const CourseIdPage = async ({ params }: { params: { courseId: string } }) => {
       <div className="p-6">
         <div className="flex items-center justify-between">
           <div className="flex flex-col gap-y-2">
-            <h1 className="font-display tracking-tight text-2xl">
+            <h1 className="font-display tracking-tight text-3xl">
               Playbook setup
             </h1>
             <span className="text-base text-muted-foreground">

diff --git a/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/teacher/create/page.tsx b/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/teacher/create/page.tsx
@@ -21,9 +21,14 @@ import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 
 const formSchema = z.object({
-  title: z.string().min(1, {
-    message: 'Every playbook needs a title.',
-  }),
+  title: z
+    .string()
+    .min(40, {
+      message: 'Ouch! The playbook title must be at least 40 characters',
+    })
+    .max(65, {
+      message: 'OK but, the playbook title cannot exceed 65 characters.',
+    }),
 });
 
 const CreatePage = () => {
@@ -85,8 +90,8 @@ const CreatePage = () => {
                       {...field}
                     />
                   </FormControl>
-                  <FormDescription>
-                    Use sentence case for your title.
+                  <FormDescription className="text-muted-foreground/70">
+                    Use sentence case for your title between 45-65 characters.
                   </FormDescription>
                   <FormMessage />
                 </FormItem>

diff --git a/apps/lms/app/config/navbar-routes.tsx b/apps/lms/app/config/navbar-routes.tsx
@@ -40,15 +40,15 @@ export const NavbarRoutes = ({ userId }) => {
           </Link>
         ) : null}
       </div>
-      <div className="flex gap-x-4 mr-6 items-center">
+      <div className="flex gap-x-3 mr-3 items-center">
         <ModeToggle />
         <Link
           href="https://discord.com/channels/1151749282806910976/1164902538731069542"
           target="_blank"
           rel="noopener noreferrer"
           aria-label="Navigate to And Voila Discord in a new window."
         >
-          <Icons.discord className="text-brand h-9 w-9" />
+          <Icons.discord className="text-foreground/80 h-6 w-6" />
         </Link>
       </div>
     </>

diff --git a/apps/lms/app/ui/learn/teacher/chapters/chapter-access-form.tsx b/apps/lms/app/ui/learn/teacher/chapters/chapter-access-form.tsx
@@ -71,7 +71,7 @@ export const ChapterAccessForm = ({
     <div className="mt-6 rounded-md border bg-white px-4 py-6 dark:bg-background">
       <div className="flex items-center justify-between font-semibold mb-4">
         Access to the play
-        <Button onClick={toggleEdit} variant="ghost">
+        <Button onClick={toggleEdit} variant="ghost" size="sm">
           {isEditing ? (
             <>Cancel</>
           ) : (

diff --git a/apps/lms/app/ui/learn/teacher/chapters/chapter-actions.tsx b/apps/lms/app/ui/learn/teacher/chapters/chapter-actions.tsx
@@ -86,14 +86,14 @@ export const ChapterActions = ({
       <Button
         onClick={onClick}
         disabled={disabled || isLoading}
-        variant="outline"
+        variant="custom"
         size="sm"
       >
         {isPublished ? 'Unpublish' : 'Publish'}
       </Button>
       <ConfirmModal onConfirm={onDelete}>
-        <Button size="sm" disabled={isLoading}>
-          <TrashIcon className="h-4 w-4" />
+        <Button size="sm" disabled={isLoading} variant="destructive">
+          <TrashIcon className="h-4 w-4 bg-destructive text-white" />
         </Button>
       </ConfirmModal>
     </div>

diff --git a/apps/lms/app/ui/learn/teacher/chapters/chapter-description-form.tsx b/apps/lms/app/ui/learn/teacher/chapters/chapter-description-form.tsx
@@ -7,6 +7,7 @@ import { Button } from '@ui/components/ui/button';
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormMessage,
@@ -29,7 +30,15 @@ interface ChapterDescriptionFormProps {
 }
 
 const formSchema = z.object({
-  description: z.string().min(1),
+  description: z.string().refine(
+    (value) => {
+      const wordCount = value.split(/\s+/).length;
+      return wordCount >= 150;
+    },
+    {
+      message: 'Description must be at least 150 words',
+    },
+  ),
 });
 
 export const ChapterDescriptionForm = ({
@@ -77,7 +86,7 @@ export const ChapterDescriptionForm = ({
     <div className="mt-6 rounded-md border bg-white px-4 py-6 dark:bg-background">
       <div className="flex items-center justify-between font-semibold mb-4">
         Describe the play
-        <Button onClick={toggleEdit} variant="ghost">
+        <Button onClick={toggleEdit} variant="ghost" size="sm">
           {isEditing ? (
             <>Cancel</>
           ) : (
@@ -91,11 +100,11 @@ export const ChapterDescriptionForm = ({
       {!isEditing && (
         <div
           className={cn(
-            'mt-2 text-sm',
-            !initialData.description && 'italic text-slate-500',
+            'mt-2 text-base',
+            !initialData.description && 'italic text-destructive',
           )}
         >
-          {!initialData.description && 'No description'}
+          {!initialData.description && 'No description set'}
           {initialData.description && (
             <Preview value={initialData.description} />
           )}
@@ -115,6 +124,10 @@ export const ChapterDescriptionForm = ({
                   <FormControl>
                     <QuillEditor {...field} />
                   </FormControl>
+                  <FormDescription className="text-muted-foreground/70">
+                    The description should be at least 250 words. Make it
+                    awesome!
+                  </FormDescription>
                   <FormMessage />
                 </FormItem>
               )}

diff --git a/apps/lms/app/ui/learn/teacher/chapters/chapter-title-form.tsx b/apps/lms/app/ui/learn/teacher/chapters/chapter-title-form.tsx
@@ -7,6 +7,7 @@ import { Button } from '@ui/components/ui/button';
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormMessage,
@@ -28,7 +29,14 @@ interface ChapterTitleFormProps {
 }
 
 const formSchema = z.object({
-  title: z.string().min(1),
+  title: z
+    .string()
+    .min(40, {
+      message: "Yo! The play's title needs at least 40 characters.",
+    })
+    .max(65, {
+      message: 'Oops, keep your title under 65 characters please.',
+    }),
 });
 
 export const ChapterTitleForm = ({
@@ -74,8 +82,8 @@ export const ChapterTitleForm = ({
   return (
     <div className="mt-6 rounded-md border bg-white px-4 py-6 dark:bg-background">
       <div className="flex items-center justify-between font-semibold mb-4">
-        Title of the play
-        <Button onClick={toggleEdit} variant="ghost">
+        Play title
+        <Button onClick={toggleEdit} variant="ghost" size="sm">
           {isEditing ? (
             <>Cancel</>
           ) : (
@@ -86,7 +94,11 @@ export const ChapterTitleForm = ({
           )}
         </Button>
       </div>
-      {!isEditing && <p className="mt-2 text-sm">{initialData.title}</p>}
+      {!isEditing && (
+        <p className="mt-2 text-base text-muted-foreground">
+          {initialData.title}
+        </p>
+      )}
       {isEditing && (
         <Form {...form}>
           <form
@@ -105,6 +117,10 @@ export const ChapterTitleForm = ({
                       {...field}
                     />
                   </FormControl>
+                  <FormDescription className="text-muted-foreground/70">
+                    Use sentence case for the title of the play and keep it
+                    between 45-65 characters.
+                  </FormDescription>
                   <FormMessage />
                 </FormItem>
               )}

diff --git a/apps/lms/app/ui/learn/teacher/chapters/chapter-video-form.tsx b/apps/lms/app/ui/learn/teacher/chapters/chapter-video-form.tsx
@@ -59,7 +59,7 @@ export const ChapterVideoForm = ({
     <div className="mt-6 rounded-md border bg-white px-4 py-6 dark:bg-background">
       <div className="flex items-center justify-between font-semibold mb-4">
         Video for the play
-        <Button onClick={toggleEdit} variant="ghost">
+        <Button onClick={toggleEdit} variant="ghost" size="sm">
           {isEditing && <>Cancel</>}
           {!isEditing && !initialData.videoUrl && (
             <>

diff --git a/apps/lms/app/ui/learn/teacher/courses/actions.tsx b/apps/lms/app/ui/learn/teacher/courses/actions.tsx
@@ -88,8 +88,8 @@ export const Actions = ({ disabled, courseId, isPublished }: ActionsProps) => {
         {isPublished ? 'Unpublish' : 'Publish'}
       </Button>
       <ConfirmModal onConfirm={onDelete}>
-        <Button size="sm" disabled={isLoading}>
-          <Icons.trash className="h-4 w-4" />
+        <Button variant="destructive" size="sm" disabled={isLoading}>
+          <Icons.trash className="h-4 w-4 text-white" />
         </Button>
       </ConfirmModal>
     </div>

diff --git a/apps/lms/app/ui/learn/teacher/courses/attachment-form.tsx b/apps/lms/app/ui/learn/teacher/courses/attachment-form.tsx
@@ -74,8 +74,8 @@ export const AttachmentForm = ({
   return (
     <div className="mt-6 rounded-md border bg-white px-4 py-6 dark:bg-background">
       <div className="flex items-center justify-between font-semibold mb-4">
-        Course attachments
-        <Button onClick={toggleEdit} variant="ghost">
+        Playbook attachments
+        <Button onClick={toggleEdit} variant="ghost" size="sm">
           {isEditing && <>Cancel</>}
           {!isEditing && (
             <>
@@ -88,8 +88,8 @@ export const AttachmentForm = ({
       {!isEditing && (
         <>
           {initialData.attachments.length === 0 && (
-            <p className="mt-2 text-sm italic text-muted-foreground">
-              No attachments yet
+            <p className="mt-2 text-base italic text-destructive">
+              No attachments set
             </p>
           )}
           {initialData.attachments.length > 0 && (

diff --git a/apps/lms/app/ui/learn/teacher/courses/category-form.tsx b/apps/lms/app/ui/learn/teacher/courses/category-form.tsx
@@ -8,6 +8,7 @@ import { Combobox } from '@ui/components/ui/combobox';
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormMessage,
@@ -28,7 +29,7 @@ interface CategoryFormProps {
 }
 
 const formSchema = z.object({
-  categoryId: z.string().min(1),
+  categoryId: z.string().min(2),
 });
 
 export const CategoryForm = ({
@@ -77,8 +78,8 @@ export const CategoryForm = ({
   return (
     <div className="mt-6 rounded-md border bg-white px-4 py-6 dark:bg-background">
       <div className="flex items-center justify-between font-semibold mb-4">
-        Course category
-        <Button onClick={toggleEdit} variant="ghost">
+        Playbook category
+        <Button onClick={toggleEdit} variant="ghost" size="sm">
           {isEditing ? (
             <>Cancel</>
           ) : (
@@ -92,11 +93,11 @@ export const CategoryForm = ({
       {!isEditing && (
         <p
           className={cn(
-            'mt-2 text-base lg:text-lg text-muted-foreground',
-            !initialData.categoryId && 'italic text-muted-foreground',
+            'mt-2 text-base text-muted-foreground',
+            !initialData.categoryId && 'italic text-destructive',
           )}
         >
-          {selectedOption?.label || 'No category'}
+          {selectedOption?.label || 'No category set'}
         </p>
       )}
       {isEditing && (
@@ -117,6 +118,9 @@ export const CategoryForm = ({
                       onChange={(value) => field.onChange(value)}
                     />
                   </FormControl>
+                  <FormDescription className="text-muted-foreground/70">
+                    Each playbook must have a category, only one.
+                  </FormDescription>
                   <FormMessage />
                 </FormItem>
               )}

diff --git a/apps/lms/app/ui/learn/teacher/courses/chapters-form.tsx b/apps/lms/app/ui/learn/teacher/courses/chapters-form.tsx
@@ -7,6 +7,7 @@ import { Button } from '@ui/components/ui/button';
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormMessage,
@@ -28,7 +29,14 @@ interface ChaptersFormProps {
 }
 
 const formSchema = z.object({
-  title: z.string().min(1),
+  title: z
+    .string()
+    .min(40, {
+      message: "Ugh, the play's title must be at least 40 characters",
+    })
+    .max(65, {
+      message: "Oof, the play's title can't be more than 65 characters",
+    }),
 });
 
 export const ChaptersForm = ({ initialData, courseId }: ChaptersFormProps) => {
@@ -78,7 +86,7 @@ export const ChaptersForm = ({ initialData, courseId }: ChaptersFormProps) => {
         list: updateData,
       });
       toast({
-        title: "You're a Dragger and a Dropper!",
+        title: "You're a dragger and a dropper!",
         description: 'Your plays have been re-ordered in the playbook.',
       });
       router.refresh();
@@ -107,7 +115,7 @@ export const ChaptersForm = ({ initialData, courseId }: ChaptersFormProps) => {
       )}
       <div className="flex items-center justify-between font-semibold mb-4">
         List of plays
-        <Button onClick={toggleCreating} variant="ghost">
+        <Button onClick={toggleCreating} variant="ghost" size="sm">
           {isCreating ? (
             <>Cancel</>
           ) : (
@@ -136,6 +144,9 @@ export const ChaptersForm = ({ initialData, courseId }: ChaptersFormProps) => {
                       {...field}
                     />
                   </FormControl>
+                  <FormDescription className="text-muted-foreground/70">
+                    A playbook needs at least one play yo!
+                  </FormDescription>
                   <FormMessage />
                 </FormItem>
               )}
@@ -154,11 +165,11 @@ export const ChaptersForm = ({ initialData, courseId }: ChaptersFormProps) => {
       {!isCreating && (
         <div
           className={cn(
-            'mt-2 text-sm',
-            !initialData.chapters.length && 'italic text-muted-foreground',
+            'mt-2 text-base text-muted-foreground ',
+            !initialData.chapters.length && 'italic text-destructive',
           )}
         >
-          {!initialData.chapters.length && 'No chapters'}
+          {!initialData.chapters.length && 'No plays created'}
           <ChaptersList
             onEdit={onEdit}
             onReorder={onReorder}