checkout

src/components/CourseCard.tsx

@@ -7,7 +7,6 @@ import styled, { css } from 'styled-components';
 import { makeStyles } from '@material-ui/core/styles';
 import DeleteIcon from '@material-ui/icons/Delete';
 import { useMemo } from 'react';
-import { createClassTime } from '../utils';
 import { dayMapping } from '../constants';
 
 const CourseCardWrapper = styled.div`
@@ -219,12 +218,9 @@ export const CourseCard = ({ course }: CourseCardProps) => {
                 </FlexItem>
               )}
               <FlexItem style={{ justifyContent: 'center', flexDirection: 'column' }}>
-                {/* <span>
-                  {dayMapping[group.day]} {createClassTime(group.time)[0]} - {createClassTime(group.time)[1]}
-                </span> */}
                 <div>{dayMapping[group.day]}</div>
                 <div>
-                  {createClassTime(group.time)[0]} - {createClassTime(group.time)[1]}
+                  {group.time} - {group.endTime}
                 </div>
               </FlexItem>
             </FlexboxWrapper>

src/components/SchedulerRow.tsx

@@ -77,7 +77,7 @@ const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
     `}
   transition: background-color ease-out 0.4s;
   box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75);
-  cursor:pointer;
+  cursor: pointer;
 `;
 
 const threeStyles = () => {
@@ -189,7 +189,7 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
                       <BoldParagraph isThree={groupsPerDay[group.day] >= 3}>{groups[index].name}</BoldParagraph>
                       {groupsPerDay[group.day] < 3 ? (
                         <TextWrapper>
-                          <div>{`${groups[index].time[0]}-${groups[index].time[1]}`}</div>
+                          <div>{`${groups[index].time}-${groups[index].endTime}`}</div>
                           <div>3/{groups[index].capacity}</div>
                         </TextWrapper>
                       ) : (