feat: add website overview refresh

src/client/api/model/website.ts

@@ -128,7 +128,7 @@ export function useWorkspaceWebsitePageview(
   startAt: number,
   endAt: number
 ) {
-  const { data, isLoading } = useQuery(
+  const { data, isLoading, refetch } = useQuery(
     ['websitePageview', { workspaceId, websiteId }],
     () => {
       return getWorkspaceWebsitePageview(workspaceId, websiteId, {
@@ -144,5 +144,6 @@ export function useWorkspaceWebsitePageview(
     pageviews: data?.pageviews ?? [],
     sessions: data?.sessions ?? [],
     isLoading,
+    refetch,
   };
 }

src/client/components/WebsiteOverview.tsx

@@ -1,4 +1,4 @@
-import { Button, Tag } from 'antd';
+import { Button, message, Tag } from 'antd';
 import React, { useMemo } from 'react';
 import { Column, ColumnConfig } from '@ant-design/charts';
 import { ArrowRightOutlined, SyncOutlined } from '@ant-design/icons';
@@ -17,6 +17,7 @@ import {
   formatDateWithUnit,
   getDateArray,
 } from '../utils/date';
+import { useEvent } from '../hooks/useEvent';
 
 interface WebsiteOverviewProps {
   workspaceId: string;
@@ -47,13 +48,19 @@ const WebsiteOverviewItem: React.FC<{
   const startDate = dayjs().subtract(1, 'day').add(1, unit).startOf(unit);
   const endDate = dayjs().endOf(unit);
 
-  const { pageviews, sessions, isLoading } = useWorkspaceWebsitePageview(
+  const { pageviews, sessions, isLoading, refetch } =
+    useWorkspaceWebsitePageview(
       props.website.workspaceId,
       props.website.id,
       startDate.unix() * 1000,
       endDate.unix() * 1000
     );
 
+  const handleRefresh = useEvent(async () => {
+    await refetch();
+    message.success('Refreshed');
+  });
+
   const chartData = useMemo(() => {
     const pageviewsArr = getDateArray(pageviews, startDate, endDate, unit);
     const sessionsArr = getDateArray(sessions, startDate, endDate, unit);
@@ -104,7 +111,11 @@ const WebsiteOverviewItem: React.FC<{
         </div>
 
         <div className="flex items-center gap-2 justify-end w-full lg:w-1/3">
-          <Button size="large" icon={<SyncOutlined />} />
+          <Button
+            size="large"
+            icon={<SyncOutlined />}
+            onClick={handleRefresh}
+          />
 
           <DateFilter />
         </div>