1 files changed, 46 insertions, 5 deletions
diff --git a/src/components/chatbubble.jsx b/src/components/chatbubble.jsx
index c85f026..01dc6e5 100644
--- a/src/components/chatbubble.jsx
+++ b/src/components/chatbubble.jsx
@@ -7,12 +7,12 @@ import { AppContext } from '../App';
 import Color from 'color';
 import { Vector3 } from 'three';
 
-export default function ChatBubble({ position, text }) {
+export default function ChatBubble({ id, position, text }) {
     const meshRef = useRef();
     const [hovered, setHovered] = useState(false);
     const [activatable, setActivatable] = useState(false);
     const [active, setActive] = useState(false);
-    const { keysPressed } = useContext(AppContext);
+    const { keysPressed, setMessages, apiToken } = useContext(AppContext);
     useFrame((state, delta) => {
         if (active) {
             meshRef.current.rotation.y += delta;
@@ -22,7 +22,7 @@ export default function ChatBubble({ position, text }) {
                 setActive(false);
             }
         }
-        if(hovered) {
+        if (hovered) {
             let cameraPos = new Vector3();
             state.camera.getWorldPosition(cameraPos);
             setActivatable(cameraPos.distanceToSquared(meshRef.current.position) < 25);
@@ -32,6 +32,47 @@ export default function ChatBubble({ position, text }) {
         if (keysPressed.current.includes('KeyE') && activatable) {
             setActive(!active);
         }
+
+        if (keysPressed.current.includes('KeyX') && activatable) {
+            if (confirm("are you sure you want to delete this message?")) {
+                let data = new FormData();
+                data.append("token", apiToken.current);
+                data.append("message_id", id);
+                fetch('/api/remove_message', {
+                    method: 'DELETE',
+                    body: data,
+                }).then((res) => {
+                    if (res.status == 204) {
+                        fetch('/api/message').then((res) => res.json()).then((data) => {
+                            setMessages(data);
+                        });
+                    } else if (res.status == 401) {
+                        alert('you are not allowed to delete this')
+                    }
+                });
+            }
+        }
+        if(keysPressed.current.includes('KeyR') && activatable) {
+            const newMesssage = prompt();
+            if(newMesssage) {
+                let data = new FormData();
+                data.append("token", apiToken.current);
+                data.append("message_id", id);
+                data.append("message", newMesssage);
+                fetch('/api/edit_message', {
+                    method: 'PUT',
+                    body: data,
+                }).then((res) => {
+                    if (res.status == 204) {
+                        fetch('/api/message').then((res) => res.json()).then((data) => {
+                            setMessages(data);
+                        });
+                    } else if (res.status == 401) {
+                        alert('you are not allowed to delete this')
+                    }
+                });
+            }
+        }
     }, -2);
     const { nodes } = useGLTF('../assets/message-bubble.glb');
 
@@ -47,8 +88,8 @@ export default function ChatBubble({ position, text }) {
             geometry={nodes.Curve.geometry}
             onPointerOver={(_) => setHovered(true)}
             onPointerOut={(_) => setHovered(false)}>
-            <meshStandardMaterial color={color.toString()}/>
-            {active && <Html center position={[0, .5, 0]} className='unselectable textPopup'><span>{text}</span></Html>}
+            <meshStandardMaterial color={color.toString()} />
+            {active && <Html center unselectable='on' position={[0, .5, 0]} className='textPopup'><span>{text}</span></Html>}
         </mesh>
     )
 }