@campxdev/campx-web-utils 1.1.8 → 1.2.0

package/src/context/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,131 @@
+import {
+  Button,
+  Dialog,
+  InternalServerError,
+  NoInterneConnection,
+  ResourceNotFound,
+  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 <ResourceNotFound message={error?.response?.data?.message} />;
+    }
+  }
+
+  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.split('.')[1] === '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} />}
+          />
+        </>
+      }
+    />
+  );
+};

package/src/context/ErrorBoundary/Login.tsx

@@ -0,0 +1,206 @@
+import { Button, Icons, TextField } from '@campxdev/react-blueprint';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Box, Stack } from '@mui/material';
+import DeviceDetector from 'device-detector-js';
+import Cookies from 'js-cookie';
+import { useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useMutation } from 'react-query';
+
+import { useNavigate } from 'react-router-dom';
+import * as Yup from 'yup';
+import { axios } from '../../config/axios';
+import { isDevelopment } from '../../utils/constants';
+
+type DeviceInformation = {
+  deviceType: string;
+  clientName: string;
+  os: string;
+  osVersion: string;
+  latitude: number | null;
+  longitude: number | null;
+  tokenType: string;
+};
+
+export type DeviceState = {
+  deviceInformation: DeviceInformation;
+  isLocationAllowed: boolean;
+};
+
+type LoginDetails = {
+  username: string;
+  password: string;
+};
+
+const performLogin = async (body: any) => {
+  if (!body.latitude || !body.longitude) {
+    const response = await fetch(
+      'https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyB2YCpo1yi107RYj1LdZu2DCcpcO93reFY',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          considerIp: 'true',
+        }),
+      },
+    );
+    const data = await response.json();
+    body.latitude = data.location.lat;
+    body.longitude = data.location.lng;
+  }
+  return axios.post(`/auth-server/auth-v2/login`, body).then((res) => res.data);
+};
+
+const validationSchema = Yup.object().shape({
+  username: Yup.string().required('Username is required'),
+  password: Yup.string().required('Password is required'),
+});
+
+export const Login = ({ close }: { close: () => void }) => {
+  const [deviceState, setDeviceState] = useState<DeviceState>({
+    deviceInformation: {
+      deviceType: 'browser',
+      clientName: 'unknown',
+      os: 'unknown',
+      osVersion: 'unknown',
+      latitude: null,
+      longitude: null,
+      tokenType: 'WEB',
+    },
+    isLocationAllowed: true,
+  });
+  const navigate = useNavigate();
+  useEffect(() => {
+    navigator.geolocation.getCurrentPosition((position) => {
+      setDeviceState((s) => ({
+        ...s,
+        deviceInformation: {
+          ...s.deviceInformation,
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+        },
+      }));
+    });
+    navigator.permissions
+      .query({ name: 'geolocation' })
+      .then((permissionStatus) => {
+        if (permissionStatus.state === 'denied') {
+          setDeviceState((s) => ({
+            ...s,
+            isLocationAllowed: false,
+          }));
+        }
+      });
+
+    const detector = new DeviceDetector();
+    const deviceInfo = detector.parse(navigator.userAgent);
+    setDeviceState((s) => ({
+      ...s,
+      deviceInformation: {
+        ...s.deviceInformation,
+        clientName: deviceInfo.client?.name || s.deviceInformation.clientName,
+        os: deviceInfo.os?.name || s.deviceInformation.os,
+        osVersion: deviceInfo.os?.version || s.deviceInformation.osVersion,
+      },
+    }));
+  }, []);
+
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm<LoginDetails>({
+    resolver: yupResolver(validationSchema),
+  });
+
+  const { mutate, isLoading } = useMutation(performLogin, {
+    onSuccess(data) {
+      if (isDevelopment) {
+        Cookies.remove('campx_session_key');
+        Cookies.set('campx_session_key', data.session.token);
+        close();
+        navigate(`/${data.session.institutionCode}/workspace`);
+        window.location.reload();
+      }
+    },
+  });
+
+  const onSubmit = async (body: LoginDetails) => {
+    mutate({
+      ...body,
+      ...deviceState.deviceInformation,
+      loginId: body.username,
+      loginType: 'USER',
+    });
+  };
+
+  return (
+    <>
+      <Stack gap="16px" justifyContent="space-between" alignItems="center">
+        <Box height="36px" width="194.8px">
+          <Icons.CampxFullLogoIcon />
+        </Box>
+        <Stack gap="10px" justifyContent="center" alignItems="center">
+          <Controller
+            control={control}
+            render={({ field }: { field: any }) => {
+              return (
+                <TextField
+                  size="medium"
+                  name="username"
+                  sx={{
+                    width: '400px',
+                  }}
+                  placeholder="Enter Username or Email"
+                  containerProps={{ my: '0' }}
+                  onChange={field.onChange}
+                  label="Username or Email"
+                  error={!!errors.username}
+                  required
+                />
+              );
+            }}
+            name="username"
+          />
+          <Controller
+            control={control}
+            render={({ field }: { field: any }) => {
+              return (
+                <TextField
+                  size="medium"
+                  name="password"
+                  sx={{
+                    width: '400px',
+                  }}
+                  placeholder="Enter password"
+                  onChange={field.onChange}
+                  containerProps={{ my: '0' }}
+                  label="Password"
+                  type="password"
+                  error={!!errors.password}
+                  required
+                />
+              );
+            }}
+            name="password"
+          />
+          <Button
+            type="submit"
+            color="primary"
+            variant="contained"
+            sx={{
+              width: '400px',
+            }}
+            onClick={handleSubmit(onSubmit)}
+            disabled={isLoading}
+            loading={isLoading}
+          >
+            Login
+          </Button>
+        </Stack>
+      </Stack>
+    </>
+  );
+};

package/src/context/Providers.tsx

@@ -0,0 +1,76 @@
+import { lightTheme, MuiThemeProvider } from '@campxdev/react-blueprint';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import {
+  combineReducers,
+  configureStore,
+  ReducersMapObject,
+} from '@reduxjs/toolkit';
+import { ReactNode, useEffect } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { institutionCode, tenantCode, workspace } from '../utils/constants';
+import { ConfirmDialogProvider } from './ConfirmDialogProvider';
+import { SnackbarProvider } from './SnackbarProvider';
+
+// We'll add this export to ensure Router is properly exported
+export { BrowserRouter } from 'react-router-dom';
+
+export const Providers = ({
+  children,
+  basename,
+  theme = lightTheme,
+  reducers = {},
+}: {
+  children: ReactNode;
+  basename?: string;
+  theme?: any;
+  reducers?: ReducersMapObject;
+}) => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+        retry: false,
+        useErrorBoundary: true,
+      },
+    },
+  });
+
+  var baseName =
+    tenantCode && institutionCode && workspace
+      ? `/${institutionCode}/${workspace}`
+      : '/';
+  useEffect(() => {
+    if (
+      window.location.pathname === '/' &&
+      institutionCode &&
+      workspace &&
+      tenantCode
+    ) {
+      window.location.replace(
+        window.location.origin + `/${institutionCode}/${workspace}`,
+      );
+    }
+  }, [institutionCode, tenantCode, workspace]);
+
+  const store = configureStore({
+    reducer: combineReducers(reducers),
+  });
+  return (
+    <Provider store={store}>
+      <BrowserRouter basename={basename ?? baseName}>
+        <QueryClientProvider client={queryClient}>
+          <MuiThemeProvider theme={theme}>
+            <SnackbarProvider>
+              <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <ConfirmDialogProvider>{children}</ConfirmDialogProvider>
+              </LocalizationProvider>
+            </SnackbarProvider>
+          </MuiThemeProvider>
+        </QueryClientProvider>
+      </BrowserRouter>
+    </Provider>
+  );
+};

package/src/context/SnackbarProvider.tsx

@@ -0,0 +1,42 @@
+import { Severity, Snackbar } from '@campxdev/react-blueprint';
+import { createContext, ReactNode } from 'react';
+import { ApplicationStore } from './application-store';
+
+interface SnackbarContextProps {
+  showSnackbar: (message: string, severity?: Severity) => void;
+}
+
+const SnackbarContext = createContext<SnackbarContextProps | undefined>(
+  undefined,
+);
+
+interface SnackbarProviderProps {
+  children: ReactNode;
+}
+
+export const SnackbarProvider = ({ children }: SnackbarProviderProps) => {
+  const snackbar = ApplicationStore.useState((s) => s.snackbar);
+  const showSnackbar = (message: string, severity: Severity = 'info') => {
+    ApplicationStore.update((s) => {
+      s.snackbar.open = true;
+      s.snackbar.message = message;
+      s.snackbar.severity = severity;
+    });
+  };
+  return (
+    <SnackbarContext.Provider value={{ showSnackbar }}>
+      {children}
+      <Snackbar
+        open={snackbar.open}
+        message={snackbar.message}
+        severity={snackbar.severity}
+        autoHideDuration={1500}
+        onClose={() => {
+          ApplicationStore.update((s) => {
+            s.snackbar.open = false;
+          });
+        }}
+      />
+    </SnackbarContext.Provider>
+  );
+};

package/src/context/application-store.ts

@@ -0,0 +1,86 @@
+import { ConfirmDialogType, Severity } from '@campxdev/react-blueprint';
+import { Store } from 'pullstate';
+
+type Classroom = {
+  id: number;
+  batchName?: string;
+  branchCode?: string;
+  courseId: number;
+  currentSemester: number;
+  name: string;
+  programId: number;
+  regulationId?: number;
+  section?: string;
+  timetableSlotTemplateId?: number;
+};
+
+export type ApplicationStoreType = {
+  isLoginDialogOpen: boolean;
+  snackbar: {
+    open: boolean;
+    message: string;
+    severity: Severity;
+  };
+  confirmDialog: {
+    isOpen: boolean;
+    title: string;
+    message: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    type: ConfirmDialogType;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+  };
+  user?: {
+    globalUserId: string;
+    tenantId: string;
+    uniqueId: number;
+    fullName: string;
+    email?: string;
+    employeeId?: string;
+    departmentIds?: string[];
+    designationId?: string;
+    institutionIds: number[];
+    isAdminUser?: boolean;
+    isSuperUser?: boolean;
+    studentId?: number;
+    admissionId?: string;
+    mStudentId?: string;
+    semNo?: number;
+    rollNo?: string;
+    courseId?: number;
+    branchCode?: string;
+    classroom?: Classroom;
+  };
+  institutionInfo?: {
+    institutions?: [];
+    current?: any;
+  };
+  asset?: {
+    favIcon?: string;
+    institutionLogo?: string;
+  };
+};
+
+export const initialApplicationState: ApplicationStoreType = {
+  isLoginDialogOpen: false,
+  snackbar: {
+    open: false,
+    message: '',
+    severity: 'success',
+  },
+  confirmDialog: {
+    isOpen: false,
+    title: '',
+    message: '',
+    onConfirm: () => {},
+    onCancel: () => {},
+    type: 'confirm',
+  },
+  user: undefined,
+  institutionInfo: undefined,
+  asset: undefined,
+};
+export const ApplicationStore = new Store<ApplicationStoreType>(
+  initialApplicationState,
+);

package/src/context/export.ts

@@ -0,0 +1,5 @@
+export * from './application-store';
+export * from './ConfirmDialogProvider';
+export * from './ErrorBoundary/ErrorBoundary';
+export * from './Providers';
+export * from './SnackbarProvider';

package/src/hooks/export.ts

@@ -0,0 +1 @@
+export * from './useConfirm';

package/src/hooks/useConfirm.ts

@@ -0,0 +1,57 @@
+import { ConfirmDialogType } from '@campxdev/react-blueprint';
+import { ApplicationStore } from '../context/application-store';
+
+const defaultConfirmDialogState = {
+  isOpen: false,
+  title: '',
+  message: '',
+  confirmButtonText: '',
+  cancelButtonText: '',
+  type: 'confirm' as ConfirmDialogType,
+  onConfirm: () => {},
+  onCancel: () => {},
+};
+
+export const useConfirm = () => {
+  const isConfirmed = ({
+    title,
+    message,
+    confirmButtonText,
+    cancelButtonText,
+    type = 'confirm',
+  }: {
+    title: string;
+    message: string;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    type?: ConfirmDialogType;
+  }): Promise<boolean> =>
+    new Promise((resolve) => {
+      ApplicationStore.update((s) => {
+        s.confirmDialog = {
+          isOpen: true,
+          title,
+          message,
+          confirmButtonText,
+          cancelButtonText,
+          type,
+          onConfirm: () => {
+            resolve(true);
+            resetDialog();
+          },
+          onCancel: () => {
+            resolve(false);
+            resetDialog();
+          },
+        };
+      });
+    });
+
+  const resetDialog = () => {
+    ApplicationStore.update((s) => {
+      s.confirmDialog = defaultConfirmDialogState;
+    });
+  };
+
+  return isConfirmed;
+};

package/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

package/src/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement,
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();