From beafd507b8519d45a0c1b2cadba65530e9a7c656 Mon Sep 17 00:00:00 2001 From: Loren Johnson Date: Fri, 21 Oct 2022 11:55:50 -0700 Subject: [PATCH 1/3] React.lazy loads HyloEditorMobile and moves it above our routing setup allowing it to code-split with minimum dependencies --- src/index.js | 19 ++++++++++++++++--- src/router/index.js | 7 +------ src/routes/HyloAppRouter/HyloAppRouter.js | 16 ---------------- src/routes/HyloAppRouter/index.js | 3 --- 4 files changed, 17 insertions(+), 28 deletions(-) delete mode 100644 src/routes/HyloAppRouter/HyloAppRouter.js delete mode 100644 src/routes/HyloAppRouter/index.js diff --git a/src/index.js b/src/index.js index c2a7231dd..8daa7db79 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,24 @@ -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' +const App = React.lazy(() => import('./router')) +const HyloEditorMobile = React.lazy(() => import('components/HyloEditor/HyloEditorMobile')) + ReactDOM.render( - , + window.location.pathname === '/hyloApp/editor' + ? ( + null}> + + + ) : ( + }> + + + ), document.getElementById(rootDomId) ) diff --git a/src/router/index.js b/src/router/index.js index 8d6aff4cd..4cead40b3 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,13 +1,11 @@ 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 createStore, { history } from '../store' import RootRouter from 'routes/RootRouter' -import HyloAppRouter from 'routes/HyloAppRouter' const store = createStore() @@ -19,10 +17,7 @@ export default function App () { - - - - + diff --git a/src/routes/HyloAppRouter/HyloAppRouter.js b/src/routes/HyloAppRouter/HyloAppRouter.js deleted file mode 100644 index 737a6d379..000000000 --- a/src/routes/HyloAppRouter/HyloAppRouter.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import { Route, Switch } from 'react-router-dom' -import HyloEditorMobile from 'components/HyloEditor/HyloEditorMobile' - -export default function HyloAppRouter () { - return ( - - ( - - )} - /> - - ) -} diff --git a/src/routes/HyloAppRouter/index.js b/src/routes/HyloAppRouter/index.js deleted file mode 100644 index 3e451ab23..000000000 --- a/src/routes/HyloAppRouter/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import component from './HyloAppRouter' - -export default component From 3596b85091dd587a7e67de55fd5c274aadb4341b Mon Sep 17 00:00:00 2001 From: Loren Johnson Date: Mon, 31 Oct 2022 09:02:22 -0700 Subject: [PATCH 2/3] Removes HyloEditor dependency on store for Mobile use --- src/components/HyloEditor/HyloEditor.js | 6 ++-- .../HyloEditor/extensions/PeopleMentions.js | 10 +++--- .../HyloEditor/extensions/TopicMentions.js | 12 ++++--- src/util/graphql.js | 36 +++++++++++++++++++ 4 files changed, 51 insertions(+), 13 deletions(-) diff --git a/src/components/HyloEditor/HyloEditor.js b/src/components/HyloEditor/HyloEditor.js index a78554291..723405644 100644 --- a/src/components/HyloEditor/HyloEditor.js +++ b/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 ], diff --git a/src/components/HyloEditor/extensions/PeopleMentions.js b/src/components/HyloEditor/extensions/PeopleMentions.js index be564321e..dd73be641 100644 --- a/src/components/HyloEditor/extensions/PeopleMentions.js +++ b/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, diff --git a/src/components/HyloEditor/extensions/TopicMentions.js b/src/components/HyloEditor/extensions/TopicMentions.js index ff29deff5..e618fe9f3 100644 --- a/src/components/HyloEditor/extensions/TopicMentions.js +++ b/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}`, diff --git a/src/util/graphql.js b/src/util/graphql.js index daa04dd91..2d1ed5a78 100644 --- a/src/util/graphql.js +++ b/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 + } +} From 2b86996de926451a8a3ad638b5a8ccf3e0fcc899 Mon Sep 17 00:00:00 2001 From: Loren Johnson Date: Mon, 31 Oct 2022 09:24:46 -0700 Subject: [PATCH 3/3] Adds an isolated Feature / ReactPlayer route for HyloApp WebView use --- src/index.js | 46 ++++++++++++++++++++++++++++++++-------------- 1 file changed, 32 insertions(+), 14 deletions(-) diff --git a/src/index.js b/src/index.js index 8daa7db79..a27695dc0 100644 --- a/src/index.js +++ b/src/index.js @@ -2,23 +2,41 @@ import React, { Suspense } from 'react' import ReactDOM from 'react-dom' import { rootDomId } from 'client/util' import Loading from 'components/Loading' - import './client/websockets' import './css/global/index.scss' 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 ( + null}> + + + ) + } + + case '/hyloApp/videoPlayer': { + const querystringParams = new URLSearchParams(window.location.search) + + return ( + null}> + + + ) + } + + default: { + return ( + }> + + + ) + } + } +} -ReactDOM.render( - window.location.pathname === '/hyloApp/editor' - ? ( - null}> - - - ) : ( - }> - - - ), - document.getElementById(rootDomId) -) +ReactDOM.render(renderRoot(), document.getElementById(rootDomId))