mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-12-15 17:43:03 +03:00
a540a201e3
# Description Please include a summary of the changes and the related issue. Please also include relevant motivation and context. ## Checklist before requesting a review Please delete options that are not relevant. - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented hard-to-understand areas - [ ] I have ideally added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged ## Screenshots (if appropriate):
106 lines
3.2 KiB
TypeScript
106 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import PageHeader from "@/lib/components/PageHeader/PageHeader";
|
|
import { Modal } from "@/lib/components/ui/Modal";
|
|
import QuivrButton from "@/lib/components/ui/QuivrButton/QuivrButton";
|
|
import { Tabs } from "@/lib/components/ui/Tabs/Tabs";
|
|
import { useSupabase } from "@/lib/context/SupabaseProvider";
|
|
import { useUserData } from "@/lib/hooks/useUserData";
|
|
import { redirectToLogin } from "@/lib/router/redirectToLogin";
|
|
import { ButtonType } from "@/lib/types/QuivrButton";
|
|
import { Tab } from "@/lib/types/Tab";
|
|
|
|
import { BrainsUsage } from "./components/BrainsUsage/BrainsUsage";
|
|
import { Plan } from "./components/Plan/Plan";
|
|
import { Settings } from "./components/Settings/Settings";
|
|
import styles from "./page.module.scss";
|
|
|
|
import { useLogoutModal } from "../../lib/hooks/useLogoutModal";
|
|
|
|
const UserPage = (): JSX.Element => {
|
|
const [selectedTab, setSelectedTab] = useState("Settings");
|
|
const { session } = useSupabase();
|
|
const { userData } = useUserData();
|
|
const { t } = useTranslation(["translation", "logout"]);
|
|
const {
|
|
handleLogout,
|
|
isLoggingOut,
|
|
isLogoutModalOpened,
|
|
setIsLogoutModalOpened,
|
|
} = useLogoutModal();
|
|
|
|
const button: ButtonType = {
|
|
label: "Logout",
|
|
color: "dangerous",
|
|
onClick: () => {
|
|
setIsLogoutModalOpened(true);
|
|
},
|
|
};
|
|
const userTabs: Tab[] = [
|
|
{
|
|
label: "Settings",
|
|
isSelected: selectedTab === "Settings",
|
|
onClick: () => setSelectedTab("Settings"),
|
|
},
|
|
{
|
|
label: "Brains Usage",
|
|
isSelected: selectedTab === "Brains Usage",
|
|
onClick: () => setSelectedTab("Brains Usage"),
|
|
},
|
|
{
|
|
label: "Plan",
|
|
isSelected: selectedTab === "Plan",
|
|
onClick: () => setSelectedTab("Plan"),
|
|
},
|
|
];
|
|
|
|
if (!session || !userData) {
|
|
redirectToLogin();
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.page_header}>
|
|
<PageHeader iconName="user" label="Profile" buttons={[button]} />
|
|
</div>
|
|
<div className={styles.user_page_container}>
|
|
<Tabs tabList={userTabs} />
|
|
<div className={styles.content_wrapper}>
|
|
{userTabs[0].isSelected && <Settings email={userData.email} />}
|
|
{userTabs[1].isSelected && <BrainsUsage />}
|
|
{userTabs[2].isSelected && <Plan />}
|
|
</div>
|
|
</div>
|
|
<Modal
|
|
isOpen={isLogoutModalOpened}
|
|
setOpen={setIsLogoutModalOpened}
|
|
CloseTrigger={<div />}
|
|
>
|
|
<div className="text-center flex flex-col items-center gap-5">
|
|
<h2 className="text-lg font-medium mb-5">
|
|
{t("areYouSure", { ns: "logout" })}
|
|
</h2>
|
|
<div className="flex gap-5 items-center justify-center">
|
|
<QuivrButton
|
|
onClick={() => setIsLogoutModalOpened(false)}
|
|
color="primary"
|
|
label={t("cancel", { ns: "logout" })}
|
|
></QuivrButton>
|
|
<QuivrButton
|
|
isLoading={isLoggingOut}
|
|
color="dangerous"
|
|
onClick={() => void handleLogout()}
|
|
label={t("logoutButton")}
|
|
></QuivrButton>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default UserPage;
|