From cdfd092489fecbcd3355fa03ee91d608de08983b Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Sun, 2 Jun 2024 01:38:50 +0200
Subject: [PATCH] feat: rework settings modal

---
 .../dashboard/side_nav/side_navigation.tsx    |  2 +-
 inertia/components/navbar/navbar.tsx          |  2 +-
 inertia/components/settings/modal.tsx         | 39 -----------
 inertia/components/settings/profile.tsx       | 66 +++++++++++++++++++
 .../components/settings/settings_modal.tsx    | 66 +++++++++++++++++++
 inertia/i18n/locales/en/common.json           |  3 +-
 inertia/i18n/locales/fr/common.json           |  3 +-
 7 files changed, 138 insertions(+), 43 deletions(-)
 delete mode 100644 inertia/components/settings/modal.tsx
 create mode 100644 inertia/components/settings/profile.tsx
 create mode 100644 inertia/components/settings/settings_modal.tsx

diff --git a/inertia/components/dashboard/side_nav/side_navigation.tsx b/inertia/components/dashboard/side_nav/side_navigation.tsx
index 5591e2f..d33555e 100644
--- a/inertia/components/dashboard/side_nav/side_navigation.tsx
+++ b/inertia/components/dashboard/side_nav/side_navigation.tsx
@@ -7,7 +7,7 @@ import SearchModal from '~/components/dashboard/search/search_modal';
 import FavoriteList from '~/components/dashboard/side_nav/favorite/favorite_list';
 import { Item, ItemLink } from '~/components/dashboard/side_nav/nav_item';
 import UserCard from '~/components/dashboard/side_nav/user_card';
-import ModalSettings from '~/components/settings/modal';
+import ModalSettings from '~/components/settings/settings_modal';
 import useActiveCollection from '~/hooks/use_active_collection';
 import useUser from '~/hooks/use_user';
 import { rgba } from '~/lib/color';
diff --git a/inertia/components/navbar/navbar.tsx b/inertia/components/navbar/navbar.tsx
index 8172e01..86438cd 100644
--- a/inertia/components/navbar/navbar.tsx
+++ b/inertia/components/navbar/navbar.tsx
@@ -12,7 +12,7 @@ import {
 import ExternalLink from '~/components/common/external_link';
 import RoundedImage from '~/components/common/rounded_image';
 import UnstyledList from '~/components/common/unstyled/unstyled_list';
-import ModalSettings from '~/components/settings/modal';
+import ModalSettings from '~/components/settings/settings_modal';
 import useUser from '~/hooks/use_user';
 
 type NavbarListDirection = {
diff --git a/inertia/components/settings/modal.tsx b/inertia/components/settings/modal.tsx
deleted file mode 100644
index d386335..0000000
--- a/inertia/components/settings/modal.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Link } from '@inertiajs/react';
-import { route } from '@izzyjs/route/client';
-import { useTranslation } from 'react-i18next';
-import { PiGearLight } from 'react-icons/pi';
-import Modal from '~/components/common/modal/modal';
-import LangSelector from '~/components/lang_selector';
-import ThemeSwitcher from '~/components/theme_switcher';
-import useToggle from '~/hooks/use_modal';
-import useUser from '~/hooks/use_user';
-
-export default function ModalSettings({
-  openItem: OpenItem,
-}: {
-  // TODO: fix this :()
-  openItem: any;
-}) {
-  const { t } = useTranslation('common');
-  const { isShowing, open, close } = useToggle();
-  const { isAuthenticated } = useUser();
-  return (
-    <>
-      <OpenItem onClick={open}>
-        <PiGearLight size={20} />
-        {t('settings')}
-      </OpenItem>
-      <Modal title={t('settings')} opened={isShowing} close={close}>
-        <LangSelector />
-        <hr />
-        <ThemeSwitcher />
-        {isAuthenticated && (
-          <>
-            <hr />
-            <Link href={route('auth.logout').url}>{t('logout')}</Link>
-          </>
-        )}
-      </Modal>
-    </>
-  );
-}
diff --git a/inertia/components/settings/profile.tsx b/inertia/components/settings/profile.tsx
new file mode 100644
index 0000000..b5e69e3
--- /dev/null
+++ b/inertia/components/settings/profile.tsx
@@ -0,0 +1,66 @@
+import styled from '@emotion/styled';
+import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import dayjs from 'dayjs';
+import { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+import RoundedImage from '~/components/common/rounded_image';
+import UnstyledList from '~/components/common/unstyled/unstyled_list';
+import { DATE_FORMAT } from '~/constants';
+import useUser from '~/hooks/use_user';
+
+const ProfileStyle = styled(UnstyledList)({
+  display: 'flex',
+  gap: '1.25em',
+});
+
+const Column = styled.li({
+  display: 'flex',
+  gap: '1rem',
+  flexDirection: 'column',
+});
+
+const Field = styled.li({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export default function Profile() {
+  const { user, isAuthenticated } = useUser();
+  const { t } = useTranslation('common');
+
+  const avatarLabel = t('avatar', {
+    name: user?.name,
+  });
+
+  if (!isAuthenticated) {
+    return <Fragment />;
+  }
+
+  return (
+    <ProfileStyle>
+      <Column>
+        <RoundedImage
+          src={user.avatarUrl}
+          width={96}
+          height={96}
+          alt={avatarLabel}
+          title={avatarLabel}
+        />
+        <Link href={route('auth.logout').url}>{t('logout')}</Link>
+      </Column>
+      <Column>
+        <Field>
+          <b>{t('name')}</b> {user.fullname}
+        </Field>
+        <Field>
+          <b>{t('email')}</b> {user.email}
+        </Field>
+        <Field>
+          <b>{t('member-since')}</b>{' '}
+          {dayjs(user.createdAt.toString()).format(DATE_FORMAT)}
+        </Field>
+      </Column>
+    </ProfileStyle>
+  );
+}
diff --git a/inertia/components/settings/settings_modal.tsx b/inertia/components/settings/settings_modal.tsx
new file mode 100644
index 0000000..e855fc2
--- /dev/null
+++ b/inertia/components/settings/settings_modal.tsx
@@ -0,0 +1,66 @@
+import { useTranslation } from 'react-i18next';
+import { CiDark } from 'react-icons/ci';
+import { FaUser } from 'react-icons/fa';
+import { IoLanguageOutline } from 'react-icons/io5';
+import { PiGearLight } from 'react-icons/pi';
+import FormField from '~/components/common/form/_form_field';
+import Modal from '~/components/common/modal/modal';
+import Tabs, { Tab } from '~/components/common/tabs/tabs';
+import LangSelector from '~/components/lang_selector';
+import Profile from '~/components/settings/profile';
+import ThemeSwitcher from '~/components/theme_switcher';
+import useToggle from '~/hooks/use_modal';
+import useUser from '~/hooks/use_user';
+export default function ModalSettings({
+  openItem: OpenItem,
+}: {
+  // TODO: fix this :()
+  openItem: any;
+}) {
+  const { t } = useTranslation('common');
+  const { isShowing, open, close } = useToggle();
+  const { isAuthenticated } = useUser();
+
+  let tabs: Tab[] = [
+    {
+      title: t('lang'),
+      content: <LangSelector />,
+      icon: IoLanguageOutline,
+    },
+    {
+      title: 'Theme',
+      content: (
+        <FormField css={{ flexDirection: 'row' }}>
+          <label>Dark theme?</label>
+          <ThemeSwitcher />
+        </FormField>
+      ),
+      icon: CiDark,
+    },
+  ];
+
+  if (isAuthenticated) {
+    tabs.push({
+      title: t('profile'),
+      content: <Profile />,
+      icon: FaUser,
+    });
+  }
+
+  return (
+    <>
+      <OpenItem onClick={open}>
+        <PiGearLight size={20} />
+        {t('settings')}
+      </OpenItem>
+      <Modal
+        title={t('settings')}
+        opened={isShowing}
+        close={close}
+        css={{ justifyContent: 'flex-start' }}
+      >
+        <Tabs tabs={tabs} />
+      </Modal>
+    </>
+  );
+}
diff --git a/inertia/i18n/locales/en/common.json b/inertia/i18n/locales/en/common.json
index 5563e7e..cc403c8 100644
--- a/inertia/i18n/locales/en/common.json
+++ b/inertia/i18n/locales/en/common.json
@@ -52,7 +52,8 @@
   "select-your-lang": "Change the language",
   "name": "Name",
   "email": "Email",
+  "member-since": "Member since",
   "footer": {
     "made_by": "Made with ❤\uFE0F by"
   }
-}
+}
\ No newline at end of file
diff --git a/inertia/i18n/locales/fr/common.json b/inertia/i18n/locales/fr/common.json
index a63c08a..cfa990a 100644
--- a/inertia/i18n/locales/fr/common.json
+++ b/inertia/i18n/locales/fr/common.json
@@ -52,7 +52,8 @@
   "select-your-lang": "Modifier la langue",
   "name": "Nom",
   "email": "Email",
+  "member-since": "Membre depuis",
   "footer": {
     "made_by": "Fait avec ❤\uFE0F par"
   }
-}
+}
\ No newline at end of file