basic map pins

[alttp.git] / resources / js / components / map / OpenSeadragon.js

diff --git a/resources/js/components/map/OpenSeadragon.js b/resources/js/components/map/OpenSeadragon.js
index f8543189e18c3b71ea4344be4e3ba0634d58fbc1..b6158a5aea79ca3a03f964deb4f5dc413cfa52c0 100644 (file)
--- a/resources/js/components/map/OpenSeadragon.js
+++ b/resources/js/components/map/OpenSeadragon.js
@@ -1,3 +1,4 @@
+import axios from 'axios';
 import OpenSeadragon from 'openseadragon';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -7,6 +8,8 @@ export const Context = React.createContext({});
 export const useOpenSeadragon = () => React.useContext(Context);
 
 export const Provider = React.forwardRef(({ children }, ref) => {
+       const [activeMap, setActiveMap] = React.useState('lw');
+       const [pins, setPins] = React.useState([]);
        const [viewer, setViewer] = React.useState(null);
 
        React.useEffect(() => {
@@ -65,7 +68,38 @@ export const Provider = React.forwardRef(({ children }, ref) => {
                };
        }, [ref.current]);
 
-       return <Context.Provider value={{ viewer }}>
+       React.useEffect(() => {
+               if (!viewer) return;
+               switch (activeMap) {
+                       case 'lw':
+                               viewer.goToPage(0);
+                               break;
+                       case 'dw':
+                               viewer.goToPage(1);
+                               break;
+                       case 'sp':
+                               viewer.goToPage(2);
+                               break;
+                       case 'uw':
+                               viewer.goToPage(3);
+                               break;
+               }
+               const controller = new AbortController();
+               axios.get(`/api/markers/${activeMap}`, {
+                       signal: controller.signal,
+               }).then(response => {
+                       setPins(response.data || []);
+               }).catch(e => {
+                       if (!axios.isCancel(e)) {
+                               console.error(e);
+                       }
+               });
+               return () => {
+                       controller.abort();
+               };
+       }, [activeMap, viewer]);
+
+       return <Context.Provider value={{ activeMap, setActiveMap, pins, viewer }}>
                {children}
        </Context.Provider>;
 });