@campxdev/campx-web-utils 0.4.1 → 0.4.2

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@campxdev/campx-web-utils",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "main": "./export.ts",
   "private": false,
   "peerDependencies": {
-    "@campxdev/react-blueprint": ">=1.6.6",
+    "@campxdev/react-blueprint": ">=1.7.0",
     "@emotion/react": ">=^11.13.3",
     "@emotion/styled": ">=^11.13.0",
     "@mui/icons-material": ">=6.1.5",
@@ -14,7 +14,7 @@
     "react-redux": "=>9.1.2"
   },
   "dependencies": {
-    "@campxdev/react-blueprint": "1.6.6",
+    "@campxdev/react-blueprint": "1.7.0",
     "@hookform/resolvers": "^3.9.0",
     "@mui/x-date-pickers": "^7.22.1",
     "axios": "^1.7.2",

package/src/components/ActivityLog.tsx

@@ -0,0 +1,96 @@
+import { ActivityLogView } from '@campxdev/react-blueprint';
+import { Store } from 'pullstate';
+import { useEffect, useState } from 'react';
+import { useInfiniteQuery } from 'react-query';
+import { axios } from '../config/axios';
+
+function formatDate(date: Date): string {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+}
+
+export type ActivityLogType = {
+  activitiesData: any[];
+  lastTimestamp: number | null;
+};
+
+export type ActivityLogStoreType = {
+  [logType: string]: ActivityLogType;
+};
+
+export const ActivityLogStore = new Store<ActivityLogStoreType>({});
+
+export default function ActivityLog({
+  apiEndpoint,
+  params,
+}: {
+  apiEndpoint: string;
+  params: Record<string, any>;
+}) {
+  const [fromDate, setFromDate] = useState<Date | null>(null);
+  const [toDate, setToDate] = useState<Date | null>(null);
+
+  const { activitiesData } = ActivityLogStore.useState(
+    (s) => s[params.logType] || { activitiesData: [], lastTimestamp: null },
+  );
+
+  const fetchActivities = async ({ pageParam = null }) => {
+    const response = await axios.get(apiEndpoint, {
+      params: {
+        ...params,
+        lastTimestamp: pageParam,
+        ...(fromDate && { fromDate: formatDate(fromDate) }),
+        ...(toDate && { toDate: formatDate(toDate) }),
+      },
+    });
+    return response.data;
+  };
+
+  const { fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
+    useInfiniteQuery(
+      ['activities', params.logType, fromDate, toDate],
+      fetchActivities,
+      {
+        getNextPageParam: (lastPage) =>
+          lastPage?.length
+            ? new Date(lastPage[lastPage.length - 1]?.timestamp).getTime()
+            : null,
+        onSuccess: (data) => {
+          ActivityLogStore.update((s) => {
+            const currentData = s[params.logType] || {
+              activitiesData: [],
+              lastTimestamp: null,
+            };
+            currentData.activitiesData = data.pages.flatMap(
+              (page) => page ?? [],
+            );
+            currentData.lastTimestamp = data.pages[data.pages.length - 1]
+              ?.timestamp
+              ? new Date(data.pages[data.pages.length - 1].timestamp).getTime()
+              : null;
+            s[params.logType] = currentData;
+          });
+        },
+        enabled: activitiesData.length === 0 || !!fromDate || !!toDate,
+      },
+    );
+
+  useEffect(() => {
+    if (fromDate || toDate) {
+      fetchNextPage();
+    }
+  }, [fromDate, toDate, fetchNextPage]);
+
+  return (
+    <ActivityLogView
+      activitiesData={activitiesData}
+      isFetchingNextPage={isFetchingNextPage}
+      fetchNextPage={fetchNextPage}
+      hasNextPage={hasNextPage}
+      fromDate={fromDate}
+      toDate={toDate}
+      isLoading={isLoading}
+      setFromDate={setFromDate}
+      setToDate={setToDate}
+    />
+  );
+}

package/src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import App from './App';
+import './index.css';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(