diff --git a/next.config.js b/next.config.js index cf7dce7f..4b773621 100644 --- a/next.config.js +++ b/next.config.js @@ -60,7 +60,7 @@ const redirects = [ { source: '/settings', destination: process.env.CLOUD_MODE - ? `${process.env.CLOUD_URL}/settings/websites` + ? `${process.env.CLOUD_URL}/websites` : '/settings/websites', permanent: true, }, diff --git a/src/app/(main)/reports/ReportDeleteButton.js b/src/app/(main)/reports/ReportDeleteButton.js new file mode 100644 index 00000000..35809a98 --- /dev/null +++ b/src/app/(main)/reports/ReportDeleteButton.js @@ -0,0 +1,42 @@ +import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics'; +import ConfirmDeleteForm from 'components/common/ConfirmDeleteForm'; +import { useApi, useMessages } from 'components/hooks'; +import { setValue } from 'store/cache'; + +export function ReportDeleteButton({ reportId, reportName, onDelete }) { + const { formatMessage, labels } = useMessages(); + const { del, useMutation } = useApi(); + const { mutate } = useMutation(reportId => del(`/reports/${reportId}`)); + + const handleConfirm = close => { + mutate(reportId, { + onSuccess: () => { + setValue('reports', Date.now()); + onDelete?.(); + close(); + }, + }); + }; + + return ( + + + + {close => ( + + )} + + + ); +} + +export default ReportDeleteButton; diff --git a/src/app/(main)/reports/ReportsDataTable.js b/src/app/(main)/reports/ReportsDataTable.js new file mode 100644 index 00000000..fb17d604 --- /dev/null +++ b/src/app/(main)/reports/ReportsDataTable.js @@ -0,0 +1,22 @@ +'use client'; +import { useApi } from 'components/hooks'; +import ReportsTable from './ReportsTable'; +import useFilterQuery from 'components/hooks/useFilterQuery'; +import DataTable from 'components/common/DataTable'; +import useCache from 'store/cache'; + +function useReports() { + const { get } = useApi(); + const modified = useCache(state => state?.reports); + return useFilterQuery(['reports', modified], params => get(`/reports`, params)); +} + +export default function ReportsDataTable() { + const queryResult = useReports(); + + return ( + + {({ data }) => } + + ); +} diff --git a/src/app/(main)/reports/ReportsHeader.js b/src/app/(main)/reports/ReportsHeader.js index 14d8bae2..43cce217 100644 --- a/src/app/(main)/reports/ReportsHeader.js +++ b/src/app/(main)/reports/ReportsHeader.js @@ -1,22 +1,23 @@ 'use client'; import PageHeader from 'components/layout/PageHeader'; -import Link from 'next/link'; import { Button, Icon, Icons, Text } from 'react-basics'; import { useMessages } from 'components/hooks'; +import { useRouter } from 'next/navigation'; export function ReportsHeader() { const { formatMessage, labels } = useMessages(); + const router = useRouter(); + + const handleClick = () => router.push('/reports/create'); return ( - - - + ); } diff --git a/src/app/(main)/reports/ReportsList.js b/src/app/(main)/reports/ReportsList.js deleted file mode 100644 index 44da4fac..00000000 --- a/src/app/(main)/reports/ReportsList.js +++ /dev/null @@ -1,37 +0,0 @@ -'use client'; -import { useApi } from 'components/hooks'; -import ReportsTable from './ReportsTable'; -import useFilterQuery from 'components/hooks/useFilterQuery'; -import DataTable from 'components/common/DataTable'; - -function useReports() { - const { get, del, useMutation } = useApi(); - const { mutate } = useMutation(reportId => del(`/reports/${reportId}`)); - const queryResult = useFilterQuery(['reports'], params => get(`/reports`, params)); - - const deleteReport = id => { - mutate(id, { - onSuccess: () => { - queryResult.refetch(); - }, - }); - }; - - return { queryResult, deleteReport }; -} - -export default function ReportsList() { - const { queryResult, deleteReport } = useReports(); - - const handleDelete = async (id, callback) => { - await deleteReport(id); - await queryResult.refetch(); - callback?.(); - }; - - return ( - - {({ data }) => } - - ); -} diff --git a/src/app/(main)/reports/ReportsTable.js b/src/app/(main)/reports/ReportsTable.js index 4c81faa7..a85b09e3 100644 --- a/src/app/(main)/reports/ReportsTable.js +++ b/src/app/(main)/reports/ReportsTable.js @@ -1,27 +1,14 @@ -import ConfirmDeleteForm from 'components/common/ConfirmDeleteForm'; import LinkButton from 'components/common/LinkButton'; import { useMessages } from 'components/hooks'; import useUser from 'components/hooks/useUser'; -import { - Button, - GridColumn, - GridTable, - Icon, - Icons, - Modal, - ModalTrigger, - Text, -} from 'react-basics'; +import { GridColumn, GridTable, Icon, Icons, Text } from 'react-basics'; import { REPORT_TYPES } from 'lib/constants'; +import ReportDeleteButton from './ReportDeleteButton'; -export function ReportsTable({ data = [], onDelete, showDomain }) { +export function ReportsTable({ data = [], showDomain }) { const { formatMessage, labels } = useMessages(); const { user } = useUser(); - const handleConfirm = (id, callback) => { - onDelete?.(id, callback); - }; - return ( @@ -43,26 +30,15 @@ export function ReportsTable({ data = [], onDelete, showDomain }) { const { id, name, userId, website } = row; return ( <> - {formatMessage(labels.view)} {(user.id === userId || user.id === website?.userId) && ( - - - - {close => ( - - )} - - + )} + + + + + {formatMessage(labels.view)} + ); }} diff --git a/src/app/(main)/reports/BaseParameters.js b/src/app/(main)/reports/[id]/BaseParameters.js similarity index 100% rename from src/app/(main)/reports/BaseParameters.js rename to src/app/(main)/reports/[id]/BaseParameters.js index 44a9da5b..a54ef4f3 100644 --- a/src/app/(main)/reports/BaseParameters.js +++ b/src/app/(main)/reports/[id]/BaseParameters.js @@ -1,10 +1,10 @@ +import { useContext } from 'react'; import { FormRow } from 'react-basics'; +import { parseDateRange } from 'lib/date'; import DateFilter from 'components/input/DateFilter'; import WebsiteSelect from 'components/input/WebsiteSelect'; -import { parseDateRange } from 'lib/date'; -import { useContext } from 'react'; -import { ReportContext } from './Report'; import { useMessages } from 'components/hooks'; +import { ReportContext } from './Report'; export function BaseParameters({ showWebsiteSelect = true, diff --git a/src/app/(main)/reports/FieldAddForm.js b/src/app/(main)/reports/[id]/FieldAddForm.js similarity index 100% rename from src/app/(main)/reports/FieldAddForm.js rename to src/app/(main)/reports/[id]/FieldAddForm.js diff --git a/src/app/(main)/reports/FieldAddForm.module.css b/src/app/(main)/reports/[id]/FieldAddForm.module.css similarity index 100% rename from src/app/(main)/reports/FieldAddForm.module.css rename to src/app/(main)/reports/[id]/FieldAddForm.module.css diff --git a/src/app/(main)/reports/FieldAggregateForm.js b/src/app/(main)/reports/[id]/FieldAggregateForm.js similarity index 100% rename from src/app/(main)/reports/FieldAggregateForm.js rename to src/app/(main)/reports/[id]/FieldAggregateForm.js diff --git a/src/app/(main)/reports/FieldFilterForm.js b/src/app/(main)/reports/[id]/FieldFilterForm.js similarity index 100% rename from src/app/(main)/reports/FieldFilterForm.js rename to src/app/(main)/reports/[id]/FieldFilterForm.js diff --git a/src/app/(main)/reports/FieldFilterForm.module.css b/src/app/(main)/reports/[id]/FieldFilterForm.module.css similarity index 100% rename from src/app/(main)/reports/FieldFilterForm.module.css rename to src/app/(main)/reports/[id]/FieldFilterForm.module.css diff --git a/src/app/(main)/reports/FieldSelectForm.js b/src/app/(main)/reports/[id]/FieldSelectForm.js similarity index 100% rename from src/app/(main)/reports/FieldSelectForm.js rename to src/app/(main)/reports/[id]/FieldSelectForm.js diff --git a/src/app/(main)/reports/FieldSelectForm.module.css b/src/app/(main)/reports/[id]/FieldSelectForm.module.css similarity index 100% rename from src/app/(main)/reports/FieldSelectForm.module.css rename to src/app/(main)/reports/[id]/FieldSelectForm.module.css diff --git a/src/app/(main)/reports/FilterSelectForm.js b/src/app/(main)/reports/[id]/FilterSelectForm.js similarity index 100% rename from src/app/(main)/reports/FilterSelectForm.js rename to src/app/(main)/reports/[id]/FilterSelectForm.js diff --git a/src/app/(main)/reports/ParameterList.js b/src/app/(main)/reports/[id]/ParameterList.js similarity index 100% rename from src/app/(main)/reports/ParameterList.js rename to src/app/(main)/reports/[id]/ParameterList.js diff --git a/src/app/(main)/reports/ParameterList.module.css b/src/app/(main)/reports/[id]/ParameterList.module.css similarity index 100% rename from src/app/(main)/reports/ParameterList.module.css rename to src/app/(main)/reports/[id]/ParameterList.module.css diff --git a/src/app/(main)/reports/PopupForm.js b/src/app/(main)/reports/[id]/PopupForm.js similarity index 100% rename from src/app/(main)/reports/PopupForm.js rename to src/app/(main)/reports/[id]/PopupForm.js diff --git a/src/app/(main)/reports/PopupForm.module.css b/src/app/(main)/reports/[id]/PopupForm.module.css similarity index 100% rename from src/app/(main)/reports/PopupForm.module.css rename to src/app/(main)/reports/[id]/PopupForm.module.css diff --git a/src/app/(main)/reports/Report.js b/src/app/(main)/reports/[id]/Report.js similarity index 100% rename from src/app/(main)/reports/Report.js rename to src/app/(main)/reports/[id]/Report.js diff --git a/src/app/(main)/reports/Report.module.css b/src/app/(main)/reports/[id]/Report.module.css similarity index 100% rename from src/app/(main)/reports/Report.module.css rename to src/app/(main)/reports/[id]/Report.module.css diff --git a/src/app/(main)/reports/ReportBody.js b/src/app/(main)/reports/[id]/ReportBody.js similarity index 100% rename from src/app/(main)/reports/ReportBody.js rename to src/app/(main)/reports/[id]/ReportBody.js diff --git a/src/app/(main)/reports/ReportHeader.js b/src/app/(main)/reports/[id]/ReportHeader.js similarity index 100% rename from src/app/(main)/reports/ReportHeader.js rename to src/app/(main)/reports/[id]/ReportHeader.js diff --git a/src/app/(main)/reports/ReportHeader.module.css b/src/app/(main)/reports/[id]/ReportHeader.module.css similarity index 100% rename from src/app/(main)/reports/ReportHeader.module.css rename to src/app/(main)/reports/[id]/ReportHeader.module.css diff --git a/src/app/(main)/reports/ReportMenu.js b/src/app/(main)/reports/[id]/ReportMenu.js similarity index 100% rename from src/app/(main)/reports/ReportMenu.js rename to src/app/(main)/reports/[id]/ReportMenu.js diff --git a/src/app/(main)/reports/event-data/EventDataParameters.js b/src/app/(main)/reports/event-data/EventDataParameters.js index 00397ffb..fe9d1e00 100644 --- a/src/app/(main)/reports/event-data/EventDataParameters.js +++ b/src/app/(main)/reports/event-data/EventDataParameters.js @@ -1,13 +1,13 @@ import { useContext, useRef } from 'react'; -import { useApi, useMessages } from 'components/hooks'; import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics'; -import { ReportContext } from '../Report'; import Empty from 'components/common/Empty'; -import { DATA_TYPES, REPORT_PARAMETERS } from 'lib/constants'; import Icons from 'components/icons'; -import FieldAddForm from '../FieldAddForm'; -import BaseParameters from '../BaseParameters'; -import ParameterList from '../ParameterList'; +import { useApi, useMessages } from 'components/hooks'; +import { DATA_TYPES, REPORT_PARAMETERS } from 'lib/constants'; +import { ReportContext } from '../[id]/Report'; +import FieldAddForm from '../[id]/FieldAddForm'; +import ParameterList from '../[id]/ParameterList'; +import BaseParameters from '../[id]/BaseParameters'; import styles from './EventDataParameters.module.css'; function useFields(websiteId, startDate, endDate) { diff --git a/src/app/(main)/reports/event-data/EventDataReport.js b/src/app/(main)/reports/event-data/EventDataReport.js index eb49a29d..e91cb4a2 100644 --- a/src/app/(main)/reports/event-data/EventDataReport.js +++ b/src/app/(main)/reports/event-data/EventDataReport.js @@ -1,7 +1,7 @@ -import Report from '../Report'; -import ReportHeader from '../ReportHeader'; -import ReportMenu from '../ReportMenu'; -import ReportBody from '../ReportBody'; +import Report from '../[id]/Report'; +import ReportHeader from '../[id]/ReportHeader'; +import ReportMenu from '../[id]/ReportMenu'; +import ReportBody from '../[id]/ReportBody'; import EventDataParameters from './EventDataParameters'; import EventDataTable from './EventDataTable'; import Nodes from 'assets/nodes.svg'; diff --git a/src/app/(main)/reports/event-data/EventDataTable.js b/src/app/(main)/reports/event-data/EventDataTable.js index b6450261..b709aee7 100644 --- a/src/app/(main)/reports/event-data/EventDataTable.js +++ b/src/app/(main)/reports/event-data/EventDataTable.js @@ -1,7 +1,7 @@ import { useContext } from 'react'; import { GridTable, GridColumn } from 'react-basics'; import { useMessages } from 'components/hooks'; -import { ReportContext } from '../Report'; +import { ReportContext } from '../[id]/Report'; export function EventDataTable() { const { report } = useContext(ReportContext); diff --git a/src/app/(main)/reports/funnel/FunnelChart.js b/src/app/(main)/reports/funnel/FunnelChart.js index 829a3008..7461afbc 100644 --- a/src/app/(main)/reports/funnel/FunnelChart.js +++ b/src/app/(main)/reports/funnel/FunnelChart.js @@ -5,7 +5,7 @@ import useTheme from 'components/hooks/useTheme'; import BarChart from 'components/metrics/BarChart'; import { formatLongNumber } from 'lib/format'; import styles from './FunnelChart.module.css'; -import { ReportContext } from '../Report'; +import { ReportContext } from '../[id]/Report'; export function FunnelChart({ className, loading }) { const { report } = useContext(ReportContext); diff --git a/src/app/(main)/reports/funnel/FunnelParameters.js b/src/app/(main)/reports/funnel/FunnelParameters.js index c8e510d8..0e96185f 100644 --- a/src/app/(main)/reports/funnel/FunnelParameters.js +++ b/src/app/(main)/reports/funnel/FunnelParameters.js @@ -13,10 +13,10 @@ import { } from 'react-basics'; import Icons from 'components/icons'; import UrlAddForm from './UrlAddForm'; -import { ReportContext } from '../Report'; -import BaseParameters from '../BaseParameters'; -import ParameterList from '../ParameterList'; -import PopupForm from '../PopupForm'; +import { ReportContext } from '../[id]/Report'; +import BaseParameters from '../[id]/BaseParameters'; +import ParameterList from '../[id]/ParameterList'; +import PopupForm from '../[id]/PopupForm'; export function FunnelParameters() { const { report, runReport, updateReport, isRunning } = useContext(ReportContext); diff --git a/src/app/(main)/reports/funnel/FunnelReport.js b/src/app/(main)/reports/funnel/FunnelReport.js index 9b50d08b..69f46091 100644 --- a/src/app/(main)/reports/funnel/FunnelReport.js +++ b/src/app/(main)/reports/funnel/FunnelReport.js @@ -2,10 +2,10 @@ import FunnelChart from './FunnelChart'; import FunnelTable from './FunnelTable'; import FunnelParameters from './FunnelParameters'; -import Report from '../Report'; -import ReportHeader from '../ReportHeader'; -import ReportMenu from '../ReportMenu'; -import ReportBody from '../ReportBody'; +import Report from '../[id]/Report'; +import ReportHeader from '../[id]/ReportHeader'; +import ReportMenu from '../[id]/ReportMenu'; +import ReportBody from '../[id]/ReportBody'; import Funnel from 'assets/funnel.svg'; import { REPORT_TYPES } from 'lib/constants'; diff --git a/src/app/(main)/reports/funnel/FunnelTable.js b/src/app/(main)/reports/funnel/FunnelTable.js index 5ca2593c..4cf797f2 100644 --- a/src/app/(main)/reports/funnel/FunnelTable.js +++ b/src/app/(main)/reports/funnel/FunnelTable.js @@ -1,7 +1,7 @@ import { useContext } from 'react'; import ListTable from 'components/metrics/ListTable'; import { useMessages } from 'components/hooks'; -import { ReportContext } from '../Report'; +import { ReportContext } from '../[id]/Report'; export function FunnelTable() { const { report } = useContext(ReportContext); diff --git a/src/app/(main)/reports/insights/InsightsParameters.js b/src/app/(main)/reports/insights/InsightsParameters.js index a012bd07..d2ba144e 100644 --- a/src/app/(main)/reports/insights/InsightsParameters.js +++ b/src/app/(main)/reports/insights/InsightsParameters.js @@ -10,14 +10,14 @@ import { Popup, TooltipPopup, } from 'react-basics'; -import { ReportContext } from '../Report'; import Icons from 'components/icons'; -import BaseParameters from '../BaseParameters'; -import ParameterList from '../ParameterList'; +import BaseParameters from '../[id]/BaseParameters'; +import { ReportContext } from '../[id]/Report'; +import ParameterList from '../[id]/ParameterList'; +import FilterSelectForm from '../[id]/FilterSelectForm'; +import FieldSelectForm from '../[id]/FieldSelectForm'; +import PopupForm from '../[id]/PopupForm'; import styles from './InsightsParameters.module.css'; -import PopupForm from '../PopupForm'; -import FilterSelectForm from '../FilterSelectForm'; -import FieldSelectForm from '../FieldSelectForm'; export function InsightsParameters() { const { report, runReport, updateReport, isRunning } = useContext(ReportContext); diff --git a/src/app/(main)/reports/insights/InsightsReport.js b/src/app/(main)/reports/insights/InsightsReport.js index 48d610bd..f99e187b 100644 --- a/src/app/(main)/reports/insights/InsightsReport.js +++ b/src/app/(main)/reports/insights/InsightsReport.js @@ -1,8 +1,8 @@ 'use client'; -import Report from '../Report'; -import ReportHeader from '../ReportHeader'; -import ReportMenu from '../ReportMenu'; -import ReportBody from '../ReportBody'; +import Report from '../[id]/Report'; +import ReportHeader from '../[id]/ReportHeader'; +import ReportMenu from '../[id]/ReportMenu'; +import ReportBody from '../[id]/ReportBody'; import InsightsParameters from './InsightsParameters'; import InsightsTable from './InsightsTable'; import Lightbulb from 'assets/lightbulb.svg'; diff --git a/src/app/(main)/reports/insights/InsightsTable.js b/src/app/(main)/reports/insights/InsightsTable.js index 88bd0275..05d38042 100644 --- a/src/app/(main)/reports/insights/InsightsTable.js +++ b/src/app/(main)/reports/insights/InsightsTable.js @@ -1,7 +1,7 @@ import { useContext, useEffect, useState } from 'react'; import { GridTable, GridColumn } from 'react-basics'; import { useFormat, useMessages } from 'components/hooks'; -import { ReportContext } from '../Report'; +import { ReportContext } from '../[id]/Report'; import EmptyPlaceholder from 'components/common/EmptyPlaceholder'; export function InsightsTable() { diff --git a/src/app/(main)/reports/page.tsx b/src/app/(main)/reports/page.tsx index 10184460..aba59db2 100644 --- a/src/app/(main)/reports/page.tsx +++ b/src/app/(main)/reports/page.tsx @@ -1,11 +1,11 @@ import ReportsHeader from './ReportsHeader'; -import ReportsList from './ReportsList'; +import ReportsDataTable from './ReportsDataTable'; export default function ReportsPage() { return ( <> - + ); } diff --git a/src/app/(main)/reports/retention/RetentionParameters.js b/src/app/(main)/reports/retention/RetentionParameters.js index 6abae5ac..866376e0 100644 --- a/src/app/(main)/reports/retention/RetentionParameters.js +++ b/src/app/(main)/reports/retention/RetentionParameters.js @@ -1,9 +1,9 @@ import { useContext, useRef } from 'react'; import { useMessages } from 'components/hooks'; import { Form, FormButtons, FormRow, SubmitButton } from 'react-basics'; -import { ReportContext } from '../Report'; +import { ReportContext } from '../[id]/Report'; import { MonthSelect } from 'components/input/MonthSelect'; -import BaseParameters from '../BaseParameters'; +import BaseParameters from '../[id]/BaseParameters'; import { parseDateRange } from 'lib/date'; export function RetentionParameters() { diff --git a/src/app/(main)/reports/retention/RetentionReport.js b/src/app/(main)/reports/retention/RetentionReport.js index e6a32ece..ae42e76b 100644 --- a/src/app/(main)/reports/retention/RetentionReport.js +++ b/src/app/(main)/reports/retention/RetentionReport.js @@ -1,10 +1,10 @@ 'use client'; import RetentionTable from './RetentionTable'; import RetentionParameters from './RetentionParameters'; -import Report from '../Report'; -import ReportHeader from '../ReportHeader'; -import ReportMenu from '../ReportMenu'; -import ReportBody from '../ReportBody'; +import Report from '../[id]/Report'; +import ReportHeader from '../[id]/ReportHeader'; +import ReportMenu from '../[id]/ReportMenu'; +import ReportBody from '../[id]/ReportBody'; import Magnet from 'assets/magnet.svg'; import { REPORT_TYPES } from 'lib/constants'; import { parseDateRange } from 'lib/date'; diff --git a/src/app/(main)/reports/retention/RetentionTable.js b/src/app/(main)/reports/retention/RetentionTable.js index ad1eaa6f..4be7296f 100644 --- a/src/app/(main)/reports/retention/RetentionTable.js +++ b/src/app/(main)/reports/retention/RetentionTable.js @@ -1,9 +1,8 @@ import { useContext } from 'react'; import classNames from 'classnames'; -import { ReportContext } from '../Report'; +import { ReportContext } from '../[id]/Report'; import EmptyPlaceholder from 'components/common/EmptyPlaceholder'; -import { useMessages } from 'components/hooks'; -import { useLocale } from 'components/hooks'; +import { useMessages, useLocale } from 'components/hooks'; import { formatDate } from 'lib/date'; import styles from './RetentionTable.module.css'; diff --git a/src/app/(main)/settings/teams/TeamAddForm.js b/src/app/(main)/settings/teams/TeamAddForm.js index 7910e098..b8bb8c3a 100644 --- a/src/app/(main)/settings/teams/TeamAddForm.js +++ b/src/app/(main)/settings/teams/TeamAddForm.js @@ -8,6 +8,7 @@ import { Button, SubmitButton, } from 'react-basics'; +import { setValue } from 'store/cache'; import useApi from 'components/hooks/useApi'; import useMessages from 'components/hooks/useMessages'; @@ -20,8 +21,9 @@ export function TeamAddForm({ onSave, onClose }) { const handleSubmit = async data => { mutate(data, { onSuccess: async () => { - onSave(); - onClose(); + setValue('teams', Date.now()); + onSave?.(); + onClose?.(); }, }); }; diff --git a/src/app/(main)/settings/teams/TeamDeleteForm.js b/src/app/(main)/settings/teams/TeamDeleteForm.js index 210c8ada..9b80668a 100644 --- a/src/app/(main)/settings/teams/TeamDeleteForm.js +++ b/src/app/(main)/settings/teams/TeamDeleteForm.js @@ -1,6 +1,7 @@ import { Button, Form, FormButtons, SubmitButton } from 'react-basics'; import useApi from 'components/hooks/useApi'; import useMessages from 'components/hooks/useMessages'; +import { setValue } from 'store/cache'; export function TeamDeleteForm({ teamId, teamName, onSave, onClose }) { const { formatMessage, labels, messages, FormattedMessage } = useMessages(); @@ -10,8 +11,9 @@ export function TeamDeleteForm({ teamId, teamName, onSave, onClose }) { const handleSubmit = async data => { mutate(data, { onSuccess: async () => { - onSave(); - onClose(); + setValue('teams', Date.now()); + onSave?.(); + onClose?.(); }, }); }; diff --git a/src/app/(main)/settings/teams/TeamsTable.js b/src/app/(main)/settings/teams/TeamsTable.js index ca5a7fa7..79ddf118 100644 --- a/src/app/(main)/settings/teams/TeamsTable.js +++ b/src/app/(main)/settings/teams/TeamsTable.js @@ -25,16 +25,16 @@ export function TeamsTable({ data = [] }) { return ( <> + {showDelete && } + {!showDelete && } - {showDelete && } - {!showDelete && } ); }} diff --git a/src/app/(main)/settings/teams/[id]/TeamAddWebsiteForm.js b/src/app/(main)/settings/teams/[id]/TeamWebsiteAddForm.js similarity index 95% rename from src/app/(main)/settings/teams/[id]/TeamAddWebsiteForm.js rename to src/app/(main)/settings/teams/[id]/TeamWebsiteAddForm.js index a2d0faf0..b2e22442 100644 --- a/src/app/(main)/settings/teams/[id]/TeamAddWebsiteForm.js +++ b/src/app/(main)/settings/teams/[id]/TeamWebsiteAddForm.js @@ -4,7 +4,7 @@ import { Button, Form, FormButtons, GridColumn, Loading, SubmitButton, Toggle } import useMessages from 'components/hooks/useMessages'; import WebsitesDataTable from '../../websites/WebsitesDataTable'; -export function TeamAddWebsiteForm({ teamId, onSave, onClose }) { +export function TeamWebsiteAddForm({ teamId, onSave, onClose }) { const { formatMessage, labels } = useMessages(); const { get, post, useQuery, useMutation } = useApi(); const { mutate, error } = useMutation(data => post(`/teams/${teamId}/websites`, data)); @@ -57,4 +57,4 @@ export function TeamAddWebsiteForm({ teamId, onSave, onClose }) { ); } -export default TeamAddWebsiteForm; +export default TeamWebsiteAddForm; diff --git a/src/app/(main)/settings/teams/[id]/TeamWebsiteRemoveButton.js b/src/app/(main)/settings/teams/[id]/TeamWebsiteRemoveButton.js index 532e5321..59e393e1 100644 --- a/src/app/(main)/settings/teams/[id]/TeamWebsiteRemoveButton.js +++ b/src/app/(main)/settings/teams/[id]/TeamWebsiteRemoveButton.js @@ -7,15 +7,12 @@ export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) { const { del, useMutation } = useApi(); const { mutate, isLoading } = useMutation(() => del(`/teams/${teamId}/websites/${websiteId}`)); - const handleRemoveTeamMember = () => { - mutate( - {}, - { - onSuccess: () => { - onSave(); - }, + const handleRemoveTeamMember = async () => { + await mutate(null, { + onSuccess: () => { + onSave(); }, - ); + }); }; return ( diff --git a/src/app/(main)/settings/teams/[id]/TeamWebsites.js b/src/app/(main)/settings/teams/[id]/TeamWebsites.js index e7786429..49d74b39 100644 --- a/src/app/(main)/settings/teams/[id]/TeamWebsites.js +++ b/src/app/(main)/settings/teams/[id]/TeamWebsites.js @@ -1,6 +1,6 @@ import { ActionForm, Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics'; import TeamWebsitesTable from './TeamWebsitesTable'; -import TeamAddWebsiteForm from './TeamAddWebsiteForm'; +import TeamWebsiteAddForm from './TeamWebsiteAddForm'; import useApi from 'components/hooks/useApi'; import useMessages from 'components/hooks/useMessages'; import useUser from 'components/hooks/useUser'; @@ -36,7 +36,7 @@ export function TeamWebsites({ teamId }) { {formatMessage(labels.addWebsite)} - {close => } + {close => } diff --git a/src/app/(main)/settings/websites/WebsiteAddButton.js b/src/app/(main)/settings/websites/WebsiteAddButton.js index 1e9dff13..b1a69429 100644 --- a/src/app/(main)/settings/websites/WebsiteAddButton.js +++ b/src/app/(main)/settings/websites/WebsiteAddButton.js @@ -1,6 +1,7 @@ import { Button, Icon, Icons, Modal, ModalTrigger, Text, useToasts } from 'react-basics'; import WebsiteAddForm from './WebsiteAddForm'; import useMessages from 'components/hooks/useMessages'; +import { setValue } from 'store/cache'; export function WebsiteAddButton({ onSave }) { const { formatMessage, labels, messages } = useMessages(); @@ -8,6 +9,7 @@ export function WebsiteAddButton({ onSave }) { const handleSave = async () => { showToast({ message: formatMessage(messages.saved), variant: 'success' }); + setValue('websites', Date.now()); onSave?.(); }; diff --git a/src/app/(main)/settings/websites/WebsitesDataTable.js b/src/app/(main)/settings/websites/WebsitesDataTable.js index 8bfb0190..9de7d2e4 100644 --- a/src/app/(main)/settings/websites/WebsitesDataTable.js +++ b/src/app/(main)/settings/websites/WebsitesDataTable.js @@ -4,13 +4,15 @@ import useUser from 'components/hooks/useUser'; import useApi from 'components/hooks/useApi'; import DataTable from 'components/common/DataTable'; import useFilterQuery from 'components/hooks/useFilterQuery'; -import WebsitesHeader from './WebsitesHeader'; +import useCache from 'store/cache'; function useWebsites({ includeTeams, onlyTeams }) { const { user } = useUser(); const { get } = useApi(); + const modified = useCache(state => state?.websites); + return useFilterQuery( - ['websites', { includeTeams, onlyTeams }], + ['websites', { includeTeams, onlyTeams, modified }], params => { return get(`/users/${user?.id}/websites`, { includeTeams, @@ -23,9 +25,8 @@ function useWebsites({ includeTeams, onlyTeams }) { } export function WebsitesDataTable({ - showHeader = true, - showEditButton = true, - showViewButton = true, + allowEdit = true, + allowView = true, showActions = true, showTeam, includeTeams, @@ -35,22 +36,19 @@ export function WebsitesDataTable({ const queryResult = useWebsites({ includeTeams, onlyTeams }); return ( - <> - {showHeader && } - - {({ data }) => ( - - {children} - - )} - - + + {({ data }) => ( + + {children} + + )} + ); } diff --git a/src/app/(main)/settings/websites/WebsitesTable.js b/src/app/(main)/settings/websites/WebsitesTable.js index 15bd8882..3c0cbc46 100644 --- a/src/app/(main)/settings/websites/WebsitesTable.js +++ b/src/app/(main)/settings/websites/WebsitesTable.js @@ -7,8 +7,8 @@ export function WebsitesTable({ data = [], showTeam, showActions, - showEditButton, - showViewButton, + allowEdit, + allowView, children, }) { const { formatMessage, labels } = useMessages(); @@ -37,7 +37,7 @@ export function WebsitesTable({ return ( <> - {showActions && showEditButton && (!showTeam || ownerId === user.id) && ( + {showActions && allowEdit && (!showTeam || ownerId === user.id) && ( )} - {showActions && showViewButton && ( + {showActions && allowView && (