creating user in db is working with fields and all

packages/desktop/src/app.tsx

@@ -10,17 +10,20 @@ import { ElectronProvider } from './providers/ElectronProvider';
 import { AuthProvider } from './providers/AuthProvider';
 
 import './firebase/connect';
+import ErrorParent from './providers/ErrorBoundary';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
   <React.StrictMode>
     <ThemeProvider theme={NirvanaTheme}>
       <SnackbarProvider maxSnack={3}>
-        <ElectronProvider>
-          <AuthProvider>
-            <Terminal />
-          </AuthProvider>
-        </ElectronProvider>
+        <ErrorParent>
+          <ElectronProvider>
+            <AuthProvider>
+              <Terminal />
+            </AuthProvider>
+          </ElectronProvider>
+        </ErrorParent>
       </SnackbarProvider>
     </ThemeProvider>
   </React.StrictMode>,

packages/desktop/src/components/Terminal.tsx

@@ -16,6 +16,7 @@ import {
   ListItemButton,
   ListItemText,
   ListSubheader,
+  Menu,
   Paper,
   Stack,
   Tooltip,
@@ -39,6 +40,8 @@ import { useSnackbar } from 'notistack';
 import { useKey } from 'react-use';
 import NirvanaAvatar from './NirvanaAvatar';
 
+import MenuItem from '@mui/material/MenuItem';
+
 export default function Terminal() {
   const { enqueueSnackbar } = useSnackbar();
 
@@ -218,50 +221,89 @@ export default function Terminal() {
 }
 
 const Navbar = () => {
-  return (
-    <Stack
-      direction="row"
-      justifyContent={'flex-start'}
-      alignItems={'center'}
-      sx={{
-        WebkitAppRegion: 'drag',
-        cursor: 'pointer',
-        pb: 1,
-      }}
-    >
-      <NirvanaLogo />
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
 
+  return (
+    <>
       <Stack
-        spacing={1}
-        direction={'row'}
+        direction="row"
+        justifyContent={'flex-start'}
         alignItems={'center'}
         sx={{
-          ml: 'auto',
-          mr: 1,
-          color: 'GrayText',
+          WebkitAppRegion: 'drag',
+          cursor: 'pointer',
+          pb: 1,
         }}
       >
-        <Tooltip title="Sound configuration">
-          <IconButton color="inherit" size="small">
-            <FiHeadphones />
-          </IconButton>
-        </Tooltip>
-        <Tooltip title="Desktop modes">
-          <IconButton color="inherit" size="small">
-            <FiMonitor />
-          </IconButton>
-        </Tooltip>
-        <Tooltip title="Flow state">
-          <IconButton color="inherit" size="small">
-            <FiWind />
-          </IconButton>
-        </Tooltip>
+        <NirvanaLogo />
+
+        <Stack
+          spacing={1}
+          direction={'row'}
+          alignItems={'center'}
+          sx={{
+            ml: 'auto',
+            mr: 1,
+            color: 'GrayText',
+          }}
+        >
+          <Tooltip title="Sound configuration">
+            <IconButton color="inherit" size="small">
+              <FiHeadphones />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Desktop modes">
+            <IconButton color="inherit" size="small">
+              <FiMonitor />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Flow state">
+            <IconButton color="inherit" size="small">
+              <FiWind />
+            </IconButton>
+          </Tooltip>
+        </Stack>
+        <IconButton
+          onClick={handleClick}
+          size="small"
+          sx={{ ml: 2 }}
+          aria-controls={open ? 'account-menu' : undefined}
+          aria-haspopup="true"
+          aria-expanded={open ? 'true' : undefined}
+        >
+          <Avatar
+            alt={'Arjun Patel'}
+            src="https://lh3.googleusercontent.com/ogw/ADea4I6TRqnIptWNP25-iXdusoAHafj-cUPYkO53xKT2_H0=s64-c-mo"
+          />
+        </IconButton>
       </Stack>
-      <Avatar
-        alt={'Arjun Patel'}
-        src="https://lh3.googleusercontent.com/ogw/ADea4I6TRqnIptWNP25-iXdusoAHafj-cUPYkO53xKT2_H0=s64-c-mo"
-      />
-    </Stack>
+
+      <Menu
+        id="account-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+      >
+        <MenuItem onClick={handleClose}>Profile</MenuItem>
+        <MenuItem onClick={handleClose}>My account</MenuItem>
+        <MenuItem onClick={handleClose}>Logout</MenuItem>
+      </Menu>
+    </>
   );
 };
 

packages/desktop/src/firebase/firestore.ts

@@ -16,7 +16,7 @@ import { User as FirebaseUser } from 'firebase/auth';
  * UTILS
  */
 const converter = <T>() => ({
-  toFirestore: (data: T) => data,
+  toFirestore: (data: T) => ({ ...data }),
   fromFirestore: (snap: QueryDocumentSnapshot) => snap.data() as T,
 });
 
@@ -24,7 +24,6 @@ const dataPoint = <T>(collectionPath: string) =>
   doc(getFirestore(), collectionPath).withConverter(converter<T>());
 
 const db = {
-  users: dataPoint<User[]>('users'),
   user: (userId: string) => dataPoint<User>(`users/${userId}`),
 };
 
@@ -62,5 +61,7 @@ export const createUser = async (user: FirebaseUser) => {
     );
   } catch (e) {
     console.error('Error creating user: ', e);
+
+    throw new Error('Error creating user');
   }
 };

packages/desktop/src/providers/ErrorBoundary.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { ErrorBoundary } from 'react-error-boundary';
+import { useSnackbar } from 'notistack';
+
+function MyFallbackComponent({
+  error,
+  resetErrorBoundary,
+}: {
+  error: Error;
+  resetErrorBoundary: () => void;
+}) {
+  return (
+    <div role="alert">
+      <p>Something went wrong:</p>
+      <pre>{error.message}</pre>
+      <button onClick={resetErrorBoundary}>Try again</button>
+    </div>
+  );
+}
+
+export default function ErrorParent({ children }: { children: React.ReactNode }) {
+  const { enqueueSnackbar } = useSnackbar();
+
+  return (
+    <ErrorBoundary
+      FallbackComponent={MyFallbackComponent}
+      onError={(error, errorInfo) => enqueueSnackbar(error.message, { variant: 'error' })}
+      onReset={() => {
+        // reset the state of your app
+      }}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+}