diff --git a/README.md b/README.md index 90d1af0..ac9539e 100644 --- a/README.md +++ b/README.md @@ -531,7 +531,7 @@ You can extend the posts query setting `where` parameter in query. ```graphql query PostsQuery($author: String) { - post_All(where: {authorLinksCodename: $author}) { + post_All(where: {author: {containsAny: [$author]}}) { # Strongly typed collections of items based on `Post`content type items { # ... @@ -544,7 +544,25 @@ query PostsQuery($author: String) { ```graphql query PostsQuery($persona: String) { - post_All(where: {personaLinksTerm: $persona}) { + post_All(where: {persona: {containsAny: [$persona]}}) { + # Strongly typed collections of items based on `Post`content type + items { + # ... + } + } +} +``` + +#### Filter blog by multiple conditions (persona and author) + +```graphql +query PostsQuery($persona: String) { + post_All(where: { + AND: [ # It is also possible to use OR and create more complex filter queries + { persona: {containsAny: [$persona]} }, + { author: {containsAny: [$author]} } + ] + }) { # Strongly typed collections of items based on `Post`content type items { # ... diff --git a/src/ListingPage.js b/src/ListingPage.js index 33ff19c..de7a98f 100644 --- a/src/ListingPage.js +++ b/src/ListingPage.js @@ -14,7 +14,7 @@ import React, { useState } from "react"; import { gql, useQuery } from "@apollo/client"; import { assetFields, seoFields } from "./graphQLFragments"; import getSeo from "./utils/getSeo"; -import { getAuthor, setAuthor } from "./utils/queryString"; +import { getAuthor, setAuthor, getPersona, setPersona } from "./utils/queryString"; const useStyles = makeStyles((theme) => ({ root: { @@ -32,12 +32,26 @@ const useStyles = makeStyles((theme) => ({ }, })); +function getListingPageQuerySignatureSuffix(author, persona) { + let result = author ? ", $author: String!" : ""; + result += persona ? ", $persona: String!" : ""; + return result; +} + +function getListingPageQueryCondition(author, persona) { + + const personaQuery = "persona: {containsAny: [$persona]}"; + const authorQuery = "author: {containsAny: [$author]}"; + + let result = author && persona ? `, where: { AND: [{${authorQuery}}, {${personaQuery}} ] }` : ""; + result += !author && persona ? `, where: {${personaQuery}}` : ""; + result += author && !persona ? `, where: {${authorQuery}}` : ""; + return result; +} + function ListingPage(props) { const listingPageQuery = gql` - # TODO add persona once https://kentico.atlassian.net/browse/DEL-3086 is done - query ListingPageQuery($limit: Int, $offset: Int, $codename: String! ${ - props.author ? ", $author: String!" : "" - }){ + query ListingPageQuery($limit: Int, $offset: Int, $codename: String! ${getListingPageQuerySignatureSuffix(props.author, props.persona)}){ author_All { items { firstName @@ -47,10 +61,7 @@ function ListingPage(props) { } } } - # TODO add persona once https://kentico.atlassian.net/browse/DEL-3086 is done - post_All(limit: $limit, offset: $offset, ${ - props.author ? "where: {author: {containsAny: [$author]} }" : "" - }) { + post_All(limit: $limit, offset: $offset ${getListingPageQueryCondition(props.author, props.persona)}) { items { _system_ { type { @@ -95,7 +106,7 @@ function ListingPage(props) { const [relatedItems, setRelatedItems] = useState([]); const [authors, setAuthors] = useState([]); - // const [personas, setPersonas] = useState([]); + const [personas, setPersonas] = useState([]); const [seo, setSeo] = useState(null); const { loading, error, data } = useQuery( @@ -104,7 +115,8 @@ function ListingPage(props) { variables: { codename: props.codename, author: props.author, - /* persona: props.persona,*/ limit: props.limit, + persona: props.persona, + limit: props.limit, offset: props.offset, }, onCompleted: (data) => { @@ -125,11 +137,10 @@ function ListingPage(props) { }) ); - // TODO update hardcoded personas and load them from Kontent - // setPersonas([{ - // name: "Developer", - // codename: "developer" - // }]); + setPersonas([{ + name: "Developer", + codename: "developer" + }]); setSeo(getSeo(data.navigationItem._seo)); }, @@ -164,7 +175,7 @@ function ListingPage(props) { updateLocation={setAuthor} getValueFromLocation={getAuthor} /> - {/* */} + {relatedItems.length > 0 && ( {relatedItems.map((item, item_idx) => {