add indication for incomplete previous module

xvvvyz · Aug 20, 2024 · 2fb6992 · 2fb6992
1 parent ee5c620
commit 2fb6992
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/app/_components/event-form.tsx b/app/_components/event-form.tsx
@@ -28,7 +28,6 @@ import { twMerge } from 'tailwind-merge';
 
 interface EventFormProps {
   className?: string;
-  disabled?: boolean;
   event?:
     | NonNullable<GetEventData>
     | NonNullable<GetSessionWithDetailsData>['modules'][0]['event'][0];
@@ -38,6 +37,7 @@ interface EventFormProps {
     | NonNullable<GetSessionWithDetailsData>['modules'][0];
   isArchived?: boolean;
   isMission?: boolean;
+  isPreviousModulePending?: boolean;
   isPublic?: boolean;
   subjectId: string;
 }
@@ -56,11 +56,11 @@ export interface EventFormValues {
 
 const EventForm = ({
   className,
-  disabled,
   event,
   eventType,
   isArchived,
   isMission,
+  isPreviousModulePending,
   isPublic,
   subjectId,
 }: EventFormProps) => {
@@ -301,13 +301,21 @@ const EventForm = ({
           {(!event || form.formState.isDirty) && (
             <Button
               className="w-full"
-              colorScheme={event ? 'transparent' : 'accent'}
-              disabled={disabled}
+              colorScheme={
+                isPreviousModulePending || event ? 'transparent' : 'accent'
+              }
+              disabled={isPreviousModulePending}
               loading={isTransitioning}
               loadingText="Saving…"
               type="submit"
             >
-              {event ? 'Save' : isMission ? 'Complete' : 'Record'}
+              {isPreviousModulePending
+                ? 'Previous module incomplete'
+                : event
+                  ? 'Save'
+                  : isMission
+                    ? 'Complete'
+                    : 'Record'}
             </Button>
           )}
         </div>

diff --git a/app/_components/module-card.tsx b/app/_components/module-card.tsx
@@ -13,10 +13,10 @@ import EventComments, {
 } from '@/_components/event-comments';
 
 interface ModuleCardProps {
-  disabled?: boolean;
   event?: NonNullable<GetSessionWithDetailsData>['modules'][0]['event'][0];
   eventType: NonNullable<GetSessionWithDetailsData>['modules'][0];
   isArchived?: boolean;
+  isPreviousModulePending?: boolean;
   isPublic?: boolean;
   isTeamMember?: boolean;
   mission: NonNullable<GetTrainingPlanWithSessionsData>;
@@ -25,10 +25,10 @@ interface ModuleCardProps {
 }
 
 const ModuleCard = ({
-  disabled,
   event,
   eventType,
   isArchived,
+  isPreviousModulePending,
   isPublic,
   isTeamMember,
   mission,
@@ -40,7 +40,7 @@ const ModuleCard = ({
   return (
     <CollapsibleSection
       className="space-y-16 pb-8 pt-10"
-      defaultOpen={!event && !disabled}
+      defaultOpen={!event && !isPreviousModulePending}
       title={
         <div className="min-w-0 text-left">
           <div className="truncate leading-snug">
@@ -69,11 +69,11 @@ const ModuleCard = ({
       )}
       {(event || (!isPublic && !isArchived)) && (
         <EventForm
-          disabled={disabled}
           event={event}
           eventType={eventType}
           isArchived={isArchived}
           isMission={!!mission}
+          isPreviousModulePending={isPreviousModulePending}
           isPublic={isPublic}
           subjectId={subjectId}
         />

diff --git a/app/_components/session-page.tsx b/app/_components/session-page.tsx
@@ -116,20 +116,20 @@ const SessionPage = async ({
             <ul className="mt-8 space-y-4 border-y border-alpha-1 bg-alpha-reverse-2 py-4">
               {session.modules.map((module, i) => {
                 const event = firstIfArray(module.event);
-                const previousModule = session.modules[i - 1];
+                const previousModuleEvent = session.modules[i - 1]?.event;
 
                 return (
                   <li
                     className="border-y border-alpha-1 bg-bg-2"
                     key={module.id}
                   >
                     <ModuleCard
-                      disabled={
-                        !!previousModule?.event && !previousModule.event.length
-                      }
                       event={event}
                       eventType={module}
                       isArchived={subject.archived}
+                      isPreviousModulePending={
+                        previousModuleEvent && !previousModuleEvent.length
+                      }
                       isPublic={isPublic}
                       isTeamMember={isTeamMember}
                       mission={trainingPlan}