Complete stubs for planner controls

Author: lhvy

client/src/components/planner/controls/Controls.tsx

@@ -2,12 +2,11 @@ import { Box, Grid } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
-// import Autotimetabler from './Autotimetabler';
-// import CustomEvents from './CustomEvent';
-// import History from './History';
 import { Term } from '../../../api/times/times';
 import Autotimetabler from './Autotimetabler';
 import CourseSelect from './CourseSelect';
+import CustomEvents from './customEvents/CustomEvents';
+import History from './History';
 import TermSelect from './TermSelect';
 
 const TermSelectWrapper = styled(Box)`
@@ -84,11 +83,15 @@ const Controls: React.FC<{ term: Term; setTerm: (term: Term) => void; timetableI
           md: 5.5,
         }}
       >
-        <CustomEventsWrapper>{/* <CustomEvents /> */}</CustomEventsWrapper>
+        <CustomEventsWrapper>
+          <CustomEvents />
+        </CustomEventsWrapper>
         <AutotimetablerWrapper>
           <Autotimetabler />
         </AutotimetablerWrapper>
-        <HistoryWrapper>{/* <History /> */}</HistoryWrapper>
+        <HistoryWrapper>
+          <History />
+        </HistoryWrapper>
       </Grid>
     </Grid>
   );

client/src/components/planner/controls/History.tsx

@@ -0,0 +1,37 @@
+import { Delete, Redo, Undo } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
+
+const isMacOS = navigator.userAgent.includes('Mac');
+const clearTooltip = isMacOS ? 'Clear (Cmd+D)' : 'Clear (Ctrl+D)';
+const undoTooltip = isMacOS ? 'Undo (Cmd+Z)' : 'Undo (Ctrl+Z)';
+const redoTooltip = isMacOS ? 'Redo (Cmd+Shift+Z)' : 'Redo (Ctrl+Y)';
+
+const History: React.FC = () => {
+  // TODO: Implement clear and history functionality
+
+  return (
+    <>
+      <Tooltip title={clearTooltip}>
+        <IconButton disabled={true} color="inherit" size="large">
+          <Delete />
+        </IconButton>
+      </Tooltip>
+      <Tooltip title={undoTooltip}>
+        <span>
+          <IconButton disabled={true} color="inherit" size="large">
+            <Undo />
+          </IconButton>
+        </span>
+      </Tooltip>
+      <Tooltip title={redoTooltip}>
+        <span>
+          <IconButton disabled={true} color="inherit" size="large">
+            <Redo />
+          </IconButton>
+        </span>
+      </Tooltip>
+    </>
+  );
+};
+
+export default History;

client/src/components/planner/controls/customEvents/CustomEvents.tsx

@@ -0,0 +1,36 @@
+import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
+import { Box } from '@mui/material';
+import { useState } from 'react';
+
+import { StyledControlsButton } from '../../../../styles/ControlStyles';
+import { DropdownButton } from '../../../../styles/CustomEventStyles';
+
+const CustomEvent: React.FC = () => {
+  const [createEventAnchorEl, setCreateEventAnchorEl] = useState<null | HTMLElement>(null);
+  const openCreateEventPopover = Boolean(createEventAnchorEl);
+  const popoverId = openCreateEventPopover ? 'create-event-popover' : undefined;
+
+  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setCreateEventAnchorEl(event.currentTarget);
+  };
+
+  // TODO: Implement create event popover
+  return (
+    <StyledControlsButton>
+      <DropdownButton disableElevation aria-describedby={popoverId} variant="contained" onClick={handleOpen}>
+        <Box
+          sx={{
+            ml: '1px',
+            flexGrow: 1,
+            marginTop: '3px',
+          }}
+        >
+          CREATE EVENT
+        </Box>
+        {openCreateEventPopover ? <ArrowDropUp /> : <ArrowDropDown />}
+      </DropdownButton>
+    </StyledControlsButton>
+  );
+};
+
+export default CustomEvent;