feat: drag and drop

fisirc · Nov 29, 2024 · 4753942 · 4753942
1 parent 795a62b
commit 4753942
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 13 deletions.
diff --git a/app/src/hooks/useApi.ts b/app/src/hooks/useApi.ts
@@ -37,7 +37,7 @@ const mockedUserMedia = [
     },
 ] satisfies Array<UserContentFileElement>;
 
-export const galleryResponse = {
+const galleryResponse = {
     "origin": [-7.8, -4.34],
     "slots": [
         {

diff --git a/app/src/pages/Editor/components/GalleryCanvas2D.tsx b/app/src/pages/Editor/components/GalleryCanvas2D.tsx
@@ -9,7 +9,7 @@ import { useEditorStore } from '@/stores/editorAction';
 import { PictureSlot } from '@/pages/Editor/components/blocks/PictureSlot';
 import { Model3DSlot } from '@/pages/Editor/components/blocks/Model3DBlock';
 import { getInitialScale, getInitialXY, saveScaleToLocalStorage, saveXYToLocalStorage } from '../utils';
-import { galleryResponse, useApi } from '@/hooks/useApi';
+import { useApi } from '@/hooks/useApi';
 import { StillerGallery } from '@/types';
 
 const initialScale = getInitialScale();
@@ -56,6 +56,8 @@ export const GalleryCanvas2D = ({ gallery, triggerReRender }: GalleryCanvas2DPro
     }
   }, [response]);
 
+  console.log(response?.data.slots.slots)
+
   return (
     <Box
       id="canvas"
@@ -108,7 +110,7 @@ export const GalleryCanvas2D = ({ gallery, triggerReRender }: GalleryCanvas2DPro
         <Layer scale={SLOTS_SCALE} offsetX={response?.data.slots.origin[0]} offsetY={response?.data.slots.origin[1]}>
           {
             response && response.data.slots.slots.map((block, i) => {
-              const res = block.res == 0 ? `https://pandadiestro.xyz/services/stiller/file/dl/${block.res}` : null;
+              const res = block.res !== 0 ? `https://pandadiestro.xyz/services/stiller/file/dl/${block.res}` : null;
 
               if (block.type == '2d') {
                 return (

diff --git a/app/src/pages/Editor/components/blocks/PictureSlot.tsx b/app/src/pages/Editor/components/blocks/PictureSlot.tsx
@@ -9,7 +9,7 @@ import { CORNER_RADIUS, FRAME_STROKE_WIDTH, noImageSrc } from '@/constants';
 import { JSONValue, SlotVertices } from '@/types';
 import { cosine, getFrameAngle, getFrameHeight, getFrameWidth, sine, v3tov2 } from '@/pages/Editor/utils';
 import { mutate } from 'swr';
-import { galleryResponse } from '@/hooks/useApi';
+import { useUser } from '@/stores/useUser';
 
 type PictureSlotProps = {
   idRef: string,
@@ -33,7 +33,9 @@ export const PictureSlot = ({ idRef, v, res, props }: PictureSlotProps) => {
     useEditorStore.getState().setDraggingFileVisible(true);
   }
 
-  const [image] = useImage(src ?? noImageSrc);
+  const [optimisticImgSrc, setOptimisticImgSrc] = useState<string | null>(null);
+
+  const [image] = useImage(src ?? optimisticImgSrc ?? noImageSrc);
 
   const pos = v3tov2(v[2]);
   const rotation = getFrameAngle(v);
@@ -80,17 +82,28 @@ export const PictureSlot = ({ idRef, v, res, props }: PictureSlotProps) => {
             child: <Text>Hawk tuah!</Text>
           });
         }}
-        onMouseUp={() => {
+        onMouseUp={async () => {
           const dropped = hovering && dragging;
 
           if (dropped) {
-            for (let e of galleryResponse.slots) {
-              if (e.ref === idRef) {
-                e.res = draggingElem.url;
-              }
-            }
+            setOptimisticImgSrc(draggingElem.url);
+            const response = await fetch('https://pandadiestro.xyz/services/stiller/gallery/slot', {
+              method: 'PATCH',
+              headers: {
+                'Content-Type': 'application/json',
+                'token': useUser.getState().token ?? 'invalid-token',
+              },
+              body: JSON.stringify({
+                gallery: gallery,
+                ref: idRef,
+                title: draggingElem.title,
+                description: draggingElem.description,
+                res: draggingElem.id,
+              }),
+            });
+            console.log('UPDATING TO', draggingElem.id, 'MUTATING', `/gallery/${gallery}`)
+            mutate(`/gallery/${gallery}`);
           }
-          mutate(`gallery/${gallery}`);
         }}
         onMouseEnter={() => {
           setHovering(true);

diff --git a/app/src/pages/Gallery3D/Experience.tsx b/app/src/pages/Gallery3D/Experience.tsx
@@ -1,7 +1,7 @@
 import { Perf } from 'r3f-perf';
 import Ecctrl, { } from 'ecctrl';
 import { KeyboardControls, Sky, Sparkles } from '@react-three/drei';
-import { galleryResponse, useApi } from '@/hooks/useApi';
+import { useApi } from '@/hooks/useApi';
 import { SceneRoom } from './components/gallery/Scene';
 import { BallCollider, Physics } from '@react-three/rapier';
 import { useEffect, useState } from 'react';