usulpro

// speakers.stories.js

import { Query } from '@focusreactive/storybook-graphql-kit';
import { speakersQuery } from '../speaker.query';

export const speakers = Query({
  name: 'Conference Speakers',
  speakersQuery,
  vars: { conferenceTitle: 'React Day Berlin', eventYear: 'Y2019', name: '' },
});

usulpro

// pages/[entryId].js

import React from "react";

import { getPage } from "../../lib/getPage";
import renderTemplate from "../../lib/renderTemplate";
import Layout from "../../components/Layout";

// remove this line:
// const entryId = "7iaB95RCl0IH3Z73ON1hBq";

usulpro

// components/App/Description.js

import React from "react";
import { documentToReactComponents } from "@contentful/rich-text-react-renderer";

const Description = ({ title, description, content, options }) => (
  <div>
    <h3>{title}</h3>
    <div>{documentToReactComponents(description)}</div>
    <div>{options.renderComponents(content, options)}</div>

usulpro

// lib/cms-selectors.js

export const selectComponentProps = component => {
  const contentType = selectEntryType(component);
  if (referredComponents.includes(contentType)) {
    const { type, componentData, ...props } = component.fields;
    return { ...props, ...componentData };
  }
  return component.fields;
};

usulpro

// lib/cms-selectors.js

const componentReference = "componentReference";
const componentCustom = "componentCustom";
const referredComponents = [componentReference, componentCustom];

export const selectEntryType = entry => {
  return entry.sys.contentType.sys.id;
};

usulpro

// lib/componentsMap.js

import Description from "../components/App/Description";
import Quote from "../components/App/Quote";
import Custom from "../components/App/Custom";

export const componentsMap = {
  componentDescription: Description,
  componentQuote: Quote,
  componentCustom: Custom,

usulpro

// lib/renderNestedComponents.js

import React from "react";

import { componentsMap } from "./componentsMap";
import {
  selectComponentReference,
  selectComponentProps,
  selectEntryId,
} from "./cms-selectors";

usulpro

// lib/renderTemplate.js

import { renderComponents } from "./renderNestedComponents";

const templateTypes = {
  standard: "templateStandard",
};

const renderTemplate = ({ templateType, data }, options) => {
  if (templateType === templateTypes.standard) {

usulpro

// lib/getPage.js

import { getEntry } from "./contentful-client";
import { selectImages, selectTemplate } from "./cms-selectors";

export const getPage = async entryId => {
  const customPage = await getEntry(entryId);

  const {
    url,

usulpro

// pages/leaders.js

import React from "react";

import { getPage } from "../lib/getPage";
import renderTemplate from "../lib/renderTemplate";
import Layout from "../components/Layout";

const entryId = "7iaB95RCl0IH3Z73ON1hBq";