From 19fc6a2266441c094d96741e6bc80ac3ed18d830 Mon Sep 17 00:00:00 2001 From: Cephas Chapa Date: Fri, 26 Apr 2024 11:52:32 +0200 Subject: [PATCH 1/3] fix(ui): redirect user to login page if loggedout and prevent them from accessing the dashboard --- app/src/app/[lng]/[inventory]/page.tsx | 31 +++++++++++++++++--------- app/src/app/[lng]/page.tsx | 9 ++++++++ 2 files changed, 29 insertions(+), 11 deletions(-) diff --git a/app/src/app/[lng]/[inventory]/page.tsx b/app/src/app/[lng]/[inventory]/page.tsx index 3fac76b1e..affea287a 100644 --- a/app/src/app/[lng]/[inventory]/page.tsx +++ b/app/src/app/[lng]/[inventory]/page.tsx @@ -36,6 +36,7 @@ import { Tooltip, useToast, } from "@chakra-ui/react"; +import { signIn, useSession } from "next-auth/react"; import dynamic from "next/dynamic"; import NextLink from "next/link"; import { useRouter, useParams } from "next/navigation"; @@ -76,6 +77,13 @@ export default function Home({ params: { lng } }: { params: { lng: string } }) { const { t } = useTranslation(lng, "dashboard"); const toast = useToast(); const router = useRouter(); + // Check if user is authenticated otherwise route to login page + const { data, status } = useSession({ + required: true, + onUnauthenticated() { + router.push("/auth/login"); + }, + }); const { inventory: inventoryParam } = useParams(); let inventoryId = inventoryParam as string | null; if (inventoryId === "null" || inventoryId === "undefined") { @@ -384,16 +392,17 @@ export default function Home({ params: { lng } }: { params: { lng: string } }) { /> - {inventory?.city.area! == 0 || inventory?.city.area === null ? ( - - N/A - + {inventory?.city.area! == 0 || + inventory?.city.area === null ? ( + + N/A + ) : ( + > {Math.round(inventory?.city.area!)} km2 diff --git a/app/src/app/[lng]/page.tsx b/app/src/app/[lng]/page.tsx index da7796459..232f62a87 100644 --- a/app/src/app/[lng]/page.tsx +++ b/app/src/app/[lng]/page.tsx @@ -4,6 +4,7 @@ import { Box, Spinner, Text } from "@chakra-ui/react"; import { useRouter } from "next/navigation"; import { useEffect } from "react"; import { useTranslation } from "@/i18n/client"; +import { useSession } from "next-auth/react"; export default function HomePage({ params: { lng }, @@ -15,6 +16,14 @@ export default function HomePage({ const { data: userInfo, isLoading: isUserInfoLoading } = api.useGetUserInfoQuery(); + // Check if user is authenticated otherwise route to login page + const { data, status } = useSession({ + required: true, + onUnauthenticated() { + router.push("/auth/login"); + }, + }); + useEffect(() => { const defaultInventoryAvailable = !!userInfo?.defaultInventoryId; const defaultInventoryPath = `/${userInfo?.defaultInventoryId}`; From 932f7696e37946cb6c7ef2ca72d52770d149e149 Mon Sep 17 00:00:00 2001 From: Cephas Chapa Date: Mon, 29 Apr 2024 09:23:49 +0200 Subject: [PATCH 2/3] fix: moved usesession hook to a reusable function, reworked the area login --- app/src/app/[lng]/[inventory]/page.tsx | 12 ++++-------- app/src/app/[lng]/page.tsx | 9 ++------- app/src/util/check-user-session.ts | 13 +++++++++++++ 3 files changed, 19 insertions(+), 15 deletions(-) create mode 100644 app/src/util/check-user-session.ts diff --git a/app/src/app/[lng]/[inventory]/page.tsx b/app/src/app/[lng]/[inventory]/page.tsx index affea287a..d0bedabf8 100644 --- a/app/src/app/[lng]/[inventory]/page.tsx +++ b/app/src/app/[lng]/[inventory]/page.tsx @@ -9,6 +9,7 @@ import { CircleIcon } from "@/components/icons"; import { NavigationBar } from "@/components/navigation-bar"; import { useTranslation } from "@/i18n/client"; import { api, useGetCityPopulationQuery } from "@/services/api"; +import { checkUserSession } from "@/util/check-user-session"; import { formatPercent, getShortenNumberUnit, @@ -78,12 +79,7 @@ export default function Home({ params: { lng } }: { params: { lng: string } }) { const toast = useToast(); const router = useRouter(); // Check if user is authenticated otherwise route to login page - const { data, status } = useSession({ - required: true, - onUnauthenticated() { - router.push("/auth/login"); - }, - }); + checkUserSession(); const { inventory: inventoryParam } = useParams(); let inventoryId = inventoryParam as string | null; if (inventoryId === "null" || inventoryId === "undefined") { @@ -392,8 +388,8 @@ export default function Home({ params: { lng } }: { params: { lng: string } }) { /> - {inventory?.city.area! == 0 || - inventory?.city.area === null ? ( + {inventory?.city.area === null || + inventory?.city.area! === 0 ? ( { const defaultInventoryAvailable = !!userInfo?.defaultInventoryId; const defaultInventoryPath = `/${userInfo?.defaultInventoryId}`; diff --git a/app/src/util/check-user-session.ts b/app/src/util/check-user-session.ts new file mode 100644 index 000000000..25e6f3387 --- /dev/null +++ b/app/src/util/check-user-session.ts @@ -0,0 +1,13 @@ +import { useSession } from "next-auth/react"; +import { useRouter } from "next/navigation"; + +export const checkUserSession = () => { + const router = useRouter(); + + const { data, status } = useSession({ + required: true, + onUnauthenticated() { + router.push("/auth/login"); + }, + }); +}; From 74a227731105aef28143ec1acdf1686849f9849e Mon Sep 17 00:00:00 2001 From: Cephas Chapa Date: Mon, 29 Apr 2024 09:32:24 +0200 Subject: [PATCH 3/3] fix: react hook function rename --- app/src/app/[lng]/[inventory]/page.tsx | 4 ++-- app/src/app/[lng]/page.tsx | 4 ++-- app/src/util/check-user-session.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/src/app/[lng]/[inventory]/page.tsx b/app/src/app/[lng]/[inventory]/page.tsx index d0bedabf8..c26a18b7a 100644 --- a/app/src/app/[lng]/[inventory]/page.tsx +++ b/app/src/app/[lng]/[inventory]/page.tsx @@ -9,7 +9,7 @@ import { CircleIcon } from "@/components/icons"; import { NavigationBar } from "@/components/navigation-bar"; import { useTranslation } from "@/i18n/client"; import { api, useGetCityPopulationQuery } from "@/services/api"; -import { checkUserSession } from "@/util/check-user-session"; +import { CheckUserSession } from "@/util/check-user-session"; import { formatPercent, getShortenNumberUnit, @@ -79,7 +79,7 @@ export default function Home({ params: { lng } }: { params: { lng: string } }) { const toast = useToast(); const router = useRouter(); // Check if user is authenticated otherwise route to login page - checkUserSession(); + CheckUserSession(); const { inventory: inventoryParam } = useParams(); let inventoryId = inventoryParam as string | null; if (inventoryId === "null" || inventoryId === "undefined") { diff --git a/app/src/app/[lng]/page.tsx b/app/src/app/[lng]/page.tsx index a355e5926..c7862e8b7 100644 --- a/app/src/app/[lng]/page.tsx +++ b/app/src/app/[lng]/page.tsx @@ -5,7 +5,7 @@ import { useRouter } from "next/navigation"; import { useEffect } from "react"; import { useTranslation } from "@/i18n/client"; import { useSession } from "next-auth/react"; -import { checkUserSession } from "@/util/check-user-session"; +import { CheckUserSession } from "@/util/check-user-session"; export default function HomePage({ params: { lng }, @@ -18,7 +18,7 @@ export default function HomePage({ api.useGetUserInfoQuery(); // Check if user is authenticated otherwise route to login page - checkUserSession(); + CheckUserSession(); useEffect(() => { const defaultInventoryAvailable = !!userInfo?.defaultInventoryId; const defaultInventoryPath = `/${userInfo?.defaultInventoryId}`; diff --git a/app/src/util/check-user-session.ts b/app/src/util/check-user-session.ts index 25e6f3387..3ea87de87 100644 --- a/app/src/util/check-user-session.ts +++ b/app/src/util/check-user-session.ts @@ -1,7 +1,7 @@ import { useSession } from "next-auth/react"; import { useRouter } from "next/navigation"; -export const checkUserSession = () => { +export const CheckUserSession = () => { const router = useRouter(); const { data, status } = useSession({