Mayd React Adapter

This is a basic adapter for the Mayd's API.

This package is currently optimized for usage with nextjs.

Basic usage

pages/api/preview.ts

import { NextApiRequest, NextApiResponse } from "next";
import { initMaydPreview } from "@mayd/react-adapter";

export default async (req: NextApiRequest, res: NextApiResponse) => {
    await initMaydPreview(req, res);
};

pages/__app.tsx

import React from "react";
import { AppProps } from "next/app";

const App: React.FC<AppProps> = ({ Component, pageProps }) => {
    return (
        <MaydProvider preview={pageProps.preview} pageData={pageProps.pageData} backendDomain={pageProps.backendDomain}>
            ...
        </MaydProvider>
    );
};

export default App;

pages/[[...slug]].tsx

import React from "react";
import { GetStaticPaths, GetStaticProps } from "next";
import {
    getMaydMenus,
    getMaydPageDataBySlug,
    getMaydPaths,
    getSlugFromContext,
    isNotFoundPageProps,
    isRedirectPageProps,
} from "@mayd/react-adapter";

interface MaydPagesProps {
    // please use your own types instead of `any`
    pageData?: PageProps<any, any>;
}

const MaydPages: React.FC<MaydPagesProps> = ({ pageData }) => {
    if (!pageData) {
        return null;
    }

    const yourSlot = pageData.content.slots["your-slot"];

    return (
        <>
            ...
            <MaydSlot id={blocksSlot.id}>
                {blocksSlot.blocks.map(block => (
                    <MaydBlock key={block.id} slotId={blocksSlot.id} blockData={block}>
                        <div>your block content here</div>
                    </MaydBlock>
                ))}
            </MaydSlot>
        </>
    );
}

export const getStaticProps: GetStaticProps = async context => {
    const websiteId = 1; // your website id
    
    // please use your own types instead of `any`
    const pageData = await getMaydPageDataBySlug<any, any>(
        websiteId,
        getSlugFromContext(context),
        context
    );

    if (isNotFoundPageProps(pageData)) {
        return {
            notFound: true,
        };
    }

    if (isRedirectPageProps(pageData)) {
        return {
            redirect: {
                destination: pageData.redirect.destination,
                permanent: pageData.redirect.permanent,
            },
        };
    }

    return {
        props: {
            preview: context.preview ?? false,
            backendDomain: context.previewData?.backendDomain ?? null,
            pageData,
            menus: await getMaydMenus(websiteId, ["footer"], 1, context),
        },
    };
};

export const getStaticPaths: GetStaticPaths = async context => {
    const websiteId = 1; // your website id
    const data = await getMaydPaths<any>(websiteId, context);

    const paths = data.paths.map(page => ({
        params: {
            slug: page.params.slug,
        },
    }));

    return {
        paths: paths,
        fallback: "blocking",
    };
};

export default MaydPages;