Merge branch 'feat/maps' into 'main'

component Maps

See merge request onegeo/gatsby-theme-onegeo!35

gatsby-config.js

+const proxy = require("http-proxy-middleware")
+
 var dotenv = require("dotenv")
 var dotenvExpand = require("dotenv-expand")
 var myEnv = dotenv.config()
@@ -136,4 +138,13 @@ module.exports = {
         // To learn more, visit: https://gatsby.dev/offline
         // `gatsby-plugin-offline`,
     ],
+    developMiddleware: (app) => {
+        app.use(
+            "/geoportal/",
+            proxy.createProxyMiddleware("/geoportal/", {
+                target: "https://rec.ww2.guyane-sig.fr",
+                secure: false,
+            })
+        )
+    },
 }

index.d.ts

@@ -228,5 +228,10 @@ interface ISections {
     ids: string[]
 }
 export function Sections(props: ISections): JSX.Element
+interface IMaps {
+    layout?: "row" | "col" | "grid"
+    size?: "xs" | "base" | "xl"
+}
+export function Maps(props: IMaps): JSX.Element
 
 declare module "@onegeo/gatsby-theme-onegeo"

index.js

@@ -49,3 +49,6 @@ export { default as Section } from "./src/components/Section"
 
 // Section components
 export { default as Sections } from "./src/components/Sections"
+
+// Maps components
+export { default as Maps } from "./src/components/Maps"

package.json

@@ -25,6 +25,7 @@
     "@types/react-autosuggest": "^10.1.5",
     "@types/react-instantsearch-dom": "^6.12.0",
     "dotenv": "^10.0.0",
-    "dotenv-expand": "^8.0.1"
+    "dotenv-expand": "^8.0.1",
+    "http-proxy-middleware": "^2.0.6"
   }
 }

src/components/Maps.tsx

+import React, { useEffect, useState } from "react"
+
+import CardList from "./core/CardList"
+
+import { MAPS_URL } from "../constant"
+
+interface IMaps {
+    layout?: "row" | "col" | "grid"
+    size?: "xs" | "base" | "xl"
+    limit?: number
+}
+
+const Maps = (props: IMaps) => {
+    const { layout = "row", size = "xs", limit = 3 } = props
+    const [data, setData] = useState([])
+
+    useEffect(() => {
+        fetch(`${MAPS_URL}&start=0&limit=${limit}`)
+            .then((res) => {
+                if (!res.ok) {
+                    throw new Error(res.statusText)
+                }
+
+                return res.json()
+            })
+            .then((response) => {
+                const results = response.results
+                if (results.length) {
+                    setData(results)
+                }
+            })
+            .catch((e) => {
+                console.log(e)
+            })
+    }, [])
+
+    if (!data.length) return null
+
+    const dataCards = data.map((data: any) => {
+        return {
+            name: data.name,
+            description: data.description,
+            image: `/geoportal/${data.thumbnail}`,
+            size: size,
+            url: `/geoportal/#/context/Admin/${data.id}`,
+        }
+    })
+
+    return (
+        <>
+            <CardList cards={dataCards} layout={layout} />
+        </>
+    )
+}
+
+export default Maps

src/components/core/Map.tsx

@@ -42,7 +42,7 @@ const Map = (props: Props) => {
 
         // Get Mapstore context
         useEffect(() => {
-            fetch(projectUrl + "/geoportail/rest/geostore/data/" + mapId)
+            fetch("/geoportal/rest/geostore/data/" + mapId)
                 .then((response) => response.json())
                 .then((resultData) => {
                     setMapContext(resultData.map)

src/constant.ts

 export const GRAPHQL_URL = `${process.env.DIRECTUS_URL}graphql`
 export const DIRECTUS_ASSETS_URL = `${process.env.DIRECTUS_URL}assets/`
+export const MAPS_URL =
+    "/geoportal/rest/geostore/extjs/search/category/MAP/***/thumbnail,details,featured?includeAttributes=true"

src/pages-doc/doc/core/map.tsx

 import React, { ReactElement } from "react"
-import { Content,Link } from "@onegeo/gatsby-theme-onegeo"
+import { Content, Link } from "@onegeo/gatsby-theme-onegeo"
 import { Map } from "@onegeo/gatsby-theme-onegeo"
 
 function map(): ReactElement {

src/pages-doc/doc/index.tsx

@@ -31,6 +31,8 @@ function index(): ReactElement {
                 <Link to="/doc/section">Section</Link>
                 <br></br>
                 <Link to="/doc/sections">Sections</Link>
+                <br></br>
+                <Link to="/doc/maps">Maps</Link>
             </div>
         </Content>
     )

src/pages-doc/doc/maps.tsx

+import React from "react"
+
+import { Content, Link, Maps } from "@onegeo/gatsby-theme-onegeo"
+
+const maps = () => {
+    return (
+        <Content>
+            <div className="prose">
+                <Link to="/doc">Retour</Link>
+
+                <h1>Maps</h1>
+                <h2>Props</h2>
+                <div className="mockup-code">
+                    <pre>
+                        <code>{`
+interface IMaps {
+    layout?: "row" | "col" | "grid"
+    size?: "xs" | "base" | "xl"
+    limit?: number
+}                        
+                        
+`}</code>
+                    </pre>
+                </div>
+
+                <h2>Example</h2>
+            </div>
+            <div className="flex gap-6 m-4">
+                <Maps layout="row" size="xs" />
+            </div>
+        </Content>
+    )
+}
+
+export default maps