Refactor of team websites.

2026-02-06 21:57:16 +01:00 · 2024-01-18 16:46:40 -08:00 · 2024-01-18 16:46:40 -08:00 · dc3818baaa
commit dc3818baaa
parent 2552e1d495
22 changed files with 61 additions and 208 deletions
--- a/src/app/(main)/dashboard/Dashboard.tsx
+++ b/src/app/(main)/dashboard/Dashboard.tsx
@ -63,7 +63,7 @@ export function Dashboard() {
          {editing && <DashboardEdit />}
          {!editing && (
            <>
-              <WebsiteChartList websites={data} showCharts={showCharts} limit={pageSize} />
+              <WebsiteChartList websites={data as any} showCharts={showCharts} limit={pageSize} />
              <Pager
                page={page}
                pageSize={pageSize}
--- a/src/app/(main)/dashboard/DashboardEdit.tsx
+++ b/src/app/(main)/dashboard/DashboardEdit.tsx
@ -19,7 +19,7 @@ export function DashboardEdit() {
  const { get, useQuery } = useApi();
  const { data: result } = useQuery({
    queryKey: ['websites'],
-    queryFn: () => get('/websites', { includeTeams: 1 }),
+    queryFn: () => get('/websites'),
  });
  const { data: websites } = result || {};

--- a/src/app/(main)/reports/[id]/FieldFilterForm.tsx
+++ b/src/app/(main)/reports/[id]/FieldFilterForm.tsx
@ -41,7 +41,7 @@ export default function FieldFilterForm({
      format(values[0]);
    }
    return formatted;
-  }, [values]);
+  }, [formatValue, locale, name, values]);

  const renderFilterValue = value => {
    return filters.find(f => f.value === value)?.label;
@ -65,7 +65,7 @@ export default function FieldFilterForm({
              items={filters}
              value={filter}
              renderValue={renderFilterValue}
-              onSelect={(key: any) => setFilter(key)}
+              onChange={(key: any) => setFilter(key)}
            >
              {({ value, label }) => {
                return <Item key={value}>{label}</Item>;
@ -78,7 +78,7 @@ export default function FieldFilterForm({
            items={values}
            value={value}
            renderValue={renderValue}
-            onSelect={(key: any) => setValue(key)}
+            onChange={(key: any) => setValue(key)}
            style={{
              minWidth: '250px',
            }}
--- a/src/app/(main)/settings/profile/LanguageSetting.tsx
+++ b/src/app/(main)/settings/profile/LanguageSetting.tsx
@ -29,7 +29,7 @@ export function LanguageSetting() {
        items={options}
        value={locale}
        renderValue={renderValue}
-        onSelect={saveLocale}
+        onChange={saveLocale}
        allowSearch={true}
        onSearch={setSearch}
        menuProps={{ className: styles.menu }}
--- a/src/app/(main)/settings/profile/TimezoneSetting.tsx
+++ b/src/app/(main)/settings/profile/TimezoneSetting.tsx
@ -21,7 +21,7 @@ export function TimezoneSetting() {
      <Dropdown
        items={options}
        value={timezone}
-        onSelect={saveTimezone}
+        onChange={saveTimezone}
        menuProps={{ className: styles.menu }}
        allowSearch={true}
        onSearch={setSearch}
--- a/src/app/(main)/settings/teams/TeamDeleteButton.tsx
+++ b/src/app/(main)/settings/teams/TeamDeleteButton.tsx
@ -1,33 +0,0 @@
-import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
-import TeamDeleteForm from './TeamDeleteForm';
-
-export function TeamDeleteButton({
-  teamId,
-  teamName,
-  onDelete,
-}: {
-  teamId: string;
-  teamName: string;
-  onDelete?: () => void;
-}) {
-  const { formatMessage, labels } = useMessages();
-
-  return (
-    <ModalTrigger>
-      <Button>
-        <Icon>
-          <Icons.Trash />
-        </Icon>
-        <Text>{formatMessage(labels.delete)}</Text>
-      </Button>
-      <Modal title={formatMessage(labels.deleteTeam)}>
-        {(close: any) => (
-          <TeamDeleteForm teamId={teamId} teamName={teamName} onSave={onDelete} onClose={close} />
-        )}
-      </Modal>
-    </ModalTrigger>
-  );
-}
-
-export default TeamDeleteButton;
--- a/src/app/(main)/settings/teams/TeamsTable.tsx
+++ b/src/app/(main)/settings/teams/TeamsTable.tsx
@ -4,7 +4,6 @@ import useUser from 'components/hooks/useUser';
 import { ROLES } from 'lib/constants';
 import Link from 'next/link';
 import { Button, GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
-import TeamDeleteButton from './TeamDeleteButton';
 import TeamLeaveButton from './TeamLeaveButton';

 export function TeamsTable({ data = [] }: { data: any[] }) {
@ -26,13 +25,10 @@ export function TeamsTable({ data = [] }: { data: any[] }) {

          return (
            <>
-              {isOwner && <TeamDeleteButton teamId={id} teamName={name} />}
              {!isOwner && <TeamLeaveButton teamId={id} teamName={name} />}
              <Link href={`/settings/teams/${id}`}>
                <Button>
-                  <Icon>
-                    <Icons.Edit />
-                  </Icon>
+                  <Icon>{isOwner ? <Icons.Edit /> : <Icons.ArrowRight />}</Icon>
                  <Text>{formatMessage(isOwner ? labels.edit : labels.view)}</Text>
                </Button>
              </Link>
--- a/src/app/(main)/settings/teams/[id]/TeamData.tsx
+++ b/src/app/(main)/settings/teams/[id]/TeamData.tsx
@ -0,0 +1,27 @@
+import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
+import useMessages from 'components/hooks/useMessages';
+import TeamDeleteForm from '../TeamDeleteForm';
+
+export function TeamData({ teamId }: { teamId: string; onSave?: (value: string) => void }) {
+  const { formatMessage, labels, messages } = useMessages();
+
+  const handleSave = () => {};
+
+  return (
+    <ActionForm
+      label={formatMessage(labels.deleteTeam)}
+      description={formatMessage(messages.deleteTeamWarning)}
+    >
+      <ModalTrigger>
+        <Button variant="danger">{formatMessage(labels.delete)}</Button>
+        <Modal title={formatMessage(labels.deleteTeam)}>
+          {(close: () => void) => (
+            <TeamDeleteForm teamId={teamId} teamName={''} onSave={handleSave} onClose={close} />
+          )}
+        </Modal>
+      </ModalTrigger>
+    </ActionForm>
+  );
+}
+
+export default TeamData;
--- a/src/app/(main)/settings/teams/[id]/TeamSettings.tsx
+++ b/src/app/(main)/settings/teams/[id]/TeamSettings.tsx
@ -9,6 +9,7 @@ import useMessages from 'components/hooks/useMessages';
 import TeamEditForm from './TeamEditForm';
 import TeamMembers from './TeamMembers';
 import TeamWebsites from './TeamWebsites';
+import TeamData from './TeamData';

 export function TeamSettings({ teamId }: { teamId: string }) {
  const { formatMessage, labels, messages } = useMessages();
@ -52,12 +53,14 @@ export function TeamSettings({ teamId }: { teamId: string }) {
        <Item key="details">{formatMessage(labels.details)}</Item>
        <Item key="members">{formatMessage(labels.members)}</Item>
        <Item key="websites">{formatMessage(labels.websites)}</Item>
+        <Item key="data">{formatMessage(labels.data)}</Item>
      </Tabs>
      {tab === 'details' && (
        <TeamEditForm teamId={teamId} data={values} onSave={handleSave} readOnly={!canEdit} />
      )}
      {tab === 'members' && <TeamMembers teamId={teamId} readOnly={!canEdit} />}
      {tab === 'websites' && <TeamWebsites teamId={teamId} readOnly={!canEdit} />}
+      {canEdit && tab === 'data' && <TeamData teamId={teamId} />}
    </Flexbox>
  );
 }
--- a/src/app/(main)/settings/teams/[id]/TeamWebsites.tsx
+++ b/src/app/(main)/settings/teams/[id]/TeamWebsites.tsx
@ -1,15 +1,11 @@
-import { ActionForm, Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
 import TeamWebsitesTable from './TeamWebsitesTable';
-import TeamWebsiteAddForm from './TeamWebsiteAddForm';
 import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 import useFilterQuery from 'components/hooks/useFilterQuery';
 import DataTable from 'components/common/DataTable';
 import useCache from 'store/cache';

 export function TeamWebsites({ teamId, readOnly }: { teamId: string; readOnly: boolean }) {
-  const { formatMessage, labels, messages } = useMessages();
  const { user } = useUser();
  const { get } = useApi();
  const modified = useCache(state => state?.['team:websites']);
@ -28,26 +24,9 @@ export function TeamWebsites({ teamId, readOnly }: { teamId: string; readOnly: b
  };

  return (
-    <>
-      <ActionForm description={formatMessage(messages.teamWebsitesInfo)}>
-        <ModalTrigger>
-          <Button variant="primary">
-            <Icon>
-              <Icons.Plus />
-            </Icon>
-            <Text>{formatMessage(labels.addWebsite)}</Text>
-          </Button>
-          <Modal title={formatMessage(labels.addWebsite)}>
-            {close => <TeamWebsiteAddForm teamId={teamId} onSave={handleChange} onClose={close} />}
-          </Modal>
-        </ModalTrigger>
-      </ActionForm>
-      <DataTable queryResult={queryResult}>
-        {({ data }) => (
-          <TeamWebsitesTable data={data} onRemove={handleChange} readOnly={readOnly} />
-        )}
-      </DataTable>
-    </>
+    <DataTable queryResult={queryResult}>
+      {({ data }) => <TeamWebsitesTable data={data} onRemove={handleChange} readOnly={readOnly} />}
+    </DataTable>
  );
 }

--- a/src/app/(main)/settings/websites/WebsitesDataTable.tsx
+++ b/src/app/(main)/settings/websites/WebsitesDataTable.tsx
@ -12,9 +12,6 @@ export interface WebsitesDataTableProps {
  allowEdit?: boolean;
  allowView?: boolean;
  showActions?: boolean;
-  showTeam?: boolean;
-  includeTeams?: boolean;
-  onlyTeams?: boolean;
  children?: ReactNode;
 }

@ -23,9 +20,6 @@ export function WebsitesDataTable({
  allowEdit = true,
  allowView = true,
  showActions = true,
-  showTeam,
-  includeTeams,
-  onlyTeams,
  children,
 }: WebsitesDataTableProps) {
  const { get } = useApi();
@ -33,11 +27,9 @@ export function WebsitesDataTable({
  const { websitesUrl } = useContext(SettingsContext);

  const queryResult = useFilterQuery({
-    queryKey: ['websites', { includeTeams, onlyTeams, modified }],
+    queryKey: ['websites', { modified }],
    queryFn: (params: any) => {
      return get(websitesUrl, {
-        includeTeams,
-        onlyTeams,
        ...params,
      });
    },
@ -49,7 +41,6 @@ export function WebsitesDataTable({
      {({ data }) => (
        <WebsitesTable
          data={data}
-          showTeam={showTeam}
          showActions={showActions}
          allowEdit={allowEdit}
          allowView={allowView}
--- a/src/app/(main)/settings/websites/WebsitesTable.tsx
+++ b/src/app/(main)/settings/websites/WebsitesTable.tsx
@ -7,7 +7,6 @@ import SettingsContext from '../SettingsContext';

 export interface WebsitesTableProps {
  data: any[];
-  showTeam?: boolean;
  showActions?: boolean;
  allowEdit?: boolean;
  allowView?: boolean;
@ -16,7 +15,6 @@ export interface WebsitesTableProps {

 export function WebsitesTable({
  data = [],
-  showTeam,
  showActions,
  allowEdit,
  allowView,
@ -31,16 +29,6 @@ export function WebsitesTable({
    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
      <GridColumn name="name" label={formatMessage(labels.name)} />
      <GridColumn name="domain" label={formatMessage(labels.domain)} />
-      {showTeam && (
-        <GridColumn name="teamName" label={formatMessage(labels.teamName)}>
-          {row => row.teamWebsite[0]?.team.name}
-        </GridColumn>
-      )}
-      {showTeam && (
-        <GridColumn name="owner" label={formatMessage(labels.owner)}>
-          {row => row.user.username}
-        </GridColumn>
-      )}
      {showActions && (
        <GridColumn name="action" label=" " alignment="end">
          {row => {
@ -51,7 +39,7 @@ export function WebsitesTable({

            return (
              <>
-                {allowEdit && (!showTeam || ownerId === user.id) && (
+                {allowEdit && ownerId === user.id && (
                  <Link href={`${settingsPath}/${id}`}>
                    <Button>
                      <Icon>
--- a/src/app/(main)/settings/websites/[id]/WebsiteDeleteForm.tsx
+++ b/src/app/(main)/settings/websites/[id]/WebsiteDeleteForm.tsx
@ -43,7 +43,7 @@ export function WebsiteDeleteForm({
    <Form onSubmit={handleSubmit} error={error}>
      <p>
        <FormattedMessage
-          {...messages.deleteWebsite}
+          {...messages.actionConfirmation}
          values={{ confirmation: <b>{CONFIRM_VALUE}</b> }}
        />
      </p>
--- a/src/app/(main)/settings/websites/[id]/WebsiteResetForm.tsx
+++ b/src/app/(main)/settings/websites/[id]/WebsiteResetForm.tsx
@ -43,7 +43,7 @@ export function WebsiteResetForm({
    <Form onSubmit={handleSubmit} error={error}>
      <p>
        <FormattedMessage
-          {...messages.resetWebsite}
+          {...messages.actionConfirmation}
          values={{ confirmation: <b>{CONFIRM_VALUE}</b> }}
        />
      </p>
--- a/src/app/(main)/websites/WebsitesBrowse.tsx
+++ b/src/app/(main)/websites/WebsitesBrowse.tsx
@ -1,37 +1,12 @@
 'use client';
 import WebsitesDataTable from '../settings/websites/WebsitesDataTable';
-import { useMessages, useUser } from 'components/hooks';
-import { useState } from 'react';
-import { Item, Tabs } from 'react-basics';
-
-const TABS = {
-  myWebsites: 'my-websites',
-  teamWebsites: 'team-websites',
-};
+import { useUser } from 'components/hooks';

 export function WebsitesBrowse() {
  const { user } = useUser();
-  const { formatMessage, labels } = useMessages();
-  const [tab, setTab] = useState(TABS.myWebsites);
  const allowEdit = !process.env.cloudMode;

-  return (
-    <>
-      <Tabs selectedKey={tab} onSelect={(tab: any) => setTab(tab)} style={{ marginBottom: 30 }}>
-        <Item key={TABS.myWebsites}>{formatMessage(labels.myWebsites)}</Item>
-        <Item key={TABS.teamWebsites}>{formatMessage(labels.teamWebsites)}</Item>
-      </Tabs>
-      {tab === TABS.myWebsites && <WebsitesDataTable userId={user.id} allowEdit={allowEdit} />}
-      {tab === TABS.teamWebsites && (
-        <WebsitesDataTable
-          userId={user.id}
-          showTeam={true}
-          onlyTeams={true}
-          allowEdit={allowEdit}
-        />
-      )}
-    </>
-  );
+  return <WebsitesDataTable userId={user.id} allowEdit={allowEdit} />;
 }

 export default WebsitesBrowse;
--- a/src/app/(main)/websites/[id]/WebsiteExpandedView.tsx
+++ b/src/app/(main)/websites/[id]/WebsiteExpandedView.tsx
@ -134,7 +134,7 @@ export default function WebsiteExpandedView({
          items={items}
          value={view}
          renderValue={renderValue}
-          onSelect={handleChange}
+          onChange={handleChange}
          alignment="end"
        >
          {({ key, label }) => <Item key={key}>{label}</Item>}