DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update dialog component to headlessui (#159)

Browse Source
This commit is contained in:
Razboy20
2024-03-13 23:09:43 -05:00
committed by GitHub
parent df7a7c65d6
commit 442be8cbee
8 changed files with 149 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/components/calendar/Calendar/Calendar.tsx
View File

@@ -4,7 +4,6 @@ import CalendarGrid from '@views/components/calendar/CalendarGrid/CalendarGrid';
import CalendarHeader from '@views/components/calendar/CalendarHeader/CalenderHeader';
import { CalendarSchedules } from '@views/components/calendar/CalendarSchedules/CalendarSchedules';
import ImportantLinks from '@views/components/calendar/ImportantLinks';
import TeamLinks from '@views/components/calendar/TeamLinks';
import Divider from '@views/components/common/Divider/Divider';
import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSchedule';
@@ -19,6 +18,7 @@ export default function Calendar(): JSX.Element {
const calendarRef = useRef<HTMLDivElement>(null);
const { courseCells, activeSchedule } = useFlattenedCourseSchedule();
const [course, setCourse] = useState<Course | null>(null);
const [showPopup, setShowPopup] = useState(false);
const [sidebarWidth, setSidebarWidth] = useState('20%');
const [scale, setScale] = useState(1);
@@ -48,6 +48,10 @@ export default function Calendar(): JSX.Element {
return () => window.removeEventListener('resize', adjustLayout);
}, []);
useEffect(() => {
if (course) setShowPopup(true);
}, [course]);
const calendarContainerStyle = {
transform: `scale(${scale})`,
transformOrigin: 'top left',
@@ -68,10 +72,6 @@ export default function Calendar(): JSX.Element {
<div className='mt-4'>
<ImportantLinks />
</div>
<Divider orientation='horizontal' size='100%' />
<div className='mt-4'>
<TeamLinks />
</div>
</div>
<div className='flex flex-grow flex-col' style={calendarContainerStyle} ref={calendarRef}>
<div className='flex-grow overflow-auto'>
@@ -80,13 +80,14 @@ export default function Calendar(): JSX.Element {
<CalendarBottomBar calendarRef={calendarRef} />
</div>
</div>
{course ? (
<CourseCatalogInjectedPopup
course={course}
activeSchedule={activeSchedule}
onClose={() => setCourse(null)}
/>
) : null}
<CourseCatalogInjectedPopup
course={course}
activeSchedule={activeSchedule}
onClose={() => setShowPopup(false)}
open={showPopup}
afterLeave={() => setCourse(null)}
/>
</div>
);
}

87
src/views/components/calendar/ImportantLinks.tsx
View File

@@ -8,6 +8,34 @@ type Props = {
className?: string;
};
interface LinkItem {
text: string;
url: string;
}
const links: LinkItem[] = [
{
text: "Summer '24 Course Schedule",
url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/',
},
{
text: "Fall '24 Course Schedule",
url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20236/',
},
{
text: 'Registration Info Sheet',
url: 'https://utdirect.utexas.edu/registrar/ris.WBX',
},
{
text: 'Register For Courses',
url: 'https://utdirect.utexas.edu/registration/chooseSemester.WBX',
},
{
text: 'Degree Audit',
url: 'https://utdirect.utexas.edu/apps/degree/audits/',
},
];
/**
* The "Important Links" section of the calendar website
* @returns
@@ -15,52 +43,19 @@ type Props = {
export default function ImportantLinks({ className }: Props): JSX.Element {
return (
<article className={clsx(className, 'flex flex-col gap-2')}>
<Text variant='h3'>Important Links</Text>
<a
href='https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/'
className='flex items-center gap-0.5 text-ut-burntorange'
target='_blank'
rel='noreferrer'
>
<Text variant='p'>Spring Course Schedule</Text>
<OutwardArrowIcon className='h-3 w-3' />
</a>
<a
href='https://utdirect.utexas.edu/apps/registrar/course_schedule/20236/'
className='flex items-center gap-0.5 text-ut-burntorange'
target='_blank'
rel='noreferrer'
>
<Text variant='p'>Summer Course Schedule</Text>
<OutwardArrowIcon className='h-3 w-3' />
</a>
<a
href='https://utdirect.utexas.edu/registrar/ris.WBX'
className='flex items-center gap-0.5 text-ut-burntorange'
target='_blank'
rel='noreferrer'
>
<Text variant='p'>Registration Info Sheet</Text>
<OutwardArrowIcon className='h-3 w-3' />
</a>
<a
href='https://utdirect.utexas.edu/registration/chooseSemester.WBX'
className='flex items-center gap-0.5 text-ut-burntorange'
target='_blank'
rel='noreferrer'
>
<Text variant='p'>Register For Courses</Text>
<OutwardArrowIcon className='h-3 w-3' />
</a>
<a
href='https://utdirect.utexas.edu/apps/degree/audits/'
className='flex items-center gap-0.5 text-ut-burntorange'
target='_blank'
rel='noreferrer'
>
<Text variant='p'>Degree Audit</Text>
<OutwardArrowIcon className='h-3 w-3' />
</a>
<Text variant='h3'>Useful Links</Text>
{links.map((link, index) => (
<a
key={link.text}
href={link.url}
className='flex items-center gap-0.5 text-ut-burntorange'
target='_blank'
rel='noreferrer'
>
<Text variant='p'>{link.text}</Text>
<OutwardArrowIcon className='h-3 w-3' />
</a>
))}
</article>
);
}