Merge pull request #1323 from ONEARMY/feat/support-additional-academy…

…-locations

feat: support additional academy locations

packages/cypress/src/integration/academy.spec.ts

@@ -8,7 +8,7 @@ describe('[Academy]', () => {
       const githubDoc = 'https://onearmy.github.io/academy'
       cy.get('iframe')
         .should('have.attr', 'src')
-        .and('equal', githubDoc)
+        .and('contain', githubDoc)
     })
   })
 })

src/components/ExternalEmbed/ExternalEmbed.tsx

@@ -15,13 +15,18 @@ interface IProps extends RouteComponentProps {
 }
 interface IState {
   src: string
+  targetOrigin: string
 }
 
 class ExternalEmbed extends React.Component<IProps, IState> {
   constructor(props) {
     super(props)
+
+    const url = new URL(this.props.src)
+
     this.state = {
       src: this.props.src,
+      targetOrigin: url.protocol + '//' + url.hostname,
     }
   }
 
@@ -42,10 +47,10 @@ class ExternalEmbed extends React.Component<IProps, IState> {
    * Custom method to allow communication from Iframe to parent via postmessage
    */
   handlePostmessageFromIframe = (e: MessageEvent) => {
+    console.log({ eOrigin: e.origin, src: this.props.src })
     // only allow messages from specific sites (academy dev and live)
-    if (
-      ['http://localhost:3001', 'https://onearmy.github.io'].includes(e.origin)
-    ) {
+    console.log(e.data.pathname)
+    if ([this.state.targetOrigin].includes(e.origin)) {
       // communicate url changes, update navbar
       if (e.data && e.data.pathname) {
         this.props.history.push(e.data.pathname)

src/pages/Academy/Academy.tsx

@@ -0,0 +1,22 @@
+import { Route } from 'react-router'
+import { useCommonStores } from 'src'
+import ExternalEmbed from 'src/components/ExternalEmbed/ExternalEmbed'
+
+export default function Academy() {
+  const { stores } = useCommonStores()
+  const src = stores.themeStore.currentTheme.academyResource
+  return (
+    <Route
+      render={props => (
+        // NOTE - for embed to work github.io site also must host at same path, i.e. /academy
+        <ExternalEmbed
+          src={`${src}${props.location.pathname
+            .split('/')
+            .filter(str => str !== 'academy')
+            .join('/')}`}
+          {...props}
+        />
+      )}
+    />
+  )
+}

src/pages/PageList.tsx

@@ -1,8 +1,6 @@
 import { lazy } from 'react'
 import { CSSObject } from '@styled-system/css'
-import { Route } from 'react-router'
 import { UserRole } from 'src/models/user.models'
-import ExternalEmbed from 'src/components/ExternalEmbed/ExternalEmbed'
 import { ResearchModule } from './Research'
 import { MODULE } from 'src/modules'
 
@@ -13,6 +11,7 @@ import { MODULE } from 'src/modules'
 const HowtoPage = lazy(() => import('./Howto/Howto'))
 const SettingsPage = lazy(() => import('./Settings'))
 
+const AcademyPage = lazy(() => import('./Academy/Academy'));
 const EventsPage = lazy(() => import('./Events/Events'))
 const AdminPage = lazy(() => import('./admin/Admin'))
 const MapsPage = lazy(() => import('./Maps/Maps'))
@@ -73,17 +72,7 @@ const user = {
 const academy = {
   moduleName: MODULE.ACADEMY,
   path: '/academy',
-  component: (
-    <Route
-      render={props => (
-        // NOTE - for embed to work github.io site also must host at same path, i.e. /academy
-        <ExternalEmbed
-          src={`https://onearmy.github.io${props.location.pathname}`}
-          {...props}
-        />
-      )}
-    />
-  ),
+  component: <AcademyPage/>,
   title: 'Academy',
   description: 'Demo external page embed',
   customStyles: {

src/themes/precious-plastic/index.ts

@@ -7,6 +7,7 @@ const Theme: PlatformTheme = {
   logo,
   howtoHeading: `Learn & share how to recycle, build and work with plastic`,
   styles,
+  academyResource: 'https://onearmy.github.io/academy/',
 }
 
 export default Theme

src/themes/project-kamp/index.ts

@@ -1,12 +1,13 @@
-import logo from 'src/assets/images/themes/project-kamp/project-kamp-header.png'
 import type { PlatformTheme } from '../types'
+import logo from 'src/assets/images/themes/project-kamp/project-kamp-header.png'
 import styles from './styles'
 
 const Theme: PlatformTheme = {
   siteName: 'Project Kamp',
   logo,
   howtoHeading: `Learn & share how to recycle, build and work`,
   styles,
+  academyResource: 'https://project-kamp-academy.netlify.app/',
 }
 
 

src/themes/types.tsx

@@ -3,4 +3,5 @@ export interface PlatformTheme {
   logo: string
   howtoHeading: string
   styles: any
+  academyResource: string
 }