-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add chapter 4 example code: list, person, movie rendering (otherwise …
…vanilla) Merge branch '#29/guide_examples' into guide branch 'minimized-plus-code-examples' * #29/guide_examples: Guide example code (corresponding to 370985c in doc-nextjs) (#29) CR fix (#29) Temp: example code for guide (#29)
- Loading branch information
Showing
11 changed files
with
347 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import {siteName} from "../../enonic-connection-config"; | ||
|
||
const siteNamePattern = new RegExp('^/' + siteName + "/"); | ||
|
||
const processPath = (xpContentPath) => xpContentPath.replace(siteNamePattern, '/'); | ||
export default processPath; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import processPath from "./processPath"; | ||
|
||
const processPerson = (props) => ({ | ||
...props, | ||
parent: { | ||
_path: processPath(props.parent._path) | ||
} | ||
|
||
}); | ||
|
||
export default processPerson; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
}; | ||
} ; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import {appNameUnderscored} from '../../enonic-connection-config' | ||
|
||
export default ` | ||
query($path:ID!){ | ||
guillotine { | ||
get(key:$path) { | ||
displayName | ||
... on ${appNameUnderscored}_Person { | ||
data { | ||
bio | ||
dateofbirth | ||
photos { | ||
... on media_Image { | ||
imageUrl: imageUrl(type: absolute, scale: "width(500)") | ||
attachments { | ||
name | ||
} | ||
} | ||
} | ||
} | ||
} | ||
parent { | ||
_path | ||
} | ||
} | ||
} | ||
}`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters