From 9dbe21a4a44a1fe5bc7a17eb12549db45739cc0c Mon Sep 17 00:00:00 2001
From: Paolo Flores <pflores.fisi22@gmail.com>
Date: Sun, 1 Dec 2024 22:14:20 -0500
Subject: [PATCH] fix backend breaking changes

---
 app/README.md                                 |  2 +-
 app/src/components/Empty/Empty.tsx            |  2 +-
 app/src/components/Overlays/LoadingScreen.tsx |  9 ++++--
 app/src/pages/Dashboard/Dashboard.tsx         | 31 ++++++++++++++++---
 .../Dashboard/GalleryDashboard.module.css     |  3 +-
 .../Dashboard/components/TemplatesList.tsx    | 13 ++++----
 .../Editor/components/ContentSidebar.tsx      |  7 ++---
 .../Editor/components/GalleryCanvas2D.tsx     |  2 --
 .../pages/Editor/components/MainButtons.tsx   |  2 +-
 .../Editor/components/blocks/Model3DBlock.tsx |  1 -
 .../Editor/components/blocks/PictureSlot.tsx  | 13 ++++----
 app/src/pages/Editor/index.tsx                |  2 +-
 app/src/pages/Gallery3D/Experience.tsx        | 12 ++++++-
 app/src/pages/Gallery3D/index.tsx             |  6 ++--
 app/templates/gallery1/topview.svg            | 18 ++++++-----
 app/templates/gallery2/topview.svg            | 17 +++++-----
 app/templates/gallery3/data.json              | 16 ++++++++++
 17 files changed, 105 insertions(+), 51 deletions(-)

diff --git a/app/README.md b/app/README.md
index e240e6e..d9a3ae5 100644
--- a/app/README.md
+++ b/app/README.md
@@ -20,4 +20,4 @@
 - Virtual museum: <https://github.com/r23/Virtual-Reality-Museum>
   - <https://github.com/r23/Virtual-Reality-Museum/blob/a37c16ce8cf00addeab8600c728ad04b925961e7/index.html#L132>
   - <https://github.com/r23/Virtual-Reality-Museum/blob/master/models/good_samaritan.mtl>
-- SVG Editor: <https://svgedit.netlify.app/>
+- SVG Editor: <https://svgedit.netlify.app/editor/index.html>
diff --git a/app/src/components/Empty/Empty.tsx b/app/src/components/Empty/Empty.tsx
index 92f7365..fbbeaae 100644
--- a/app/src/components/Empty/Empty.tsx
+++ b/app/src/components/Empty/Empty.tsx
@@ -1,6 +1,6 @@
 const Empty = () => {
   return (
-    <p className="fz-xs c-dimmed ta-center p-sm">
+    <p className="fz-sm c-dimmed ta-center p-sm">
       No se encontraron resultados
     </p>
   );
diff --git a/app/src/components/Overlays/LoadingScreen.tsx b/app/src/components/Overlays/LoadingScreen.tsx
index 1e2116f..91293fe 100644
--- a/app/src/components/Overlays/LoadingScreen.tsx
+++ b/app/src/components/Overlays/LoadingScreen.tsx
@@ -1,9 +1,14 @@
 import { Center, Stack, Text } from "@mantine/core";
 import { AppIcon } from "../AppIcon";
 
-export const LoadingScreen = () => {
+type LoadingScreenProps = {
+  h?: number;
+  mt?: number;
+};
+
+export const LoadingScreen = ({ h, mt }: LoadingScreenProps) => {
   return (
-    <Center h={'100vh'}>
+    <Center h={h ? h : '100vh'} mt={mt}>
       <Stack align="center">
         <AppIcon animated size={100} />
         <Text size="xl" mt={18}>Cargando metagallery...</Text>
diff --git a/app/src/pages/Dashboard/Dashboard.tsx b/app/src/pages/Dashboard/Dashboard.tsx
index 52efe34..5318cf6 100644
--- a/app/src/pages/Dashboard/Dashboard.tsx
+++ b/app/src/pages/Dashboard/Dashboard.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Menu, Search, Plus, Layout, Edit, Copy, Check } from "lucide-react";
 import { Link } from "wouter";
-import { Button, Modal, ScrollArea } from "@mantine/core";
+import { Box, Button, Loader, Modal, ScrollArea, Text, Title } from "@mantine/core";
 import { NewGalleryForm } from "@/pages/Dashboard/components/NewGalleryForm";
 import { useUser } from "@/stores/useUser";
 import styles from "./GalleryDashboard.module.css";
@@ -86,8 +86,8 @@ export const GalleryDashboard = () => {
   const [showCommunityProjects, setShowCommunityProjects] = useState(false);
   const { user, loading } = useUser();
 
-  const { response: userGalleries } = useApi<StillerGallery[]>('/gallery');
-  const { response: communityGalleries } = useApi<StillerGallery[]>('/galleryall');
+  const { response: userGalleries, isLoading: galleryLoading } = useApi<StillerGallery[]>('/gallery');
+  const { response: communityGalleries, isLoading: galleryallLoading } = useApi<StillerGallery[]>('/galleryall');
 
   const toggleSidebar = () => {
     setIsSidebarOpen(!isSidebarOpen);
@@ -182,7 +182,30 @@ export const GalleryDashboard = () => {
             </Button>
           </div>
         </div>
-
+        {
+          (galleryLoading || galleryallLoading) && (
+            <Box mt={72} display={'flex'} style={{ justifyContent: 'center' }}>
+              <Loader size={30} />
+            </Box>
+          )
+        }
+        {
+          (showCommunityProjects && communityGalleries && communityGalleries.data.length === 0) && (
+            <Box mt={72} display={'flex'} style={{ justifyContent: 'center' }}>
+              <p>No hay proyectos de la comunidad</p>
+            </Box>
+          )
+        }
+        {
+          (!showCommunityProjects && userGalleries && userGalleries.data.length === 0) && (
+            <Box mt={72} display={'flex'} style={{ alignItems: 'center', flexDirection: 'column', gap: 18 }}>
+              <Title order={5}>Aquí aparecerán tus proyectos 🖼️</Title>
+              <Text td="underline" c={'orange'} style={{ cursor: 'pointer' }} onClick={() => {
+                setIsModalOpen(true);
+              }}>Crea tu primera galería</Text>
+            </Box>
+          )
+        }
         <div className={styles.galleryGrid}>
           {showCommunityProjects
             ? communityGalleries && communityGalleries.data.map((gallery, index) => (
diff --git a/app/src/pages/Dashboard/GalleryDashboard.module.css b/app/src/pages/Dashboard/GalleryDashboard.module.css
index ffd8a4e..955109e 100644
--- a/app/src/pages/Dashboard/GalleryDashboard.module.css
+++ b/app/src/pages/Dashboard/GalleryDashboard.module.css
@@ -1,7 +1,6 @@
 .container {
   min-height: 100vh;
   position: relative;
-  margin-bottom: 32px;
 }
 
 .overlay {
@@ -232,6 +231,8 @@
   display: grid;
   justify-items: center;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  margin-right: 32px;
+  margin-left: 32px;
   gap: 1.5rem;
 }
 
diff --git a/app/src/pages/Dashboard/components/TemplatesList.tsx b/app/src/pages/Dashboard/components/TemplatesList.tsx
index 59cfa02..d33cc97 100644
--- a/app/src/pages/Dashboard/components/TemplatesList.tsx
+++ b/app/src/pages/Dashboard/components/TemplatesList.tsx
@@ -1,6 +1,6 @@
 import { useApi } from "@/hooks/useApi";
 import { TemplateListItem } from "@/types";
-import { Group, Image, Radio, Text } from "@mantine/core";
+import { Box, Group, Image, Radio, Text } from "@mantine/core";
 import { useEffect, useState } from "react";
 import styles from './TemplateList.module.css';
 
@@ -22,18 +22,18 @@ export const TemplatesList = ({ onTemplateSelect }: TemplatesListProps) => {
   if (error) return <Text>Estamos experimentando problemas. Inténtalo de nuevo más tarde. 😔</Text>;
 
   if (isLoading || !response) {
-    return <Text>Cargando plantillas...</Text>;
+    return <Text w={600}>Cargando plantillas...</Text>;
   }
 
   const defaultVal = response.data[0].id.toString();
 
   return (
     <Radio.Group
-      mah={400}
       value={value ?? defaultVal}
       defaultValue={defaultVal}
       onChange={(val) => {
         setValue(val);
+        console.log({ val })
         onTemplateSelect(Number(val));
       }}
       style={{ overflow: 'auto', paddingRight: 12 }}
@@ -49,17 +49,18 @@ export const TemplatesList = ({ onTemplateSelect }: TemplatesListProps) => {
         >
           <Group wrap="nowrap" align="flex-start">
             <Radio.Indicator />
-            <Group wrap="nowrap" align="flex-start">
+            <Group align="flex-start">
               <Image
                 alt={template.title}
+                fit="contain"
                 width={200}
                 height={150}
                 src={`https://pandadiestro.xyz/services/stiller/template/info/${template.id}/thumbnail`}
               />
-              <div>
+              <Box flex={1}>
                 <Text className={styles.label}>{template.title}</Text>
                 <Text className={styles.description}>{template.description}</Text>
-              </div>
+              </Box>
             </Group>
           </Group>
         </Radio.Card>
diff --git a/app/src/pages/Editor/components/ContentSidebar.tsx b/app/src/pages/Editor/components/ContentSidebar.tsx
index fdee94f..f0af1b2 100644
--- a/app/src/pages/Editor/components/ContentSidebar.tsx
+++ b/app/src/pages/Editor/components/ContentSidebar.tsx
@@ -152,7 +152,8 @@ const SidebarInnerContent = () => {
         <TextInput
           variant="transparent"
           placeholder="¿Qué estás buscando?"
-          size="xs"
+          size="sm"
+          w={'100%'}
           leftSection={<IconSearch {...secondaryIconProps} />}
           value={filterInput}
           onChange={(e) => setFilterInput(e.currentTarget.value)}
@@ -176,11 +177,9 @@ const SidebarInnerContent = () => {
           (props) => (
             <Button
               size="sm"
+              variant='default'
               leftSection={<IconUpload {...primaryIconProps} />}
               {...props}
-              style={{
-                color: 'var(--mantine-color-white-7)',
-              }}
             >
               Añadir contenido
             </Button>
diff --git a/app/src/pages/Editor/components/GalleryCanvas2D.tsx b/app/src/pages/Editor/components/GalleryCanvas2D.tsx
index 9be0ecb..9326760 100644
--- a/app/src/pages/Editor/components/GalleryCanvas2D.tsx
+++ b/app/src/pages/Editor/components/GalleryCanvas2D.tsx
@@ -39,8 +39,6 @@ export const GalleryCanvas2D = memo(({ gallery, triggerReRender }: GalleryCanvas
     if (bounds) setViewport({ x: bounds.width, y: bounds.height });
   };
 
-  console.log('CANVAS SHIT')
-
   useEffect(() => {
     handleViewportResize();
     window.addEventListener('resize', handleViewportResize);
diff --git a/app/src/pages/Editor/components/MainButtons.tsx b/app/src/pages/Editor/components/MainButtons.tsx
index 1347223..9bc9eea 100644
--- a/app/src/pages/Editor/components/MainButtons.tsx
+++ b/app/src/pages/Editor/components/MainButtons.tsx
@@ -54,7 +54,7 @@ export const MainButtons = ({ onPreviewButton, onClosePreviewButton: closePrevie
             Visualizar
           </Button>
         )}
-      </Group>
+      </Group >
 
       <DeployModal
         isOpen={isModalOpen}
diff --git a/app/src/pages/Editor/components/blocks/Model3DBlock.tsx b/app/src/pages/Editor/components/blocks/Model3DBlock.tsx
index 27ba9af..b0a4867 100644
--- a/app/src/pages/Editor/components/blocks/Model3DBlock.tsx
+++ b/app/src/pages/Editor/components/blocks/Model3DBlock.tsx
@@ -10,7 +10,6 @@ import { Text } from '@mantine/core';
 import { useUser } from '@/stores/useUser';
 import { mutate } from 'swr';
 import { useQueryClient } from '@tanstack/react-query';
-import { useForceUpdate } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
 
 type Model3DBlockProps = {
diff --git a/app/src/pages/Editor/components/blocks/PictureSlot.tsx b/app/src/pages/Editor/components/blocks/PictureSlot.tsx
index 95185da..a1561f1 100644
--- a/app/src/pages/Editor/components/blocks/PictureSlot.tsx
+++ b/app/src/pages/Editor/components/blocks/PictureSlot.tsx
@@ -1,16 +1,15 @@
 import useImage from 'use-image';
 import { memo, useState } from 'react';
 import { Text } from '@mantine/core';
-import { Image, Rect, Group, Text as Text3D } from 'react-konva';
-import { copyGalleryWithSlotResId, setCursor } from '@/utils';
+import { Image, Rect, Group } from 'react-konva';
+import { setCursor } from '@/utils';
 import { useEditorStore } from '@/stores/editorAction';
 import { useMetagalleryStore } from '@/providers/MetagalleryProvider';
 import { CORNER_RADIUS, FRAME_STROKE_WIDTH, noImageSrc } from '@/constants';
-import { JSONValue, SlotVertices, StillerGallery } from '@/types';
+import { JSONValue, SlotVertices } from '@/types';
 import { cosine, getFrameAngle, getFrameHeight, getFrameWidth, sine, v3tov2 } from '@/pages/Editor/utils';
 import { useUser } from '@/stores/useUser';
-import { ApiResponse, useApi } from '@/hooks/useApi';
-import { mutate, useSWRConfig } from 'swr';
+import { mutate } from 'swr';
 import { notifications } from '@mantine/notifications';
 
 type PictureSlotProps = {
@@ -67,7 +66,7 @@ export const PictureSlot = memo(({ idRef, v, res, props }: PictureSlotProps) =>
     <Group>
       { /* Base color and border */}
       <Rect
-        x={pos[0]}
+        x={-pos[0] - frameWidth}
         y={pos[1]}
         width={frameWidth}
         height={frameHeight}
@@ -133,7 +132,7 @@ export const PictureSlot = memo(({ idRef, v, res, props }: PictureSlotProps) =>
       { /* Rendered image */}
       {
         image && <Image
-          x={pos[0] - imgOffsetY * sine(rotation) + imgOffsetX * cosine(rotation)}
+          x={-pos[0] - frameWidth - imgOffsetY * sine(rotation) + imgOffsetX * cosine(rotation)}
           y={pos[1] + imgOffsetY * cosine(rotation) + imgOffsetX * sine(rotation)}
           width={imgWidth}
           height={imgHeight}
diff --git a/app/src/pages/Editor/index.tsx b/app/src/pages/Editor/index.tsx
index 22f3706..881852a 100644
--- a/app/src/pages/Editor/index.tsx
+++ b/app/src/pages/Editor/index.tsx
@@ -31,7 +31,7 @@ export const Editor = ({ gallery }: { gallery: string }) => {
 
   return (
     <>
-      <section style={{ minWidth: '420px', position: 'relative', overflow: 'hidden' }}>
+      <section style={{ minWidth: '420px', position: 'relative', overflow: 'hidden', backgroundColor: 'var(--mantine-color-body)' }}>
         <div id={DRAG_PORTAL_ID} style={{ position: 'absolute' }}></div>
         <div style={{ display: 'flex', justifyContent: 'space-between', minHeight: '70px', maxHeight: '70px' }}>
           <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px', flexWrap: 'nowrap', paddingLeft: '16px' }}>
diff --git a/app/src/pages/Gallery3D/Experience.tsx b/app/src/pages/Gallery3D/Experience.tsx
index 6e82a7b..c7b76f5 100644
--- a/app/src/pages/Gallery3D/Experience.tsx
+++ b/app/src/pages/Gallery3D/Experience.tsx
@@ -8,6 +8,7 @@ import { useEffect, useRef, useState } from 'react';
 import { DynamicPainting } from './components/gallery/DynamicPainting';
 import { DynamicSculpture } from './components/gallery/DynamicSculpture';
 import { StillerGallery } from '@/types';
+import { useLocation } from 'wouter';
 
 type ExperienceProps = {
   gallery: string;
@@ -15,9 +16,18 @@ type ExperienceProps = {
 };
 
 export const Experience = ({ gallery, onLoad }: ExperienceProps) => {
-  const { response } = useApi<StillerGallery>(`/gallery/${gallery}`);
+  const { response, error } = useApi<StillerGallery>(`/gallery/${gallery}`);
   const [gravityEnabled, setGravityEnabled] = useState(false);
 
+  const [, setLocation] = useLocation();
+
+  useEffect(() => {
+    if (error) {
+      window.alert('La galería no existe');
+      setLocation('/');
+    }
+  }, [error])
+
   return (
     <>
       <Perf position="top-right" minimal />
diff --git a/app/src/pages/Gallery3D/index.tsx b/app/src/pages/Gallery3D/index.tsx
index 03218ec..a908d80 100644
--- a/app/src/pages/Gallery3D/index.tsx
+++ b/app/src/pages/Gallery3D/index.tsx
@@ -30,18 +30,18 @@ export const Gallery3D = ({ gallery, withTopOffset }: Gallery3DProps) => {
   });
 
   return (
-    <div ref={ref} style={{ maxHeight: '100svh', height: '100svh', width: '100svw' }}>
+    <div ref={ref} style={{ maxHeight: '100svh', height: '100svh', width: '100svw', backgroundColor: 'var(--mantine-color-body)' }}>
       {
         (!hasMouse && !loading) && (
           <>
-            <Button size='compact-sm' onClick={() => store.enterVR()} style={{ position: 'absolute', zIndex: 69, top: 8, left: '3.5rem' }}>
+            <Button size='compact-sm' onClick={() => store.enterVR()} style={{ height: 32, position: 'absolute', zIndex: 69, top: withTopOffset ? 78 : 8, left: '3.5rem' }}>
               <IconBadgeVr />
             </Button>
             <EcctrlJoystick />
           </>
         )
       }
-      <Button size='compact-sm' onClick={() => toggle()} style={{ position: 'absolute', zIndex: 69, top: 8, left: 8 }}>
+      <Button size='compact-sm' onClick={() => toggle()} style={{ height: 32, position: 'absolute', zIndex: 69, top: withTopOffset ? 78 : 8, left: 8 }}>
         {
           fullscreen ? <IconMaximizeOff /> : <IconMaximize />
         }
diff --git a/app/templates/gallery1/topview.svg b/app/templates/gallery1/topview.svg
index d2200f9..e079957 100644
--- a/app/templates/gallery1/topview.svg
+++ b/app/templates/gallery1/topview.svg
@@ -1,8 +1,10 @@
-<?xml version="1.0"?>
-<svg width="710" height="1417.5" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
- <g class="layer">
-  <title>Layer 1</title>
-  <image height="461.03" id="svg_1" width="237.07" x="129.84" y="15.55"/>
-  <rect fill="rgb(255, 255, 255)" height="1407.44" id="svg_2" stroke="rgb(192, 192, 192)" stroke-width="10px" width="699.91" x="5.12" y="5.05"/>
- </g>
-</svg>
\ No newline at end of file
+<svg width="710" height="1417.5"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:svg="http://www.w3.org/2000/svg">
+    <g class="layer">
+        <title>Layer 1</title>
+        <image height="461.03" id="svg_1" width="237.07" x="129.84" y="15.55"/>
+        <rect fill="rgb(255, 255, 255)" height="1407.44" id="svg_2" stroke="rgb(192, 192, 192)" stroke-width="10px" width="699.91" x="5.12" y="5.05"/>
+        <rect fill="#000000" fill-opacity="0" height="1332.73" id="svg_3" stroke="#c0c0c0" stroke-width="3" width="634.55" x="39.55" y="42.5"/>
+    </g>
+</svg>
diff --git a/app/templates/gallery2/topview.svg b/app/templates/gallery2/topview.svg
index a41ca45..56e2f87 100644
--- a/app/templates/gallery2/topview.svg
+++ b/app/templates/gallery2/topview.svg
@@ -1,9 +1,10 @@
 <?xml version="1.0"?>
-<svg width="318.654" height="404.46" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
- <g class="layer" display="inline">
-  <title>Layer 1</title>
-  <rect fill="#ffffff" height="400.17" id="svg_1" stroke="#c0c0c0" stroke-width="4" transform="matrix(1 0 0 1 0 0)" width="314.13" x="2.35" y="2.23"/>
-  <rect fill="#000000" fill-opacity="0" height="151.4" id="svg_4" stroke="#c0c0c0" width="103.35" x="106.49" y="123.76"/>
- </g>
-
-</svg>
\ No newline at end of file
+<svg width="318.654" height="404.46"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:svg="http://www.w3.org/2000/svg">
+    <g class="layer" display="inline">
+        <title>Layer 1</title>
+        <rect fill="#ffffff" height="400.17" id="svg_1" stroke="#c0c0c0" stroke-width="4" transform="matrix(1 0 0 1 0 0)" width="314.13" x="2.35" y="2.23"/>
+        <rect fill="#000000" fill-opacity="0" height="151.4" id="svg_4" stroke="#c0c0c0" width="103.35" x="106.49" y="123.76"/>
+    </g>
+</svg>
diff --git a/app/templates/gallery3/data.json b/app/templates/gallery3/data.json
index e69de29..2a8e0a2 100644
--- a/app/templates/gallery3/data.json
+++ b/app/templates/gallery3/data.json
@@ -0,0 +1,16 @@
+{
+  "origin": [-7.8, -4.34],
+  "slots": [
+      {
+          "ref": "center",
+          "type": "3d",
+          "props": {
+              "scale": 1.5,
+              "rotate": true
+          },
+          "v": [
+              [0, 0.7822, -3.103]
+          ]
+      }
+  ]
+}