Merge pull request #4580 from tylershuster/comment-crash

interface: removed conditional hooks

pkg/interface/src/logic/lib/util.ts

@@ -383,7 +383,8 @@ export function pluralize(text: string, isPlural = false, vowel = false) {
 
 // Hide is an optional second parameter for when this function is used in class components
 export function useShowNickname(contact: Contact | null, hide?: boolean): boolean {
-  const hideNicknames = typeof hide !== 'undefined' ? hide : useSettingsState(state => state.calm.hideNicknames);
+  const hideState = useSettingsState(state => state.calm.hideNicknames);
+  const hideNicknames = typeof hide !== 'undefined' ? hide : hideState;
   return !!(contact && contact.nickname && !hideNicknames);
 }
 

pkg/interface/src/views/apps/launch/app.js

@@ -86,10 +86,11 @@ export default function LaunchApp(props) {
     }
   }, [query]);
 
-  const { hideUtilities } = useSettingsState(selectCalmState);
+  const calmState = useSettingsState(selectCalmState);
+  const { hideUtilities } = calmState;
   const { tutorialProgress, nextTutStep } = useLocalState(tutSelector);
   let { hideGroups } = useLocalState(tutSelector);
-  !hideGroups ? { hideGroups } = useSettingsState(selectCalmState) : null;
+  !hideGroups ? { hideGroups } = calmState : null;
 
   const waiter = useWaitForProps(props);
 

pkg/interface/src/views/landscape/components/Sidebar/Sidebar.tsx

@@ -46,12 +46,8 @@ interface SidebarProps {
 
 export function Sidebar(props: SidebarProps): ReactElement | null {
   const { selected, workspace } = props;
-  const associations = useMetadataState(state => state.associations);
   const groupPath = getGroupFromWorkspace(workspace);
   const display = props.mobileHide ? ['none', 'flex'] : 'flex';
-  if (!associations) {
-    return null;
-  }
 
   const [config, setConfig] = useLocalStorageState<SidebarListConfig>(
     `group-config:${groupPath || 'home'}`,

pkg/interface/src/views/landscape/components/Sidebar/SidebarItem.tsx

@@ -47,6 +47,8 @@ export function SidebarItem(props: {
   const groupPath = association?.group;
   const groups = useGroupState(state => state.groups);
   const anchorRef = useRef<HTMLElement | null>(null);
+  const { hideAvatars, hideNicknames } = useSettingsState(selectCalmState);
+  const contacts = useContactState(state => state.contacts);
   useTutorialModal(
     mod as any,
     groupPath === `/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}`,
@@ -58,7 +60,6 @@ export function SidebarItem(props: {
     return null;
   }
   const DM = (isUnmanaged && props.workspace?.type === 'messages');
-  const { hideAvatars, hideNicknames } = useSettingsState(selectCalmState);
 
   const itemStatus = app.getStatus(path);
   const hasUnread = itemStatus === 'unread' || itemStatus === 'mention';
@@ -85,8 +86,6 @@ export function SidebarItem(props: {
 
   let img = null;
 
-  const contacts = useContactState(state => state.contacts);
-
   if (urbitOb.isValidPatp(title)) {
     if (contacts?.[title]?.avatar && !hideAvatars) {
       img = <BaseImage src={contacts[title].avatar} width='16px' height='16px' borderRadius={2} />;

pkg/interface/src/views/landscape/components/Skeleton.tsx

@@ -11,6 +11,7 @@ import { Body } from '~/views/components/Body';
 import { Workspace } from '~/types/workspace';
 import useGraphState from '~/logic/state/graph';
 import useHarkState from '~/logic/state/hark';
+import ErrorBoundary from '~/views/components/ErrorBoundary';
 
 interface SkeletonProps {
   children: ReactNode;
@@ -46,16 +47,18 @@ export function Skeleton(props: SkeletonProps): ReactElement {
       }
       gridTemplateRows="100%"
     >
-      <Sidebar
-        api={props.api}
-        recentGroups={props.recentGroups}
-        selected={props.selected}
-        apps={config}
-        baseUrl={props.baseUrl}
-        mobileHide={props.mobileHide}
-        workspace={props.workspace}
-        history={props.history}
-      />
+      <ErrorBoundary>
+        <Sidebar
+          api={props.api}
+          recentGroups={props.recentGroups}
+          selected={props.selected}
+          apps={config}
+          baseUrl={props.baseUrl}
+          mobileHide={props.mobileHide}
+          workspace={props.workspace}
+          history={props.history}
+          />
+      </ErrorBoundary>
       {props.children}
     </Body>
   );