@campxdev/campx-web-utils 1.1.8 → 1.2.0

package/export.ts

@@ -0,0 +1,9 @@
+export * from './src/components/ChangePassword';
+export * from './src/config/axios';
+export * from './src/context/export';
+export * from './src/hooks/export';
+export * from './src/layout/AppLayout/AppLayout';
+export * from './src/layout/AppLayout/components/HelpDocs';
+export * from './src/selectors/export';
+export * from './src/utils/constants';
+export * from './src/utils/functions';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/campx-web-utils",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "author": "CampX",
   "license": "MIT",
   "keywords": [
@@ -14,11 +14,13 @@
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "export.ts"
   ],
   "private": false,
   "peerDependencies": {
-    "@campxdev/react-blueprint": "2.1.4",
+    "@campxdev/react-blueprint": "2.2.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^7.0.2",
@@ -29,7 +31,7 @@
     "react-router-dom": "^6.24.0"
   },
   "dependencies": {
-    "@campxdev/react-blueprint": "2.1.4",
+    "@campxdev/react-blueprint": "2.2.0",
     "@hookform/resolvers": "^2.9.10",
     "@mui/x-date-pickers": "^8.1.0",
     "axios": "^1.7.2",
@@ -93,6 +95,7 @@
     "test": "craco test",
     "eject": "react-scripts eject",
     "build": "rollup -c --bundleConfigAsCjs",
+    "yalc:dev": "cp package.json package.json.backup && node -e \"const fs=require('fs'); const pkg=JSON.parse(fs.readFileSync('./package.json')); pkg.main='export.ts'; pkg.module='export.ts'; pkg.types='export.ts'; pkg.exports={'.':'./export.ts'}; delete pkg.scripts.prepare; fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2));\" && yalc publish --push --sig --no-scripts && mv package.json.backup package.json",
     "prepare": "npm run build"
   },
   "eslintConfig": {

package/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/App.tsx

@@ -0,0 +1,16 @@
+import { useRoutes } from 'react-router-dom';
+
+import { Providers } from './context/export';
+import { mainRoutes } from './routes/main';
+
+export default function App() {
+  return (
+    <Providers>
+      <AppRouter />
+    </Providers>
+  );
+}
+const AppRouter = () => {
+  const app = useRoutes(mainRoutes);
+  return app;
+};

package/src/AppContent.tsx

@@ -0,0 +1,19 @@
+import { Breadcrumbs, Icons, TextField } from '@campxdev/react-blueprint';
+import { useState } from 'react';
+import { CourseSelector } from './selectors/CourseSelector';
+
+function AppContent() {
+  const [value, setValue] = useState('63b810ee995d6d64f4a248de');
+
+  return (
+    <>
+      <Breadcrumbs pathTrimCount={0} />
+      <TextField label="habdkhabs" />
+      <Icons.AppsIcon />
+
+      <CourseSelector onChange={() => {}} />
+    </>
+  );
+}
+
+export default AppContent;

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/components/ChangePassword.tsx

@@ -0,0 +1,183 @@
+import {
+  CircularProgress,
+  IconButton,
+  InputAdornment,
+  MenuItem,
+  Stack,
+  styled,
+} from '@mui/material';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+import {
+  Button,
+  DialogButton,
+  FormControlWrapper,
+  TextField,
+} from '@campxdev/react-blueprint';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import { toast } from 'react-toastify';
+import { axios } from '../config/axios';
+import { isDevelopment } from '../utils/constants';
+
+interface PasswordVisibilityState {
+  oldPassword: boolean;
+  newPassword: boolean;
+  confirmPassword: boolean;
+}
+
+interface FormData {
+  oldPassword: string;
+  newPassword: string;
+  confirmPassword: string;
+}
+
+interface Field {
+  label: string;
+  name: keyof PasswordVisibilityState;
+}
+
+interface ChangePasswordProps {
+  close: () => void;
+}
+
+export const StyledMenuItem = styled(MenuItem)(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '5px',
+  '& .MuiListItemIcon-root': {
+    minWidth: '24px',
+  },
+  '& .MuiSvgIcon-root': {
+    height: '14px',
+    width: '14px',
+  },
+}));
+
+export function ChangePassword({ close }: ChangePasswordProps) {
+  const [showPassword, setShowPassword] = useState<PasswordVisibilityState>({
+    oldPassword: false,
+    newPassword: false,
+    confirmPassword: false,
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { handleSubmit, control, reset } = useForm<FormData>();
+
+  const onSubmit = async (formData: any) => {
+    setIsLoading(true);
+    const { oldPassword, newPassword, confirmPassword } = formData;
+    if (newPassword === confirmPassword) {
+      try {
+        await axios.post(
+          isDevelopment
+            ? 'https://api.campx.dev/auth-server/auth/change-password'
+            : 'https://api.campx.in/auth-server/auth/change-password',
+          {
+            oldPassword,
+            newPassword,
+          },
+        );
+        toast.success('Password Changed Successfully');
+        setIsLoading(false);
+        reset();
+        close();
+      } catch (error) {
+        console.log(error, 'this is error');
+        // axiosErrorToast(error);
+        setIsLoading(false);
+      }
+    } else {
+      toast.error('New Password, Confirm Password must be same');
+      setIsLoading(false);
+    }
+  };
+
+  const fields: Field[] = [
+    { label: 'Old Password', name: 'oldPassword' },
+    { label: 'New Password', name: 'newPassword' },
+    { label: 'Confirm Password', name: 'confirmPassword' },
+  ];
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <FormControlWrapper control={control}>
+        <Stack gap={1} direction="column">
+          {fields.map((item) => {
+            return (
+              <>
+                <TextField
+                  label={item.label}
+                  name={item.name}
+                  type={showPassword[item.name] ? 'text' : 'password'}
+                  required
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <IconButton
+                          size="small"
+                          onClick={() =>
+                            setShowPassword((prev: any) => ({
+                              ...prev,
+                              [item.name]: !prev[item.name],
+                            }))
+                          }
+                          edge="end"
+                        >
+                          {showPassword[item.name] ? (
+                            <Visibility />
+                          ) : (
+                            <VisibilityOff />
+                          )}
+                        </IconButton>
+                      </InputAdornment>
+                    ),
+                  }}
+                />
+              </>
+            );
+          })}
+
+          <Stack direction={'row'} gap={2} sx={{ marginTop: '15px' }}>
+            <Button variant="outlined" onClick={close}>
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              variant="contained"
+              endIcon={
+                isLoading && (
+                  <CircularProgress
+                    style={{ color: 'white' }}
+                    size="30px"
+                    thickness={1.7}
+                  />
+                )
+              }
+            >
+              Submit
+            </Button>
+          </Stack>
+        </Stack>
+      </FormControlWrapper>
+    </form>
+  );
+}
+
+export const ChangePasswordDialog: React.FC = () => (
+  <>
+    <DialogButton
+      anchor={({ open }) => (
+        <StyledMenuItem
+          onClick={() => {
+            open();
+          }}
+        >
+          Change Password
+        </StyledMenuItem>
+      )}
+      content={({ close }) => <ChangePassword close={close} />}
+      title="Change Password"
+    />
+  </>
+);

package/src/config/axios.ts

@@ -0,0 +1,146 @@
+import Axios from 'axios';
+import Cookies from 'js-cookie';
+import { ApplicationStore } from '../context/application-store';
+import { institutionCode, isDevelopment, tenantCode } from '../utils/constants';
+
+// Declare the extended axios types to include our custom property
+declare module 'axios' {
+  export interface AxiosRequestConfig {
+    skipInstitutionCode?: boolean;
+  }
+}
+
+declare global {
+  interface ImportMeta {
+    env: {
+      VITE_APP_API_HOST?: string;
+      // Add other Vite environment variables as needed
+    };
+  }
+}
+
+// Get base URL from environment variables
+const getBaseUrl = (): string => {
+  // For Vite
+  if (typeof import.meta !== 'undefined' && import.meta.env) {
+    return import.meta.env.VITE_APP_API_HOST || '';
+  }
+
+  // For Create React App
+  return process.env.REACT_APP_API_HOST || '';
+};
+
+// Format query parameters
+const formatParams = (params: any) => {
+  return Object.fromEntries(
+    Object.entries(params ?? {}).map(([key, value]) => [
+      key,
+      value === '__empty__' ? '' : value,
+    ]),
+  );
+};
+
+// Create axios instance
+export const axios = Axios.create({
+  baseURL: getBaseUrl(),
+  withCredentials: true,
+  headers: {
+    'x-tenant-id': tenantCode,
+    'x-institution-code': institutionCode,
+  },
+});
+
+// Request interceptor
+axios.interceptors.request.use(
+  (config) => {
+    // Format query parameters
+    const params = formatParams(config?.params);
+
+    // Add session tokens from cookies if in development
+    const sessionKey = Cookies.get('campx_session_key');
+    const openPaymentsKey = Cookies.get('campx_open_payments_key');
+    const studentSessionKey = Cookies.get('campx_student_key');
+
+    if (isDevelopment && sessionKey) {
+      config.headers.set('campx_session_key', sessionKey);
+    }
+
+    if (isDevelopment && studentSessionKey) {
+      config.headers.set('campx_student_key', studentSessionKey);
+    }
+
+    if (openPaymentsKey) {
+      config.headers.set('campx_open_payments_key', openPaymentsKey);
+    }
+
+    // Skip sending X-institution-code if the flag is set
+    if (config.skipInstitutionCode) {
+      config.headers.delete('x-institution-code');
+    }
+
+    return {
+      ...config,
+      params,
+    };
+  },
+  (error) => {
+    return Promise.reject(error);
+  },
+);
+
+// Response interceptor
+axios.interceptors.response.use(
+  (response) => {
+    // Check if the response has hideSnackbar property
+    const shouldHideSnackbar = response.data?.hideSnackbar === true;
+
+    // Handle successful responses
+    if (
+      !shouldHideSnackbar &&
+      response.config.method &&
+      ['put', 'post', 'delete', 'patch'].includes(response.config.method) &&
+      [200, 201, 202].includes(response.status)
+    ) {
+      // Use ApplicationStore for snackbar
+      ApplicationStore.update((s) => {
+        s.snackbar.open = true;
+        s.snackbar.message = response.data.message || 'Operation successful';
+        s.snackbar.severity = 'success';
+      });
+    }
+
+    return response;
+  },
+  (err) => {
+    // Check if the error response has hideSnackbar property
+    const shouldHideSnackbar = err.response?.data?.hideSnackbar === true;
+
+    // Handle error responses
+    if (!shouldHideSnackbar && [400, 422].includes(err.response?.status)) {
+      // Use ApplicationStore for error snackbar
+      ApplicationStore.update((s) => {
+        s.snackbar.open = true;
+        s.snackbar.message = err.response.data.message || 'Bad Request';
+        s.snackbar.severity = 'error';
+      });
+    }
+
+    if (
+      !shouldHideSnackbar &&
+      err.response?.config.method &&
+      ['put', 'post', 'delete', 'patch'].includes(err.response.config.method) &&
+      [404].includes(err.response.status)
+    ) {
+      // Use ApplicationStore for not found error snackbar
+      ApplicationStore.update((s) => {
+        s.snackbar.open = true;
+        s.snackbar.message = err.response.data.message || 'Not Found';
+        s.snackbar.severity = 'error';
+      });
+    }
+
+    return Promise.reject(err);
+  },
+);
+
+export default axios;

package/src/context/ConfirmDialogProvider.tsx

@@ -0,0 +1,78 @@
+import { ConfirmDialog, ConfirmDialogType } from '@campxdev/react-blueprint';
+import { createContext, ReactNode } from 'react';
+import { ApplicationStore } from './application-store';
+
+interface ConfirmStateProps {
+  showConfirmDialog: (
+    title: string,
+    message: string,
+    onConfirm: () => void,
+    onCancel: () => void,
+    type?: ConfirmDialogType,
+    confirmButtonText?: string,
+    cancelButtonText?: string,
+  ) => void;
+}
+
+const ConfirmContext = createContext<ConfirmStateProps>({
+  showConfirmDialog: () => {},
+});
+
+export const ConfirmDialogProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const confirmDialog = ApplicationStore.useState((s) => s.confirmDialog);
+
+  const showConfirmDialog = (
+    title: string,
+    message: string,
+    onConfirm: () => void,
+    onCancel: () => void,
+    type: ConfirmDialogType = 'confirm',
+    confirmButtonText?: string,
+    cancelButtonText?: string,
+  ) => {
+    ApplicationStore.update((s) => {
+      s.confirmDialog = {
+        isOpen: true,
+        title,
+        message,
+        onConfirm,
+        onCancel,
+        type,
+        confirmButtonText,
+        cancelButtonText,
+      };
+    });
+  };
+
+  const handleCloseDialog = () => {
+    ApplicationStore.update((s) => {
+      s.confirmDialog.isOpen = false;
+    });
+  };
+
+  return (
+    <ConfirmContext.Provider value={{ showConfirmDialog }}>
+      {children}
+      <ConfirmDialog
+        isOpen={confirmDialog.isOpen}
+        title={confirmDialog.title}
+        message={confirmDialog.message}
+        type={confirmDialog.type}
+        confirmButtonText={confirmDialog.confirmButtonText}
+        cancelButtonText={confirmDialog.cancelButtonText}
+        onConfirm={() => {
+          confirmDialog.onConfirm();
+          handleCloseDialog();
+        }}
+        onCancel={() => {
+          confirmDialog.onCancel();
+          handleCloseDialog();
+        }}
+      />
+    </ConfirmContext.Provider>
+  );
+};