Resolve "Add slide button"

client/src/pages/presentationEditor/PresentationEditorPage.tsx

-import { Button, CircularProgress, Divider, Typography } from '@material-ui/core'
+import { Button, CircularProgress, Divider, Menu, MenuItem, Typography } from '@material-ui/core'
 import AppBar from '@material-ui/core/AppBar'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import Drawer from '@material-ui/core/Drawer'
-import List from '@material-ui/core/List'
 import ListItemText from '@material-ui/core/ListItemText'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import AddOutlinedIcon from '@material-ui/icons/AddOutlined'
 import BuildOutlinedIcon from '@material-ui/icons/BuildOutlined'
 import CreateOutlinedIcon from '@material-ui/icons/CreateOutlined'
 import DnsOutlinedIcon from '@material-ui/icons/DnsOutlined'
 import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'
+import axios from 'axios'
 import React, { useEffect } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import { getCities } from '../../actions/cities'
@@ -16,6 +17,7 @@ import { getEditorCompetition, setEditorSlideId } from '../../actions/editor'
 import { getTypes } from '../../actions/typesAction'
 import { useAppDispatch, useAppSelector } from '../../hooks'
 import { RichSlide } from '../../interfaces/ApiRichModels'
+import { RemoveMenuItem } from '../admin/styledComp'
 import { Content } from '../views/styled'
 import SettingsPanel from './components/SettingsPanel'
 import SlideEditor from './components/SlideEditor'
@@ -23,14 +25,17 @@ import {
   CenteredSpinnerContainer,
   HomeIcon,
   PresentationEditorContainer,
+  SlideList,
   SlideListItem,
   ToolBarContainer,
   ViewButton,
   ViewButtonGroup,
 } from './styled'
 
-function createSlide(name: string) {
-  return { name }
+const initialState = {
+  mouseX: null,
+  mouseY: null,
+  slideOrder: null,
 }
 
 const leftDrawerWidth = 150
@@ -92,6 +97,45 @@ const PresentationEditorPage: React.FC = () => {
     dispatch(setEditorSlideId(id))
   }
 
+  const createNewSlide = async () => {
+    await axios.post(`/competitions/${id}/slides`, { title: 'new slide' })
+    dispatch(getEditorCompetition(id))
+  }
+
+  const [contextState, setContextState] = React.useState<{
+    mouseX: null | number
+    mouseY: null | number
+    slideOrder: null | number
+  }>(initialState)
+
+  const handleRightClick = (event: React.MouseEvent<HTMLDivElement>, slideOrder: number) => {
+    event.preventDefault()
+    setContextState({
+      mouseX: event.clientX - 2,
+      mouseY: event.clientY - 4,
+      slideOrder: slideOrder,
+    })
+  }
+
+  const handleClose = () => {
+    setContextState(initialState)
+  }
+
+  const handleRemoveSlide = async () => {
+    await axios.delete(`/competitions/${id}/slides/${contextState.slideOrder}`)
+    dispatch(getEditorCompetition(id))
+    setContextState(initialState)
+  }
+
+  const handleDuplicateSlide = async () => {
+    const response = await axios.post(`/competitions/${id}/slides`)
+    const newOrder = response.data.items[response.data.total_count - 1].order
+    const oldSlide = competition.slides.find((slide) => slide.order === contextState.slideOrder)
+    await axios.put(`/competitions/${id}/slides/${newOrder}`, { timer: oldSlide?.timer, title: oldSlide?.title })
+    dispatch(getEditorCompetition(id))
+    setContextState(initialState)
+  }
+
   const renderSlideIcon = (slide: RichSlide) => {
     switch (slide.questions[0].type_id) {
       case 0:
@@ -139,21 +183,31 @@ const PresentationEditorPage: React.FC = () => {
       >
         <div className={classes.toolbar} />
         <Divider />
-        <List>
-          {competition.slides &&
-            competition.slides.map((slide) => (
-              <SlideListItem
-                divider
-                button
-                key={slide.id}
-                selected={slide.id === activeSlideId}
-                onClick={() => setActiveSlideId(slide.id)}
-              >
-                {renderSlideIcon(slide)}
-                <ListItemText primary={slide.title} />
-              </SlideListItem>
-            ))}
-        </List>
+        <SlideList>
+          <div>
+            {competition.slides &&
+              competition.slides.map((slide) => (
+                <SlideListItem
+                  divider
+                  button
+                  key={slide.id}
+                  selected={slide.id === activeSlideId}
+                  onClick={() => setActiveSlideId(slide.id)}
+                  onContextMenu={(event) => handleRightClick(event, slide.order)}
+                >
+                  {renderSlideIcon(slide)}
+                  <ListItemText primary={`Sida ${slide.order + 1}`} />
+                </SlideListItem>
+              ))}
+          </div>
+          <div>
+            <Divider />
+            <SlideListItem divider button onClick={() => createNewSlide()}>
+              <ListItemText primary="Ny sida" />
+              <AddOutlinedIcon />
+            </SlideListItem>
+          </div>
+        </SlideList>
       </Drawer>
       <div className={classes.toolbar} />
       <Drawer
@@ -176,6 +230,20 @@ const PresentationEditorPage: React.FC = () => {
       <Content leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={rightDrawerWidth}>
         <SlideEditor />
       </Content>
+      <Menu
+        keepMounted
+        open={contextState.mouseY !== null}
+        onClose={handleClose}
+        anchorReference="anchorPosition"
+        anchorPosition={
+          contextState.mouseY !== null && contextState.mouseX !== null
+            ? { top: contextState.mouseY, left: contextState.mouseX }
+            : undefined
+        }
+      >
+        <MenuItem onClick={handleDuplicateSlide}>Duplicera</MenuItem>
+        <RemoveMenuItem onClick={handleRemoveSlide}>Ta bort</RemoveMenuItem>
+      </Menu>
     </PresentationEditorContainer>
   )
 }

client/src/pages/presentationEditor/components/CompetitionSettings.tsx

@@ -117,7 +117,7 @@ const CompetitionSettings: React.FC = () => {
           {/*TODO: fixa så cities laddar in i statet likt i CompetitionManager*/}
           <Select
             value={cities.find((city) => city.id === competition.city_id)?.name || ''}
-            label="RegionSelect"
+            label="Region"
             onChange={handleChange}
           >
             {cities.map((city) => (

client/src/pages/presentationEditor/styled.tsx

-import { Button, ListItem, Toolbar } from '@material-ui/core'
+import { Button, List, ListItem, Toolbar } from '@material-ui/core'
 import styled from 'styled-components'
 
 export const ToolBarContainer = styled(Toolbar)`
@@ -16,6 +16,14 @@ export const ViewButtonGroup = styled.div`
   flex-direction: row;
 `
 
+export const SlideList = styled(List)`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 0px;
+`
+
 export const SlideListItem = styled(ListItem)`
   text-align: center;
   height: 60px;