From 6506917ddbe1caeb2eb8293edd89e575b887823e Mon Sep 17 00:00:00 2001 From: Tania Gutierrez Date: Fri, 15 Mar 2024 16:00:57 -0400 Subject: [PATCH] feat: Integrated Refine to Account modals and User DropDownMenu --- app/components/general-layout.tsx | 19 ++++++-- app/components/upgrade-account-banner.tsx | 6 ++- app/routes/account.tsx | 58 ++++++++++++++++++++--- 3 files changed, 72 insertions(+), 11 deletions(-) diff --git a/app/components/general-layout.tsx b/app/components/general-layout.tsx index 7eeb351..c0b079b 100644 --- a/app/components/general-layout.tsx +++ b/app/components/general-layout.tsx @@ -14,7 +14,7 @@ import { useUppy } from "./lib/uppy"; import type { UppyFile } from "@uppy/core"; import { Progress } from "~/components/ui/progress"; import { DialogClose } from "@radix-ui/react-dialog"; -import { ChevronDownIcon, TrashIcon } from "@radix-ui/react-icons"; +import { ChevronDownIcon, ExitIcon, TrashIcon } from "@radix-ui/react-icons"; import { ClockIcon, DriveIcon, @@ -25,12 +25,17 @@ import { PageIcon, ThemeIcon, } from "./icons"; -import { DropdownMenu, DropdownMenuTrigger } from "./ui/dropdown-menu"; +import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem } from "./ui/dropdown-menu"; import { Avatar } from "@radix-ui/react-avatar"; import { cn } from "~/utils"; +import { useGetIdentity, useLogout } from "@refinedev/core"; +import { Identity } from "~/data/auth-provider"; + export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => { const location = useLocation(); + const { data: identity } = useGetIdentity(); + const{ mutate: logout } = useLogout() return (
@@ -95,10 +100,18 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => { + + + logout()}> + + Log Out + + +
diff --git a/app/components/upgrade-account-banner.tsx b/app/components/upgrade-account-banner.tsx index 6474cf4..65d1577 100644 --- a/app/components/upgrade-account-banner.tsx +++ b/app/components/upgrade-account-banner.tsx @@ -1,3 +1,6 @@ +import { useGetIdentity } from "@refinedev/core" +import { Identity } from "~/data/auth-provider" + import { CrownIcon, PersonIcon, @@ -10,13 +13,14 @@ import { Avatar } from "./ui/avatar" import { Button } from "./ui/button" export const UpgradeAccountBanner = () => { + const { data: identity } = useGetIdentity(); return (
- wirtly + {`${identity?.firstName} ${identity?.lastName}`}
diff --git a/app/routes/account.tsx b/app/routes/account.tsx index de6250c..b8d32f7 100644 --- a/app/routes/account.tsx +++ b/app/routes/account.tsx @@ -1,5 +1,6 @@ import { getFormProps, useForm } from "@conform-to/react"; import { getZodConstraint, parseWithZod } from "@conform-to/zod"; +import { BaseKey, useGetIdentity, useUpdate, useUpdatePassword } from "@refinedev/core"; import { useState } from "react"; import { z } from "zod"; import { Field } from "~/components/forms"; @@ -19,10 +20,7 @@ import { UsageCard } from "~/components/usage-card"; import QRImg from "~/images/QR.png"; export default function MyAccount() { - const isLogged = true; - if (!isLogged) { - window.location.href = "/login"; - } + const { data: identity } = useGetIdentity<{ email: string }>(); const [openModal, setModal] = useState({ changeEmail: false, @@ -53,7 +51,7 @@ export default function MyAccount() { Email Address - bsimpson@springfield.oh.gov.com + {identity?.email}