fixing up routing to make it more friendly

packages/desktop/src/providers/RouterProvider.tsx

@@ -1,28 +1,31 @@
 // make do router given absense of react router in desktop apps
 
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
-export enum EPage {
+type TPage =
-  START_NEW_CONVERSATION = 'START_NEW_CONVERSATION',
+  | 'START_NEW_CONVERSATION'
-  FULL_PAGE_OMNI_SEARCH = 'FULL_PAGE_OMNI_SEARCH',
+  | 'FULL_PAGE_OMNI_SEARCH'
-  CONVERSATION_DETAILS = 'CONVERSATION_DETAILS',
+  | 'CONVERSATION_DETAILS'
-  PROFILE = 'PROFILE',
+  | 'PROFILE'
-  WELCOME = 'WELCOME',
+  | 'WELCOME';
-}
 
 interface IRouterContext {
-  page: EPage;
+  page: TPage;
-  setPage?: React.Dispatch<React.SetStateAction<EPage>>;
+  handleSetPage?: (newPage: TPage) => () => void;
 }
 
 const RouterContext = React.createContext<IRouterContext>({
-  page: EPage.START_NEW_CONVERSATION,
+  page: 'START_NEW_CONVERSATION',
 });
 
 export function RouterProvider({ children }: { children: React.ReactNode }) {
-  const [page, setPage] = useState<EPage>(EPage.START_NEW_CONVERSATION);
+  const [page, setPage] = useState<TPage>('START_NEW_CONVERSATION');
 
-  return <RouterContext.Provider value={{ page, setPage }}>{children}</RouterContext.Provider>;
+  const handleSetPage = useCallback((newPage: TPage) => () => setPage(newPage), [setPage]);
+
+  return (
+    <RouterContext.Provider value={{ page, handleSetPage }}>{children}</RouterContext.Provider>
+  );
 }
 
 export default function useRouter() {

packages/desktop/src/tree/Navbar.tsx

@@ -7,10 +7,12 @@ import KeyboardShortcutLabel from '../subcomponents/KeyboardShortcutLabel';
 import { KeyboardShortcuts } from '../util/keyboard';
 import NirvanaLogo from '../subcomponents/NirvanaLogo';
 import { blueGrey } from '@mui/material/colors';
+import useRouter from '../providers/RouterProvider';
 import useSearch from '../providers/SearchProvider';
 import useTerminal from './Terminal';
 
 const Navbar = () => {
+  const { handleSetPage } = useRouter();
   const { searchQuery, omniSearch, conversationResults, userResults, isSearching } = useSearch();
 
   const searchRef = useRef<HTMLInputElement>(null);
@@ -79,7 +81,11 @@ const Navbar = () => {
       </Stack>
 
       <Tooltip title={'Group conversation'}>
-        <IconButton color="default" size={'small'}>
+        <IconButton
+          color="default"
+          size={'small'}
+          onClick={handleSetPage('START_NEW_CONVERSATION')}
+        >
           <FiUsers />
         </IconButton>
       </Tooltip>

packages/desktop/src/tree/NewConversationDialog.tsx

@@ -18,7 +18,6 @@ import {
 } from '@mui/material';
 import React, { HTMLAttributes, useCallback, useEffect, useState } from 'react';
 import { useDebounce, useKeyPressEvent, useToggle } from 'react-use';
-import useRouter, { EPage } from '../providers/RouterProvider';
 
 import CircularProgress from '@mui/material/CircularProgress';
 import { FiX } from 'react-icons/fi';
@@ -28,10 +27,11 @@ import UserDetailRow from '../subcomponents/UserDetailRow';
 import { blueGrey } from '@mui/material/colors';
 import toast from 'react-hot-toast';
 import useAuth from '../providers/AuthProvider';
+import useRouter from '../providers/RouterProvider';
 import useSearch from '../providers/SearchProvider';
 
 export default function NewConversationDialog() {
-  const { page, setPage } = useRouter();
+  const { page, handleSetPage } = useRouter();
 
   const { user } = useAuth();
 
@@ -102,12 +102,8 @@ export default function NewConversationDialog() {
     setIsSubmitting(false);
   }, [selectedUsers, setConversationName, conversationName, setSelectedUsers, setIsSubmitting]);
 
-  const handleClose = useCallback(() => {
-    setPage(EPage.WELCOME);
-  }, [setPage]);
-
   return (
-    <Dialog fullScreen open={page === EPage.START_NEW_CONVERSATION} onClose={handleClose}>
+    <Dialog fullScreen open={page === 'START_NEW_CONVERSATION'} onClose={handleSetPage('WELCOME')}>
       <Container
         maxWidth={false}
         sx={{
@@ -121,7 +117,10 @@ export default function NewConversationDialog() {
           position: 'relative',
         }}
       >
-        <IconButton sx={{ position: 'absolute', top: 10, right: 10 }} onClick={handleClose}>
+        <IconButton
+          sx={{ position: 'absolute', top: 10, right: 10 }}
+          onClick={handleSetPage('WELCOME')}
+        >
           <FiX />
         </IconButton>
 
@@ -174,7 +173,7 @@ export default function NewConversationDialog() {
           )}
 
           <Stack justifyContent={'flex-end'} direction={'row'} spacing={2}>
-            <Button onClick={handleClose} variant={'text'}>
+            <Button onClick={handleSetPage('WELCOME')} variant={'text'}>
               Cancel
             </Button>
             <Button

packages/desktop/src/tree/Terminal.tsx

@@ -1,6 +1,5 @@
 import { Box, Container, Grid } from '@mui/material';
 
-import { EPage } from '../providers/RouterProvider';
 import Navbar from './Navbar';
 import NewConversationDialog from './NewConversationDialog';
 import React from 'react';