2: React.lazy load HyloEditorMobile for code-splitting to improve load time in HyloApp

src/components/HyloEditor/HyloEditor.js

@@ -1,5 +1,4 @@
 import React, { useRef, useImperativeHandle, useEffect, useState } from 'react'
-import { useDispatch } from 'react-redux'
 import { useEditor, EditorContent, Extension, BubbleMenu } from '@tiptap/react'
 import Highlight from '@tiptap/extension-highlight'
 import Placeholder from '@tiptap/extension-placeholder'
@@ -31,7 +30,6 @@ export const HyloEditor = React.forwardRef(function HyloEditor ({
   showMenu = false,
   suggestionsThemeName = 'suggestions'
 }, ref) {
-  const dispatch = useDispatch()
   const editorRef = useRef(null)
   const [selectedLink, setSelectedLink] = useState()
   const editor = useEditor({
@@ -113,9 +111,9 @@ export const HyloEditor = React.forwardRef(function HyloEditor ({
         }
       }),
 
-      PeopleMentions({ onSelection: onAddMention, maxSuggestions, groupIds, suggestionsThemeName, dispatch }),
+      PeopleMentions({ onSelection: onAddMention, maxSuggestions, groupIds, suggestionsThemeName }),
 
-      TopicMentions({ onSelection: onAddTopic, maxSuggestions, groupIds, suggestionsThemeName, dispatch }),
+      TopicMentions({ onSelection: onAddTopic, maxSuggestions, groupIds, suggestionsThemeName }),
 
       Highlight
     ],

src/components/HyloEditor/extensions/PeopleMentions.js

@@ -1,10 +1,11 @@
 import Mention from '@tiptap/extension-mention'
 import { PluginKey } from 'prosemirror-state'
+import { queryHyloAPI } from 'util/graphql'
 import asyncDebounce from 'util/asyncDebounce'
 import suggestions from './suggestions'
 import findMentions from 'store/actions/findMentions'
 
-export const PeopleMentions = ({ dispatch, groupIds, maxSuggestions, onSelection, suggestionsThemeName }) =>
+export const PeopleMentions = ({ groupIds, maxSuggestions, onSelection, suggestionsThemeName }) =>
   // Mentions (https://github.com/ueberdosis/tiptap/issues/2219#issuecomment-984662243)
   Mention
     .extend({
@@ -44,15 +45,16 @@ export const PeopleMentions = ({ dispatch, groupIds, maxSuggestions, onSelection
         items: asyncDebounce(200, async ({ query, editor }) => {
           editor.extensionStorage.topic.loading = true
 
-          const matchedPeople = await dispatch(findMentions({
+          const findMentionsGraphql = findMentions({
             autocomplete: query,
             groupIds: editor.extensionStorage.mention.groupIds,
             maxItems: maxSuggestions
-          }))
+          }).graphql
+          const matchedPeople = await queryHyloAPI(findMentionsGraphql)
 
           editor.extensionStorage.topic.loading = false
 
-          return matchedPeople?.payload.getData().items
+          return matchedPeople?.data.people.items
             .map(person => ({
               id: person.id,
               label: person.name,

src/components/HyloEditor/extensions/TopicMentions.js

@@ -1,11 +1,12 @@
 import Mention from '@tiptap/extension-mention'
 import { PluginKey } from 'prosemirror-state'
 import { uniqBy } from 'lodash/fp'
+import { queryHyloAPI } from 'util/graphql'
 import asyncDebounce from 'util/asyncDebounce'
 import suggestions from './suggestions'
 import findTopics from 'store/actions/findTopics'
 
-export const TopicMentions = ({ dispatch, groupIds, maxSuggestions, onSelection, suggestionsThemeName }) =>
+export const TopicMentions = ({ groupIds, maxSuggestions, onSelection, suggestionsThemeName }) =>
   Mention
     .extend({
       name: 'topic',
@@ -44,15 +45,16 @@ export const TopicMentions = ({ dispatch, groupIds, maxSuggestions, onSelection,
           //       Can be fixed if it is a bad UX.
           editor.extensionStorage.topic.loading = true
 
-          // TODO: Integrate `getTopicsBySearchTerm` selector to reduce queries and speed results
-          const matchedTopics = await dispatch(findTopics({
+          const findTopicsGraphql = findTopics({
             autocomplete: query,
+            groupIds: editor.extensionStorage.topic.groupIds,
             maxItems: maxSuggestions
-          }))
+          }).graphql
+          const matchedTopics = await queryHyloAPI(findTopicsGraphql)
 
           editor.extensionStorage.topic.loading = false
 
-          const results = matchedTopics?.payload.getData().items
+          const results = matchedTopics?.data.groupTopics.items
             .map(t => ({
               id: t.topic.name,
               label: `#${t.topic.name}`,

src/index.js

@@ -1,11 +1,42 @@
-import React from 'react'
+import React, { Suspense } from 'react'
 import ReactDOM from 'react-dom'
 import { rootDomId } from 'client/util'
-import App from './router'
+import Loading from 'components/Loading'
 import './client/websockets'
 import './css/global/index.scss'
 
-ReactDOM.render(
-  <App />,
-  document.getElementById(rootDomId)
-)
+const App = React.lazy(() => import('./router'))
+const HyloEditorMobile = React.lazy(() => import('components/HyloEditor/HyloEditorMobile'))
+const Feature = React.lazy(() => import('components/PostCard/Feature'))
+
+const renderRoot = () => {
+  switch (window.location.pathname) {
+    case '/hyloApp/editor': {
+      return (
+        <Suspense fallback={() => null}>
+          <HyloEditorMobile />
+        </Suspense>
+      )
+    }
+
+    case '/hyloApp/videoPlayer': {
+      const querystringParams = new URLSearchParams(window.location.search)
+
+      return (
+        <Suspense fallback={() => null}>
+          <Feature url={querystringParams.get('url')} />
+        </Suspense>
+      )
+    }
+
+    default: {
+      return (
+        <Suspense fallback={() => <Loading type='fullscreen' />}>
+          <App />
+        </Suspense>
+      )
+    }
+  }
+}
+
+ReactDOM.render(renderRoot(), document.getElementById(rootDomId))

src/router/index.js

@@ -1,14 +1,12 @@
 import React from 'react'
 import { ConnectedRouter } from 'connected-react-router'
-import { Switch, Route } from 'react-router'
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 import { Provider } from 'react-redux'
 import { LayoutFlagsProvider } from 'contexts/LayoutFlagsContext'
 import isWebView from 'util/webView'
 import createStore, { history } from '../store'
 import RootRouter from 'routes/RootRouter'
-import HyloAppRouter from 'routes/HyloAppRouter'
 
 const store = createStore()
 
@@ -24,10 +22,7 @@ export default function App () {
       <DndProvider backend={HTML5Backend}>
         <Provider store={store}>
           <ConnectedRouter history={history}>
-            <Switch>
-              <Route path='/hyloApp' component={HyloAppRouter} />
-              <RootRouter />
-            </Switch>
+            <RootRouter />
           </ConnectedRouter>
         </Provider>
       </DndProvider>

src/util/graphql.js

@@ -1,6 +1,9 @@
+import fetch from 'isomorphic-fetch'
 import gql from 'graphql-tag'
 import { print } from 'graphql/language/printer'
 
+export const HYLO_GRAPHQL_ENDPOINT_PATH = '/noo/graphql'
+
 export function stringToGraphql (graphqlString) {
   return (typeof graphqlString === 'string' || graphqlString instanceof String)
     ? gql(graphqlString)
@@ -13,3 +16,36 @@ export function graphqlToString (unknownGraphql) {
     ? print(unknownGraphql)
     : unknownGraphql
 }
+
+export function getHyloAPIEndpointURL () {
+  return typeof window === 'undefined'
+    ? `${process.env.API_HOST}${HYLO_GRAPHQL_ENDPOINT_PATH}`
+    : `${window.location.origin}${HYLO_GRAPHQL_ENDPOINT_PATH}`
+}
+
+// For directly querying our API outside of the Redux store.
+// Currently only used in the WebView HyloEditor
+export async function queryHyloAPI ({ query: unknownGraphql, variables }) {
+  const params = { query: graphqlToString(unknownGraphql), variables }
+  const response = await fetch(getHyloAPIEndpointURL(), {
+    body: JSON.stringify(params),
+    credentials: 'same-origin',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+    },
+    method: 'POST'
+  })
+
+  if (response.status === 200) {
+    return response.json()
+  } else {
+    const { status, statusText, url } = response
+    const body = await response.text()
+    const error = new Error(body)
+
+    error.response = { status, statusText, url, body }
+
+    throw error
+  }
+}