Client side rendering

react4xp/
    myEntries/                  (1)
        Movie.tsx
        MovieList.tsx
        MovieList.scss
    shared/
        Movie.tsx
        Movie.scss

site/
    content-types
        /movie/
            movie.xml           (2)
    parts/
        movie-list/
            movie-list.ts       (3)
            movie-list.xml
    site.xml                    (4)

controllers/
    previewMovie.ts             (5)

headless/                       (6)
    helpers/
        movieListRequests.ts
    guillotineApi.ts
    guillotineRequest.ts

<content-type>
  <display-name>Movie</display-name>
  <description>Moving images often reflecting culture</description>
  <super-type>base:structured</super-type>

  <form>
    <input name="image" type="ImageSelector">
        <label>Movie poster</label>
        <occurrences minimum="1" maximum="1"/>
    </input>

    <input name="description" type="TextArea">
        <label>Description</label>
    </input>

    <input name="year" type="Long">
        <label>Release year</label>
        <occurrences minimum="1" maximum="1"/>
    </input>

    <input name="actor" type="TextLine">
        <label>Actor</label>
        <occurrences minimum="0" maximum="0"/>
    </input>
  </form>
</content-type>

import React from 'react'

import Movie from '../shared/Movie';

export default (props) => <Movie {...props} />;

import React from 'react'

import './Movie.scss';

const Cast = ({actors}) => (
    <ul className="cast">
        { actors.map( actor => <li key={actor} className="actor">{actor}</li> ) }
    </ul>
);


const Info = ({heading, children}) => (
    <div className="info">
        {heading ? <h3>{heading}</h3> : null}
        {children}
    </div>
);


const InfoContainer = ({title, year, description, actors}) => (
    <div className="infoContainer">
        <h2 className="title">{title}</h2>

        <Info heading="Released">
            <p className="year">{year}</p>
        </Info>

        <Info heading="Description">
            <div className="description">{description}</div>
        </Info>

        { (actors && actors.length > 0) ?
            <Info heading="Cast">
                <Cast actors={actors} />
            </Info> :
            null
        }
    </div>
);

const Movie = ({imageUrl, title, description, year, actors}) => (
    <div className="movie">
        <img className="poster"
             src={imageUrl}
             alt={`Movie poster: ${title}`}
             title={`Movie poster: ${title}`}/>

        <InfoContainer title={title}
                       year={year}
                       description={description}
                       actors={actors}
        />
    </div>
);

export default Movie;

html, body {
  margin: 0; padding: 0;
}

.infoContainer {
  flex-grow: 1; flex-basis: content; padding: 0; margin: 0;

  * {
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #444;
  }

  h2, h3 {
    padding: 0; margin: 0; color: #0c0c0c;
  }

  h2 {
    font-size: 34px;
  }

  p {
    padding: 0; margin: 10px 0 0 0;
  }
}

.info {
  margin: 0; padding: 30px 0 0 0;
}


.movie {
  margin: 0; padding: 30px; box-sizing: border-box; width: 100%; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start;
}

.poster {
  width: 300px; max-width: 30%; margin-right: 30px; flex: 0 1 auto;
}

.cast {
  list-style-type: none; margin: 0; padding: 0;

  .actor {
    width: 100%; padding: 0; margin: 10px 0 0 0;
  }
}

<?xml version="1.0" encoding="UTF-8"?>
<site>
  <form/>
  <mappings>

    <!-- Add this... -->
    <mapping controller="/controllers/previewMovie.js" order="50">
        <match>type:'com.enonic.app.react4xp:movie'</match>
    </mapping>
    <!-- ...and that's it. -->

  </mappings>
</site>

const portal = require('/lib/xp/portal');
const React4xp = require('/lib/enonic/react4xp');

const forceArray = maybeArray => {
    if (Array.isArray(maybeArray)) {
        return maybeArray;
    }
    return (maybeArray) ? [maybeArray] : [];
};

export function get(request) {
    const content = portal.getContent();            (1)

    const props = {
        imageUrl: content.data.image ?
            portal.imageUrl({                       (2)
                id: content.data.image,
                scale: 'width(300)'
            }) :
            undefined,
        title: content.displayName,
        description: content.data.description,
        year: content.data.year,
        actors: forceArray( content.data.actor )   (3)
            .map( actor => (actor || '').trim())
            .filter(actor => !!actor)
    };

    const id = content._id;                         (4)

    const output = React4xp.render(
        'Movie',                                    (5)
        props,
        request,
        {
            id,
                                                    (6)
            body: `
                <html>
                    <head>
                        <meta charset="UTF-8" />
                        <title>${content.displayName}</title>
                    </head>
                    <body class="xp-page">
                        <div id="${id}"></div>
                    </body>
                </html>
            `
        }
    );

    output.body = '<!DOCTYPE html>' + output.body;  (7)

    return output;
};

// @ts-expect-error No types for /lib/guillotine yet.
import {createSchema, execute} from '/lib/guillotine';

const SCHEMA = createSchema();


// ----------------------------------------------  FOR USE IN CONTROLLERS:    ------------------------------------

export const executeQuery = (query, variables) => execute({
  query: query,
  variables: variables,
  schema: SCHEMA
});

// Expose and use in POST requests from frontend:
export const post = req => {                             (3)
  const {
    query,
    variables
  } = JSON.parse(req.body);

  return {
    contentType: 'application/json',
    body: executeQuery(query, variables),
    status: 200
  };
};

// Used by both backend and frontend (the movie-list part controller, and react4xp/entries/MovieList.jsx)

(1)
export const buildQueryListMovies = () => `
query(
    $first:Int!,
    $offset:Int!,
    $sort:String!,
    $parentPathQuery:String!
) {
  guillotine {
    query(
        contentTypes: ["com.enonic.app.samples_react4xp:movie"],
        query: $parentPathQuery,
        first: $first,
        offset: $offset,
        sort: $sort
    ) {
      ... on com_enonic_app_samples_react4xp_Movie {
        _id
        displayName
        data {
          year
          description
          actor
          image {
            ... on media_Image {
              imageUrl(type: absolute, scale: "width(300)")
            }
          }
        }
      }
    }
  }
}`;

(2)
export const buildParentPathQuery = (parentPath) => `_parentPath = '/content${parentPath}'`;


// Returns arrays unchanged.
// If the maybeArray arg is a non-array value, wraps it in a single-item array.
// If arg is falsy, returns an empty array.
const forceArray = maybeArray => {
    if (Array.isArray(maybeArray)) {
        return maybeArray;
    }
    return (maybeArray) ? [maybeArray] : [];
};

(3)
// Adapts the output from the guillotine query to the MovieList props signature
export const extractMovieArray = responseData => responseData.data.guillotine.query
    .filter( movieItem => movieItem && typeof movieItem === 'object' && Object.keys(movieItem).indexOf('data') !== -1)
    .map(
        movieItem => ({
            id: movieItem._id,
            title: movieItem.displayName.trim(),
            imageUrl: movieItem.data.image.imageUrl,
            year: movieItem.data.year,
            description: movieItem.data.description,
            actors: forceArray(movieItem.data.actor)
                .map( actor => (actor || '').trim())
                .filter(actor => !!actor)
        })
    );

export default {};

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<part>
    <display-name>Movie List</display-name>
    <description>View a list of movies</description>
    <form>

        <input name="movieCount" type="Long">
            <label>Number of movies to display</label>
            <occurrences minimum="1" maximum="1"/>
            <config/>
            <default>5</default>
        </input>

        <input name="sortBy" type="RadioButton">
            <label>Sort movies by...</label>
            <occurrences minimum="1" maximum="1"/>
            <config>
                <option value="displayName">Title</option>
                <option value="data.year">Release year</option>
                <option value="createdTime">Date added to this db</option>
            </config>
            <default>createdTime</default>
        </input>

        <input  name="descending" type="CheckBox">
            <label>... in descending (reversed) order</label>
        </input>
    </form>
</part>

import type {PartComponent} from '@enonic-types/core';

import {toStr} from '@enonic/js-utils/value/toStr';
import {
  getComponent,
  getContent,
  getSite
} from '/lib/xp/portal';
import {render} from '/lib/enonic/react4xp';
import {executeQuery} from '/headless/guillotineApi';      (1)
import {
  buildQueryListMovies,
  buildParentPathQuery,
  extractMovieArray
} from '/headless/helpers/movieListRequests';


declare global {
  interface XpPartMap {
    ['com.enonic.app.samples-react4xp:movie-list']: {
      descending?: boolean
      movieCount: number
      sortBy?: 'displayName'|'data.year'|'createdTime'
    }
  }
}

type MovieListComponent = PartComponent<'com.enonic.app.samples-react4xp:movie-list'>


const ENTRY = 'MovieList';
// const ENTRY = 'MovieList2';
// const ENTRY = 'MovieList3';
// const ENTRY = 'MovieList4';


export function get(request) {
  const content = getContent();
  const component = getComponent<MovieListComponent>();
  const {
    descending = false,
    movieCount = 0,
    sortBy = 'createdTime'
  } = component.config;

  const sortExpression = `${sortBy} ${                     (2)
      descending ? 'DESC' : 'ASC'
  }`;

  const query = buildQueryListMovies();                    (3)

  const variables = {                                      (4)
    first: movieCount,
    offset: 0,
    sort: sortExpression,
    parentPathQuery: buildParentPathQuery(content._path)
  };

  const guillotineResult = executeQuery(query, variables); (5)
  log.info('guillotineResult: %s', toStr(guillotineResult));

  const movies = extractMovieArray(guillotineResult);      (6)

  return render(
    ENTRY,
    {                                                      (7)
      movies,
      apiUrl: `./${getSite()._path}/api/headless`,
      parentPath: content._path,
      movieCount: component.config.movieCount,
      sortExpression
    },
    request
  );
};

import React from 'react'

import './MovieList.scss';

import Movie from "../shared/Movie";

const MovieList = ({movies, apiUrl, parentPath, movieCount, sortExpression}) => {

    return (
        <div className="movieList">
            {movies
                ? movies.map(movie =>
                        <Movie key={movie.id} {...movie} />
                    )
                : null
            }
        </div>
    );
};

// MUST use this export line wrapping, because of a useState hook later.
export default (props) => <MovieList {...props} />;

.movieList {
  margin: 0 auto; width: 1024px; max-width: 100%;

  .movie {
    border-bottom: 1px dotted #ccc;
  }
}

<?xml version="1.0" encoding="UTF-8"?>
<site>
  <form/>
    <mappings>
        <mapping controller="/controllers/previewMovie.js" order="50">
            <match>type:'com.enonic.app.react4xp:movie'</match>
        </mapping>

        <!-- Add this... -->
        <mapping controller="/headless/guillotineApi.js" order="50">
            <pattern>/api/headless</pattern>
        </mapping>
        <!-- ...to expose the API.  -->

    </mappings>
</site>

const doGuillotineRequest = ({
  url,                        (1)
  query,                      (2)
  variables,                  (3)
  handleResponseErrorFunc,    (4)
  extractDataFunc,            (5)
  handleDataFunc,             (6)
  catchErrorsFunc             (7)
}) => {

  fetch(
      url,
      {
          method: "POST",
          body: JSON.stringify({
              query,
              variables}
          ),
          credentials: "same-origin",
      }
  )
      .then(handleResponseErrorFunc)
      .then(response => response.json())
      .then(extractDataFunc)
      .then(handleDataFunc)
      .catch(catchErrorsFunc)
};

export default doGuillotineRequest;

import React, { useState, useEffect } from 'react';     (1)

import './MovieList.scss';

import Movie from "../shared/Movie";

                                                        (2)
import doGuillotineRequest from "../../headless/guillotineRequest";
import { buildQueryListMovies, buildParentPathQuery, extractMovieArray } from "../../headless/helpers/movieListRequests";

                                                        (3)
// State values that don't need re-rendering capability, but need to be synchronously read/writable across closures.
let nextOffset = 0;             // Index for what will be the next movie to search for in a guillotine request


const MovieList = ({movies, apiUrl, parentPath, movieCount, sortExpression}) => {

                                                        (4)
    // UseEffect with these arguments ( function, [] ) corresponds to componentDidMount in the old-school class-based react components, and only happens after the first time the component is rendered into the DOM.
    useEffect(
        ()=>{
            console.log("Initializing...");
            nextOffset = movieCount;
        },
        []
    );


    // ------------------------------------------------------
    // Set up action methods, triggered by listener:

                                                                    (5)
    // Makes a (guillotine) request for data with these search parameters and passes an anonymous callback function as
    // handleDataFunc (used on the returned list of movie data).
    const makeRequest = () => {
        console.log("Requesting", movieCount, "movies, starting from index", nextOffset);
        doGuillotineRequest({
            url: apiUrl,                                            (6)

            query: buildQueryListMovies(),                          (7)

            variables: {
                first: movieCount,
                offset: nextOffset,                                 (8)
                sort: sortExpression,
                parentPathQuery: buildParentPathQuery(parentPath)   // (9)
            },

            extractDataFunc: extractMovieArray,                     (10)

            handleDataFunc: (newMovieItems) => {                    (11)
                console.log("Received data:", newMovieItems);
                nextOffset += movieCount;
            }
        });
    };

    // ------------------------------------------------------------------------------------
    // Actual rendering:

    return (
        <div className="movieList" onClick={makeRequest}>           {/* <12> */}
            {movies
                ? movies.map(movie =>
                        <Movie key={movie.id} {...movie} />
                    )
                : null
            }
        </div>
    );
};

// MUST use this export line wrapping, because of the hooks we'll add later.
export default (props) => <MovieList {...props} />;

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

import './MovieList.scss';

import Movie from "../shared/Movie";

import doGuillotineRequest from "../../headless/guillotineRequest";
import { buildQueryListMovies, buildParentPathQuery, extractMovieArray } from "../../headless/helpers/movieListRequests";

// State values that don't need re-rendering capability, but need to be synchronously read/writable across closures.
let nextOffset = 0;             // Index for what will be the next movie to search for in a guillotine request


const MovieList = ({movies, apiUrl, parentPath, movieCount, sortExpression}) => {

                                                                    (1)
    // Setup asynchronous component state that triggers re-render on change.
    const [state, setState] = useState({ movies });

    // UseEffect with these arguments ( function, [] ) corresponds to componentDidMount in the old-school class-based react components.
    useEffect(
        ()=>{
            console.log("Initializing...");

            nextOffset = movieCount;
        },
        []
    );


    // ------------------------------------------------------
    // Set up action methods, triggered by listener:

    // Makes a (guillotine) request for data with these search parameters and passes an anonymous callback function as
    // handleDataFunc (used on the returned list of movie data).
    const makeRequest = () => {
        console.log("Requesting", movieCount, "movies, starting from index", nextOffset);
        doGuillotineRequest({
            url: apiUrl,

            query: buildQueryListMovies(),

            variables: {
                first: movieCount,
                offset: nextOffset,
                sort: sortExpression,
                parentPathQuery: buildParentPathQuery(parentPath)
            },

            extractDataFunc: extractMovieArray,

            handleDataFunc: updateDOMWithNewMovies                  (2)
        });
    };

    // When a movie data array is returned from the guillotine data request, this method is called.
    const updateDOMWithNewMovies = (newMovieItems) => {
        console.log("Received data:", newMovieItems);
        if (newMovieItems.length > 0) {
            console.log("Adding movies to state:", newMovieItems.map(movie => movie.title));

            nextOffset += movieCount;                               (3)

            // Use a function, not just a new direct object/array, for mutating state object/array instead of replacing it:
            setState(oldState => ({                                 (4)
                movies: [
                    ...oldState.movies,
                    ...newMovieItems
                ]
            }));

            console.log("Added new movies to state / DOM.");
        }
    };


    // ------------------------------------------------------------------------------------
    // Actual rendering:

    return (
        <div className="movieList" onClick={makeRequest}>
            {state.movies
                ? state.movies.map(movie =>                         (5)
                        <Movie key={movie.id} {...movie} />
                    )
                : null
            }
        </div>
    );
};

// MUST use this export line wrapping, because of the useState hook.
export default (props) => <MovieList {...props} />;

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

import './MovieList.scss';

import Movie from "../shared/Movie";

import doGuillotineRequest from "../../headless/guillotineRequest";
import { buildQueryListMovies, buildParentPathQuery, extractMovieArray } from "../../headless/helpers/movieListRequests";

// State values that don't need re-rendering capability, but need to be synchronously read/writable across closures.
let nextOffset = 0;             // Index for what will be the next movie to search for in a guillotine request

let listenForScroll = true;                                         (1)
const TRIGGER_OFFSET_PX_FROM_BOTTOM = 200;                          (2)


const MovieList = ({movies, apiUrl, parentPath, movieCount, sortExpression}) => {

    // Setup asynchronous component state that triggers re-render on change.
    const [state, setState] = useState({ movies });

    const listContainerId = `movieListContainer_${parentPath}`;     (3)

    // UseEffect with these arguments ( function, [] ) corresponds to componentDidMount in the old-school class-based react components.
    useEffect(
        ()=>{
            console.log("Initializing...");

            nextOffset = movieCount;
                                                                    (4)
            // Browser-specific functionality, so this is prevented from running on the SSR
            if (typeof window.navigator !== 'undefined') {
                initScrollListener();
            }
        },
        []
    );

    // Set up scroll listener, when the component is first mounted.
    // Causes a trigger func function to be called when the bottom of the visible window is scrolled down to less
    // than TRIGGER_OFFSET_PX_FROM_BOTTOM of the movie list element.
    const initScrollListener = () => {
        console.log("Init scroll listener");
                                                                    (5)
        var movieListElem = document.getElementById(listContainerId);

        // ACTUAL SCROLL LISTENER:
        window.addEventListener("scroll", () => {
            if (listenForScroll) {                                  (6)

                                                                    (7)
                var movieBounds = movieListElem.getBoundingClientRect();
                if (movieBounds.bottom < window.innerHeight + TRIGGER_OFFSET_PX_FROM_BOTTOM) {
                    console.log("!!! SCROLL TRIGGER !!!");

                    listenForScroll = false;

                    makeRequest();

                }
            }
        });
    };

    // ------------------------------------------------------
    // Set up action methods, triggered by listener:

    // Makes a (guillotine) request for data with these search parameters and passes an anonymous callback function as
    // handleDataFunc (used on the returned list of movie data).
    const makeRequest = () => {
        console.log("Requesting", movieCount, "movies, starting from index", nextOffset);
        doGuillotineRequest({
            url: apiUrl,

            query: buildQueryListMovies(),

            variables: {
                first: movieCount,
                offset: nextOffset,
                sort: sortExpression,
                parentPathQuery: buildParentPathQuery(parentPath)
            },

            extractDataFunc: extractMovieArray,

            handleDataFunc: updateDOMWithNewMovies
        });
    };

    // When a movie data array is returned from the guillotine data request, this method is called.
    const updateDOMWithNewMovies = (newMovieItems) => {
        console.log("Received data:", newMovieItems);
        if (newMovieItems.length > 0) {
            console.log("Adding movies to state:", newMovieItems.map(movie => movie.title));

            nextOffset += movieCount;

            // Use a function, not just a new direct object/array, for mutating state object/array instead of replacing it:
            setState(oldState => ({
                movies: [
                    ...oldState.movies,
                    ...newMovieItems
                ]
            }));

            console.log("Added new movies to state / DOM.");

            listenForScroll = true;                                 (8)

        } else {
            setTimeout(
                () => {  listenForScroll = true; },
                500
            )

        }
    };

    // ------------------------------------------------------------------------------------
    // Actual rendering:

    return (
        <div id={listContainerId} className="movieList">            {/* <9> */}
            {state.movies
                ? state.movies.map(movie =>
                        <Movie key={movie.id} {...movie} />
                    )
                : null
            }
        </div>
    );
};

// MUST use this export line wrapping, because of the useState hook.
export default (props) => <MovieList {...props} />;