Merge pull request #354 from chrishollandaise/fix/activity-chapter-elements

Fixing various bugs in the `ActivityElement` component

apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx

@@ -88,7 +88,7 @@ function ActivityElement(props: ActivitiyElementProps) {
       modifiedActivity?.activityId === activityId &&
       selectedActivity !== undefined
     ) {
-      setSelectedActivity(undefined)
+      
       let modifiedActivityCopy = {
         ...props.activity,
         name: modifiedActivity.activityName,
@@ -99,6 +99,7 @@ function ActivityElement(props: ActivitiyElementProps) {
       await revalidateTags(['courses'], props.orgslug)
       router.refresh()
     }
+    setSelectedActivity(undefined)
   }
 
   return (
@@ -109,7 +110,7 @@ function ActivityElement(props: ActivitiyElementProps) {
     >
       {(provided, snapshot) => (
         <div
-          className="flex flex-row py-2 my-2 w-full rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 hover:shadow space-x-1 items-center ring-1 ring-inset ring-gray-400/10 shadow-sm transition-all delay-100 duration-75 ease-linear"
+          className="flex flex-row py-2 my-2 w-full rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 hover:shadow space-x-1 items-center ring-1 ring-inset ring-gray-400/10 shadow-sm"
           key={props.activity.id}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
@@ -143,8 +144,7 @@ function ActivityElement(props: ActivitiyElementProps) {
                   className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900"
                 >
                   <Save
-                    size={11}
-                    onClick={() => updateActivityName(props.activity.id)}
+                    size={12}
                   />
                 </button>
               </div>
@@ -153,13 +153,13 @@ function ActivityElement(props: ActivitiyElementProps) {
             )}
             <Pencil
               onClick={() => setSelectedActivity(props.activity.id)}
-              size={12}
-              className="text-neutral-400 hover:cursor-pointer"
+              className="text-neutral-400 hover:cursor-pointer size-3 min-w-3"
             />
           </div>
 
 
           {/*   Edit and View Button  */}
+          <div className="flex basis-1/2 justify-end">
             <div className="flex flex-row space-x-2">
               <ActivityElementOptions activity={props.activity} />
               {/*   Publishing  */}
@@ -217,58 +217,42 @@ function ActivityElement(props: ActivitiyElementProps) {
               ></ConfirmationModal>
             </div>
           </div>
+        </div>
       )}
     </Draggable>
   )
 }
 
-const ActivityTypeIndicator = (props: { activityType: string }) => {
+const ACTIVITIES = {
+  'TYPE_VIDEO': {
+    displayName: 'Video',
+    Icon: Video
+  },
+  'TYPE_DOCUMENT': {
+    displayName: 'Document',
+    Icon: File
+  },
+  'TYPE_ASSIGNMENT': {
+    displayName: 'Assignment',
+    Icon: Backpack
+  },
+  'TYPE_DYNAMIC': {
+    displayName: 'Dynamic',
+    Icon: Sparkles
+  }
+}
+
+const ActivityTypeIndicator = ({activityType} : { activityType: keyof typeof ACTIVITIES}) => {
+  const {displayName, Icon} = ACTIVITIES[activityType]
+
   return (
-    <div className="px-3 text-gray-300 space-x-1 w-28">
-      {props.activityType === 'TYPE_VIDEO' && (
-        <>
+    <div className="px-3 text-gray-300 space-x-1 w-28 flex">
       <div className="flex space-x-2 items-center">
-            <Video size={16} />{' '}
+            <Icon className="size-4" />{' '}
             <div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full mx-auto justify-center align-middle">
-              Video
+              {displayName}
             </div>{' '}
           </div>
-        </>
-      )}
-      {props.activityType === 'TYPE_DOCUMENT' && (
-        <>
-          <div className="flex space-x-2 items-center">
-            <div className="w-[30px]">
-              <File size={16} />{' '}
-            </div>
-            <div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full">
-              Document
-            </div>{' '}
-          </div>
-        </>
-      )}
-      {props.activityType === 'TYPE_ASSIGNMENT' && (
-        <>
-          <div className="flex space-x-2 items-center">
-            <div className="w-[30px]">
-              <Backpack size={16} />{' '}
-            </div>
-            <div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full">
-              Assignment
-            </div>{' '}
-          </div>
-        </>
-      )}
-      {props.activityType === 'TYPE_DYNAMIC' && (
-        <>
-          <div className="flex space-x-2 items-center">
-            <Sparkles size={16} />{' '}
-            <div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full">
-              Dynamic
-            </div>{' '}
-          </div>
-        </>
-      )}
     </div>
   )
 }
@@ -280,7 +264,7 @@ const ActivityElementOptions = ({ activity }: any) => {
   const session = useLHSession() as any;
   const access_token = session?.data?.tokens?.access_token;
 
-  async function getAssignmentUUIDFromActivityUUID(activityUUID: string) {
+  async function getAssignmentUUIDFromActivityUUID(activityUUID: string):  Promise<string | undefined> {
     const activity = await getAssignmentFromActivityUUID(activityUUID, access_token);
     if (activity) {
       return activity.data.assignment_uuid;
@@ -290,6 +274,7 @@ const ActivityElementOptions = ({ activity }: any) => {
   const fetchAssignmentUUID = async () => {
     if (activity.activity_type === 'TYPE_ASSIGNMENT') {
       const assignment_uuid = await getAssignmentUUIDFromActivityUUID(activity.activity_uuid);
+      if(assignment_uuid)
         setAssignmentUUID(assignment_uuid.replace('assignment_', ''));
     }
   };
@@ -323,7 +308,7 @@ const ActivityElementOptions = ({ activity }: any) => {
           </Link>
         </>
       )}
-      {activity.activity_type === 'TYPE_ASSIGNMENT' && assignmentUUID && (
+      {activity.activity_type === 'TYPE_ASSIGNMENT' && (
         <>
           <Link
             href={

apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx

@@ -52,7 +52,6 @@ function ChapterElement(props: ChapterElementProps) {
 
   async function updateChapterName(chapterId: string) {
     if (modifiedChapter?.chapterId === chapterId) {
-      setSelectedChapter(undefined)
       let modifiedChapterCopy = {
         name: modifiedChapter.chapterName,
       }
@@ -61,6 +60,7 @@ function ChapterElement(props: ChapterElementProps) {
       await revalidateTags(['courses'], props.orgslug)
       router.refresh()
     }
+    setSelectedChapter(undefined)
   }
 
   return (
@@ -155,7 +155,7 @@ function ChapterElement(props: ChapterElementProps) {
                 <div className="flex flex-col">
                   {activities.map((activity: any, index: any) => {
                     return (
-                      <div key={index} className="flex items-center ">
+                      <div key={activity.activity_uuid} className="flex items-center ">
                         <ActivityElement
                           orgslug={props.orgslug}
                           course_uuid={props.course_uuid}

apps/web/components/Pages/CourseEdit/Draggables/Activity.tsx

@@ -46,7 +46,6 @@ function Activity(props: any) {
       modifiedActivity?.activityId === activityId &&
       selectedActivity !== undefined
     ) {
-      setSelectedActivity(undefined)
       let modifiedActivityCopy = {
         ...props.activity,
         name: modifiedActivity.activityName,
@@ -57,6 +56,7 @@ function Activity(props: any) {
       await revalidateTags(['courses'], props.orgslug)
       router.refresh()
     }
+    setSelectedActivity(undefined)
   }
 
   return (

apps/web/components/Pages/CourseEdit/Draggables/Chapter.tsx

@@ -28,7 +28,6 @@ function Chapter(props: any) {
 
   async function updateChapterName(chapterId: string) {
     if (modifiedChapter?.chapterId === chapterId) {
-      setSelectedChapter(undefined)
       let modifiedChapterCopy = {
         name: modifiedChapter.chapterName,
       }
@@ -37,6 +36,7 @@ function Chapter(props: any) {
       await revalidateTags(['courses'], props.orgslug)
       router.refresh()
     }
+    setSelectedChapter(undefined)
   }
 
   return (