From 53bae7cbb3dff2234e2c664a76aa2a9b5f9abdba Mon Sep 17 00:00:00 2001 From: Chris Holland Date: Fri, 18 Oct 2024 13:37:15 -0700 Subject: [PATCH 1/6] fix: always dimiss select state regardless of modification #341 --- .../EditCourseStructure/DraggableElements/ActivityElement.tsx | 3 ++- .../EditCourseStructure/DraggableElements/ChapterElement.tsx | 2 +- apps/web/components/Pages/CourseEdit/Draggables/Activity.tsx | 4 ++-- apps/web/components/Pages/CourseEdit/Draggables/Chapter.tsx | 2 +- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx b/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx index 81374057..accd4a49 100644 --- a/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx +++ b/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 ( diff --git a/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx b/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx index 092dd5e7..c1325b1c 100644 --- a/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx +++ b/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 ( diff --git a/apps/web/components/Pages/CourseEdit/Draggables/Activity.tsx b/apps/web/components/Pages/CourseEdit/Draggables/Activity.tsx index 0aba0032..e45c75e5 100644 --- a/apps/web/components/Pages/CourseEdit/Draggables/Activity.tsx +++ b/apps/web/components/Pages/CourseEdit/Draggables/Activity.tsx @@ -46,17 +46,17 @@ function Activity(props: any) { modifiedActivity?.activityId === activityId && selectedActivity !== undefined ) { - setSelectedActivity(undefined) let modifiedActivityCopy = { ...props.activity, name: modifiedActivity.activityName, } - + await updateActivity(modifiedActivityCopy, activityId, session.data?.tokens?.access_token) await mutate(`${getAPIUrl()}chapters/meta/course_${props.courseid}`) await revalidateTags(['courses'], props.orgslug) router.refresh() } + setSelectedActivity(undefined) } return ( diff --git a/apps/web/components/Pages/CourseEdit/Draggables/Chapter.tsx b/apps/web/components/Pages/CourseEdit/Draggables/Chapter.tsx index 121eb838..2e449210 100644 --- a/apps/web/components/Pages/CourseEdit/Draggables/Chapter.tsx +++ b/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 ( From 4afa1d4458951520a8a0d040949d695e84094992 Mon Sep 17 00:00:00 2001 From: Chris Holland Date: Fri, 18 Oct 2024 14:03:57 -0700 Subject: [PATCH 2/6] fix: edit assignment flickering when dragged and dropped After some testing, I found that assignmentUUID isn't necessary for the conditional render. After some testing in a race condition environment (two clients) the activity itself as a condition is enough and it doesn't seem that its worth having assignmentUUID as well. --- .../DraggableElements/ActivityElement.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx b/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx index accd4a49..10a4593b 100644 --- a/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx +++ b/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx @@ -281,7 +281,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 { const activity = await getAssignmentFromActivityUUID(activityUUID, access_token); if (activity) { return activity.data.assignment_uuid; @@ -291,7 +291,8 @@ const ActivityElementOptions = ({ activity }: any) => { const fetchAssignmentUUID = async () => { if (activity.activity_type === 'TYPE_ASSIGNMENT') { const assignment_uuid = await getAssignmentUUIDFromActivityUUID(activity.activity_uuid); - setAssignmentUUID(assignment_uuid.replace('assignment_', '')); + if(assignment_uuid) + setAssignmentUUID(assignment_uuid.replace('assignment_', '')); } }; @@ -324,7 +325,7 @@ const ActivityElementOptions = ({ activity }: any) => { )} - {activity.activity_type === 'TYPE_ASSIGNMENT' && assignmentUUID && ( + {activity.activity_type === 'TYPE_ASSIGNMENT' && ( <> Date: Fri, 18 Oct 2024 16:53:01 -0700 Subject: [PATCH 3/6] fix: odd pushdown effect after drag/drop Apparently when you set your own css-transition properties, it'll cause this known visual bug for react-beautiful-dnd. See https://github.com/atlassian/react-beautiful-dnd/issues/2086 for more info about this --- .../EditCourseStructure/DraggableElements/ActivityElement.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx b/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx index 10a4593b..83471570 100644 --- a/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx +++ b/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx @@ -110,7 +110,7 @@ function ActivityElement(props: ActivitiyElementProps) { > {(provided, snapshot) => (
Date: Sat, 19 Oct 2024 05:56:15 -0700 Subject: [PATCH 4/6] fix: activity titles are aligned --- .../DraggableElements/ActivityElement.tsx | 115 +++++++++--------- 1 file changed, 58 insertions(+), 57 deletions(-) diff --git a/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx b/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx index 83471570..2792bdab 100644 --- a/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx +++ b/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx @@ -144,7 +144,7 @@ function ActivityElement(props: ActivitiyElementProps) { className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900" > updateActivityName(props.activity.id)} /> @@ -154,68 +154,69 @@ function ActivityElement(props: ActivitiyElementProps) { )} 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" />
{/* Edit and View Button */} -
- - {/* Publishing */} -
changePublicStatus()} - > - {!props.activity.published ? ( - - ) : ( - - )} - {!props.activity.published ? 'Publish' : 'Unpublish'} +
+
+ + {/* Publishing */} +
changePublicStatus()} + > + {!props.activity.published ? ( + + ) : ( + + )} + {!props.activity.published ? 'Publish' : 'Unpublish'} +
+ + + Preview + +
+ {/* Delete Button */} +
+ + + +
+ } + functionToExecute={() => deleteActivityUI()} + status="warning" + >
- - - Preview - -
- {/* Delete Button */} -
- - - -
- } - functionToExecute={() => deleteActivityUI()} - status="warning" - >
)} From 60373ad0029151cacd97b7d7b0f0d221db6f022c Mon Sep 17 00:00:00 2001 From: Chris Holland Date: Sat, 19 Oct 2024 06:26:17 -0700 Subject: [PATCH 5/6] fix: stale closure due to non-unique key to the activity itself --- .../EditCourseStructure/DraggableElements/ChapterElement.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx b/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx index c1325b1c..57aab3ec 100644 --- a/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx +++ b/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx @@ -155,7 +155,7 @@ function ChapterElement(props: ChapterElementProps) {
{activities.map((activity: any, index: any) => { return ( -
+
Date: Sat, 19 Oct 2024 07:45:50 -0700 Subject: [PATCH 6/6] refactor: remove onclick on pencil and condense indicator --- .../DraggableElements/ActivityElement.tsx | 72 +++++++------------ 1 file changed, 27 insertions(+), 45 deletions(-) diff --git a/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx b/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx index 2792bdab..54624707 100644 --- a/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx +++ b/apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx @@ -145,7 +145,6 @@ function ActivityElement(props: ActivitiyElementProps) { > updateActivityName(props.activity.id)} />
@@ -224,53 +223,36 @@ function ActivityElement(props: ActivitiyElementProps) { ) } -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 ( -
- {props.activityType === 'TYPE_VIDEO' && ( - <> -
-