Skip to content

Commit

Permalink
fix(lint)
Browse files Browse the repository at this point in the history
  • Loading branch information
@esinx
esinx committed May 17, 2024
1 parent 5159a38 commit 7b0c121
Show file tree
Hide file tree
Showing 2 changed files with 191 additions and 162 deletions.
347 changes: 188 additions & 159 deletions frontend/degree-plan/components/Dock/Dock.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,43 @@

import styled from '@emotion/styled';
import { DarkBlueIcon } from '../Requirements/QObject';
import React, { useContext, useEffect } from "react";
import { useDrop } from "react-dnd";
import { Course, DegreePlan, DnDCourse, DockedCourse, Fulfillment, User } from "@/types";
import { ItemTypes } from "../dnd/constants";
import { SearchPanelContext } from '../Search/SearchPanel';
import { useSWRCrud } from '@/hooks/swrcrud';
import useSWR, { useSWRConfig } from 'swr';
import { DarkBlueBackgroundSkeleton } from "../FourYearPlan/PanelCommon";
import styled from "@emotion/styled"
import React, { useContext, useEffect } from "react"
import { useDrop } from "react-dnd"
import {
Course,
DegreePlan,
DnDCourse,
DockedCourse,
Fulfillment,
User,
} from "@/types"
import { useSWRCrud } from "@/hooks/swrcrud"
import useSWR, { useSWRConfig } from "swr"
// TODO: Move shared components to typescript
// @ts-ignore
import AccountIndicator from "pcx-shared-components/src/accounts/AccountIndicator";
import _ from 'lodash';
import CoursePlanned from '../FourYearPlan/CourseInPlan';
import CourseInDock from './CourseInDock';
import AccountIndicator from "pcx-shared-components/src/accounts/AccountIndicator"
import _ from "lodash"
import { DarkBlueBackgroundSkeleton } from "../FourYearPlan/PanelCommon"
import { SearchPanelContext } from "../Search/SearchPanel"
import { ItemTypes } from "../dnd/constants"
import { DarkBlueIcon } from "../Requirements/QObject"
import CoursePlanned from "../FourYearPlan/CourseInPlan"
import CourseInDock from "./CourseInDock"

const DockWrapper = styled.div`
z-index: 1;
width: 100%;
display: flex;
justify-content: center;
flex-grow: 0;
z-index: 1;
width: 100%;
display: flex;
justify-content: center;
flex-grow: 0;
`

const DockContainer = styled.div<{$isDroppable:boolean, $isOver: boolean}>`
const DockContainer = styled.div<{ $isDroppable: boolean; $isOver: boolean }>`
border-radius: 0px;
box-shadow: 0px 0px 4px 2px ${props => props.$isOver ? 'var(--selected-color);' : props.$isDroppable ? 'var(--primary-color-dark);' : 'rgba(0, 0, 0, 0.05);'}
box-shadow: 0px 0px 4px 2px ${(props) =>
props.$isOver
? "var(--selected-color);"
: props.$isDroppable
? "var(--primary-color-dark);"
: "rgba(0, 0, 0, 0.05);"}
background-color: var(--primary-color);
width: 100%;
display: flex;
Expand All @@ -36,161 +47,179 @@ const DockContainer = styled.div<{$isDroppable:boolean, $isOver: boolean}>`
`

const SearchIconContainer = styled.div`
padding: .25rem 2rem;
padding-left: 0;
border-color: var(--primary-color-extra-dark);
border-width: 0;
border-right-width: 2px;
border-style: solid;
flex-shrink: 0;
padding: 0.25rem 2rem;
padding-left: 0;
border-color: var(--primary-color-extra-dark);
border-width: 0;
border-right-width: 2px;
border-style: solid;
flex-shrink: 0;
`

const DockedCoursesWrapper = styled.div`
height: 100%;
width: 100%;
border-radius: 8px;
display: flex;
align-items: center;
flex-grow: 1;
flex-shrink: 1;
overflow-x: auto;
/* Hide scrollbar */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
/* Hide scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar {
display: none;
height: 100px;
width: 100px;
}
height: 100%;
width: 100%;
border-radius: 8px;
display: flex;
align-items: center;
flex-grow: 1;
flex-shrink: 1;
overflow-x: auto;
/* Hide scrollbar */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
/* Hide scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar {
display: none;
height: 100px;
width: 100px;
}
`

const DockedCourses = styled.div`
height: 100%;
display: flex;
flex-direction: row;
gap: 1rem;
padding: 0.1rem;
overflow: auto;
height: 100%;
display: flex;
flex-direction: row;
gap: 1rem;
padding: 0.1rem;
overflow: auto;
`

const CenteringCourseDock = styled.div`
color: var(--primary-color-extra-dark);
margin-left: auto;
margin-right: auto;
color: var(--primary-color-extra-dark);
margin-left: auto;
margin-right: auto;
`

const Logo = styled.img`
flex-shrink: 0;
flex-shrink: 0;
`

const AnimatedDockedCourseItem = styled(CourseInDock)`
z-index: 1000;
background: var(--background-grey);
animation-name: jump;
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-timing-function: linear;
`
z-index: 1000;
background: var(--background-grey);
animation-name: jump;
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-timing-function: linear;
`

interface DockProps {
login: (u: User) => void;
logout: () => void;
user: User | null;
activeDegreeplanId: DegreePlan["id"] | null;
login: (u: User) => void
logout: () => void
user: User | null
activeDegreeplanId: DegreePlan["id"] | null
}

const Dock = ({ user, login, logout, activeDegreeplanId }: DockProps) => {
// const [courseAdded, setCourseAdded] = React.useState(false);
const { searchPanelOpen, setSearchPanelOpen, setSearchRuleQuery, setSearchRuleId } = useContext(SearchPanelContext)
const { createOrUpdate } = useSWRCrud<DockedCourse>(`/api/degree/docked`, { idKey: 'full_code' });
const {data: dockedCourses = [], isLoading} = useSWR<DockedCourse[]>(user ? `/api/degree/docked` : null);

// Returns a boolean that indiates whether this is the first render
const useIsMount = () => {
const isMountRef = React.useRef(true);
useEffect(() => {
isMountRef.current = false;
}, []);
return isMountRef.current;
};

const isMount = useIsMount();

const [{ isOver, canDrop }, drop] = useDrop(() => ({
accept: [ItemTypes.COURSE_IN_PLAN, ItemTypes.COURSE_IN_REQ],
drop: (course: DnDCourse) => {
createOrUpdate({"full_code": course.full_code}, course.full_code);
},
collect: monitor => ({
isOver: !!monitor.isOver(),
canDrop: !!monitor.canDrop()
}),
}), []);

// React.useEffect(() => {
// if (!isMount) {
// console.log('future render');
// setCourseAdded(true);
// setTimeout(() => {
// setCourseAdded(false);
// }, 3000);
// } else {
// console.log('first render');
// }
// }, [isMount, dockedCourses]);

return (
<DockWrapper ref={drop} >
<DockContainer $isDroppable={canDrop} $isOver={isOver}>
<AccountIndicator
leftAligned={true}
user={user!} // TODO: Fix this
backgroundColor="light"
nameLength={2}
login={login}
logout={logout}
dropdownTop={true}
/>
<SearchIconContainer onClick={() => {
setSearchRuleQuery("");
setSearchRuleId(null);
setSearchPanelOpen(!searchPanelOpen);
}}>
<DarkBlueIcon>
<i className="fas fa-search fa-lg"/>
</DarkBlueIcon>
</SearchIconContainer>
<DockedCoursesWrapper>
{isLoading ?
<CenteringCourseDock>
<DarkBlueBackgroundSkeleton width="20rem"/>
</CenteringCourseDock>
:
!dockedCourses.length ? <CenteringCourseDock>Drop courses in the dock for later.</CenteringCourseDock> :
// courseAdded ?
// <DockedCourses>
// {dockedCourses.map((course, i) => {
// if (i == dockedCourses.length - 1) {
// return <AnimatedDockedCourseItem course={course} isUsed isDisabled={false} />
// }
// return <DockedCourseItem course={course} isUsed isDisabled={false} />
// }
// )}
// </DockedCourses>
// :
<DockedCourses>
{dockedCourses.map((course) =>
<AnimatedDockedCourseItem course={course} isDisabled={false} />
)}
</DockedCourses>}
</DockedCoursesWrapper>
<Logo src='pdp-logo.svg' width='30' height='45'/>
</DockContainer>
</DockWrapper>
)
const Dock = ({ user, login, logout, activeDegreeplanId }: DockProps) => {
// const [courseAdded, setCourseAdded] = React.useState(false);
const {
searchPanelOpen,
setSearchPanelOpen,
setSearchRuleQuery,
setSearchRuleId,
} = useContext(SearchPanelContext)
const { createOrUpdate } = useSWRCrud<DockedCourse>("/api/degree/docked", {
idKey: "full_code",
})
const { data: dockedCourses = [], isLoading } = useSWR<DockedCourse[]>(
user ? "/api/degree/docked" : null
)

// Returns a boolean that indiates whether this is the first render
const useIsMount = () => {
const isMountRef = React.useRef(true)
useEffect(() => {
isMountRef.current = false
}, [])
return isMountRef.current
}

const isMount = useIsMount()

const [{ isOver, canDrop }, drop] = useDrop(
() => ({
accept: [ItemTypes.COURSE_IN_PLAN, ItemTypes.COURSE_IN_REQ],
drop: (course: DnDCourse) => {
createOrUpdate({ full_code: course.full_code }, course.full_code)
},
collect: (monitor) => ({
isOver: !!monitor.isOver(),
canDrop: !!monitor.canDrop(),
}),
}),
[]
)

// React.useEffect(() => {
// if (!isMount) {
// console.log('future render');
// setCourseAdded(true);
// setTimeout(() => {
// setCourseAdded(false);
// }, 3000);
// } else {
// console.log('first render');
// }
// }, [isMount, dockedCourses]);

return (
<DockWrapper ref={drop}>
<DockContainer $isDroppable={canDrop} $isOver={isOver}>
<AccountIndicator
leftAligned={true}
user={user!} // TODO: Fix this
backgroundColor="light"
nameLength={2}
login={login}
logout={logout}
dropdownTop={true}
pathname="/"
/>
<SearchIconContainer
onClick={() => {
setSearchRuleQuery("")
setSearchRuleId(null)
setSearchPanelOpen(!searchPanelOpen)
}}>
<DarkBlueIcon>
<i className="fas fa-search fa-lg" />
</DarkBlueIcon>
</SearchIconContainer>
<DockedCoursesWrapper>
{isLoading ? (
<CenteringCourseDock>
<DarkBlueBackgroundSkeleton width="20rem" />
</CenteringCourseDock>
) : !dockedCourses.length ? (
<CenteringCourseDock>
Drop courses in the dock for later.
</CenteringCourseDock>
) : (
// courseAdded ?
// <DockedCourses>
// {dockedCourses.map((course, i) => {
// if (i == dockedCourses.length - 1) {
// return <AnimatedDockedCourseItem course={course} isUsed isDisabled={false} />
// }
// return <DockedCourseItem course={course} isUsed isDisabled={false} />
// }
// )}
// </DockedCourses>
// :
<DockedCourses>
{dockedCourses.map((course) => (
<AnimatedDockedCourseItem course={course} isDisabled={false} />
))}
</DockedCourses>
)}
</DockedCoursesWrapper>
<Logo src="pdp-logo.svg" width="30" height="45" />
</DockContainer>
</DockWrapper>
)
}

export default Dock;
export default Dock
Loading

0 comments on commit 7b0c121

Please sign in to comment.