add profile layout in header

Hartaithan · May 13, 2023 · 8835633 · 8835633
1 parent 1900bb5
commit 8835633
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 16 deletions.
diff --git a/components/BoardColumn.tsx b/components/BoardColumn.tsx
@@ -24,7 +24,10 @@ interface IBoardColumnProps {
 }
 
 const useStyles = createStyles(
-  ({ radius, colors, spacing }, { column }: { column: BOARD_COLUMNS }) => {
+  (
+    { radius, colors, spacing, fontSizes },
+    { column }: { column: BOARD_COLUMNS }
+  ) => {
     const { color, shade } = columnColors[column];
     return {
       column: {
@@ -57,7 +60,7 @@ const useStyles = createStyles(
       },
       label: {
         color: colors.secondary[9],
-        fontSize: 14,
+        fontSize: fontSizes.sm,
         ":before": {
           content: "''",
           width: 8,

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,16 +1,22 @@
 import { type IHeaderLink } from "@/models/LinkModel";
+import { useProfiles } from "@/providers/ProfileProvider";
 import {
   Container,
   Flex,
   Header as MantineHeader,
   Title,
   createStyles,
+  UnstyledButton,
+  Badge,
+  Button,
 } from "@mantine/core";
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { type FC } from "react";
+import { User } from "tabler-icons-react";
 
-const HEADER_HEIGHT = 64;
+const HEADER_HEIGHT = 48;
 
 const links: IHeaderLink[] = [
   {
@@ -33,7 +39,7 @@ const links: IHeaderLink[] = [
   },
 ];
 
-const useStyles = createStyles(({ colors, spacing, radius }) => ({
+const useStyles = createStyles(({ colors, spacing, radius, fontSizes }) => ({
   root: {
     width: "100%",
     minHeight: HEADER_HEIGHT,
@@ -52,6 +58,7 @@ const useStyles = createStyles(({ colors, spacing, radius }) => ({
     gap: spacing.xs,
   },
   link: {
+    fontSize: fontSizes.sm,
     fontWeight: 500,
     textDecoration: "none",
     padding: "2px 8px",
@@ -76,6 +83,7 @@ const useStyles = createStyles(({ colors, spacing, radius }) => ({
 const Header: FC = () => {
   const { classes, cx } = useStyles();
   const { pathname } = useRouter();
+  const { psn, isAuth } = useProfiles();
 
   return (
     <MantineHeader className={classes.root} height={HEADER_HEIGHT}>
@@ -100,7 +108,32 @@ const Header: FC = () => {
             );
           })}
         </Flex>
-        <Flex className={classes.profile}>Profile</Flex>
+        {isAuth && (
+          <UnstyledButton className={classes.profile}>
+            <Badge mr="sm" radius="sm">
+              {psn?.onlineId ?? "[Not Found]"}
+            </Badge>
+            <Image
+              width={30}
+              height={30}
+              src={psn?.avatarUrls[0].avatarUrl ?? ""}
+              alt="avatar"
+            />
+          </UnstyledButton>
+        )}
+        {!isAuth && (
+          <Link href="/signIn" passHref>
+            <Button
+              size="xs"
+              leftIcon={<User size="0.75rem" />}
+              variant="light"
+              compact
+              component="a"
+            >
+              Sign in
+            </Button>
+          </Link>
+        )}
       </Container>
     </MantineHeader>
   );

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -5,7 +5,7 @@ import { useSession } from "@supabase/auth-helpers-react";
 
 const Home: IPage = () => {
   const session = useSession();
-  const { profiles, updatePSNProfile } = useProfiles();
+  const { profile, psn, updatePSNProfile } = useProfiles();
 
   return (
     <Flex
@@ -33,15 +33,15 @@ const Home: IPage = () => {
           size={8}
           style={{ whiteSpace: "break-spaces", wordBreak: "break-all" }}
         >
-          profile: {JSON.stringify(profiles.profile, null, 2)}
+          profile: {JSON.stringify(profile, null, 2)}
         </Text>
         <Text
           component="pre"
           w={400}
           size={8}
           style={{ whiteSpace: "break-spaces", wordBreak: "break-all" }}
         >
-          psn_profile: {JSON.stringify(profiles.psn, null, 2)}
+          psn_profile: {JSON.stringify(psn, null, 2)}
         </Text>
       </Group>
     </Flex>

diff --git a/providers/ProfileProvider.tsx b/providers/ProfileProvider.tsx
@@ -3,6 +3,7 @@ import {
   type NullableProfile,
   type NullablePSNProfile,
 } from "@/models/AuthModel";
+import { useUser } from "@supabase/auth-helpers-react";
 import {
   type FC,
   type PropsWithChildren,
@@ -21,13 +22,15 @@ interface IProfilesState {
   profile: NullableProfile;
 }
 
-interface IProfileContext {
-  profiles: IProfilesState;
+interface IProfileContext extends IProfilesState {
+  isAuth: boolean;
   updatePSNProfile: () => void;
 }
 
 const initialContextValue: IProfileContext = {
-  profiles: { psn: null, profile: null },
+  psn: null,
+  profile: null,
+  isAuth: false,
   updatePSNProfile: () => null,
 };
 
@@ -40,6 +43,7 @@ const ProfileProvider: FC<IProfileProvider> = (props) => {
     profile: initialProfile ?? null,
   };
   const [profiles, setProfiles] = useState<IProfilesState>(initialProfiles);
+  const user = useUser();
 
   const updatePSNProfile = (): void => {
     API.get("/auth/profile")
@@ -53,7 +57,8 @@ const ProfileProvider: FC<IProfileProvider> = (props) => {
   };
 
   const exposed: IProfileContext = {
-    profiles,
+    ...profiles,
+    isAuth: profiles.psn !== null && user !== null,
     updatePSNProfile,
   };
 

diff --git a/styles/theme.ts b/styles/theme.ts
@@ -21,20 +21,20 @@ const ModalStyles: (
   theme: MantineTheme,
   params: unknown,
   context: ContextStylesParams
-) => Record<string, CSSObject> = ({ radius }) => ({
+) => Record<string, CSSObject> = ({ radius, fontSizes }) => ({
   content: {
     borderRadius: radius.lg,
   },
   title: {
-    fontSize: 14,
+    fontSize: fontSizes.sm,
     fontWeight: 500,
   },
 });
 
-const BadgeStyles: BadgeProps["styles"] = () => ({
+const BadgeStyles: BadgeProps["styles"] = ({ fontSizes }) => ({
   root: {
     padding: "2px 6px",
-    fontSize: 12,
+    fontSize: fontSizes.xs,
     fontWeight: 500,
     textTransform: "unset",
   },