Typescript refactor.

src/app/(main)/settings/websites/WebsiteAddButton.tsx

@@ -3,7 +3,7 @@ import WebsiteAddForm from './WebsiteAddForm';
 import useMessages from 'components/hooks/useMessages';
 import { setValue } from 'store/cache';
 
-export function WebsiteAddButton({ onSave }) {
+export function WebsiteAddButton({ onSave }: { onSave?: () => void }) {
   const { formatMessage, labels, messages } = useMessages();
   const { showToast } = useToasts();
 

src/app/(main)/settings/websites/WebsiteAddForm.tsx

@@ -14,7 +14,9 @@ import useMessages from 'components/hooks/useMessages';
 export function WebsiteAddForm({ onSave, onClose }: { onSave?: () => void; onClose?: () => void }) {
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
-  const { mutate, error, isLoading } = useMutation(data => post('/websites', data));
+  const { mutate, error, isPending } = useMutation({
+    mutationFn: (data: any) => post('/websites', data),
+  });
 
   const handleSubmit = async (data: any) => {
     mutate(data, {
@@ -26,7 +28,7 @@ export function WebsiteAddForm({ onSave, onClose }: { onSave?: () => void; onClo
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error as string}>
+    <Form onSubmit={handleSubmit} error={error}>
       <FormRow label={formatMessage(labels.name)}>
         <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
           <TextField autoComplete="off" />
@@ -48,7 +50,7 @@ export function WebsiteAddForm({ onSave, onClose }: { onSave?: () => void; onClo
           {formatMessage(labels.save)}
         </SubmitButton>
         {onClose && (
-          <Button disabled={isLoading} onClick={onClose}>
+          <Button disabled={isPending} onClick={onClose}>
             {formatMessage(labels.cancel)}
           </Button>
         )}

src/app/(main)/settings/websites/WebsiteSettings.js

@@ -20,7 +20,7 @@ export function WebsiteSettings({ websiteId, openExternal = false, analyticsUrl
     queryKey: ['website', websiteId],
     queryFn: () => get(`/websites/${websiteId}`),
     enabled: !!websiteId,
-    cacheTime: 0,
+    gcTime: 0,
   });
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('details');

src/app/(main)/settings/websites/WebsitesTable.tsx

@@ -1,8 +1,18 @@
+import { ReactNode } from 'react';
 import Link from 'next/link';
 import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 
+export interface WebsitesTableProps {
+  data: any[];
+  showTeam?: boolean;
+  showActions?: boolean;
+  allowEdit?: boolean;
+  allowView?: boolean;
+  children?: ReactNode;
+}
+
 export function WebsitesTable({
   data = [],
   showTeam,
@@ -10,7 +20,7 @@ export function WebsitesTable({
   allowEdit,
   allowView,
   children,
-}) {
+}: WebsitesTableProps) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
   const breakpoint = useBreakpoint();

src/app/(main)/settings/websites/[id]/ShareUrl.tsx

@@ -20,9 +20,9 @@ export function ShareUrl({ websiteId, data, analyticsUrl, onSave }) {
   const { name, shareId } = data;
   const [id, setId] = useState(shareId);
   const { post, useMutation } = useApi();
-  const { mutate, error } = useMutation(({ shareId }) =>
-    post(`/websites/${websiteId}`, { shareId }),
-  );
+  const { mutate, error } = useMutation({
+    mutationFn: (data: any) => post(`/websites/${websiteId}`, data),
+  });
   const ref = useRef(null);
   const url = useMemo(
     () =>
@@ -32,7 +32,7 @@ export function ShareUrl({ websiteId, data, analyticsUrl, onSave }) {
     [id, name],
   );
 
-  const handleSubmit = async data => {
+  const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
         onSave(data);
@@ -50,7 +50,7 @@ export function ShareUrl({ websiteId, data, analyticsUrl, onSave }) {
     setId(id);
   };
 
-  const handleCheck = checked => {
+  const handleCheck = (checked: boolean) => {
     const data = { shareId: checked ? generateId() : null };
     mutate(data, {
       onSuccess: async () => {

src/app/(main)/settings/websites/[id]/TrackingCode.tsx

@@ -2,7 +2,13 @@ import { TextArea } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 import useConfig from 'components/hooks/useConfig';
 
-export function TrackingCode({ websiteId, analyticsUrl }) {
+export function TrackingCode({
+  websiteId,
+  analyticsUrl,
+}: {
+  websiteId: string;
+  analyticsUrl: string;
+}) {
   const { formatMessage, messages } = useMessages();
   const config = useConfig();
 

src/app/(main)/settings/websites/[id]/WebsiteData.tsx

@@ -3,7 +3,13 @@ import WebsiteDeleteForm from './WebsiteDeleteForm';
 import WebsiteResetForm from './WebsiteResetForm';
 import useMessages from 'components/hooks/useMessages';
 
-export function WebsiteData({ websiteId, onSave }) {
+export function WebsiteData({
+  websiteId,
+  onSave,
+}: {
+  websiteId: string;
+  onSave?: (value: string) => void;
+}) {
   const { formatMessage, labels, messages } = useMessages();
 
   const handleReset = async () => {

src/app/(main)/settings/websites/[id]/WebsiteDeleteForm.tsx

@@ -12,10 +12,20 @@ import useMessages from 'components/hooks/useMessages';
 
 const CONFIRM_VALUE = 'DELETE';
 
-export function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
+export function WebsiteDeleteForm({
+  websiteId,
+  onSave,
+  onClose,
+}: {
+  websiteId: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
   const { formatMessage, labels, messages, FormattedMessage } = useMessages();
   const { del, useMutation } = useApi();
-  const { mutate, error } = useMutation(data => del(`/websites/${websiteId}`, data));
+  const { mutate, error } = useMutation({
+    mutationFn: (data: any) => del(`/websites/${websiteId}`, data),
+  });
 
   const handleSubmit = async data => {
     mutate(data, {

src/app/(main)/settings/websites/[id]/WebsiteEditForm.tsx

@@ -4,10 +4,20 @@ import useApi from 'components/hooks/useApi';
 import { DOMAIN_REGEX } from 'lib/constants';
 import useMessages from 'components/hooks/useMessages';
 
-export function WebsiteEditForm({ websiteId, data, onSave }) {
+export function WebsiteEditForm({
+  websiteId,
+  data,
+  onSave,
+}: {
+  websiteId: string;
+  data: any[];
+  onSave?: (data: any) => void;
+}) {
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
-  const { mutate, error } = useMutation(data => post(`/websites/${websiteId}`, data));
+  const { mutate, error } = useMutation({
+    mutationFn: (data: any) => post(`/websites/${websiteId}`, data),
+  });
   const ref = useRef(null);
 
   const handleSubmit = async data => {

src/app/(main)/settings/websites/[id]/WebsiteResetForm.tsx

@@ -12,12 +12,22 @@ import useMessages from 'components/hooks/useMessages';
 
 const CONFIRM_VALUE = 'RESET';
 
-export function WebsiteResetForm({ websiteId, onSave, onClose }) {
+export function WebsiteResetForm({
+  websiteId,
+  onSave,
+  onClose,
+}: {
+  websiteId: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
   const { formatMessage, labels, messages, FormattedMessage } = useMessages();
   const { post, useMutation } = useApi();
-  const { mutate, error } = useMutation(data => post(`/websites/${websiteId}/reset`, data));
+  const { mutate, error } = useMutation({
+    mutationFn: (data: any) => post(`/websites/${websiteId}/reset`, data),
+  });
 
-  const handleSubmit = async data => {
+  const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
         onSave();