Skip to content

Commit

Permalink
feat: add user profile & refactor to sidebar (#854)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
IanKrieger and tackley authored Aug 9, 2023
1 parent 155a273 commit fb03079
Show file tree
Hide file tree
Showing 28 changed files with 1,037 additions and 365 deletions.
1 change: 1 addition & 0 deletions src/auth/context/auth.interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export interface IAuthState {
isInitialized: boolean;
isAuthenticated: boolean;
setSessionUser: (u?: ResponseUser) => void;
fullName?: string;
email?: string;
role?: string;
userId?: string;
Expand Down
10 changes: 8 additions & 2 deletions src/auth/hooks/queries/useUser.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
1 change: 1 addition & 0 deletions src/auth/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}));
Expand Down
70 changes: 34 additions & 36 deletions src/auth/registration/Register.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
4 changes: 3 additions & 1 deletion src/auth/views/LandingPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/auth/views/Login.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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={() => {
Expand Down
2 changes: 1 addition & 1 deletion src/auth/views/MagicLink.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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={() => {
Expand Down
11 changes: 8 additions & 3 deletions src/components/AppBar/LandingPageAppBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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>
),
},
{
Expand Down Expand Up @@ -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"}
Expand Down
4 changes: 3 additions & 1 deletion src/components/Card/CardContainer.tsx
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
Loading

0 comments on commit fb03079

Please sign in to comment.