creating user in db is working with fields and all

2022-05-28 12:02:22 -05:00
parent 7c05f27199
commit 17c0df1d84
6 changed files with 135 additions and 45 deletions
@@ -103,6 +103,7 @@
    "notistack": "^2.0.5",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
+    "react-error-boundary": "^3.1.4",
    "react-icons": "^4.3.1",
    "react-use": "^17.4.0"
  }
@@ -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>,
@@ -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>
+    </>
  );
 };

@@ -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');
  }
 };
@@ -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>
+  );
+}
@@ -50,7 +50,7 @@
    core-js-pure "^3.20.2"
    regenerator-runtime "^0.13.4"

-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
  version "7.18.3"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
  integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
@@ -6278,6 +6278,13 @@ react-dom@^18.1.0:
    loose-envify "^1.1.0"
    scheduler "^0.22.0"

+react-error-boundary@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
+  integrity sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-icons@^4.3.1:
  version "4.3.1"
  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"