Skip to content
Snippets Groups Projects
Commit 6b8f5613 authored by Julien MARGAIL's avatar Julien MARGAIL
Browse files

Merge branch 'feat/section' into 'main' 

Feat/section

See merge request onegeo/gatsby-theme-onegeo!32
parents 6e697b9f d0a7fdf7
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/Section.tsx
+ 72
− 91
View file @ 6b8f5613
import React, { useEffect, useState } from "react" import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Component from "./section/component" import Component from "./section/component"
import Button from "./core/Button" import Button from "./core/Button"
import { GRAPHQL_URL } from "../constant"
interface ISection { interface ISection {
id: string id: string
} }
const getGraphqlQuery = (id: string) => { const GRAPHQL_QUERY = graphql`
return { query {
query: ` directus {
query getSectionById ($id: ID!) { sections {
sections_by_id(id: $id) { id
id title
title subtitle
subtitle content
content actions {
actions { actions_id {
actions_id { name
name url
url style
style id
id
}
} }
components { }
components_id { components {
id components_id {
title id
subtitle title
content subtitle
url_dataviz content
url_map url_dataviz
type url_map
mapdid type
layout mapdid
length layout
size length
actions { size
actions_id { actions {
name actions_id {
status name
style url
id style
} id
} }
services { }
services_id { services {
name services_id {
url name
description url
id description
image { id
id image {
imageFile {
publicURL
} }
id
} }
} }
images { }
directus_files_id { images {
id directus_files_id {
imageFile {
childImageSharp {
gatsbyImageData
}
} }
id
} }
} }
} }
} }
} }
}
`,
variables: {
id,
},
} }
} `
const Section = (props: ISection) => { const Section = (props: ISection) => {
const { id } = props const { id } = props
const [data, setData] = useState<any>()
useEffect(() => {
fetch(GRAPHQL_URL, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(getGraphqlQuery(id)),
})
.then((response) => {
if (!response.ok) {
throw Error(response.statusText)
}
return response.json() const data = useStaticQuery(GRAPHQL_QUERY)
})
.then((result) => {
setData(result.data.sections_by_id)
})
.catch(function (error) {
console.log(error)
})
}, [])
if (!data) return null const section = data.directus.sections.find((section) => section.id === id)
if (!section) return null
return ( return (
<div> <div>
{data.title && ( {section.title && (
<h1 className="text-3xl font-extrabold">{data.title}</h1> <h1 className="text-3xl font-extrabold">{section.title}</h1>
)} )}
{data.subtitle && ( {section.subtitle && (
<h4 className="text-2xl font-bold mt-2">{data.subtitle}</h4> <h4 className="text-2xl font-bold mt-2">{section.subtitle}</h4>
)} )}
{data.content && ( {section.content && (
<div <div
className="text-lg leading-8 py-4 text-justify" className="text-lg leading-8 py-4 text-justify"
dangerouslySetInnerHTML={{ __html: data.content }} dangerouslySetInnerHTML={{ __html: section.content }}
></div> ></div>
)} )}
{data.components.length > 0 && ( {section.components.length > 0 && (
<div <div
className={`grid grid-cols-1 lg:grid-cols-${data.components.length} gap-4`} className={`grid grid-cols-1 lg:grid-cols-${section.components.length} gap-4`}
> >
{data.components.map((component) => { {section.components.map((component) => {
const dtComponent = component.components_id const dtComponent = component.components_id
return ( return (
...@@ -133,9 +114,9 @@ const Section = (props: ISection) => { ...@@ -133,9 +114,9 @@ const Section = (props: ISection) => {
})} })}
</div> </div>
)} )}
{data.actions.length > 0 && ( {section.actions.length > 0 && (
<div className="flex space-x-4 mt-4"> <div className="flex space-x-4 mt-4">
{data.actions.map((actionId) => { {section.actions.map((actionId) => {
const action = actionId.actions_id const action = actionId.actions_id
return ( return (
......
src/components/section/component.tsx
+ 8
− 10
View file @ 6b8f5613
import React from "react" import React from "react"
import { IGatsbyImageData } from "gatsby-plugin-image"
import Map from "../core/Map" import Map from "../core/Map"
import News from "../News" import News from "../News"
import Stats from "../Stats" import Stats from "../Stats"
import Hero from "../Hero" import Hero from "../Hero"
import Image from "../core/Image" import Image from "../core/Image"
import { DIRECTUS_ASSETS_URL } from "../../constant"
interface IAction { interface IAction {
actions_id: { actions_id: {
name: string name: string
...@@ -22,14 +22,16 @@ interface IService { ...@@ -22,14 +22,16 @@ interface IService {
url: string url: string
description: string description: string
image: { image: {
id: string imageFile?: {
publicURL?: string
}
} }
} }
} }
interface Iimage { interface Iimage {
directus_files_id: { directus_files_id: {
id: string imageFile: IGatsbyImageData
} }
} }
...@@ -68,7 +70,7 @@ const getServices = (servicesProps: IService[] | []) => { ...@@ -68,7 +70,7 @@ const getServices = (servicesProps: IService[] | []) => {
let service = services_id.services_id let service = services_id.services_id
return { return {
...service, ...service,
image: service.image?.id ? getUrlImage(service.image.id) : "", image: service.image?.imageFile?.publicURL ?? "",
} }
}) })
} }
...@@ -77,14 +79,10 @@ const getImages = (imagesProps: Iimage[] | []) => { ...@@ -77,14 +79,10 @@ const getImages = (imagesProps: Iimage[] | []) => {
if (!imagesProps.length) return undefined if (!imagesProps.length) return undefined
return imagesProps.map((images) => { return imagesProps.map((images) => {
return getUrlImage(images.directus_files_id.id) return images.directus_files_id.imageFile
}) })
} }
const getUrlImage = (id: string) => {
return `${DIRECTUS_ASSETS_URL}${id}`
}
const Component = (props: IComponent) => { const Component = (props: IComponent) => {
const { const {
type, type,
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment