import { useEffect, useState } from 'react'; import { Breadcrumbs, Item, Tabs, useToast, Button, Text, Icon, Icons } from 'react-basics'; import { useRouter } from 'next/router'; import Link from 'next/link'; import Page from 'components/layout/Page'; import PageHeader from 'components/layout/PageHeader'; import WebsiteEditForm from 'components/pages/settings/websites/WebsiteEditForm'; import WebsiteData from 'components/pages/settings/websites/WebsiteData'; import TrackingCode from 'components/pages/settings/websites/TrackingCode'; import ShareUrl from 'components/pages/settings/websites/ShareUrl'; import useApi from 'hooks/useApi'; import useMessages from 'hooks/useMessages'; import useConfig from 'hooks/useConfig'; export function WebsiteSettings({ websiteId }) { const router = useRouter(); const { formatMessage, labels, messages } = useMessages(); const { openExternal } = useConfig(); const { get, useQuery } = useApi(); const { toast, showToast } = useToast(); const { data, isLoading } = useQuery( ['website', websiteId], () => get(`/websites/${websiteId}`), { enabled: !!websiteId, cacheTime: 0 }, ); const [values, setValues] = useState(null); const [tab, setTab] = useState('details'); const showSuccess = () => { showToast({ message: formatMessage(messages.saved), variant: 'success' }); }; const handleSave = data => { showSuccess(); setValues(state => ({ ...state, ...data })); }; const handleReset = async value => { if (value === 'delete') { await router.push('/settings/websites'); } else if (value === 'reset') { showSuccess(); } }; useEffect(() => { if (data) { setValues(data); } }, [data]); return ( {toast} {formatMessage(labels.websites)} {values?.name} } > {formatMessage(labels.details)} {formatMessage(labels.trackingCode)} {formatMessage(labels.shareUrl)} {formatMessage(labels.data)} {tab === 'details' && ( )} {tab === 'tracking' && } {tab === 'share' && } {tab === 'data' && } ); } export default WebsiteSettings;