1+
12import styled from '@emotion/styled' ;
23import { DarkBlueIcon } from '../Requirements/QObject' ;
3- import React , { useContext , useEffect , useRef } from "react" ;
4+ import React , { useContext , useEffect } from "react" ;
45import { useDrop } from "react-dnd" ;
56import { DegreePlan , DnDCourse , DockedCourse , User } from "@/types" ;
67import { ItemTypes } from "./dnd/constants" ;
@@ -14,7 +15,6 @@ import AccountIndicator from "pcx-shared-components/src/accounts/AccountIndicato
1415import _ from 'lodash' ;
1516import CourseInDock from './CourseInDock' ;
1617import { useRouter } from 'next/router' ;
17- import { TutorialModalContext } from '../FourYearPlan/OnboardingTutorial' ;
1818
1919const DockWrapper = styled . div `
2020 z-index: 1;
@@ -104,7 +104,16 @@ interface DockProps {
104104const Dock = ( { user, login, logout, activeDegreeplanId } : DockProps ) => {
105105 const { searchPanelOpen, setSearchPanelOpen, setSearchRuleQuery, setSearchRuleId } = useContext ( SearchPanelContext )
106106 const { createOrUpdate } = useSWRCrud < DockedCourse > ( `/api/degree/docked` , { idKey : 'full_code' } ) ;
107- const { data : dockedCourses = [ ] , isLoading } = useSWR < DockedCourse [ ] > ( user ? `/api/degree/docked` : null ) ;
107+ const { data : dockedCourses = [ ] , isLoading } = useSWR < DockedCourse [ ] > ( user ? `/api/degree/docked` : null ) ;
108+
109+ // Returns a boolean that indiates whether this is the first render
110+ const useIsMount = ( ) => {
111+ const isMountRef = React . useRef ( true ) ;
112+ useEffect ( ( ) => {
113+ isMountRef . current = false ;
114+ } , [ ] ) ;
115+ return isMountRef . current ;
116+ } ;
108117
109118 const [ { isOver, canDrop } , drop ] = useDrop ( ( ) => ( {
110119 accept : [ ItemTypes . COURSE_IN_PLAN , ItemTypes . COURSE_IN_REQ , ItemTypes . COURSE_IN_SEARCH ] ,
@@ -119,22 +128,10 @@ const Dock = ({ user, login, logout, activeDegreeplanId }: DockProps) => {
119128
120129 const { asPath } = useRouter ( ) ;
121130
122- const { tutorialModalKey, highlightedComponentRef, componentRefs } = useContext ( TutorialModalContext ) ;
123- const dockRef = React . useRef < HTMLDivElement | null > ( null ) ;
124- const isDockStep = tutorialModalKey === "courses-dock" || tutorialModalKey === "general-search" ;
125-
126- useEffect ( ( ) => {
127- if ( ! componentRefs ?. current || ! dockRef . current ) return ;
128-
129- componentRefs . current [ "dock" ] = dockRef . current ;
130- dockRef . current . style . zIndex = isDockStep ? "1002" : "0" ;
131- } , [ componentRefs , isDockStep ] ) ;
132-
133131 return (
134- < div style = { { position : "relative" } } ref = { dockRef } >
135- < DockWrapper ref = { drop } >
136- < DockContainer $isDroppable = { canDrop } $isOver = { isOver } >
137- < AccountIndicator
132+ < DockWrapper ref = { drop } >
133+ < DockContainer $isDroppable = { canDrop } $isOver = { isOver } >
134+ < AccountIndicator
138135 leftAligned = { true }
139136 user = { user }
140137 backgroundColor = "light"
@@ -143,36 +140,35 @@ const Dock = ({ user, login, logout, activeDegreeplanId }: DockProps) => {
143140 logout = { logout }
144141 dropdownTop = { true }
145142 pathname = { asPath }
146- />
147- < SearchIconContainer onClick = { ( ) => {
148- setSearchRuleQuery ( "" ) ;
149- setSearchRuleId ( null ) ;
150- setSearchPanelOpen ( ! searchPanelOpen ) ;
151- } } >
152- < DarkBlueIcon >
153- < i className = "fas fa-plus fa-lg" />
154- </ DarkBlueIcon >
155- < div >
156- Add Course
157- </ div >
158- </ SearchIconContainer >
159- < DockedCoursesWrapper >
160- { isLoading ?
161- < CenteringCourseDock >
162- < DarkBlueBackgroundSkeleton width = "20rem" />
163- </ CenteringCourseDock >
164- :
165- ! dockedCourses . length ? < CenteringCourseDock > Drop courses in the dock for later.</ CenteringCourseDock > :
166- < DockedCourses >
167- { dockedCourses . map ( ( course ) =>
168- < DockedCourseItem course = { course } isDisabled = { false } />
169- ) }
170- </ DockedCourses > }
171- </ DockedCoursesWrapper >
172- < Logo src = 'pdp-logo.svg' width = '30' height = '45' />
173- </ DockContainer >
174- </ DockWrapper >
175- </ div >
143+ />
144+ < SearchIconContainer onClick = { ( ) => {
145+ setSearchRuleQuery ( "" ) ;
146+ setSearchRuleId ( null ) ;
147+ setSearchPanelOpen ( ! searchPanelOpen ) ;
148+ } } >
149+ < DarkBlueIcon >
150+ < i className = "fas fa-plus fa-lg" />
151+ </ DarkBlueIcon >
152+ < div >
153+ Add Course
154+ </ div >
155+ </ SearchIconContainer >
156+ < DockedCoursesWrapper >
157+ { isLoading ?
158+ < CenteringCourseDock >
159+ < DarkBlueBackgroundSkeleton width = "20rem" />
160+ </ CenteringCourseDock >
161+ :
162+ ! dockedCourses . length ? < CenteringCourseDock > Drop courses in the dock for later.</ CenteringCourseDock > :
163+ < DockedCourses >
164+ { dockedCourses . map ( ( course ) =>
165+ < DockedCourseItem course = { course } isDisabled = { false } />
166+ ) }
167+ </ DockedCourses > }
168+ </ DockedCoursesWrapper >
169+ < Logo src = 'pdp-logo.svg' width = '30' height = '45' />
170+ </ DockContainer >
171+ </ DockWrapper >
176172 )
177173}
178174
0 commit comments