feat: popout icon for ccip in calendar (#221)

* feat: popout icon for ccip in calendar

* refactor: simplify context

---------

Co-authored-by: Razboy20 <razboy20@gmail.com>
This commit is contained in:
Samuel Gunter
2024-05-21 08:50:31 -07:00
committed by GitHub
parent a2303ee35f
commit 6812d685d0
3 changed files with 57 additions and 32 deletions

View File

@@ -7,6 +7,7 @@ import CalendarHeader from '@views/components/calendar/CalenderHeader';
import ImportantLinks from '@views/components/calendar/ImportantLinks';
import Divider from '@views/components/common/Divider';
import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
import { CalendarContext } from '@views/contexts/CalendarContext';
import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSchedule';
import { MessageListener } from 'chrome-extension-toolkit';
import React, { useEffect, useState } from 'react';
@@ -64,39 +65,41 @@ export default function Calendar(): JSX.Element {
}, [course]);
return (
<div className='h-full w-full flex flex-col'>
<CalendarHeader
onSidebarToggle={() => {
setShowSidebar(!showSidebar);
}}
/>
<div className='h-full flex overflow-auto pl-3'>
{showSidebar && (
<div className='h-full flex flex-none flex-col justify-between pb-5 screenshot:hidden'>
<div className='mb-3 h-full w-fit flex flex-col overflow-auto pb-2 pr-4 pl-4.5 pt-5'>
<CalendarSchedules />
<Divider orientation='horizontal' size='100%' className='my-5' />
<ImportantLinks />
<Divider orientation='horizontal' size='100%' className='my-5' />
<TeamLinks />
<CalendarContext.Provider value>
<div className='h-full w-full flex flex-col'>
<CalendarHeader
onSidebarToggle={() => {
setShowSidebar(!showSidebar);
}}
/>
<div className='h-full flex overflow-auto pl-3'>
{showSidebar && (
<div className='h-full flex flex-none flex-col justify-between pb-5 screenshot:hidden'>
<div className='mb-3 h-full w-fit flex flex-col overflow-auto pb-2 pl-4.5 pr-4 pt-5'>
<CalendarSchedules />
<Divider orientation='horizontal' size='100%' className='my-5' />
<ImportantLinks />
<Divider orientation='horizontal' size='100%' className='my-5' />
<TeamLinks />
</div>
<CalendarFooter />
</div>
<CalendarFooter />
)}
<div className='h-full min-w-5xl flex flex-grow flex-col overflow-y-auto'>
<div className='min-h-2xl flex-grow overflow-auto pl-2 pr-4 pt-6 screenshot:min-h-xl'>
<CalendarGrid courseCells={courseCells} setCourse={setCourse} />
</div>
<CalendarBottomBar courseCells={courseCells} setCourse={setCourse} />
</div>
)}
<div className='h-full min-w-5xl flex flex-grow flex-col overflow-y-auto'>
<div className='min-h-2xl flex-grow overflow-auto pl-2 pr-4 pt-6 screenshot:min-h-xl'>
<CalendarGrid courseCells={courseCells} setCourse={setCourse} />
</div>
<CalendarBottomBar courseCells={courseCells} setCourse={setCourse} />
</div>
</div>
<CourseCatalogInjectedPopup
course={course!} // always defined when showPopup is true
onClose={() => setShowPopup(false)}
open={showPopup}
afterLeave={() => setCourse(null)}
/>
</div>
<CourseCatalogInjectedPopup
course={course!} // always defined when showPopup is true
onClose={() => setShowPopup(false)}
open={showPopup}
afterLeave={() => setCourse(null)}
/>
</div>
</CalendarContext.Provider>
);
}