Allow use of useCurrentUser/useCurrentTeam hooks in unauthenticated components

app/components/Authenticated.tsx

@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Redirect } from "react-router-dom";
+import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import { changeLanguage } from "~/utils/language";
 import LoadingIndicator from "./LoadingIndicator";
@@ -13,10 +14,11 @@ type Props = {
 const Authenticated = ({ children }: Props) => {
   const { auth } = useStores();
   const { i18n } = useTranslation();
-  const language = auth.user?.language;
+  const user = useCurrentUser({ rejectOnEmpty: false });
+  const language = user?.language;
 
-  // Watching for language changes here as this is the earliest point we have
-  // the user available and means we can start loading translations faster
+  // Watching for language changes here as this is the earliest point we might have the user
+  // available and means we can start loading translations faster
   React.useEffect(() => {
     void changeLanguage(language, i18n);
   }, [i18n, language]);

app/components/AuthenticatedLayout.tsx

@@ -12,6 +12,7 @@ import Sidebar from "~/components/Sidebar";
 import SidebarRight from "~/components/Sidebar/Right";
 import SettingsSidebar from "~/components/Sidebar/Settings";
 import type { Editor as TEditor } from "~/editor";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
@@ -45,7 +46,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
   const { ui, auth } = useStores();
   const location = useLocation();
   const can = usePolicy(ui.activeCollectionId);
-  const { user, team } = auth;
+  const team = useCurrentTeam();
   const documentContext = useLocalStore<DocumentContextValue>(() => ({
     editor: null,
     setEditor: (editor: TEditor) => {
@@ -76,16 +77,14 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
     return <ErrorSuspended />;
   }
 
-  const showSidebar = auth.authenticated && user && team;
-
-  const sidebar = showSidebar ? (
+  const sidebar = (
     <Fade>
       <Switch>
         <Route path={settingsPath()} component={SettingsSidebar} />
         <Route component={Sidebar} />
       </Switch>
     </Fade>
-  ) : undefined;
+  );
 
   const showHistory = !!matchPath(location.pathname, {
     path: matchDocumentHistory,
@@ -98,7 +97,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
     !showHistory &&
     ui.activeDocumentId &&
     ui.commentsExpanded.includes(ui.activeDocumentId) &&
-    team?.getPreference(TeamPreference.Commenting);
+    team.getPreference(TeamPreference.Commenting);
 
   const sidebarRight = (
     <AnimatePresence
@@ -121,7 +120,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
 
   return (
     <DocumentContext.Provider value={documentContext}>
-      <Layout title={team?.name} sidebar={sidebar} sidebarRight={sidebarRight}>
+      <Layout title={team.name} sidebar={sidebar} sidebarRight={sidebarRight}>
         <RegisterKeyDown trigger="n" handler={goToNewDocument} />
         <RegisterKeyDown trigger="t" handler={goToSearch} />
         <RegisterKeyDown trigger="/" handler={goToSearch} />

app/components/Editor.tsx

@@ -21,6 +21,7 @@ import ClickablePadding from "~/components/ClickablePadding";
 import ErrorBoundary from "~/components/ErrorBoundary";
 import HoverPreview from "~/components/HoverPreview";
 import type { Props as EditorProps, Editor as SharedEditor } from "~/editor";
+import useCurrentUser from "~/hooks/useCurrentUser";
 import useDictionary from "~/hooks/useDictionary";
 import useEmbeds from "~/hooks/useEmbeds";
 import useStores from "~/hooks/useStores";
@@ -65,12 +66,12 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
   } = props;
   const userLocale = useUserLocale();
   const locale = dateLocale(userLocale);
-  const { auth, comments, documents } = useStores();
+  const { comments, documents } = useStores();
   const dictionary = useDictionary();
   const embeds = useEmbeds(!shareId);
   const history = useHistory();
   const localRef = React.useRef<SharedEditor>();
-  const preferences = auth.user?.preferences;
+  const preferences = useCurrentUser({ rejectOnEmpty: false })?.preferences;
   const previousHeadings = React.useRef<Heading[] | null>(null);
   const [activeLinkElement, setActiveLink] =
     React.useState<HTMLAnchorElement | null>(null);

app/components/Sidebar/Shared.tsx

@@ -5,6 +5,7 @@ import styled from "styled-components";
 import { NavigationNode } from "@shared/types";
 import Scrollable from "~/components/Scrollable";
 import SearchPopover from "~/components/SearchPopover";
+import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
 import { homePath, sharedDocumentPath } from "~/utils/routeHelpers";
@@ -22,7 +23,8 @@ type Props = {
 
 function SharedSidebar({ rootNode, shareId }: Props) {
   const team = useTeamContext();
-  const { ui, documents, auth } = useStores();
+  const user = useCurrentUser({ rejectOnEmpty: false });
+  const { ui, documents } = useStores();
   const { t } = useTranslation();
 
   return (
@@ -33,7 +35,7 @@ function SharedSidebar({ rootNode, shareId }: Props) {
           image={<TeamLogo model={team} size={32} alt={t("Logo")} />}
           onClick={() =>
             history.push(
-              auth.user ? homePath() : sharedDocumentPath(shareId, rootNode.url)
+              user ? homePath() : sharedDocumentPath(shareId, rootNode.url)
             )
           }
         />

app/components/Sidebar/Sidebar.tsx

@@ -6,6 +6,7 @@ import styled, { css, useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
 import Flex from "~/components/Flex";
+import useCurrentUser from "~/hooks/useCurrentUser";
 import useMenuContext from "~/hooks/useMenuContext";
 import usePrevious from "~/hooks/usePrevious";
 import useStores from "~/hooks/useStores";
@@ -33,11 +34,11 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
 ) {
   const [isCollapsing, setCollapsing] = React.useState(false);
   const theme = useTheme();
-  const { ui, auth } = useStores();
+  const { ui } = useStores();
   const location = useLocation();
   const previousLocation = usePrevious(location);
   const { isMenuOpen } = useMenuContext();
-  const { user } = auth;
+  const user = useCurrentUser({ rejectOnEmpty: false });
   const width = ui.sidebarWidth;
   const collapsed = ui.sidebarIsClosed && !isMenuOpen;
   const maxWidth = theme.sidebarMaxWidth;