Section.tsx

import React, { useEffect, useState } from "react"

import Component from "./section/component"
import Button from "./core/Button"

import { GRAPHQL_URL } from "../constant"

interface ISection {
    id: string
}

const getGraphqlQuery = (id: string) => {
    return {
        query: `
            query getSectionById ($id: ID!) {
                sections_by_id(id: $id) {
                    id
                    title
                    subtitle
                    content
                    actions {
                        actions_id {
                            name
                            url
                            style
                            id
                        }
                    }
                    components {
                        components_id {
                            id
                            title
                            subtitle
                            content
                            url_dataviz
                            url_map
                            type
                            mapdid
                            layout
                            length
                            size
                            actions {
                                actions_id {
                                    name
                                    status
                                    style
                                    id
                                }
                            }
                            services {
                                services_id {
                                    name
                                    url
                                    description
                                    id
                                    image {
                                        id
                                    }
                                }
                            }
                            images {
                                directus_files_id {
                                    id
                                }
                            }
                        }
                    }
                }
            }
        
        `,
        variables: {
            id,
        },
    }
}

const Section = (props: ISection) => {
    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()
            })
            .then((result) => {
                setData(result.data.sections_by_id)
            })
            .catch(function (error) {
                console.log(error)
            })
    }, [])

    if (!data) return null

    return (
        <div>
            {data.title && (
                <h1 className="text-3xl font-extrabold">{data.title}</h1>
            )}
            {data.subtitle && (
                <h4 className="text-2xl font-bold mt-2">{data.subtitle}</h4>
            )}
            {data.content && (
                <div
                    className="text-lg leading-8 py-4 text-justify"
                    dangerouslySetInnerHTML={{ __html: data.content }}
                ></div>
            )}
            {data.components.length > 0 && (
                <div
                    className={`grid grid-cols-1 lg:grid-cols-${data.components.length} gap-4`}
                >
                    {data.components.map((component) => {
                        const dtComponent = component.components_id

                        return (
                            <React.Fragment key={dtComponent.id}>
                                <Component {...dtComponent} />
                            </React.Fragment>
                        )
                    })}
                </div>
            )}
            {data.actions.length > 0 && (
                <div className="flex space-x-4 mt-4">
                    {data.actions.map((actionId) => {
                        const action = actionId.actions_id

                        return (
                            <Button
                                key={action.id}
                                {...action}
                                className={action.style}
                            />
                        )
                    })}
                </div>
            )}
        </div>
    )
}

export default Section