feat: add user profile & refactor to sidebar (#854)

* feat: add users page * feat: add user profile * fix: test * fix: remove log Co-authored-by: Graham Tackley <gtackley@brave.com> * fix: use routerLink * fix: drawerWidth * fix: noopener * fix: use routerlink in register --------- Co-authored-by: Graham Tackley <gtackley@brave.com>
brave · Aug 9, 2023 · fb03079 · fb03079
1 parent 155a273
commit fb03079
Show file tree

Hide file tree

Showing 28 changed files with 1,037 additions and 365 deletions.
diff --git a/src/auth/context/auth.interface.ts b/src/auth/context/auth.interface.ts
@@ -17,6 +17,7 @@ export interface IAuthState {
   isInitialized: boolean;
   isAuthenticated: boolean;
   setSessionUser: (u?: ResponseUser) => void;
+  fullName?: string;
   email?: string;
   role?: string;
   userId?: string;

diff --git a/src/auth/hooks/queries/useUser.ts b/src/auth/hooks/queries/useUser.ts
@@ -1,11 +1,17 @@
 import { useAuthContext } from "auth/context/auth.hook";
 
-type User = { userId?: string; role?: string; email?: string };
+type User = {
+  userId?: string;
+  role?: string;
+  email?: string;
+  fullName?: string;
+};
 
 export function useUser(): User {
-  const { userId, role, email } = useAuthContext();
+  const { userId, role, email, fullName } = useAuthContext();
 
   return {
+    fullName,
     userId,
     role,
     email,

diff --git a/src/auth/index.tsx b/src/auth/index.tsx
@@ -42,6 +42,7 @@ export const IAuthProvider: React.FC<IAuthProviderProps> = ({
         email: u.email,
         role: u.role,
         userId: u.id,
+        fullName: u.fullName,
         advertisers: u.advertisers,
         isAuthenticated: u.advertisers.length > 0 && !!active,
       }));

diff --git a/src/auth/registration/Register.tsx b/src/auth/registration/Register.tsx
@@ -34,44 +34,42 @@ export function Register() {
 
   return (
     <Background>
-      <Box>
-        <LandingPageAppBar />
-        <Toolbar sx={{ mb: 1.5 }} />
-        <Box display="flex" width="725px" flexDirection="column" mb={3}>
-          <Typography textAlign="center" variant="h4" sx={{ mb: 3 }}>
-            {steps[activeStep].label}
-          </Typography>
-          <Formik
-            initialValues={initialValues}
-            onSubmit={async (v: RegistrationForm, { setSubmitting }) => {
-              setSubmitting(true);
-              register(v);
-              setSubmitting(false);
-            }}
-            validationSchema={RegistrationSchema}
-          >
-            <Form>
-              <PaddedCardContainer>
-                {steps[activeStep].component}
-              </PaddedCardContainer>
+      <LandingPageAppBar />
+      <Toolbar sx={{ mb: 1.5 }} />
+      <Box display="flex" width="725px" flexDirection="column" mb={3}>
+        <Typography textAlign="center" variant="h4" sx={{ mb: 3 }}>
+          {steps[activeStep].label}
+        </Typography>
+        <Formik
+          initialValues={initialValues}
+          onSubmit={async (v: RegistrationForm, { setSubmitting }) => {
+            setSubmitting(true);
+            register(v);
+            setSubmitting(false);
+          }}
+          validationSchema={RegistrationSchema}
+        >
+          <Form>
+            <PaddedCardContainer>
+              {steps[activeStep].component}
+            </PaddedCardContainer>
 
-              <NextAndBack
-                activeStep={activeStep}
-                steps={steps.length - 1}
-                onNext={() => setActiveStep(activeStep + 1)}
-                onBack={() => setActiveStep(activeStep - 1)}
-                final={
-                  <FormikSubmitButton
-                    isCreate={true}
-                    label="Submit for approval"
-                  />
-                }
-              />
+            <NextAndBack
+              activeStep={activeStep}
+              steps={steps.length - 1}
+              onNext={() => setActiveStep(activeStep + 1)}
+              onBack={() => setActiveStep(activeStep - 1)}
+              final={
+                <FormikSubmitButton
+                  isCreate={true}
+                  label="Submit for approval"
+                />
+              }
+            />
 
-              <PersistRegistrationValues />
-            </Form>
-          </Formik>
-        </Box>
+            <PersistRegistrationValues />
+          </Form>
+        </Formik>
       </Box>
     </Background>
   );

diff --git a/src/auth/views/LandingPage.tsx b/src/auth/views/LandingPage.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import { Box, Button, Stack, Typography } from "@mui/material";
 import goals from "../../../images.svg";
 import { useIsAuthenticated } from "auth/hooks/queries/useIsAuthenticated";
+import { Link as RouterLink } from "react-router-dom";
 
 const GradientText = {
   backgroundImage:
@@ -40,13 +41,14 @@ export function LandingPage() {
           <Box>
             <Button
               variant="contained"
+              component={RouterLink}
               sx={{
                 width: "Hug (165px)",
                 height: "Fixed (60px)",
                 padding: "18px 24px 18px 24px",
               }}
               size="large"
-              href={isAuthenticated ? "/user/main" : "/register"}
+              to={isAuthenticated ? "/user/main" : "/register"}
             >
               {isAuthenticated ? "Dashboard" : "Get Started"}
             </Button>

diff --git a/src/auth/views/Login.tsx b/src/auth/views/Login.tsx
@@ -45,7 +45,7 @@ export function Login() {
         color="primary"
         size="large"
         variant="contained"
-        sx={{ mt: 2, textTransform: "none", mb: 1 }}
+        sx={{ mt: 2, mb: 1 }}
         disabled={loading}
         loading={loading}
         onClick={() => {

diff --git a/src/auth/views/MagicLink.tsx b/src/auth/views/MagicLink.tsx
@@ -66,7 +66,7 @@ export function MagicLink() {
         color="primary"
         size="large"
         variant="contained"
-        sx={{ mt: 2, textTransform: "none", mb: 1 }}
+        sx={{ mt: 2, mb: 1 }}
         disabled={loading}
         loading={loading}
         onClick={() => {

diff --git a/src/components/AppBar/LandingPageAppBar.tsx b/src/components/AppBar/LandingPageAppBar.tsx
@@ -10,6 +10,7 @@ import {
   LinkProps,
   Stack,
   Toolbar,
+  Typography,
 } from "@mui/material";
 import ads from "../../../branding.svg";
 import { Link as RouterLink, useRouteMatch } from "react-router-dom";
@@ -23,7 +24,11 @@ export function LandingPageAppBar() {
   const links = [
     {
       component: isAuthenticated ? null : (
-        <HelpLink label="Get Started" props={{ href: "/register" }} />
+        <RouterLink to={"/register"} style={{ textDecoration: "none" }}>
+          <Typography variant="subtitle1" color="text.primary">
+            Get started
+          </Typography>
+        </RouterLink>
       ),
     },
     {
@@ -97,8 +102,8 @@ function AuthedButton(props: { isAuthenticated?: boolean }) {
     <Button
       variant="outlined"
       size="large"
-      sx={{ textTransform: "none" }}
-      href={!props.isAuthenticated ? "/auth/link" : undefined}
+      component={RouterLink}
+      to={!props.isAuthenticated ? "/auth/link" : "/"}
       onClick={props.isAuthenticated ? () => signOut() : undefined}
     >
       {props.isAuthenticated ? "Sign out" : "Log in"}

diff --git a/src/components/Card/CardContainer.tsx b/src/components/Card/CardContainer.tsx
@@ -1,14 +1,16 @@
 import React, { PropsWithChildren } from "react";
 import { Box, Card, CardContent, Stack, Typography } from "@mui/material";
+import { SxProps } from "@mui/system";
 
 export function CardContainer(
   props: {
     header?: string;
     additionalAction?: React.ReactNode;
+    sx?: SxProps;
   } & PropsWithChildren,
 ) {
   return (
-    <Box mb={1} mt={2}>
+    <Box mb={1} mt={2} sx={props.sx}>
       {(props.header || props.additionalAction) && (
         <Stack
           direction="row"