-
- );
+ // In a production application the serviceURL should be set to the production AEM Publish environment
+ // In development the serviceURL can be set to '/' which will be a relative proxy is used (see ../authMethods.js) to avoid CORS issues
+ const serviceURL = REACT_APP_USE_PROXY === 'true' ? '/' : REACT_APP_HOST_URI;
+
+ const aemHeadlessClient = new AEMHeadless({
+ serviceURL: serviceURL,
+ endpoint: REACT_APP_GRAPHQL_ENDPOINT,
+ auth: setAuthorization()
+ });
+
+ return (
+
+
+
AEM GraphQL React Test Harness
+
+
+
+ );
}
-/***
- * Displays a grid of current adventures
- */
-function Home() {
- return (
-
-
Current Adventures
-
-
- );
+// Get authorization based on environment variables
+// authorization is not needed when connecting to Publish environments
+const setAuthorization = function () {
+ if (REACT_APP_AUTH_METHOD === 'basic') {
+ return [REACT_APP_BASIC_AUTH_USER, REACT_APP_BASIC_AUTH_PASS];
+ } else if (REACT_APP_AUTH_METHOD === 'dev-token') {
+ return REACT_APP_DEV_TOKEN;
+ } else {
+ // no authentication set
+ return;
+ }
}
diff --git a/react-app/src/App.scss b/react-app/src/App.scss
index 0273f69..1931482 100644
--- a/react-app/src/App.scss
+++ b/react-app/src/App.scss
@@ -6,6 +6,7 @@ NOTICE: Adobe permits you to use, modify, and distribute this file in
accordance with the terms of the Adobe license agreement accompanying
it.
*/
+@use "sass:math";
/* Normalize */
@import '~normalize-scss/sass/normalize';
@import './styles/variables';
@@ -37,7 +38,7 @@ h3, .h3 {
font-family: $font-family-serif;
font-weight: $font-weight-normal;
margin-top: $line-height-computed;
-margin-bottom: ($line-height-computed / 2);
+margin-bottom: math.div($line-height-computed, 2);
}
h4, .h4,
@@ -73,7 +74,7 @@ h1 u, h2 u, h3 u {
// -------------------------
p {
-margin: 0 0 ($line-height-computed / 2);
+margin: 0 0 math.div($line-height-computed , 2);
font-size: $font-size-base;
line-height: $line-height-base + 0.75;
text-align: justify;
diff --git a/react-app/src/App.test.js b/react-app/src/App.test.js
index e834bd0..8afef48 100644
--- a/react-app/src/App.test.js
+++ b/react-app/src/App.test.js
@@ -7,11 +7,11 @@ accordance with the terms of the Adobe license agreement accompanying
it.
*/
import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
- const { getByText } = render();
- const linkElement = getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
+ render();
+ const logoElement = screen.getByAltText(/WKND Logo/i);
+ expect(logoElement).toBeInTheDocument();
});
diff --git a/react-app/src/api/useGraphQL.js b/react-app/src/api/useGraphQL.js
deleted file mode 100644
index 1d15550..0000000
--- a/react-app/src/api/useGraphQL.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
-Copyright 2020 Adobe
-All Rights Reserved.
-
-NOTICE: Adobe permits you to use, modify, and distribute this file in
-accordance with the terms of the Adobe license agreement accompanying
-it.
-*/
-import {useState, useEffect} from 'react';
-
-const { NODE_ENV, REACT_APP_HOST_URI, REACT_APP_GRAPHQL_ENDPOINT, REACT_APP_AUTHORIZATION } = process.env;
-
-/*
- Custom React Hook to perform a GraphQL query
- query paramter is a GraphQL query
- environment variable REACT_APP_GRAPHQL_ENDPOINT is used to point to endpoint in AEM
-*/
-function useGraphQL(query) {
-
- let [data, setData] = useState(null);
- let [errorMessage, setErrors] = useState(null);
-
- useEffect(() => {
- window.fetch(
- getRequestUrl(),
- getRequestOptions(query)
- ).then(response => response.json())
- .then(({data, errors}) => {
- //If there are errors in the response set the error message
- if(errors) {
- setErrors(mapErrors(errors));
- }
- //Otherwise if data in the response set the data as the results
- if(data) {
- setData(data);
- }
- })
- .catch((error) => {
- setErrors(error);
- });
- }, [query]);
-
- return {data, errorMessage}
-}
-
-/**
- * Get the request uri based on environment variables
- */
-function getRequestUrl() {
-
- if(NODE_ENV === 'development') {
- // always use a relative url during development so the proxy is used at setupProxy.js
- return REACT_APP_GRAPHQL_ENDPOINT;
- }
-
- // use an absolute URL for everything else
- return REACT_APP_HOST_URI + REACT_APP_GRAPHQL_ENDPOINT;
-}
-
-/**
- * Set the GraphQL endpoint based on environment variables and passed in query
- * @param {*} query
- */
-function getRequestOptions(query) {
-
- // headers and include authorization if authorization set
- let httpHeaders = new Headers();
- httpHeaders.append('Content-Type', 'application/json');
- if(REACT_APP_AUTHORIZATION) {
- httpHeaders.append('Authorization', 'Basic ' + btoa(REACT_APP_AUTHORIZATION))
- }
-
- return {
- method: 'POST',
- headers: httpHeaders,
- body: JSON.stringify({query}),
- };
-}
-
-/**
- * concatenate error messages into a single string.
- * @param {*} errors
- */
-function mapErrors(errors) {
- return errors.map((error) => error.message).join(",");
-}
-export default useGraphQL
\ No newline at end of file
diff --git a/react-app/src/components/AdventureDetail.js b/react-app/src/components/AdventureDetail.js
deleted file mode 100644
index 41ef63b..0000000
--- a/react-app/src/components/AdventureDetail.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/*
-Copyright 2020 Adobe
-All Rights Reserved.
-
-NOTICE: Adobe permits you to use, modify, and distribute this file in
-accordance with the terms of the Adobe license agreement accompanying
-it.
-*/
-import React from 'react';
-import { withRouter, Link} from "react-router-dom";
-import useGraphQL from '../api/useGraphQL';
-import backIcon from '../images/icon-close.svg';
-import Error from './Error';
-import Loading from './Loading';
-import './AdventureDetail.scss';
-
-
-function AdventureDetail(props) {
-
- //parse the content fragment from the url
- const contentFragmentPath = props.location.pathname.substring(props.match.url.length);
-
- //Use a custom React Hook to execute the GraphQL query
- const { data, errorMessage } = useGraphQL(adventureDetailQuery(contentFragmentPath));
-
- //If there is an error with the GraphQL query
- if(errorMessage) return ;
-
- //If data is null then return a loading icon...
- if(!data) return ;
-
- //Set adventureData variable based on graphQL response
- let adventureData = data.adventureByPath.item;
-
- //Must have title, path, and image
- if(!adventureData || !adventureData._path || !adventureData.adventureTitle || !adventureData.adventurePrimaryImage ) {
- return (
-
+
+ );
+}
+
+/**
+ * Render the AEM response
+ * @param {*} response
+ * @returns
+ */
+function RenderResponse({ data, errors, isLoading }) {
+ //If response is null then return a loading state...
+ if (isLoading) return ;
+
+ //If there is an error with the GraphQL query
+ if (errors) return ;
+
+ if (!data) return
Test a query by filling out the form above
;
+
+ return (
+
+
{JSON.stringify(data, null, 2)}
+
+ );
+
+}
+
+/**
+ * concatenate error messages into a single string.
+ * @param {*} errors
+ */
+export const mapErrors = function (errors) {
+ return errors.map((error) => error.message).join(",");
+}
+
+export default TestPersistQueries;
diff --git a/react-app/src/images/icon-close.svg b/react-app/src/images/icon-close.svg
deleted file mode 100644
index 640689b..0000000
--- a/react-app/src/images/icon-close.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/react-app/src/images/wknd-logo-dk.svg b/react-app/src/images/wknd-logo-dk.svg
deleted file mode 100644
index a7317af..0000000
--- a/react-app/src/images/wknd-logo-dk.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/react-app/src/proxy/authMethods.js b/react-app/src/proxy/authMethods.js
new file mode 100644
index 0000000..0861aa9
--- /dev/null
+++ b/react-app/src/proxy/authMethods.js
@@ -0,0 +1,17 @@
+/*
+Copyright 2021 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+const SERVICE_TOKEN = 'service-token';
+const DEV_TOKEN = 'dev-token';
+const BASIC = 'basic';
+
+module.exports = {
+ SERVICE_TOKEN,
+ DEV_TOKEN,
+ BASIC
+};
diff --git a/react-app/src/proxy/setupProxy.auth.basic.js b/react-app/src/proxy/setupProxy.auth.basic.js
new file mode 100644
index 0000000..c841677
--- /dev/null
+++ b/react-app/src/proxy/setupProxy.auth.basic.js
@@ -0,0 +1,28 @@
+/*
+Copyright 2020 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+const { createProxyMiddleware } = require('http-proxy-middleware');
+const { REACT_APP_HOST_URI, REACT_APP_BASIC_AUTH_USER, REACT_APP_BASIC_AUTH_PASS } = process.env;
+
+/*
+ Set up a proxy with AEM for local development
+ In a production enviroment this proxy should be set up at the webserver level or absolute URLs should be used.
+*/
+
+module.exports = function(app) {
+ app.use(
+ ['/content', '/graphql'],
+ createProxyMiddleware({
+ target: REACT_APP_HOST_URI,
+ changeOrigin: true,
+ // pass in credentials when developing against an Author environment
+ auth: `${REACT_APP_BASIC_AUTH_USER}:${REACT_APP_BASIC_AUTH_PASS}`
+ })
+ );
+};
+
diff --git a/react-app/src/proxy/setupProxy.auth.dev-token.js b/react-app/src/proxy/setupProxy.auth.dev-token.js
new file mode 100644
index 0000000..6643d2a
--- /dev/null
+++ b/react-app/src/proxy/setupProxy.auth.dev-token.js
@@ -0,0 +1,31 @@
+/*
+Copyright 2020 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+const { createProxyMiddleware } = require('http-proxy-middleware');
+const { REACT_APP_HOST_URI, REACT_APP_DEV_TOKEN } = process.env;
+
+/*
+ Set up a proxy with AEM for local development
+ In a production enviroment this proxy should be set up at the webserver level or absolute URLs should be used.
+*/
+
+module.exports = function(app) {
+ app.use(
+ ['/content', '/graphql'],
+ createProxyMiddleware({
+ target: REACT_APP_HOST_URI,
+ changeOrigin: true,
+ onProxyReq: (proxyReq, req, res) => {
+ if (REACT_APP_DEV_TOKEN) {
+ proxyReq.setHeader('Authorization', `Bearer ${REACT_APP_DEV_TOKEN}`);
+ }
+ }
+ })
+ );
+};
+
diff --git a/react-app/src/proxy/setupProxy.auth.none.js b/react-app/src/proxy/setupProxy.auth.none.js
new file mode 100644
index 0000000..7244e22
--- /dev/null
+++ b/react-app/src/proxy/setupProxy.auth.none.js
@@ -0,0 +1,26 @@
+/*
+Copyright 2020 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+const { createProxyMiddleware } = require('http-proxy-middleware');
+const {REACT_APP_HOST_URI } = process.env;
+
+/*
+ Set up a proxy with AEM for local development
+ In a production enviroment this proxy should be set up at the webserver level or absolute URLs should be used.
+*/
+
+module.exports = function(app) {
+ app.use(
+ ['/content', '/graphql'],
+ createProxyMiddleware({
+ target: REACT_APP_HOST_URI,
+ changeOrigin: true
+ })
+ );
+};
+
diff --git a/react-app/src/proxy/setupProxy.auth.service-token.js b/react-app/src/proxy/setupProxy.auth.service-token.js
new file mode 100644
index 0000000..919d19d
--- /dev/null
+++ b/react-app/src/proxy/setupProxy.auth.service-token.js
@@ -0,0 +1,54 @@
+/*
+Copyright 2020 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+const { createProxyMiddleware } = require('http-proxy-middleware');
+const session = require('express-session')
+const { getToken } = require('@adobe/aem-headless-client-nodejs');
+const { REACT_APP_HOST_URI, REACT_APP_SERVICE_TOKEN } = process.env;
+
+/*
+ Set up a proxy with AEM for local development
+ In a production environment this proxy should be set up at the webserver level or absolute URLs should be used.
+*/
+
+module.exports = function(app) {
+ // Setup session
+ app.use(session({
+ secret: 'MY_SECRET',
+ resave: false,
+ saveUninitialized: true
+ }))
+ app.use(
+ ['/content', '/graphql'],
+ function (req, res, next) {
+ if (!req.session.accessToken) {
+ getToken(REACT_APP_SERVICE_TOKEN)
+ .then(({ accessToken, expires }) => {
+ console.log('Token received', accessToken.length, expires)
+ if (accessToken) {
+ req.session.accessToken = accessToken
+ req.headers.authorization = `Bearer ${accessToken}`
+ }
+ next()
+ })
+ .catch(e => {
+ console.error(e)
+ next()
+ })
+ } else {
+ req.headers.authorization = `Bearer ${req.session.accessToken}`
+ next()
+ }
+ },
+ createProxyMiddleware({
+ target: REACT_APP_HOST_URI,
+ changeOrigin: true
+ })
+ );
+};
+
diff --git a/react-app/src/setupProxy.js b/react-app/src/setupProxy.js
index b805c5e..70f3f70 100644
--- a/react-app/src/setupProxy.js
+++ b/react-app/src/setupProxy.js
@@ -6,22 +6,28 @@ NOTICE: Adobe permits you to use, modify, and distribute this file in
accordance with the terms of the Adobe license agreement accompanying
it.
*/
-const { createProxyMiddleware } = require('http-proxy-middleware');
-const {REACT_APP_HOST_URI, REACT_APP_AUTHORIZATION } = process.env;
+const { SERVICE_TOKEN, DEV_TOKEN, BASIC } = require('./proxy/authMethods');
+
+const proxy = (() => {
+ switch (process.env.REACT_APP_AUTH_METHOD) {
+ case SERVICE_TOKEN:
+ // Use Service token exchange for Cloud Env PROD
+ return require('./proxy/setupProxy.auth.service-token');
+ case DEV_TOKEN:
+ // Use Dev token for local development with Cloud Env
+ return require('./proxy/setupProxy.auth.dev-token');
+ case BASIC:
+ // Use user/pass for local development with Local Author Env
+ return require('./proxy/setupProxy.auth.basic');
+ default:
+ // Auth not needed for local development with Local Publisher Env
+ return require('./proxy/setupProxy.auth.none');
+ }
+})();
/*
Set up a proxy with AEM for local development
- In a production enviroment this proxy should be set up at the webserver level or absolute URLs should be used.
+ In a production environment this proxy should be set up at the webserver level or absolute URLs should be used.
*/
-module.exports = function(app) {
- app.use(
- '/content',
- createProxyMiddleware({
- target: REACT_APP_HOST_URI,
- changeOrigin: true,
- //pass in credentials when developing against an Author environment
- auth: REACT_APP_AUTHORIZATION,
- })
- );
-};
+module.exports = proxy;
diff --git a/react-app/src/setupTests.js b/react-app/src/setupTests.js
index 180dde1..f173ba5 100644
--- a/react-app/src/setupTests.js
+++ b/react-app/src/setupTests.js
@@ -11,3 +11,4 @@ it.
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect';
+process.env.REACT_APP_GRAPHQL_ENDPOINT = 'test'
-