Resolve "View duplication"

Closes #156 (closed)

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

-import { Card, IconButton, Tooltip } from '@material-ui/core'
+import { Card, IconButton, Menu, MenuItem, Tooltip } from '@material-ui/core'
 import axios from 'axios'
 import React, { useEffect, useState } from 'react'
 import { Rnd } from 'react-rnd'
+import { getEditorCompetition } from '../../../actions/editor'
 import { ComponentTypes } from '../../../enum/ComponentTypes'
-import { useAppSelector } from '../../../hooks'
+import { useAppDispatch, useAppSelector } from '../../../hooks'
 import { Component, ImageComponent, TextComponent } from '../../../interfaces/ApiModels'
 import { Position, Size } from '../../../interfaces/Components'
+import { RemoveMenuItem } from '../../admin/styledComp'
 import ImageComponentDisplay from './ImageComponentDisplay'
 import { HoverContainer } from './styled'
 import TextComponentDisplay from './TextComponentDisplay'
+//import NestedMenuItem from 'material-ui-nested-menu-item'
 
 type RndComponentProps = {
   component: Component
@@ -17,6 +20,8 @@ type RndComponentProps = {
   scale: number
 }
 
+const initialMenuState = { menuIsOpen: false, mouseX: null, mouseY: null, componentId: null }
+
 const RndComponent = ({ component, width, height, scale }: RndComponentProps) => {
   const [hover, setHover] = useState(false)
   const [currentPos, setCurrentPos] = useState<Position>({ x: component.x, y: component.y })
@@ -27,6 +32,14 @@ const RndComponent = ({ component, width, height, scale }: RndComponentProps) =>
   const typeName = useAppSelector(
     (state) => state.types.componentTypes.find((componentType) => componentType.id === component.type_id)?.name
   )
+  const [menuState, setMenuState] = useState<{
+    menuIsOpen: boolean
+    mouseX: null | number
+    mouseY: null | number
+    componentId: null | number
+  }>(initialMenuState)
+  const dispatch = useAppDispatch()
+
   const handleUpdatePos = (pos: Position) => {
     axios.put(`/api/competitions/${competitionId}/slides/${slideId}/components/${component.id}`, {
       x: pos.x,
@@ -49,6 +62,37 @@ const RndComponent = ({ component, width, height, scale }: RndComponentProps) =>
     setCurrentPos({ x: currentPos.x, y: centerY })
     handleUpdatePos({ x: currentPos.x, y: centerY })
   }
+  const handleRightClick = (event: React.MouseEvent<HTMLDivElement>, componentId: number) => {
+    event.preventDefault()
+    setMenuState({
+      menuIsOpen: true,
+      mouseX: event.clientX - 2,
+      mouseY: event.clientY - 4,
+      componentId: componentId,
+    })
+  }
+  const handleCloseMenu = () => {
+    setMenuState(initialMenuState)
+  }
+  const handleDuplicateComponent = async (viewTypeId: number) => {
+    console.log('Duplicate')
+    await axios
+      .post(
+        `/api/competitions/${competitionId}/slides/${slideId}/components/${menuState.componentId}/copy/${viewTypeId}`
+      )
+      .then(() => dispatch(getEditorCompetition(competitionId.toString())))
+      .catch(console.log)
+    setMenuState(initialMenuState)
+  }
+  const handleRemoveComponent = async () => {
+    console.log('Remove')
+    await axios
+      .delete(`/api/competitions/${competitionId}/slides/${slideId}/components/${menuState.componentId}`)
+      .then(() => dispatch(getEditorCompetition(competitionId.toString())))
+      .catch(console.log)
+    setMenuState(initialMenuState)
+  }
+
   useEffect(() => {
     const downHandler = (ev: KeyboardEvent) => {
       if (ev.key === 'Shift') setShiftPressed(true)
@@ -102,6 +146,8 @@ const RndComponent = ({ component, width, height, scale }: RndComponentProps) =>
       lockAspectRatio={shiftPressed}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
+      //Right click to open menu
+      onContextMenu={(event: React.MouseEvent<HTMLDivElement>) => handleRightClick(event, component.id)}
       //Multiply by scale to show components correctly for current screen size
       size={{ width: currentSize.w * scale, height: currentSize.h * scale }}
       position={{ x: currentPos.x * scale, y: currentPos.y * scale }}
@@ -129,6 +175,23 @@ const RndComponent = ({ component, width, height, scale }: RndComponentProps) =>
         </Card>
       )}
       {renderInnerComponent()}
+      <Menu
+        keepMounted
+        open={menuState.menuIsOpen}
+        onClose={handleCloseMenu}
+        anchorReference="anchorPosition"
+        anchorPosition={
+          menuState.mouseY !== null && menuState.mouseX !== null
+            ? { top: menuState.mouseY, left: menuState.mouseX }
+            : undefined
+        }
+      >
+        {/* <NestedMenuItem label="Duplicera"> */}
+        <MenuItem onClick={() => handleDuplicateComponent(3)}>Duplicera till åskådarvy</MenuItem>
+        <MenuItem onClick={() => handleDuplicateComponent(1)}>Duplicera till deltagarvy</MenuItem>
+        {/* </NestedMenuItem> */}
+        <RemoveMenuItem onClick={handleRemoveComponent}>Ta bort</RemoveMenuItem>
+      </Menu>
     </Rnd>
   )
 }