Guide example code (corresponding to 370985c in doc-nextjs) (#29)

src/components/pagetypes/List.jsx

@@ -0,0 +1,22 @@
+import React from "react"
+
+const ListPage = ({displayName, children}) => (
+    <>
+        <h1>{displayName}</h1>
+        {
+            children &&
+            <ul>{
+                children.map((child, i) => (
+                    <li key={i}>
+                        <a href={child._path}>
+                            {child.displayName}
+                        </a>
+                    </li>
+                    )
+                )
+            }</ul>
+        }
+    </>
+);
+
+export default ListPage;

src/components/pagetypes/Movie.jsx

@@ -0,0 +1,92 @@
+import React from "react"
+
+// Main entry component
+const MoviePage = (movie) => {
+    const { data={} } = movie;
+
+    return (
+        <>
+            <div>
+                <h2>{movie.displayName}</h2>
+                <MovieInfo data={data} />
+                <Cast cast={ data.cast?.length && data.cast } />
+            </div>
+
+            <BackLink parent={ movie.parent } />
+        </>
+    );
+};
+export default MoviePage;
+
+
+// Main movie info: release year, poster image and abstract text.
+// data = movie.data (object from MoviePage)
+const MovieInfo = ({data}) => {
+    const posterPhoto = (data.photos || [])[0] || {};
+
+    return (
+        <>
+            { data.release && (
+                <p>({ new Date(data.release).getFullYear() })</p>
+            )}
+
+            { posterPhoto.imageUrl && (
+                <img src={posterPhoto.imageUrl}
+                     title={data.subtitle || movie.displayName}
+                     alt={data.subtitle || movie.displayName}
+                />
+            )}
+
+            <p>{data.abstract}</p>
+        </>
+    )
+}
+
+
+// List persons starring in the movie.
+// cast = movie.data.cast (array from MoviePage)
+const Cast = ({cast}) => cast && (
+    <div>
+        <h4>Cast</h4>
+        <ul style={{listStyle: "none", display: "flex", flexFlow: "row wrap"}}>
+            {cast.map(
+                (person, i) => person && (
+                    <CastMember key={i} {...person} />
+                )
+            )}
+        </ul>
+    </div>
+);
+
+
+// Person in the cast list:
+// person = an item in the movie.data.cast array (from Cast)
+const CastMember = (person) => {
+    const { character, actor={} } = person;
+    const { displayName, _path, data={} } = actor;
+    const personPhoto = (data.photos || [])[0] || {};
+
+    return (
+        <li style={{marginRight: "15px"}}>
+            {
+                personPhoto.imageUrl &&
+                <img src={personPhoto.imageUrl}
+                     title={`${displayName} as ${character}`}
+                     alt={`${displayName} as ${character}`}/>
+            }
+            <div>
+                <p>{character}</p>
+                <p><a href={_path}>
+                    {displayName}
+                </a></p>
+            </div>
+        </li>
+    );
+}
+
+
+// "Back to Movies" link at the bottom
+// parent = movie.parent (object from MoviePage)
+const BackLink = ({parent}) => parent && (
+    <p><a href={parent._path}>Back to Movies</a></p>
+);

src/components/pagetypes/Person.jsx

@@ -0,0 +1,33 @@
+import React from "react"
+
+const PersonPage = ({displayName, data={}, parent={}}) => {
+    const {bio, photos} = data;
+    const {_path} = parent;
+
+    return (
+        <>
+            <div>
+                <h1>{displayName}</h1>
+
+                <p>{bio}</p>
+
+                {
+                    photos.map((photo, i) => (
+                        <img key={i}
+                             src={photo.imageUrl}
+                             title={
+                                 (photo.attachments || [])[0].name ||
+                                 displayName
+                             }
+                             width="200"
+                        />
+                    ))
+                }
+            </div>
+
+            <p><a href={_path}>Back to Persons</a></p>
+        </>
+    )
+}
+
+export default PersonPage;

src/selectors/props/processList.js

@@ -0,0 +1,13 @@
+import processPath from "./processPath";
+
+const processList = (props) => ({
+    ...props,
+    children: (props.children || []).map(
+        child => ({
+            ...child,
+            _path: processPath(child._path)
+        })
+    )
+});
+
+export default processList;

src/selectors/props/processMovie.js

@@ -0,0 +1,22 @@
+import processPath from "./processPath";
+
+const processMovie = (props) => ({
+    ...props,
+    data: {
+        ...props.data,
+        cast: (props.data?.cast || []).map(
+            person => ({
+                ...person,
+                actor: {
+                    ...person.actor,
+                    _path: processPath(person.actor._path)
+                }
+            })
+        )
+    },
+    parent: {
+        _path: processPath(props.parent._path)
+    }
+});
+
+export default processMovie;

src/selectors/props/processPath.js

@@ -0,0 +1,6 @@
+import {siteName} from "../../enonic-connection-config";
+
+const siteNamePattern = new RegExp('^/' + siteName + "/");
+
+const processPath = (xpContentPath) => xpContentPath.replace(siteNamePattern, '/');
+export default processPath;

src/selectors/props/processPerson.js

@@ -0,0 +1,11 @@
+import processPath from "./processPath";
+
+const processPerson = (props) => ({
+    ...props,
+    parent: {
+        _path: processPath(props.parent._path)
+    }
+
+});
+
+export default processPerson;

src/selectors/queries/getList.js

@@ -0,0 +1,39 @@
+const getListQuery = `
+query($path:ID!, $maxChildren:Int, $start:Int) {                     
+  guillotine {
+    get(key:$path) {
+      type
+      displayName
+      children(first:$maxChildren, offset:$start) {                 
+        displayName
+        _path
+      }
+    }
+  }
+}`;
+
+export default getListQuery;
+
+
+// Supplies $maxChildren and $start parameters to variables,
+// either with integers from the URI, or default values.
+// $path is also returned: it must be or the query will fail.
+export const getListVariables = (path, context) => {
+    const { max, start } = context.query || {};
+
+    let maxInt = parseInt(max);
+    if (isNaN(maxInt)) {
+        maxInt = 1000;
+    }
+
+    let startInt = parseInt(start);
+    if (isNaN(startInt)) {
+        startInt = 0;
+    }
+
+    return {
+        path,
+        maxChildren: maxInt,
+        start: startInt
+    };
+} ;

src/selectors/queries/getMovie.js

@@ -0,0 +1,51 @@
+import {appNameUnderscored} from '../../enonic-connection-config'
+
+const getMovie = `
+query($path:ID!){
+  guillotine {
+    get(key:$path) {
+      type
+      displayName
+      ... on ${appNameUnderscored}_Movie {
+        data {
+          subtitle
+          abstract
+          trailer
+          release
+          photos {
+            ... on media_Image {                                             
+              imageUrl: imageUrl(type: absolute, scale: "width(500)")       
+              attachments {                                                 
+                name
+              }
+            }
+          }
+          cast {
+            character
+            actor {
+              ... on ${appNameUnderscored}_Person {
+                _path
+                displayName
+                data {
+                  photos {
+                    ... on media_Image {                                             
+                      imageUrl: imageUrl(type: absolute, scale: "block(100,100)")       
+                      attachments {                                                 
+                        name
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        parent {
+            _path
+        }
+      }
+    }
+  }
+}`;
+
+export default getMovie;