add error handling to ui states

components/Navigation/Navigation.tsx

@@ -8,7 +8,7 @@ import Link from "next/link";
 import { useUser } from "@auth0/nextjs-auth0/client";
 
 const Navigation = () => {
-	const { user, isLoading } = useUser();
+	const { user, error, isLoading } = useUser();
 	return (
 		<>
 			<div className={styles.nav}>
@@ -51,25 +51,27 @@ const Navigation = () => {
 						</Link>
 					</>
 				)}
+				{!isLoading && !error && user && (
+					<Link href="/ja" className={`${styles.link} ${styles.profile}`}>
+						{user.picture && (
+							<img src={user.picture} alt={`${user.name}'s profile picture`} />
+						)}
+						{!user.picture && <Icon icon="User" />}
+						{user.nickname}
+					</Link>
+				)}
+				{error && (
+					<Link href="/ja" className={`${styles.link} ${styles.profile}`}>
+						wystąpił błąd!
+					</Link>
+				)}
 				{!isLoading && user && (
-					<>
-						<Link href="/ja" className={`${styles.link} ${styles.profile}`}>
-							{user.picture && (
-								<img
-									src={user.picture}
-									alt={`${user.name}'s profile picture`}
-								/>
-							)}
-							{!user.picture && <Icon icon="User" />}
-							{user.nickname}
-						</Link>
-						<Link
-							href="/api/auth/logout"
-							className={`${styles.link} ${styles.partprofile}`}
-						>
-							<Icon icon="LogOut" />
-						</Link>
-					</>
+					<Link
+						href="/api/auth/logout"
+						className={`${styles.link} ${styles.partprofile}`}
+					>
+						<Icon icon="LogOut" />
+					</Link>
 				)}
 				{!isLoading && !user && (
 					<Link

pages/ja.tsx

@@ -2,7 +2,7 @@ import styles from "../styles/Ja.module.scss";
 import { useUser } from "@auth0/nextjs-auth0/client";
 
 const PageMe = () => {
-	const { user, isLoading } = useUser();
+	const { user, error, isLoading } = useUser();
 	return (
 		<>
 			{isLoading && (
@@ -11,22 +11,18 @@ const PageMe = () => {
 					<p>Sit tight.</p>
 				</main>
 			)}
-			{!isLoading && user && (
+			{error && (
+				<main>
+					<h3>Wystąpił błąd.</h3>
+					<p>Tyle wiemy.</p>
+				</main>
+			)}
+			{!isLoading && !error && user && (
 				<main>
 					<div className={styles.header}>
 						<img src={user.picture || ""} alt={`${user.name}'s picture`} />
 						<h1>{user.name}</h1>
 					</div>
-					{/* <p>
-						mail: {user.email || "no mail"} <br />
-						mail verified: {user.email_verified || "no mail verified"} <br />
-						name: {user.name || "no name"} <br />
-						nickname: {user.nickname || "no nickname"} <br />
-						org id: {user.org_id || "no org id"} <br />
-						picture: {user.picture || "no picture"} <br />
-						sub: {user.sub || "no sub"} <br />
-						updated at: {user.updated_at || "no updated at"}
-					</p> */}
 				</main>
 			)}
 			{!isLoading && !user && (