@campxdev/campx-web-utils 0.6.0 → 1.0.0

package/src/App.css

@@ -1,38 +0,0 @@
-.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

@@ -1,16 +0,0 @@
-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

@@ -1,30 +0,0 @@
-import { Button, TextField } from '@campxdev/react-blueprint';
-import { useState } from 'react';
-import { EmployeesSelector } from './selectors/EmployeesSelector';
-import { PrintFormatSelector } from './selectors/export';
-
-function AppContent() {
-  const [value, setValue] = useState('63b810ee995d6d64f4a248de');
-
-  return (
-    <>
-      <Button variant="contained" onClick={() => {}}>
-        Confirm
-      </Button>
-      <EmployeesSelector
-        fullWidth
-        value={value}
-        onChange={(value: any) => {
-          setValue(value);
-        }}
-      />
-      <div style={{ height: '300px' }}></div>
-
-      <TextField />
-
-      <PrintFormatSelector onChange={() => {}} />
-    </>
-  );
-}
-
-export default AppContent;

package/src/components/ActivityLog.tsx

@@ -1,96 +0,0 @@
-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

@@ -1,169 +0,0 @@
-import {
-  CircularProgress,
-  IconButton,
-  InputAdornment,
-  Stack,
-} from '@mui/material';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-
-import {
-  Button,
-  DialogButton,
-  FormControlWrapper,
-  TextField,
-} from '@campxdev/react-blueprint';
-import { StyledMenuItem } from '@campxdev/react-blueprint/src/components/Navigation/DropDownMenu/styles';
-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 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

@@ -1,92 +0,0 @@
-import Axios, { InternalAxiosRequestConfig } from 'axios';
-import Cookies from 'js-cookie';
-import { ApplicationStore } from '../context/application-store';
-import { institutionCode, isDevelopment, tenantCode } from '../utils/constants';
-
-export const formatParams = (params: any) => {
-  return Object.fromEntries(
-    Object.entries(params ?? {})?.map((i) => [
-      i[0],
-      i[1] === '__empty__' ? '' : i[1],
-    ]),
-  );
-};
-
-export const axios = Axios.create({
-  baseURL: process.env.REACT_APP_API_HOST,
-  withCredentials: true,
-  headers: {
-    'x-tenant-id': tenantCode,
-    'x-institution-code': institutionCode,
-  },
-});
-
-axios.interceptors.request.use(
-  function (config: InternalAxiosRequestConfig) {
-    const params = formatParams(config?.params);
-
-    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);
-    }
-
-    return {
-      ...config,
-      params,
-    };
-  },
-  function (error) {
-    return Promise.reject(error);
-  },
-);
-
-axios.interceptors.response.use(
-  function (response) {
-    if (
-      response.config.method &&
-      ['put', 'post', 'delete', 'patch'].includes(response.config.method) &&
-      [200, 201, 202].includes(response.status)
-    ) {
-      ApplicationStore.update((s) => {
-        s.snackbar.open = true;
-        s.snackbar.message = response.data.message;
-        s.snackbar.severity = 'success';
-      });
-    }
-
-    return response;
-  },
-  function (err) {
-    if ([400, 422].includes(err.response.status)) {
-      ApplicationStore.update((s) => {
-        s.snackbar.open = true;
-        s.snackbar.message = err.response.data.message || 'Bad Request';
-        s.snackbar.severity = 'error';
-      });
-    }
-    if (
-      err.response.config.method &&
-      ['put', 'post', 'delete', 'patch'].includes(err.response.config.method) &&
-      [404].includes(err.response.status)
-    ) {
-      ApplicationStore.update((s) => {
-        s.snackbar.open = true;
-        s.snackbar.message = err.response.data.message;
-        s.snackbar.severity = 'error';
-      });
-    }
-
-    return Promise.reject(err);
-  },
-);

package/src/context/ConfirmDialogProvider.tsx

@@ -1,78 +0,0 @@
-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>
-  );
-};

package/src/context/ErrorBoundary/ErrorBoundary.tsx

@@ -1,131 +0,0 @@
-import {
-  Button,
-  Dialog,
-  InternalServerError,
-  NoInterneConnection,
-  PageNotFound,
-  UnAuthorized,
-} from '@campxdev/react-blueprint';
-import { Alert, Box, styled } from '@mui/material';
-import Cookies from 'js-cookie';
-import { ReactNode, useState } from 'react';
-import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
-import { QueryErrorResetBoundary } from 'react-query';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { Login } from './Login';
-
-export type ErrorBoundaryProps = {
-  children: ReactNode;
-};
-
-const StyledAlert = styled(Alert)(({ theme }) => ({
-  height: '60px',
-  border: `1px solid ${theme.palette.error.main}`,
-  display: 'flex',
-  alignItems: 'center',
-  '& .MuiAlert-message': {
-    padding: 0,
-  },
-  '& .MuiTypography-root': {
-    margin: 0,
-  },
-  position: 'relative',
-  '& .retryBtn': {
-    color: '#661B2A',
-    position: 'absolute',
-    right: 8,
-    top: 8,
-  },
-}));
-
-export const ErrorBoundary = (props: ErrorBoundaryProps) => {
-  const location = useLocation();
-  return (
-    <QueryErrorResetBoundary>
-      {({ reset }) => (
-        <ReactErrorBoundary
-          key={location?.pathname}
-          onReset={reset}
-          FallbackComponent={ErrorFallback}
-        >
-          {props.children}
-        </ReactErrorBoundary>
-      )}
-    </QueryErrorResetBoundary>
-  );
-};
-
-const ErrorFallback = ({ error, resetErrorBoundary }: any) => {
-  if (error?.response?.status) {
-    switch (error?.response?.status) {
-      case 401:
-        return <UnAuth />;
-
-      case 500:
-        return <InternalServerError resetBoundary={resetErrorBoundary} />;
-      case 404:
-        return <PageNotFound />;
-    }
-  }
-
-  if (error?.code === 'ERR_NETWORK') {
-    return <NoInterneConnection resetBoundary={resetErrorBoundary} />;
-  }
-
-  return (
-    <Box sx={{ marginTop: '16px', padding: '20px' }}>
-      <StyledAlert severity="error">
-        {error?.response?.data?.message ?? error?.message}
-        <Button
-          className="retryBtn"
-          onClick={() => resetErrorBoundary()}
-          size="small"
-          color="error"
-          variant="outlined"
-        >
-          Try Again
-        </Button>
-      </StyledAlert>
-    </Box>
-  );
-};
-
-const UnAuth = () => {
-  const navigate = useNavigate();
-  const [isModalOpen, setModalOpen] = useState(false);
-
-  const sessionCookie = Cookies.get('campx_session_key');
-
-  const handleLoginClick = () => {
-    if (window.location.hostname === 'localhost') {
-      setModalOpen(true);
-    } else {
-      if (!sessionCookie) {
-        navigate('/auth/login');
-      }
-    }
-  };
-
-  return (
-    <UnAuthorized
-      component={
-        <>
-          <Button
-            sx={{
-              marginTop: '20px',
-            }}
-            variant="contained"
-            onClick={handleLoginClick}
-          >
-            Click Here To Login
-          </Button>
-          <Dialog
-            open={isModalOpen}
-            onClose={() => setModalOpen(false)}
-            content={({ close }) => <Login close={close} />}
-          />
-        </>
-      }
-    />
-  );
-};