From 6802093d69c0225ae53b47fc36ef406b87568191 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Sun, 4 Feb 2024 22:35:14 -0800 Subject: [PATCH] Added settings layout. --- package.components.json | 2 +- src/app/(main)/NavBar.tsx | 4 +- .../profile/DateRangeSetting.tsx | 0 .../profile/LanguageSetting.module.css | 0 .../profile/LanguageSetting.tsx | 0 .../profile/PasswordChangeButton.tsx | 2 +- .../profile/PasswordEditForm.tsx | 0 .../{settings => }/profile/ProfileHeader.tsx | 0 .../profile/ProfileSettings.tsx | 8 +-- .../profile/ThemeSetting.module.css | 0 .../{settings => }/profile/ThemeSetting.tsx | 0 .../profile/TimezoneSetting.module.css | 0 .../profile/TimezoneSetting.tsx | 0 .../(main)/{settings => }/profile/page.tsx | 2 +- src/app/(main)/settings/Settings.tsx | 25 ++++++++ src/app/(main)/settings/layout.tsx | 57 +------------------ .../teams/[teamId]/settings/TeamSettings.tsx | 28 +++++++++ .../(main)/teams/[teamId]/settings/layout.tsx | 6 +- .../teams/[teamId]/settings/team/Team.tsx | 15 ++--- src/components/input/SettingsButton.tsx | 4 +- .../layout/SettingsLayout.module.css} | 0 src/components/layout/SettingsLayout.tsx | 25 ++++++++ 22 files changed, 102 insertions(+), 76 deletions(-) rename src/app/(main)/{settings => }/profile/DateRangeSetting.tsx (100%) rename src/app/(main)/{settings => }/profile/LanguageSetting.module.css (100%) rename src/app/(main)/{settings => }/profile/LanguageSetting.tsx (100%) rename src/app/(main)/{settings => }/profile/PasswordChangeButton.tsx (91%) rename src/app/(main)/{settings => }/profile/PasswordEditForm.tsx (100%) rename src/app/(main)/{settings => }/profile/ProfileHeader.tsx (100%) rename src/app/(main)/{settings => }/profile/ProfileSettings.tsx (84%) rename src/app/(main)/{settings => }/profile/ThemeSetting.module.css (100%) rename src/app/(main)/{settings => }/profile/ThemeSetting.tsx (100%) rename src/app/(main)/{settings => }/profile/TimezoneSetting.module.css (100%) rename src/app/(main)/{settings => }/profile/TimezoneSetting.tsx (100%) rename src/app/(main)/{settings => }/profile/page.tsx (88%) create mode 100644 src/app/(main)/settings/Settings.tsx create mode 100644 src/app/(main)/teams/[teamId]/settings/TeamSettings.tsx rename src/{app/(main)/settings/layout.module.css => components/layout/SettingsLayout.module.css} (100%) create mode 100644 src/components/layout/SettingsLayout.tsx diff --git a/package.components.json b/package.components.json index 60172248..41e72579 100644 --- a/package.components.json +++ b/package.components.json @@ -1,6 +1,6 @@ { "name": "@umami/components", - "version": "0.40.0", + "version": "0.1.0", "description": "Umami React components.", "author": "Mike Cao ", "license": "MIT", diff --git a/src/app/(main)/NavBar.tsx b/src/app/(main)/NavBar.tsx index 17901f05..86d1db71 100644 --- a/src/app/(main)/NavBar.tsx +++ b/src/app/(main)/NavBar.tsx @@ -49,13 +49,13 @@ export function NavBar() { }, { label: formatMessage(labels.profile), - url: '/settings/profile', + url: '/profile', }, ], }, cloudMode && { label: formatMessage(labels.profile), - url: '/settings/profile', + url: '/profile', }, !cloudMode && { label: formatMessage(labels.logout), url: '/logout' }, ].filter(n => n); diff --git a/src/app/(main)/settings/profile/DateRangeSetting.tsx b/src/app/(main)/profile/DateRangeSetting.tsx similarity index 100% rename from src/app/(main)/settings/profile/DateRangeSetting.tsx rename to src/app/(main)/profile/DateRangeSetting.tsx diff --git a/src/app/(main)/settings/profile/LanguageSetting.module.css b/src/app/(main)/profile/LanguageSetting.module.css similarity index 100% rename from src/app/(main)/settings/profile/LanguageSetting.module.css rename to src/app/(main)/profile/LanguageSetting.module.css diff --git a/src/app/(main)/settings/profile/LanguageSetting.tsx b/src/app/(main)/profile/LanguageSetting.tsx similarity index 100% rename from src/app/(main)/settings/profile/LanguageSetting.tsx rename to src/app/(main)/profile/LanguageSetting.tsx diff --git a/src/app/(main)/settings/profile/PasswordChangeButton.tsx b/src/app/(main)/profile/PasswordChangeButton.tsx similarity index 91% rename from src/app/(main)/settings/profile/PasswordChangeButton.tsx rename to src/app/(main)/profile/PasswordChangeButton.tsx index 3b0f0f74..11649172 100644 --- a/src/app/(main)/settings/profile/PasswordChangeButton.tsx +++ b/src/app/(main)/profile/PasswordChangeButton.tsx @@ -1,6 +1,6 @@ 'use client'; import { Button, Icon, Text, useToasts, ModalTrigger, Modal } from 'react-basics'; -import PasswordEditForm from 'app/(main)/settings/profile/PasswordEditForm'; +import PasswordEditForm from 'app/(main)/profile/PasswordEditForm'; import Icons from 'components/icons'; import { useMessages } from 'components/hooks'; diff --git a/src/app/(main)/settings/profile/PasswordEditForm.tsx b/src/app/(main)/profile/PasswordEditForm.tsx similarity index 100% rename from src/app/(main)/settings/profile/PasswordEditForm.tsx rename to src/app/(main)/profile/PasswordEditForm.tsx diff --git a/src/app/(main)/settings/profile/ProfileHeader.tsx b/src/app/(main)/profile/ProfileHeader.tsx similarity index 100% rename from src/app/(main)/settings/profile/ProfileHeader.tsx rename to src/app/(main)/profile/ProfileHeader.tsx diff --git a/src/app/(main)/settings/profile/ProfileSettings.tsx b/src/app/(main)/profile/ProfileSettings.tsx similarity index 84% rename from src/app/(main)/settings/profile/ProfileSettings.tsx rename to src/app/(main)/profile/ProfileSettings.tsx index 45641e72..4b6816bd 100644 --- a/src/app/(main)/settings/profile/ProfileSettings.tsx +++ b/src/app/(main)/profile/ProfileSettings.tsx @@ -1,9 +1,9 @@ 'use client'; import { Form, FormRow } from 'react-basics'; -import TimezoneSetting from 'app/(main)/settings/profile/TimezoneSetting'; -import DateRangeSetting from 'app/(main)/settings/profile/DateRangeSetting'; -import LanguageSetting from 'app/(main)/settings/profile/LanguageSetting'; -import ThemeSetting from 'app/(main)/settings/profile/ThemeSetting'; +import TimezoneSetting from 'app/(main)/profile/TimezoneSetting'; +import DateRangeSetting from 'app/(main)/profile/DateRangeSetting'; +import LanguageSetting from 'app/(main)/profile/LanguageSetting'; +import ThemeSetting from 'app/(main)/profile/ThemeSetting'; import PasswordChangeButton from './PasswordChangeButton'; import { useLogin, useMessages } from 'components/hooks'; import { ROLES } from 'lib/constants'; diff --git a/src/app/(main)/settings/profile/ThemeSetting.module.css b/src/app/(main)/profile/ThemeSetting.module.css similarity index 100% rename from src/app/(main)/settings/profile/ThemeSetting.module.css rename to src/app/(main)/profile/ThemeSetting.module.css diff --git a/src/app/(main)/settings/profile/ThemeSetting.tsx b/src/app/(main)/profile/ThemeSetting.tsx similarity index 100% rename from src/app/(main)/settings/profile/ThemeSetting.tsx rename to src/app/(main)/profile/ThemeSetting.tsx diff --git a/src/app/(main)/settings/profile/TimezoneSetting.module.css b/src/app/(main)/profile/TimezoneSetting.module.css similarity index 100% rename from src/app/(main)/settings/profile/TimezoneSetting.module.css rename to src/app/(main)/profile/TimezoneSetting.module.css diff --git a/src/app/(main)/settings/profile/TimezoneSetting.tsx b/src/app/(main)/profile/TimezoneSetting.tsx similarity index 100% rename from src/app/(main)/settings/profile/TimezoneSetting.tsx rename to src/app/(main)/profile/TimezoneSetting.tsx diff --git a/src/app/(main)/settings/profile/page.tsx b/src/app/(main)/profile/page.tsx similarity index 88% rename from src/app/(main)/settings/profile/page.tsx rename to src/app/(main)/profile/page.tsx index f0c1047e..9dbd91f6 100644 --- a/src/app/(main)/settings/profile/page.tsx +++ b/src/app/(main)/profile/page.tsx @@ -12,5 +12,5 @@ export default function () { } export const metadata: Metadata = { - title: 'Profile Settings | Umami', + title: 'Profile | Umami', }; diff --git a/src/app/(main)/settings/Settings.tsx b/src/app/(main)/settings/Settings.tsx new file mode 100644 index 00000000..85e9caee --- /dev/null +++ b/src/app/(main)/settings/Settings.tsx @@ -0,0 +1,25 @@ +'use client'; +import { ReactNode } from 'react'; +import { useLogin, useMessages } from 'components/hooks'; +import SettingsLayout from 'components/layout/SettingsLayout'; + +export default function Settings({ children }: { children: ReactNode }) { + const { user } = useLogin(); + const { formatMessage, labels } = useMessages(); + + const items = [ + { + key: 'websites', + label: formatMessage(labels.websites), + url: '/settings/websites', + }, + { key: 'teams', label: formatMessage(labels.teams), url: '/settings/teams' }, + user.isAdmin && { + key: 'users', + label: formatMessage(labels.users), + url: '/settings/users', + }, + ].filter(n => n); + + return {children}; +} diff --git a/src/app/(main)/settings/layout.tsx b/src/app/(main)/settings/layout.tsx index 6eb81d68..6829e966 100644 --- a/src/app/(main)/settings/layout.tsx +++ b/src/app/(main)/settings/layout.tsx @@ -1,56 +1,5 @@ -'use client'; -import { usePathname } from 'next/navigation'; -import { useLogin, useMessages, useTeamUrl } from 'components/hooks'; -import SideNav from 'components/layout/SideNav'; -import styles from './layout.module.css'; +import Settings from './Settings'; -export default function SettingsLayout({ children }) { - const { user } = useLogin(); - const pathname = usePathname(); - const { formatMessage, labels } = useMessages(); - const cloudMode = !!process.env.cloudMode; - const { teamId, renderTeamUrl } = useTeamUrl(); - - const items = [ - teamId && { - key: 'team', - label: formatMessage(labels.team), - url: renderTeamUrl('/settings/team'), - }, - teamId && { - key: 'members', - label: formatMessage(labels.members), - url: renderTeamUrl('/settings/members'), - }, - { - key: 'websites', - label: formatMessage(labels.websites), - url: renderTeamUrl('/settings/websites'), - }, - !teamId && { key: 'teams', label: formatMessage(labels.teams), url: '/settings/teams' }, - !teamId && - user.isAdmin && { - key: 'users', - label: formatMessage(labels.users), - url: renderTeamUrl('/settings/users'), - }, - !teamId && { key: 'profile', label: formatMessage(labels.profile), url: '/settings/profile' }, - ].filter(n => n); - - const getKey = () => items.find(({ url }) => pathname === url)?.key; - - if (cloudMode && pathname !== '/settings/profile') { - return null; - } - - return ( -
- {!cloudMode && ( -
- -
- )} -
{children}
-
- ); +export default function ({ children }) { + return {children}; } diff --git a/src/app/(main)/teams/[teamId]/settings/TeamSettings.tsx b/src/app/(main)/teams/[teamId]/settings/TeamSettings.tsx new file mode 100644 index 00000000..4be58432 --- /dev/null +++ b/src/app/(main)/teams/[teamId]/settings/TeamSettings.tsx @@ -0,0 +1,28 @@ +'use client'; +import { ReactNode } from 'react'; +import SettingsLayout from 'components/layout/SettingsLayout'; +import { useMessages } from 'components/hooks'; + +export default function ({ children, teamId }: { children: ReactNode; teamId: string }) { + const { formatMessage, labels } = useMessages(); + + const items = [ + { + key: 'team', + label: formatMessage(labels.team), + url: `/teams/${teamId}/settings/team`, + }, + { + key: 'members', + label: formatMessage(labels.members), + url: `/teams/${teamId}/settings/members`, + }, + { + key: 'websites', + label: formatMessage(labels.websites), + url: `/teams/${teamId}/settings/websites`, + }, + ].filter(n => n); + + return {children}; +} diff --git a/src/app/(main)/teams/[teamId]/settings/layout.tsx b/src/app/(main)/teams/[teamId]/settings/layout.tsx index f3b1b94b..a72ce3b7 100644 --- a/src/app/(main)/teams/[teamId]/settings/layout.tsx +++ b/src/app/(main)/teams/[teamId]/settings/layout.tsx @@ -1,3 +1,5 @@ -import Layout from 'app/(main)/settings/layout'; +import TeamSettings from './TeamSettings'; -export default Layout; +export default function ({ children, params: { teamId } }) { + return {children}; +} diff --git a/src/app/(main)/teams/[teamId]/settings/team/Team.tsx b/src/app/(main)/teams/[teamId]/settings/team/Team.tsx index 40a57ce7..2da9c7a8 100644 --- a/src/app/(main)/teams/[teamId]/settings/team/Team.tsx +++ b/src/app/(main)/teams/[teamId]/settings/team/Team.tsx @@ -1,26 +1,23 @@ 'use client'; -import TeamEditForm from 'app/(main)/settings/teams/[teamId]/TeamEditForm'; -import { useLogin, useMessages, useTeam } from 'components/hooks'; -import { Loading } from 'react-basics'; +import { useContext } from 'react'; +import { useLogin, useMessages } from 'components/hooks'; import PageHeader from 'components/layout/PageHeader'; import { ROLES } from 'lib/constants'; +import TeamEditForm from 'app/(main)/settings/teams/[teamId]/TeamEditForm'; +import { TeamContext } from 'app/(main)/teams/[teamId]/TeamProvider'; export default function Team({ teamId }: { teamId: string }) { + const team = useContext(TeamContext); const { user } = useLogin(); const { formatMessage, labels } = useMessages(); - const { data: team, isLoading } = useTeam(teamId); const allowEdit = !!team?.teamUser?.find( ({ userId, role }) => role === ROLES.teamOwner && userId === user.id, ); - if (isLoading) { - return ; - } - return ( <> - + ); } diff --git a/src/components/input/SettingsButton.tsx b/src/components/input/SettingsButton.tsx index eb409f3f..535d03c3 100644 --- a/src/components/input/SettingsButton.tsx +++ b/src/components/input/SettingsButton.tsx @@ -1,6 +1,6 @@ import { Button, Icon, PopupTrigger, Popup, Form, FormRow } from 'react-basics'; -import TimezoneSetting from 'app/(main)/settings/profile/TimezoneSetting'; -import DateRangeSetting from 'app/(main)/settings/profile/DateRangeSetting'; +import TimezoneSetting from 'app/(main)/profile/TimezoneSetting'; +import DateRangeSetting from 'app/(main)/profile/DateRangeSetting'; import Icons from 'components/icons'; import { useMessages } from 'components/hooks'; import styles from './SettingsButton.module.css'; diff --git a/src/app/(main)/settings/layout.module.css b/src/components/layout/SettingsLayout.module.css similarity index 100% rename from src/app/(main)/settings/layout.module.css rename to src/components/layout/SettingsLayout.module.css diff --git a/src/components/layout/SettingsLayout.tsx b/src/components/layout/SettingsLayout.tsx new file mode 100644 index 00000000..317c7e29 --- /dev/null +++ b/src/components/layout/SettingsLayout.tsx @@ -0,0 +1,25 @@ +'use client'; +import { ReactNode } from 'react'; +import { usePathname } from 'next/navigation'; +import SideNav from 'components/layout/SideNav'; +import styles from './SettingsLayout.module.css'; + +export function SettingsLayout({ items = [], children }: { items: any[]; children: ReactNode }) { + const pathname = usePathname(); + const cloudMode = !!process.env.cloudMode; + + const getKey = () => items.find(({ url }) => pathname === url)?.key; + + return ( +
+ {!cloudMode && ( +
+ +
+ )} +
{children}
+
+ ); +} + +export default SettingsLayout;