Updates to team components.

This commit is contained in:
Mike Cao 2024-02-04 18:03:26 -08:00
parent 102f5b78b1
commit dbb3801e66
28 changed files with 173 additions and 159 deletions

View File

@ -8,14 +8,14 @@ import LanguageButton from 'components/input/LanguageButton';
import ProfileButton from 'components/input/ProfileButton';
import TeamsButton from 'components/input/TeamsButton';
import Icons from 'components/icons';
import { useLogin, useMessages, useNavigation, useTeamContext } from 'components/hooks';
import { useLogin, useMessages, useNavigation, useTeamUrl } from 'components/hooks';
import styles from './NavBar.module.css';
export function NavBar() {
const { user } = useLogin();
const { formatMessage, labels } = useMessages();
const { pathname } = useNavigation();
const { teamId, renderTeamUrl } = useTeamContext();
const { teamId, renderTeamUrl } = useTeamUrl();
const cloudMode = Boolean(process.env.cloudMode);

View File

@ -1,18 +1,18 @@
'use client';
import { Button, Icon, Icons, Loading, Text } from 'react-basics';
import Link from 'next/link';
import { Icon, Icons, Loading, Text } from 'react-basics';
import PageHeader from 'components/layout/PageHeader';
import Pager from 'components/common/Pager';
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 { useMessages, useLocale, useTeamContext, useWebsites } from 'components/hooks';
import { useMessages, useLocale, useTeamUrl, useWebsites } from 'components/hooks';
import useDashboard from 'store/dashboard';
import LinkButton from 'components/common/LinkButton';
export function Dashboard() {
const { formatMessage, labels, messages } = useMessages();
const { teamId, renderTeamUrl } = useTeamContext();
const { teamId, renderTeamUrl } = useTeamUrl();
const { showCharts, editing } = useDashboard();
const { dir } = useLocale();
const pageSize = 10;
@ -36,14 +36,12 @@ export function Dashboard() {
</PageHeader>
{!hasData && (
<EmptyPlaceholder message={formatMessage(messages.noWebsitesConfigured)}>
<Link href={renderTeamUrl('/settings/websites')}>
<Button>
<LinkButton href={renderTeamUrl('/settings/websites')}>
<Icon rotate={dir === 'rtl' ? 180 : 0}>
<Icons.ArrowRight />
</Icon>
<Text>{formatMessage(messages.goToSettings)}</Text>
</Button>
</Link>
</LinkButton>
</EmptyPlaceholder>
)}
{hasData && (

View File

@ -1,12 +1,12 @@
'use client';
import PageHeader from 'components/layout/PageHeader';
import { Icon, Icons, Text } from 'react-basics';
import { useMessages, useTeamContext } from 'components/hooks';
import { useMessages, useTeamUrl } from 'components/hooks';
import LinkButton from 'components/common/LinkButton';
export function ReportsHeader() {
const { formatMessage, labels } = useMessages();
const { renderTeamUrl } = useTeamContext();
const { renderTeamUrl } = useTeamUrl();
return (
<PageHeader title={formatMessage(labels.reports)}>

View File

@ -1,7 +1,7 @@
'use client';
import { GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
import LinkButton from 'components/common/LinkButton';
import { useMessages, useLogin, useTeamContext } from 'components/hooks';
import { useMessages, useLogin, useTeamUrl } from 'components/hooks';
import { REPORT_TYPES } from 'lib/constants';
import ReportDeleteButton from './ReportDeleteButton';
@ -9,7 +9,7 @@ export function ReportsTable({ data = [], showDomain }: { data: any[]; showDomai
const { formatMessage, labels } = useMessages();
const { user } = useLogin();
const breakpoint = useBreakpoint();
const { renderTeamUrl } = useTeamContext();
const { renderTeamUrl } = useTeamUrl();
return (
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>

View File

@ -4,7 +4,7 @@ import { FormRow } from 'react-basics';
import { parseDateRange } from 'lib/date';
import DateFilter from 'components/input/DateFilter';
import WebsiteSelect from 'components/input/WebsiteSelect';
import { useMessages, useTeamContext } from 'components/hooks';
import { useMessages, useTeamUrl } from 'components/hooks';
import { ReportContext } from './Report';
export interface BaseParametersProps {
@ -22,7 +22,7 @@ export function BaseParameters({
}: BaseParametersProps) {
const { report, updateReport } = useContext(ReportContext);
const { formatMessage, labels } = useMessages();
const { teamId } = useTeamContext();
const { teamId } = useTeamUrl();
const { parameters } = report || {};
const { websiteId, dateRange } = parameters || {};

View File

@ -1,7 +1,7 @@
'use client';
import { useContext } from 'react';
import { Icon, LoadingButton, InlineEditField, useToasts } from 'react-basics';
import { useMessages, useApi, useNavigation, useTeamContext } from 'components/hooks';
import { useMessages, useApi, useNavigation, useTeamUrl } from 'components/hooks';
import { ReportContext } from './Report';
import styles from './ReportHeader.module.css';
import { REPORT_TYPES } from 'lib/constants';
@ -11,7 +11,7 @@ export function ReportHeader({ icon }) {
const { formatMessage, labels, messages } = useMessages();
const { showToast } = useToasts();
const { router } = useNavigation();
const { renderTeamUrl } = useTeamContext();
const { renderTeamUrl } = useTeamUrl();
const { post, useMutation } = useApi();
const { mutate: create, isPending: isCreating } = useMutation({

View File

@ -6,7 +6,7 @@ import Funnel from 'assets/funnel.svg';
import Lightbulb from 'assets/lightbulb.svg';
import Magnet from 'assets/magnet.svg';
import styles from './ReportTemplates.module.css';
import { useMessages, useTeamContext } from 'components/hooks';
import { useMessages, useTeamUrl } from 'components/hooks';
function ReportItem({ title, description, url, icon }) {
const { formatMessage, labels } = useMessages();
@ -34,7 +34,7 @@ function ReportItem({ title, description, url, icon }) {
export function ReportTemplates({ showHeader = true }: { showHeader?: boolean }) {
const { formatMessage, labels } = useMessages();
const { renderTeamUrl } = useTeamContext();
const { renderTeamUrl } = useTeamUrl();
const reports = [
{

View File

@ -1,6 +1,6 @@
'use client';
import { usePathname } from 'next/navigation';
import { useLogin, useMessages, useTeamContext } from 'components/hooks';
import { useLogin, useMessages, useTeamUrl } from 'components/hooks';
import SideNav from 'components/layout/SideNav';
import styles from './layout.module.css';
@ -9,7 +9,7 @@ export default function SettingsLayout({ children }) {
const pathname = usePathname();
const { formatMessage, labels } = useMessages();
const cloudMode = !!process.env.cloudMode;
const { teamId, renderTeamUrl } = useTeamContext();
const { teamId, renderTeamUrl } = useTeamUrl();
const items = [
teamId && {

View File

@ -1,20 +1,10 @@
'use client';
import DataTable from 'components/common/DataTable';
import TeamsTable from 'app/(main)/settings/teams/TeamsTable';
import { useApi, useFilterQuery } from 'components/hooks';
import useCache from 'store/cache';
import { useTeams } from 'components/hooks';
export function TeamsDataTable() {
const { get } = useApi();
const modified = useCache((state: any) => state?.teams);
const queryResult = useFilterQuery({
queryKey: ['teams', { modified }],
queryFn: (params: any) => {
return get(`/teams`, {
...params,
});
},
});
const queryResult = useTeams();
return (
<DataTable queryResult={queryResult}>

View File

@ -1,9 +1,9 @@
'use client';
import { Button, GridColumn, GridTable, Icon, Text, useBreakpoint } from 'react-basics';
import Link from 'next/link';
import { GridColumn, GridTable, Icon, Text, useBreakpoint } from 'react-basics';
import { useMessages, useLogin } from 'components/hooks';
import Icons from 'components/icons';
import { ROLES } from 'lib/constants';
import LinkButton from 'components/common/LinkButton';
export function TeamsTable({ data = [] }: { data: any[] }) {
const { formatMessage, labels } = useMessages();
@ -31,23 +31,19 @@ export function TeamsTable({ data = [] }: { data: any[] }) {
return (
<>
{isOwner && (
<Link href={`/settings/teams/${id}`}>
<Button>
<LinkButton href={`/settings/teams/${id}`}>
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Button>
</Link>
</LinkButton>
)}
<Link href={`/teams/${id}`}>
<Button>
<LinkButton href={`/teams/${id}`}>
<Icon>
<Icons.Change />
</Icon>
<Text>{formatMessage(labels.switch)}</Text>
</Button>
</Link>
</LinkButton>
</>
);
}}

View File

@ -1,7 +1,7 @@
'use client';
import DataTable from 'components/common/DataTable';
import TeamMembersTable from './TeamMembersTable';
import useTeamMembers from 'components/hooks/queries/useTeamMembers';
import { useTeamMembers } from 'components/hooks';
export function TeamMembers({ teamId, allowEdit }: { teamId: string; allowEdit: boolean }) {
const queryResult = useTeamMembers(teamId);

View File

@ -1,8 +1,16 @@
'use client';
import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
import DataTable from 'components/common/DataTable';
import { useTeamWebsites } from 'components/hooks';
import TeamWebsitesTable from './TeamWebsitesTable';
export function TeamWebsites({ teamId, allowEdit }: { teamId: string; allowEdit: boolean }) {
return <WebsitesDataTable teamId={teamId} allowEdit={allowEdit} />;
const queryResult = useTeamWebsites(teamId);
return (
<DataTable queryResult={queryResult}>
{({ data }) => <TeamWebsitesTable data={data} teamId={teamId} allowEdit={allowEdit} />}
</DataTable>
);
}
export default TeamWebsites;

View File

@ -1,16 +1,20 @@
'use client';
import Link from 'next/link';
import { Button, GridColumn, GridTable, Icon, Text } from 'react-basics';
import { useMessages } from 'components/hooks';
import { GridColumn, GridTable, Icon, Text } from 'react-basics';
import { useLogin, useMessages } from 'components/hooks';
import Icons from 'components/icons';
import LinkButton from 'components/common/LinkButton';
export function TeamWebsitesTable({
teamId,
data = [],
allowEdit,
}: {
teamId: string;
data: any[];
readOnly: boolean;
onRemove: () => void;
allowEdit?: boolean;
}) {
const { user } = useLogin();
const { formatMessage, labels } = useMessages();
return (
<GridTable data={data}>
@ -20,14 +24,22 @@ export function TeamWebsitesTable({
{row => {
const { websiteId } = row;
return (
<Link href={`/websites/${websiteId}`}>
<Button>
<>
{allowEdit && (teamId || user?.isAdmin) && (
<LinkButton href={`/team/${teamId}/settings/websites/${websiteId}`}>
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</LinkButton>
)}
<LinkButton href={`/teams/${teamId}/websites/${websiteId}`}>
<Icon>
<Icons.Change />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</Button>
</Link>
</LinkButton>
</>
);
}}
</GridColumn>

View File

@ -1,10 +1,10 @@
'use client';
import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
import { Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
import { formatDistance } from 'date-fns';
import Link from 'next/link';
import { ROLES } from 'lib/constants';
import { useMessages, useLocale } from 'components/hooks';
import UserDeleteButton from './UserDeleteButton';
import LinkButton from 'components/common/LinkButton';
export function UsersTable({
data = [],
@ -45,14 +45,12 @@ export function UsersTable({
return (
<>
<UserDeleteButton userId={id} username={username} />
<Link href={`/settings/users/${id}`}>
<Button>
<LinkButton href={`/settings/users/${id}`}>
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Button>
</Link>
</LinkButton>
</>
);
}}

View File

@ -4,16 +4,16 @@ import { Item, Tabs, Button, Text, Icon, Loading } from 'react-basics';
import Link from 'next/link';
import Icons from 'components/icons';
import PageHeader from 'components/layout/PageHeader';
import WebsiteContext from 'app/(main)/websites/[websiteId]/WebsiteContext';
import WebsiteEditForm from './[websiteId]/WebsiteEditForm';
import WebsiteData from './[websiteId]/WebsiteData';
import TrackingCode from './[websiteId]/TrackingCode';
import ShareUrl from './[websiteId]/ShareUrl';
import { useWebsite, useMessages } from 'components/hooks';
import WebsiteContext from '../../websites/[websiteId]/WebsiteContext';
export function WebsiteSettings({ websiteId, openExternal = false }) {
const { formatMessage, labels } = useMessages();
const { data: website, isLoading, refetch } = useWebsite(websiteId, { gcTime: 0 });
const { data: website, isLoading, refetch } = useWebsite(websiteId);
const [tab, setTab] = useState<Key>('details');
const handleSave = () => {

View File

@ -1,8 +1,8 @@
'use client';
import { ReactNode } from 'react';
import Link from 'next/link';
import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
import { useMessages, useLogin, useTeamContext } from 'components/hooks';
import { Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
import { useMessages, useLogin, useTeamUrl } from 'components/hooks';
import LinkButton from 'components/common/LinkButton';
export interface WebsitesTableProps {
data: any[];
@ -24,7 +24,7 @@ export function WebsitesTable({
const { formatMessage, labels } = useMessages();
const { user } = useLogin();
const breakpoint = useBreakpoint();
const { renderTeamUrl } = useTeamContext();
const { renderTeamUrl } = useTeamUrl();
return (
<GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
@ -33,29 +33,25 @@ export function WebsitesTable({
{showActions && (
<GridColumn name="action" label=" " alignment="end">
{row => {
const { id } = row;
const { id: websiteId } = row;
return (
<>
{allowEdit && (teamId || user.isAdmin) && (
<Link href={renderTeamUrl(`/settings/websites/${id}`)}>
<Button>
<LinkButton href={renderTeamUrl(`/settings/websites/${websiteId}`)}>
<Icon>
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Button>
</Link>
</LinkButton>
)}
{allowView && (
<Link href={renderTeamUrl(renderTeamUrl(`/websites/${id}`))}>
<Button>
<LinkButton href={renderTeamUrl(renderTeamUrl(`/websites/${websiteId}`))}>
<Icon>
<Icons.ArrowRight />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</Button>
</Link>
</LinkButton>
)}
</>
);

View File

@ -1,10 +1,10 @@
'use client';
import { useTeam, useTeamContext } from 'components/hooks';
import { useTeam, useTeamUrl } from 'components/hooks';
import { Loading } from 'react-basics';
import notFound from 'app/not-found';
import TeamContext from './TeamContext';
export function Team({ children }) {
const { teamId } = useTeamContext();
const { teamId } = useTeamUrl();
const { data: team, isLoading } = useTeam(teamId);
if (isLoading) {
@ -12,10 +12,10 @@ export function Team({ children }) {
}
if (!team) {
return notFound();
return null;
}
return children;
return <TeamContext.Provider value={team}>{children}</TeamContext.Provider>;
}
export default Team;

View File

@ -0,0 +1,6 @@
'use client';
import { createContext } from 'react';
export const TeamContext = createContext(null);
export default TeamContext;

View File

@ -1,11 +1,11 @@
'use client';
import { GridTable, GridColumn, Button, Icon, Text } from 'react-basics';
import { GridTable, GridColumn, Icon, Text } from 'react-basics';
import { useMessages, useNavigation } from 'components/hooks';
import Link from 'next/link';
import Icons from 'components/icons';
import PageHeader from 'components/layout/PageHeader';
import Empty from 'components/common/Empty';
import { DATA_TYPES } from 'lib/constants';
import LinkButton from 'components/common/LinkButton';
export function EventDataValueTable({ data = [], event }: { data: any[]; event: string }) {
const { formatMessage, labels } = useMessages();
@ -14,14 +14,12 @@ export function EventDataValueTable({ data = [], event }: { data: any[]; event:
const Title = () => {
return (
<>
<Link href={renderUrl({ event: undefined })}>
<Button>
<LinkButton href={renderUrl({ event: undefined })}>
<Icon rotate={180}>
<Icons.ArrowRight />
</Icon>
<Text>{formatMessage(labels.back)}</Text>
</Button>
</Link>
</LinkButton>
<Text>{event}</Text>
</>
);

View File

@ -6,7 +6,9 @@ export * from './queries/useReport';
export * from './queries/useReports';
export * from './queries/useShareToken';
export * from './queries/useTeam';
export * from './queries/useTeams';
export * from './queries/useTeamWebsites';
export * from './queries/useTeamMembers';
export * from './queries/useUser';
export * from './queries/useUsers';
export * from './queries/useWebsite';
@ -25,6 +27,6 @@ export * from './useLocale';
export * from './useMessages';
export * from './useNavigation';
export * from './useSticky';
export * from './useTeamContext';
export * from './useTeamUrl';
export * from './useTheme';
export * from './useTimezone';

View File

@ -1,10 +1,10 @@
'use client';
import useApi from './useApi';
import useFilterQuery from './useFilterQuery';
import useCache from 'store/cache';
import useModified from 'store/modified';
export function useReports({ websiteId, teamId }: { websiteId?: string; teamId?: string }) {
const modified = useCache((state: any) => state?.reports);
const modified = useModified((state: any) => state?.reports);
const { get, del, useMutation } = useApi();
const queryResult = useFilterQuery({
queryKey: ['reports', { websiteId, teamId, modified }],

View File

@ -0,0 +1,18 @@
'use client';
import useApi from './useApi';
import useFilterQuery from './useFilterQuery';
import { useLogin } from 'components/hooks';
export function useTeams(userId?: string) {
const { get } = useApi();
const { user } = useLogin();
return useFilterQuery({
queryKey: ['teams', { userId: userId || user?.id }],
queryFn: (params: any) => {
return get(`/teams`, params);
},
});
}
export default useTeams;

View File

@ -1,11 +1,11 @@
'use client';
import useApi from './useApi';
import useFilterQuery from './useFilterQuery';
import useCache from 'store/cache';
import useModified from 'store/modified';
export function useUsers() {
const { get } = useApi();
const modified = useCache((state: any) => state?.users);
const modified = useModified((state: any) => state?.users);
return useFilterQuery({
queryKey: ['users', { modified }],

View File

@ -3,8 +3,9 @@ import useApi from './useApi';
export function useWebsite(websiteId: string, options?: { [key: string]: any }) {
const { get, useQuery } = useApi();
return useQuery({
queryKey: ['websites', websiteId],
queryKey: ['websites', { websiteId }],
queryFn: () => get(`/websites/${websiteId}`),
enabled: !!websiteId,
...options,

View File

@ -2,7 +2,9 @@
import { useApi } from './useApi';
import { useFilterQuery } from './useFilterQuery';
import { useLogin } from './useLogin';
import useCache from 'store/cache';
import useModified from 'store/modified';
const selector = (state: any) => state?.websites;
export function useWebsites(
{ userId, teamId }: { userId?: string; teamId?: string },
@ -10,7 +12,7 @@ export function useWebsites(
) {
const { get } = useApi();
const { user } = useLogin();
const modified = useCache((state: any) => state?.websites);
const modified = useModified(selector);
return useFilterQuery({
queryKey: ['websites', { userId, teamId, modified, ...params }],

View File

@ -1,7 +1,7 @@
'use client';
import { usePathname } from 'next/navigation';
export function useTeamContext(): {
export function useTeamUrl(): {
teamId?: string;
renderTeamUrl: (url: string) => string;
} {
@ -15,4 +15,4 @@ export function useTeamContext(): {
return { teamId, renderTeamUrl };
}
export default useTeamContext;
export default useTeamUrl;

View File

@ -1,33 +1,13 @@
export * from 'components/hooks/queries/useApi';
export * from 'components/hooks/queries/useConfig';
export * from 'components/hooks/queries/useFilterQuery';
export * from 'components/hooks/queries/useLogin';
export * from 'components/hooks/queries/useShareToken';
export * from 'components/hooks/queries/useUser';
export * from 'components/hooks/queries/useWebsite';
export * from 'components/hooks';
export * from 'components/hooks/useDateRange';
export * from 'components/hooks/useDocumentClick';
export * from 'components/hooks/useEscapeKey';
export * from 'components/hooks/useFilters';
export * from 'components/hooks/useForceUpdate';
export * from 'components/hooks/useFormat';
export * from 'components/hooks/useLocale';
export * from 'components/hooks/useMessages';
export * from 'components/hooks/useNavigation';
export * from 'components/hooks/useSticky';
export * from 'components/hooks/useTheme';
export * from 'components/hooks/useTeamContext';
export * from 'components/hooks/useTimezone';
export * from './app/(main)/settings/teams/[teamId]/TeamEditForm';
export * from './app/(main)/settings/teams/[teamId]/TeamMemberRemoveButton';
export * from './app/(main)/settings/teams/[teamId]/TeamMembers';
export * from './app/(main)/settings/teams/[teamId]/TeamMembersTable';
export * from './app/(main)/settings/teams/[teamId]/TeamSettings';
export * from './app/(main)/settings/teams/[teamId]/TeamWebsiteRemoveButton';
export * from './app/(main)/settings/teams/[teamId]/TeamWebsites';
export * from './app/(main)/settings/teams/[teamId]/TeamWebsitesTable';
export * from 'app/(main)/settings/teams/[teamId]/TeamEditForm';
export * from 'app/(main)/settings/teams/[teamId]/TeamMemberRemoveButton';
export * from 'app/(main)/settings/teams/[teamId]/TeamMembers';
export * from 'app/(main)/settings/teams/[teamId]/TeamMembersTable';
export * from 'app/(main)/settings/teams/[teamId]/TeamSettings';
export * from 'app/(main)/settings/teams/[teamId]/TeamWebsiteRemoveButton';
export * from 'app/(main)/settings/teams/[teamId]/TeamWebsites';
export * from 'app/(main)/settings/teams/[teamId]/TeamWebsitesTable';
export * from 'app/(main)/settings/teams/TeamAddForm';
export * from 'app/(main)/settings/teams/TeamDeleteForm';
export * from 'app/(main)/settings/teams/TeamsHeader';
@ -37,11 +17,11 @@ export * from 'app/(main)/settings/teams/TeamsDataTable';
export * from 'app/(main)/settings/teams/TeamsTable';
export * from 'app/(main)/settings/teams/WebsiteTags';
export * from './app/(main)/settings/websites/[websiteId]/ShareUrl';
export * from './app/(main)/settings/websites/[websiteId]/TrackingCode';
export * from './app/(main)/settings/websites/[websiteId]/WebsiteDeleteForm';
export * from './app/(main)/settings/websites/[websiteId]/WebsiteEditForm';
export * from './app/(main)/settings/websites/[websiteId]/WebsiteResetForm';
export * from 'app/(main)/settings/websites/[websiteId]/ShareUrl';
export * from 'app/(main)/settings/websites/[websiteId]/TrackingCode';
export * from 'app/(main)/settings/websites/[websiteId]/WebsiteDeleteForm';
export * from 'app/(main)/settings/websites/[websiteId]/WebsiteEditForm';
export * from 'app/(main)/settings/websites/[websiteId]/WebsiteResetForm';
export * from 'app/(main)/settings/websites/WebsiteAddForm';
export * from 'app/(main)/settings/websites/WebsitesHeader';

9
src/store/modified.ts Normal file
View File

@ -0,0 +1,9 @@
import { create } from 'zustand';
const store = create(() => ({}));
export function touch(key: string) {
store.setState({ [key]: Date.now() });
}
export default store;