From 2c542e454821e79ea85694deb215b85f78d5de1b Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 28 Apr 2022 18:18:55 -0500 Subject: [PATCH 1/4] Layout: make all UI routes have a static left sidebar --- .../features/ui/util/react_router_helpers.tsx | 48 ++++++++++--------- app/soapbox/pages/admin_page.tsx | 9 +--- app/soapbox/pages/default_page.tsx | 9 +--- app/soapbox/pages/empty_page.tsx | 6 +-- app/soapbox/pages/home_page.tsx | 9 +--- app/soapbox/pages/profile_page.js | 9 +--- app/soapbox/pages/remote_instance_page.js | 9 +--- app/soapbox/pages/status_page.js | 9 +--- 8 files changed, 40 insertions(+), 68 deletions(-) diff --git a/app/soapbox/features/ui/util/react_router_helpers.tsx b/app/soapbox/features/ui/util/react_router_helpers.tsx index 05e183816..766ac1691 100644 --- a/app/soapbox/features/ui/util/react_router_helpers.tsx +++ b/app/soapbox/features/ui/util/react_router_helpers.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { Redirect, Route, useHistory, RouteProps, RouteComponentProps, match as MatchType } from 'react-router-dom'; +import SidebarNavigation from 'soapbox/components/sidebar-navigation'; +import { Layout } from 'soapbox/components/ui'; import { useOwnAccount, useSettings } from 'soapbox/hooks'; import BundleColumnError from '../components/bundle_column_error'; @@ -75,29 +77,19 @@ const WrappedRoute: React.FC = ({ ); }; - const renderLoading = () => { - return ( - - - - ); - }; + const renderWithLayout = (children: JSX.Element) => ( + <> + + {children} + - const renderForbidden = () => { - return ( - - - - ); - }; + + + ); - const renderError = (props: any) => { - return ( - - - - ); - }; + const renderLoading = () => renderWithLayout(); + const renderForbidden = () => renderWithLayout(); + const renderError = (props: any) => renderWithLayout(); const loginRedirect = () => { const actualUrl = encodeURIComponent(`${history.location.pathname}${history.location.search}`); @@ -119,7 +111,19 @@ const WrappedRoute: React.FC = ({ } } - return ; + const renderBody = (props: RouteComponentProps) => { + return ( + + + + + + {renderComponent(props)} + + ); + }; + + return ; }; export { diff --git a/app/soapbox/pages/admin_page.tsx b/app/soapbox/pages/admin_page.tsx index f67454c91..909955abe 100644 --- a/app/soapbox/pages/admin_page.tsx +++ b/app/soapbox/pages/admin_page.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import SidebarNavigation from 'soapbox/components/sidebar-navigation'; import { Layout } from 'soapbox/components/ui'; import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; import { @@ -11,11 +10,7 @@ import LinkFooter from '../features/ui/components/link_footer'; const AdminPage: React.FC = ({ children }) => { return ( - - - - - + <> {children} @@ -27,7 +22,7 @@ const AdminPage: React.FC = ({ children }) => { - + ); }; diff --git a/app/soapbox/pages/default_page.tsx b/app/soapbox/pages/default_page.tsx index 90106d2c8..21c9026f5 100644 --- a/app/soapbox/pages/default_page.tsx +++ b/app/soapbox/pages/default_page.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import SidebarNavigation from 'soapbox/components/sidebar-navigation'; import LinkFooter from 'soapbox/features/ui/components/link_footer'; import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; import { @@ -17,11 +16,7 @@ const DefaultPage: React.FC = ({ children }) => { const features = useFeatures(); return ( - - - - - + <> {children} @@ -44,7 +39,7 @@ const DefaultPage: React.FC = ({ children }) => { )} - + ); }; diff --git a/app/soapbox/pages/empty_page.tsx b/app/soapbox/pages/empty_page.tsx index 3804b0812..f297c74c5 100644 --- a/app/soapbox/pages/empty_page.tsx +++ b/app/soapbox/pages/empty_page.tsx @@ -4,15 +4,13 @@ import { Layout } from '../components/ui'; const EmptyPage: React.FC = ({ children }) => { return ( - - - + <> {children} - + ); }; diff --git a/app/soapbox/pages/home_page.tsx b/app/soapbox/pages/home_page.tsx index 31b26b657..baffc34da 100644 --- a/app/soapbox/pages/home_page.tsx +++ b/app/soapbox/pages/home_page.tsx @@ -1,7 +1,6 @@ import React, { useRef } from 'react'; import { Link } from 'react-router-dom'; -import SidebarNavigation from 'soapbox/components/sidebar-navigation'; import LinkFooter from 'soapbox/features/ui/components/link_footer'; import { WhoToFollowPanel, @@ -35,11 +34,7 @@ const HomePage: React.FC = ({ children }) => { const acct = account ? account.acct : ''; return ( - - - - - + <> {me && ( @@ -99,7 +94,7 @@ const HomePage: React.FC = ({ children }) => { )} - + ); }; diff --git a/app/soapbox/pages/profile_page.js b/app/soapbox/pages/profile_page.js index b4b3854c2..68d2a1a66 100644 --- a/app/soapbox/pages/profile_page.js +++ b/app/soapbox/pages/profile_page.js @@ -6,7 +6,6 @@ import { FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; import { Redirect, withRouter } from 'react-router-dom'; -import SidebarNavigation from 'soapbox/components/sidebar-navigation'; import LinkFooter from 'soapbox/features/ui/components/link_footer'; import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; import { @@ -127,11 +126,7 @@ class ProfilePage extends ImmutablePureComponent { } return ( - - - - - + <>
@@ -171,7 +166,7 @@ class ProfilePage extends ImmutablePureComponent { )} - + ); } diff --git a/app/soapbox/pages/remote_instance_page.js b/app/soapbox/pages/remote_instance_page.js index 2ff5e7c4f..187eab26a 100644 --- a/app/soapbox/pages/remote_instance_page.js +++ b/app/soapbox/pages/remote_instance_page.js @@ -2,7 +2,6 @@ import React from 'react'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; -import SidebarNavigation from 'soapbox/components/sidebar-navigation'; import LinkFooter from 'soapbox/features/ui/components/link_footer'; import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; import { @@ -32,11 +31,7 @@ class RemoteInstancePage extends ImmutablePureComponent { const { children, params: { instance: host }, disclosed, isAdmin } = this.props; return ( - - - - - + <> {children} @@ -55,7 +50,7 @@ class RemoteInstancePage extends ImmutablePureComponent { )} - + ); } diff --git a/app/soapbox/pages/status_page.js b/app/soapbox/pages/status_page.js index d37542331..302d1238a 100644 --- a/app/soapbox/pages/status_page.js +++ b/app/soapbox/pages/status_page.js @@ -2,7 +2,6 @@ import React from 'react'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; -import SidebarNavigation from 'soapbox/components/sidebar-navigation'; import LinkFooter from 'soapbox/features/ui/components/link_footer'; import { WhoToFollowPanel, @@ -33,11 +32,7 @@ class StatusPage extends ImmutablePureComponent { const { me, children, showTrendsPanel, showWhoToFollowPanel } = this.props; return ( - - - - - + <> {children} @@ -60,7 +55,7 @@ class StatusPage extends ImmutablePureComponent { )} - + ); } From a23fb9f1aa7e61fef6a3d7527b05449a769084fc Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 28 Apr 2022 18:26:30 -0500 Subject: [PATCH 2/4] Actually move Layout.Sidebar out of WrappedRoute and into UI --- app/soapbox/features/ui/index.tsx | 14 +++++++++++--- .../features/ui/util/react_router_helpers.tsx | 15 +-------------- 2 files changed, 12 insertions(+), 17 deletions(-) diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx index 8f6a9d959..05e341a66 100644 --- a/app/soapbox/features/ui/index.tsx +++ b/app/soapbox/features/ui/index.tsx @@ -13,7 +13,9 @@ import { fetchCustomEmojis } from 'soapbox/actions/custom_emojis'; import { fetchMarker } from 'soapbox/actions/markers'; import { register as registerPushNotifications } from 'soapbox/actions/push_notifications'; import Icon from 'soapbox/components/icon'; +import SidebarNavigation from 'soapbox/components/sidebar-navigation'; import ThumbNavigation from 'soapbox/components/thumb_navigation'; +import { Layout } from 'soapbox/components/ui'; import { useAppSelector, useOwnAccount, useSoapboxConfig, useFeatures } from 'soapbox/hooks'; import AdminPage from 'soapbox/pages/admin_page'; import DefaultPage from 'soapbox/pages/default_page'; @@ -647,9 +649,15 @@ const UI: React.FC = ({ children }) => {
- - {children} - + + + + + + + {children} + + {me && floatingActionButton} diff --git a/app/soapbox/features/ui/util/react_router_helpers.tsx b/app/soapbox/features/ui/util/react_router_helpers.tsx index 766ac1691..288851d29 100644 --- a/app/soapbox/features/ui/util/react_router_helpers.tsx +++ b/app/soapbox/features/ui/util/react_router_helpers.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { Redirect, Route, useHistory, RouteProps, RouteComponentProps, match as MatchType } from 'react-router-dom'; -import SidebarNavigation from 'soapbox/components/sidebar-navigation'; import { Layout } from 'soapbox/components/ui'; import { useOwnAccount, useSettings } from 'soapbox/hooks'; @@ -111,19 +110,7 @@ const WrappedRoute: React.FC = ({ } } - const renderBody = (props: RouteComponentProps) => { - return ( - - - - - - {renderComponent(props)} - - ); - }; - - return ; + return ; }; export { From 8134b5d0167d649da948c0ba15ba3697bf2dedf4 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 28 Apr 2022 18:43:52 -0500 Subject: [PATCH 3/4] ExternalAuth: use EmptyPage --- app/soapbox/features/ui/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx index 05e341a66..295da1afd 100644 --- a/app/soapbox/features/ui/index.tsx +++ b/app/soapbox/features/ui/index.tsx @@ -172,7 +172,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => { // Ex: use /login instead of /auth, but redirect /auth to /login return ( - + From 3d0e9200c2327b7bfa1394241eca3b9efb6ef126 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 28 Apr 2022 18:57:50 -0500 Subject: [PATCH 4/4] Layout: standalone fixes --- app/soapbox/features/ui/index.tsx | 4 +++- app/soapbox/pages/default_page.tsx | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx index 295da1afd..99fe59b12 100644 --- a/app/soapbox/features/ui/index.tsx +++ b/app/soapbox/features/ui/index.tsx @@ -28,6 +28,7 @@ import RemoteInstancePage from 'soapbox/pages/remote_instance_page'; import StatusPage from 'soapbox/pages/status_page'; import { getAccessToken } from 'soapbox/utils/auth'; import { getVapidKey } from 'soapbox/utils/auth'; +import { isStandalone } from 'soapbox/utils/state'; import { fetchFollowRequests } from '../../actions/accounts'; import { fetchReports, fetchUsers, fetchConfig } from '../../actions/admin'; @@ -346,6 +347,7 @@ const UI: React.FC = ({ children }) => { const dropdownMenuIsOpen = useAppSelector(state => state.dropdown_menu.get('openId') !== null); const accessToken = useAppSelector(state => getAccessToken(state)); const streamingUrl = useAppSelector(state => state.instance.urls.get('streaming_api')); + const standalone = useAppSelector(isStandalone); const handleDragEnter = (e: DragEvent) => { e.preventDefault(); @@ -651,7 +653,7 @@ const UI: React.FC = ({ children }) => { - + {!standalone && } diff --git a/app/soapbox/pages/default_page.tsx b/app/soapbox/pages/default_page.tsx index 21c9026f5..1bf2c2731 100644 --- a/app/soapbox/pages/default_page.tsx +++ b/app/soapbox/pages/default_page.tsx @@ -8,11 +8,13 @@ import { SignUpPanel, } from 'soapbox/features/ui/util/async-components'; import { useAppSelector, useFeatures } from 'soapbox/hooks'; +import { isStandalone } from 'soapbox/utils/state'; import { Layout } from '../components/ui'; const DefaultPage: React.FC = ({ children }) => { const me = useAppSelector(state => state.me); + const standalone = useAppSelector(isStandalone); const features = useFeatures(); return ( @@ -22,7 +24,7 @@ const DefaultPage: React.FC = ({ children }) => { - {!me && ( + {!me && !standalone && ( {Component => }