From 400657d59e56071a4268a7ab198ba7c0303d9577 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Fri, 2 Feb 2024 21:06:55 -0800 Subject: [PATCH] Updated profile menu. Fixed dashboard. --- next.config.js | 2 +- src/app/(main)/dashboard/Dashboard.tsx | 33 ++++++------- src/app/(main)/dashboard/DashboardEdit.tsx | 31 +++++++------ src/app/(main)/layout.module.css | 1 - .../reports/[reportId]/BaseParameters.tsx | 10 +--- src/app/(main)/settings/layout.tsx | 2 +- .../(main)/teams/[teamId]/dashboard/page.tsx | 3 ++ src/assets/change.svg | 2 +- src/assets/magnet.svg | 2 +- src/assets/visitor.svg | 2 +- src/components/hooks/queries/useWebsites.ts | 9 ++-- src/components/input/ProfileButton.tsx | 46 +++++++++++-------- 12 files changed, 73 insertions(+), 70 deletions(-) create mode 100644 src/app/(main)/teams/[teamId]/dashboard/page.tsx diff --git a/next.config.js b/next.config.js index d0336b10..f353b1f9 100644 --- a/next.config.js +++ b/next.config.js @@ -75,7 +75,7 @@ const redirects = [ }, { source: '/teams/:id', - destination: '/teams/:id/websites', + destination: '/teams/:id/dashboard', permanent: true, }, { diff --git a/src/app/(main)/dashboard/Dashboard.tsx b/src/app/(main)/dashboard/Dashboard.tsx index 202f88f6..ed976f43 100644 --- a/src/app/(main)/dashboard/Dashboard.tsx +++ b/src/app/(main)/dashboard/Dashboard.tsx @@ -7,39 +7,30 @@ import WebsiteChartList from '../websites/[websiteId]/WebsiteChartList'; import DashboardSettingsButton from 'app/(main)/dashboard/DashboardSettingsButton'; import DashboardEdit from 'app/(main)/dashboard/DashboardEdit'; import EmptyPlaceholder from 'components/common/EmptyPlaceholder'; -import { useApi } from 'components/hooks'; +import { useMessages, useLocale, useTeamContext, useWebsites } from 'components/hooks'; import useDashboard from 'store/dashboard'; -import { useMessages, useLocale, useLogin, useFilterQuery } from 'components/hooks'; export function Dashboard() { const { formatMessage, labels, messages } = useMessages(); - const { user } = useLogin(); + const { teamId } = useTeamContext(); const { showCharts, editing } = useDashboard(); const { dir } = useLocale(); - const { get } = useApi(); const pageSize = 10; - const { query, params, setParams, result } = useFilterQuery({ - queryKey: ['dashboard:websites'], - queryFn: (params: any) => { - return get(`/users/${user.id}/websites`, { ...params, includeTeams: true, pageSize }); - }, - }); + const { result, query, params, setParams } = useWebsites({}, { pageSize }); + const { page } = params; + const hasData = !!result?.data; const handlePageChange = (page: number) => { setParams({ ...params, page }); }; - const { data, count } = result || {}; - const hasData = !!(data as any)?.length; - const { page } = params; - if (query.isLoading) { return ; } return ( - <> +
{!editing && hasData && } @@ -57,21 +48,25 @@ export function Dashboard() { )} {hasData && ( <> - {editing && } + {editing && } {!editing && ( <> - + )} )} - +
); } diff --git a/src/app/(main)/dashboard/DashboardEdit.tsx b/src/app/(main)/dashboard/DashboardEdit.tsx index fd94c767..d934bf04 100644 --- a/src/app/(main)/dashboard/DashboardEdit.tsx +++ b/src/app/(main)/dashboard/DashboardEdit.tsx @@ -2,31 +2,30 @@ import { useState, useMemo } from 'react'; import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; import classNames from 'classnames'; -import { Button } from 'react-basics'; +import { Button, Loading } from 'react-basics'; import { firstBy } from 'thenby'; import useDashboard, { saveDashboard } from 'store/dashboard'; -import { useMessages } from 'components/hooks'; -import { useApi } from 'components/hooks'; +import { useMessages, useWebsites } from 'components/hooks'; import styles from './DashboardEdit.module.css'; -const dragId = 'dashboard-website-ordering'; +const DRAG_ID = 'dashboard-website-ordering'; -export function DashboardEdit() { +export function DashboardEdit({ teamId }: { teamId: string }) { const settings = useDashboard(); const { websiteOrder } = settings; const { formatMessage, labels } = useMessages(); const [order, setOrder] = useState(websiteOrder || []); - const { get, useQuery } = useApi(); - const { data: result } = useQuery({ - queryKey: ['websites'], - queryFn: () => get('/websites'), - }); - const { data: websites } = result || {}; + const { + result, + query: { isLoading }, + } = useWebsites({ teamId }); + + const websites = result?.data; const ordered = useMemo(() => { if (websites) { return websites - .map(website => ({ ...website, order: order.indexOf(website.id) })) + .map((website: { id: any }) => ({ ...website, order: order.indexOf(website.id) })) .sort(firstBy('order')); } return []; @@ -57,6 +56,10 @@ export function DashboardEdit() { setOrder([]); } + if (isLoading) { + return ; + } + return ( <>
@@ -72,7 +75,7 @@ export function DashboardEdit() {
- + {(provided, snapshot) => (
{ordered.map(({ id, name, domain }, index) => ( - + {(provided, snapshot) => (
{allowWebsiteSelect && ( - + )} )} diff --git a/src/app/(main)/settings/layout.tsx b/src/app/(main)/settings/layout.tsx index f8d0d1f0..72e979b7 100644 --- a/src/app/(main)/settings/layout.tsx +++ b/src/app/(main)/settings/layout.tsx @@ -12,7 +12,7 @@ export default function SettingsLayout({ children }) { const { teamId, renderTeamUrl } = useTeamContext(); const items = [ - { + teamId && { key: 'team', label: formatMessage(labels.team), url: renderTeamUrl('/settings/team'), diff --git a/src/app/(main)/teams/[teamId]/dashboard/page.tsx b/src/app/(main)/teams/[teamId]/dashboard/page.tsx new file mode 100644 index 00000000..bf8f2fed --- /dev/null +++ b/src/app/(main)/teams/[teamId]/dashboard/page.tsx @@ -0,0 +1,3 @@ +import Page from 'app/(main)/dashboard/page'; + +export default Page; diff --git a/src/assets/change.svg b/src/assets/change.svg index 1b27e85f..bf907e68 100644 --- a/src/assets/change.svg +++ b/src/assets/change.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/magnet.svg b/src/assets/magnet.svg index aa778237..67007a01 100644 --- a/src/assets/magnet.svg +++ b/src/assets/magnet.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/visitor.svg b/src/assets/visitor.svg index 591873a5..4aeceafc 100644 --- a/src/assets/visitor.svg +++ b/src/assets/visitor.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/hooks/queries/useWebsites.ts b/src/components/hooks/queries/useWebsites.ts index 5a091123..4f2681a0 100644 --- a/src/components/hooks/queries/useWebsites.ts +++ b/src/components/hooks/queries/useWebsites.ts @@ -1,5 +1,6 @@ -import useApi from './useApi'; -import useFilterQuery from './useFilterQuery'; +import { useApi } from './useApi'; +import { useFilterQuery } from './useFilterQuery'; +import { useLogin } from './useLogin'; import useCache from 'store/cache'; export function useWebsites( @@ -7,17 +8,17 @@ export function useWebsites( params?: { [key: string]: string | number }, ) { const { get } = useApi(); + const { user } = useLogin(); const modified = useCache((state: any) => state?.websites); return useFilterQuery({ queryKey: ['websites', { userId, teamId, modified, ...params }], queryFn: (data: any) => { - return get(teamId ? `/teams/${teamId}/websites` : `/users/${userId}/websites`, { + return get(teamId ? `/teams/${teamId}/websites` : `/users/${userId || user.id}/websites`, { ...data, ...params, }); }, - enabled: !!(userId || teamId), }); } diff --git a/src/components/input/ProfileButton.tsx b/src/components/input/ProfileButton.tsx index 11d95a7b..ec0deb3b 100644 --- a/src/components/input/ProfileButton.tsx +++ b/src/components/input/ProfileButton.tsx @@ -1,3 +1,4 @@ +import { Key } from 'react'; import { Icon, Button, PopupTrigger, Popup, Menu, Item, Text } from 'react-basics'; import { useRouter } from 'next/navigation'; import Icons from 'components/icons'; @@ -6,6 +7,7 @@ import { useLogin } from 'components/hooks'; import { useLocale } from 'components/hooks'; import { CURRENT_VERSION } from 'lib/constants'; import styles from './ProfileButton.module.css'; +import Avatar from 'components/common/Avatar'; export function ProfileButton() { const { formatMessage, labels } = useMessages(); @@ -14,13 +16,14 @@ export function ProfileButton() { const { dir } = useLocale(); const cloudMode = Boolean(process.env.cloudMode); - const handleSelect = key => { + const handleSelect = (key: Key, close: () => void) => { if (key === 'profile') { router.push('/settings/profile'); } if (key === 'logout') { router.push('/logout'); } + close(); }; return ( @@ -31,26 +34,31 @@ export function ProfileButton() { - - - {user.username} - - - - - - {formatMessage(labels.profile)} - - {!cloudMode && ( - - - + {(close: () => void) => ( + handleSelect(key, close)} className={styles.menu}> + + + - {formatMessage(labels.logout)} + {user.username} - )} -
{`v${CURRENT_VERSION}`}
- + + + + + {formatMessage(labels.profile)} + + {!cloudMode && ( + + + + + {formatMessage(labels.logout)} + + )} +
{`v${CURRENT_VERSION}`}
+ + )} );