@campxdev/campx-web-utils 0.4.0 → 0.4.2

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@campxdev/campx-web-utils",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "main": "./export.ts",
   "private": false,
   "peerDependencies": {
-    "@campxdev/react-blueprint": ">=1.6.4",
+    "@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.4",
+    "@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(

package/src/selectors/BatchSelector.tsx

@@ -0,0 +1,15 @@
+import { SingleSelect, SingleSelectProps } from '@campxdev/react-blueprint';
+import { batchOptions } from './utils';
+
+export const BatchSelector = (props: SingleSelectProps) => {
+  return (
+    <SingleSelect
+      label="Batch"
+      options={batchOptions?.map((item: { label: string; value: string }) => ({
+        label: item.label,
+        value: item.value,
+      }))}
+      {...props}
+    />
+  );
+};

package/src/selectors/PrintFormatSelector.tsx

@@ -0,0 +1,17 @@
+import { SingleSelect, SingleSelectProps } from '@campxdev/react-blueprint';
+import { axios } from '../config/axios';
+
+export const PrintFormatSelector = (props: SingleSelectProps) => {
+  return (
+    <SingleSelect
+      dbLabelProps={{
+        labelKey: 'name',
+        subLabelKey: 'type',
+        useSubLabelStartCase: true,
+      }}
+      {...props}
+      externalAxios={axios}
+      optionsApiEndPoint="/dropdowns/print-formats"
+    />
+  );
+};

package/src/selectors/export.ts

@@ -1,8 +1,10 @@
+export * from './BatchSelector';
 export * from './CourseSelector';
+export * from './DepartmentSelector';
 export * from './EmployeesSelector';
-export * from './SemesterSelector';
 export * from './FeeTypeSelector';
 export * from './HostelFloorSelector';
 export * from './HostelRoomSelector';
+export * from './PrintFormatSelector';
+export * from './SemesterSelector';
 export * from './YearRangeSelector';
-export * from './DepartmentSelector';

package/src/selectors/utils.tsx

@@ -32,3 +32,8 @@ export const FeeTypes: {
 export const years = Array.from({ length: 6 }, (_, i) => {
   return new Date().getFullYear() - i;
 });
+
+export const batchOptions = Array.from({ length: 12 }, (_, i) => ({
+  label: `${new Date().getFullYear() - i} - ${new Date().getFullYear() - i + 1}`,
+  value: `${new Date().getFullYear() - i} - ${new Date().getFullYear() - i + 1}`,
+}));