Resolve "Move tiny mce to settings panel"

Closes #114 (closed)

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

-import { Editor } from '@tinymce/tinymce-react'
 import axios from 'axios'
 import React, { useState } from 'react'
 import { Rnd } from 'react-rnd'
+import { ComponentTypes } from '../../../enum/ComponentTypes'
 import { useAppSelector } from '../../../hooks'
-import { TextComponent } from '../../../interfaces/ApiModels'
+import { Component, ImageComponent, TextComponent } from '../../../interfaces/ApiModels'
 import { Position, Size } from '../../../interfaces/Components'
+import CheckboxComponent from './CheckboxComponent'
+import ImageComponentDisplay from './ImageComponentDisplay'
+import { TextComponentContainer } from './styled'
 
 type ImageComponentProps = {
-  component: TextComponent
+  component: Component
 }
 
-const TextComponentDisplay = ({ component }: ImageComponentProps) => {
+const RndComponent = ({ component }: ImageComponentProps) => {
+  const [hover, setHover] = useState(false)
   const [currentPos, setCurrentPos] = useState<Position>({ x: component.x, y: component.y })
   const [currentSize, setCurrentSize] = useState<Size>({ w: component.w, h: component.h })
   const competitionId = useAppSelector((state) => state.editor.competition.id)
   const slideId = useAppSelector((state) => state.editor.activeSlideId)
-  if (component.id === 1) console.log(component)
-  const handleEditorChange = (e: any) => {
-    console.log('Content was updated:', e.target.getContent())
-    axios.put(`/competitions/${competitionId}/slides/${slideId}/components/${component.id}`, {
-      data: { ...component.data, text: e.target.getContent() },
-    })
-  }
   const handleUpdatePos = (pos: Position) => {
-    axios.put(`/competitions/${competitionId}/slides/${slideId}/components/${component.id}`, {
+    // TODO: change path to /slides/${slideId}
+    axios.put(`/competitions/${competitionId}/slides/0/components/${component.id}`, {
       x: pos.x,
       y: pos.y,
     })
   }
-  const handleUpdateSize = () => {
-    axios.put(`/competitions/${competitionId}/slides/${slideId}/components/${component.id}`, {
-      w: currentSize.w,
-      h: currentSize.h,
+  const handleUpdateSize = (size: Size) => {
+    // TODO: change path to /slides/${slideId}
+    axios.put(`/competitions/${competitionId}/slides/0/components/${component.id}`, {
+      w: size.w,
+      h: size.h,
     })
   }
+
+  const renderInnerComponent = () => {
+    switch (component.type_id) {
+      case ComponentTypes.Checkbox:
+        return <CheckboxComponent key={component.id} component={component} />
+      case ComponentTypes.Text:
+        return (
+          <TextComponentContainer
+            hover={hover}
+            dangerouslySetInnerHTML={{ __html: (component as TextComponent).data.text }}
+          />
+        )
+      case ComponentTypes.Image:
+        return <ImageComponentDisplay key={component.id} component={component as ImageComponent} />
+      default:
+        break
+    }
+  }
+
   return (
     <Rnd
       minWidth={50}
@@ -43,38 +61,29 @@ const TextComponentDisplay = ({ component }: ImageComponentProps) => {
         setCurrentPos({ x: d.x, y: d.y })
         handleUpdatePos(d)
       }}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
       size={{ width: currentSize.w, height: currentSize.h }}
       position={{ x: currentPos.x, y: currentPos.y }}
-      onResize={(e, direction, ref, delta, position) => {
+      onResizeStop={(e, direction, ref, delta, position) => {
         setCurrentSize({
           w: ref.offsetWidth,
           h: ref.offsetHeight,
         })
         setCurrentPos(position)
+        handleUpdateSize({ w: ref.offsetWidth, h: ref.offsetHeight })
+        handleUpdatePos(position)
       }}
-      onResizeStop={handleUpdateSize}
+      onResize={(e, direction, ref, delta, position) =>
+        setCurrentSize({
+          w: ref.offsetWidth,
+          h: ref.offsetHeight,
+        })
+      }
     >
-      <div style={{ height: '100%', width: '100%' }}>
-        <Editor
-          initialValue={component.data.text}
-          init={{
-            height: '100%',
-            menubar: false,
-            plugins: [
-              'advlist autolink lists link image charmap print preview anchor',
-              'searchreplace visualblocks code fullscreen',
-              'insertdatetime media table paste code help wordcount',
-            ],
-            toolbar:
-              'undo redo | formatselect | fontselect | bold italic backcolor | \
-             alignleft aligncenter alignright alignjustify | \
-             bullist numlist outdent indent | removeformat | help',
-          }}
-          onChange={handleEditorChange}
-        />
-      </div>
+      {renderInnerComponent()}
     </Rnd>
   )
 }
 
-export default TextComponentDisplay
+export default RndComponent