import { API } from "@koh/api-client" ; import { Heatmap , QueuePartial , Role } from "@koh/common" ; import { Col , Row } from "antd" ; import { chunk , mean } from "lodash" ; import moment from "moment" ; import Head from "next/head" ; import { useRouter } from "next/router" ; import React , { ReactElement } from "react" ; import styled from "styled-components" ; import { StandardPageContainer } from "../../../components/common/PageContainer" ; import NavBar from "../../../components/Nav/NavBar" ; import SchedulePanel from "../../../components/Schedule/SchedulePanel" ; import OpenQueueCard , { OpenQueueCardSkeleton , } from "../../../components/Today/OpenQueueCard" ; import PopularTimes from "../../../components/Today/PopularTimes/PopularTimes" ; import TodayPageCheckinButton from "../../../components/Today/ProfessorCheckinButton" ; import ReleaseNotes from "../../../components/Today/ReleaseNotes" ; import WelcomeStudents from "../../../components/Today/WelcomeStudents" ; import { useCourse } from "../../../hooks/useCourse" ; import { useRoleInCourse } from "../../../hooks/useRoleInCourse" ; const Container = styled . div `
  margin-top: 32px;
` ; const Title = styled . div `
  font-weight: 500;
  font-size: 30px;
  color: #212934;
` ; function arrayRotate ( arr , count ) { const adjustedCount = ( arr . length + count ) % arr . length ; return arr . slice ( adjustedCount , arr . length ) . concat ( arr . slice ( 0 , adjustedCount ) ) ; } const collapseHeatmap = ( heatmap ) : Heatmap => chunk ( heatmap , 4 ) . map ( ( hours ) => { const filteredOfficeHours = hours . filter ( ( v ) => v !== - 1 ) ; return filteredOfficeHours . length > 0 ? mean ( filteredOfficeHours ) : - 1 ; } ) ; export default function Today ( ) { const router = useRouter ( ) ; const { cid } = router . query ; const role = useRoleInCourse ( Number ( cid ) ) ; const { course , mutateCourse } = useCourse ( Number ( cid ) ) ; const updateQueueNotes = async ( queue , notes ) : Promise < void > => { const newQueues = course && course . queues . map ( ( q ) => ( q . id === queue . id ? { ... q , notes } : q ) ) ; mutateCourse ( { ... course , queues : newQueues } , false ) ; await API . queues . update ( queue . id , { notes , allowQuestions : queue . allowQuestions , } ) ; mutateCourse ( ) ; } ; return ( < StandardPageContainer > < Head > < title > { course ?. name } | Khoury Office Hours < /title> < /Head> < ReleaseNotes / > < WelcomeStudents /> < NavBar courseId = { Number ( cid ) } / > < Container > < Row gutter = { 64 } > < Col md = { 12 } xs = { 24 } > < Row justify = "space-between" > < Title > Current Office Hours < /Title> < TodayPageCheckinButton / > < /Row> { role === Role . PROFESSOR && ( < Row > < div > You are a professor for this course < /div> < /Row>)} { course ?. queues ?. length === 0 ? ( < h1 style = { { paddingTop : "100px" } } > There are currently no scheduled office hours < /h1>) : (course?.queues?.map((q) => (<OpenQueueCard key={q.id} queue={q} isTA={role === Role.TA} updateQueueNotes={updateQueueNotes}/ > ) ) ) } { ! course && < OpenQueueCardSkeleton />} { } { course && course . heatmap && ( < PopularTimes heatmap = { collapseHeatmap ( arrayRotate ( course . heatmap , - Math . floor ( moment ( ) . utcOffset ( ) / 15 ) ) ) } />)} < /Col> < Col md = { 12 } sm = { 24 } > < SchedulePanel courseId = { Number ( cid ) } defaultView = "day" / > < /Col> < /Row> < /Container> < /StandardPageContainer>); }