@campxdev/shared 0.1.0

package/src/config/axios.ts

@@ -0,0 +1,138 @@
+import Axios from 'axios'
+import _ from 'lodash'
+import { toast } from 'react-toastify'
+import { globalStore } from '../App'
+import Cookies from 'js-cookie'
+
+const isDevelopment = process.env.NODE_ENV === 'development'
+const sessionKey = Cookies.get('campx_session_key')
+
+const formatParams = (params) => {
+  return Object.fromEntries(
+    Object.entries(params ?? {})?.map((i) => [
+      i[0],
+      i[1] === '__empty__' ? '' : i[1],
+    ]),
+  )
+}
+
+let axios = Axios.create({
+  baseURL: process.env.REACT_APP_API_HOST,
+  withCredentials: true,
+  ...(isDevelopment && {
+    headers: {
+      campx_session_key: sessionKey,
+    },
+  }),
+})
+
+axios.interceptors.request.use(
+  function (config) {
+    const params = formatParams(config?.params)
+    globalStore.update((s) => {
+      s.loading = true
+      s.error.message = ''
+      s.error.statusCode = null
+      s.error.description = ''
+    })
+    return { ...config, params }
+  },
+  function (error) {
+    globalStore.update((s) => {
+      s.loading = true
+    })
+    return Promise.reject(error)
+  },
+)
+
+axios.interceptors.response.use(
+  function (response) {
+    globalStore.update((s) => {
+      s.loading = false
+    })
+    return response
+  },
+  function (err) {
+    globalStore.update((s) => {
+      s.loading = false
+    })
+
+    if (err.message == 'Network Error') {
+      globalStore.update((s) => {
+        s.error = {
+          message: err.message,
+          statusCode: 999,
+          description: 'Please check your network connection',
+        }
+      })
+    } else {
+      const method = err.response.config.method
+      if (method === 'get' || method === 'GET') {
+        setError(err.response.status, err.response.data.message)
+      }
+    }
+
+    return Promise.reject(err)
+  },
+)
+
+
+export default axios
+
+export const axiosErrorToast = (error: any, fallback?: string) => {
+  const fallbackMessage = fallback ?? 'Something went wrong.'
+  const errorMessage =
+    typeof error?.response?.data?.message !== 'string'
+      ? error?.response?.data?.message?.join('\n') ?? fallbackMessage
+      : error?.response?.data?.message
+
+  return toast.error(errorMessage)
+}
+
+const setError = (statusCode: number, message: string) => {
+  switch (statusCode) {
+    case 401:
+      localStorage.removeItem('token')
+      globalStore.update((s) => {
+        s.error.message = message ?? 'Session Expired!'
+        s.error.statusCode = statusCode
+        s.error.description =
+          'Your session has been expired, Please login to continue'
+      })
+      break
+    case 404:
+      // globalStore.update((s) => {
+      //   s.error.message = message ?? 'Not Found!'
+      //   s.error.statusCode = statusCode
+      //   s.error.description =
+      //     'The resource you are trying to access is not found.'
+      // })
+      toast.error('The resource you are trying to access is not found.')
+
+      break
+    case 403:
+      globalStore.update((s) => {
+        s.error.message = message ?? 'Forbidden!'
+        s.error.statusCode = statusCode
+        s.error.description =
+          'The resource you are trying to access is forbidden.'
+      })
+      break
+
+    case 400:
+    case 422:
+      globalStore.update((s) => {
+        s.error.message = ''
+        s.error.description = ''
+        s.error.statusCode = null
+      })
+      break
+
+    default:
+      globalStore.update((s) => {
+        s.error.message = 'Unknown Network Error!'
+        s.error.statusCode = 999
+        s.error.description = 'Unknown network error occurred!'
+      })
+  }
+}

package/src/constants/UIConstants.ts

@@ -0,0 +1,97 @@
+export const batchOptions = Array.from({ length: 11 }, (_, i) => {
+  return `${2012 + i} - ${2012 + i + 1}`
+}).reverse()
+
+export const examGroupBatches = Array.from({ length: 10 }, (_, i) => {
+  return `${2012 + i} - ${2012 + i + 1}`
+})
+export const currentYear = new Date().getFullYear()
+
+const startYear = 2012
+
+export const yearOptions = Array.from(
+  { length: currentYear - startYear + 1 },
+  (_, i) => {
+    return `${startYear + i}`
+  },
+)
+
+export const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+]
+
+export const religionOptions = [
+  'Hinduism',
+  'Islam',
+  'Christianity',
+  'Sikhism',
+  'Buddhism',
+  'Jainism',
+]
+
+export const casteOptions = [
+  'OC',
+  'BC_A',
+  'BC_B',
+  'BC_C',
+  'BC_D',
+  'BC_E',
+  'SC',
+  'ST',
+]
+
+export const nationalityOptions = ['Indian', 'Other']
+
+export const examTimings = [
+  '09:00 AM',
+  '10:00 AM',
+  '11:00 AM',
+  '01:00 PM',
+  '02:00 PM',
+  '03:00 PM',
+]
+
+export const USER_TYPES = [
+  {
+    label: 'Staff User',
+    value: 'Staff_User',
+  },
+  {
+    label: 'Faculty User',
+    value: 'Faculty_User',
+  },
+  {
+    label: 'Student User',
+    value: 'Student_User',
+  },
+]
+
+export function getRandomColor(name) {
+  const firstAlphabet = name.charAt(0).toLowerCase()
+
+  const asciiCode = firstAlphabet.charCodeAt(0)
+
+  const colorNum =
+    asciiCode.toString() + asciiCode.toString() + asciiCode.toString()
+
+  var num = Math.round(0xffffff * parseInt(colorNum))
+  var r = (num >> 16) & 145
+  var g = (num >> 8) & 145
+  var b = num & 145
+
+  return {
+    color: 'rgb(' + r + ', ' + g + ', ' + b + ', 0.8)',
+    character: firstAlphabet?.toUpperCase(),
+  }
+}

package/src/constants/formValidations.ts

@@ -0,0 +1,6 @@
+export const isNumber = (value: string) => {
+  const regEx = /^[0-9]*$/
+  let isNum = regEx.test(value)
+
+  return isNum
+}

package/src/constants/index.ts

@@ -0,0 +1,4 @@
+export * from './UIConstants'
+export * from './formValidations'
+export * from './permissions'
+export * from './validateMessages'

package/src/constants/permissions.ts

@@ -0,0 +1,67 @@
+export interface IPermission {
+  can_create_admission: boolean
+  can_create_role: boolean
+  can_create_user: boolean
+  can_delete_admission: boolean
+  can_delete_role: boolean
+  can_delete_user: boolean
+  can_edit_admission: boolean
+  can_edit_role: boolean
+  can_edit_user: boolean
+  can_manage_admissions: boolean
+  can_manage_roles: boolean
+  can_manage_users: boolean
+  can_view_admissions: boolean
+  can_view_roles: boolean
+  can_view_users: boolean
+  can_view_students: boolean
+  can_view_exams: boolean
+  can_view_classrooms: boolean
+  can_view_clubs: boolean
+  can_view_events: boolean
+  can_view_students_feed: boolean
+  can_print_application_form: boolean
+  can_pay_tution_fee: boolean
+  can_allot_tution_fee: boolean
+  can_manage_scholarships: boolean
+  can_create_scholarship: boolean
+  can_edit_scholarship: boolean
+  can_delete_scholarship: boolean
+  can_manage_exams: boolean
+  can_create_exam: boolean
+  can_create_exam_timetable: boolean
+}
+
+export const defaultPermissions = {
+  can_create_admission: false,
+  can_create_role: false,
+  can_create_user: false,
+  can_delete_admission: false,
+  can_delete_role: false,
+  can_delete_user: false,
+  can_edit_admission: false,
+  can_edit_role: false,
+  can_edit_user: false,
+  can_manage_admissions: false,
+  can_manage_roles: false,
+  can_manage_users: false,
+  can_view_admissions: false,
+  can_view_roles: false,
+  can_view_users: false,
+  can_view_students: false,
+  can_view_exams: false,
+  can_view_classrooms: false,
+  can_view_clubs: false,
+  can_view_events: false,
+  can_view_students_feed: false,
+  can_print_application_form: false,
+  can_pay_tution_fee: false,
+  can_allot_tution_fee: false,
+  can_manage_scholarships: false,
+  can_create_scholarship: false,
+  can_edit_scholarship: false,
+  can_delete_scholarship: false,
+  can_manage_exams: false,
+  can_create_exam: false,
+  can_create_exam_timetable: false,
+}

package/src/constants/validateMessages.ts

@@ -0,0 +1,12 @@
+// Validation messages for ant design forms
+
+export const validateMessages = {
+  required: '${label} is required!',
+  types: {
+    email: '${label} is not validate email!',
+    number: '${label} is not a validate number!',
+  },
+  number: {
+    range: '${label} must be between ${min} and ${max}',
+  },
+}

package/src/contexts/Providers.tsx

@@ -0,0 +1,24 @@
+import MuiThemeProvider from "../theme/MuiThemeProvider";
+import ConfirmContextProvider from "../components/PopupConfirm/ConfirmContextProvider";
+import { CssBaseline } from "@mui/material";
+import { BrowserRouter } from "react-router-dom";
+import QueryClientProvider from "./QueryClientProvider";
+
+import DialogProvider from "../components/DrawerWrapper/DrawerWrapper";
+import { ToastContainer } from '../components'
+
+export default function Providers({ children }) {
+  return (
+    <BrowserRouter>
+      <QueryClientProvider>
+        <MuiThemeProvider>
+          <DialogProvider>
+            <ConfirmContextProvider>{children}</ConfirmContextProvider>
+            <CssBaseline />
+            <ToastContainer />
+          </DialogProvider>
+        </MuiThemeProvider>
+      </QueryClientProvider>
+    </BrowserRouter>
+  )
+}

package/src/contexts/QueryClientProvider.tsx

@@ -0,0 +1,22 @@
+import {
+  QueryClient,
+  QueryClientProvider as ReactQueryClientProvider,
+} from 'react-query'
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: false,
+      // useErrorBoundary: (error: AxiosError) => error.response?.status >= 400,
+    },
+  },
+})
+
+export default function QueryClientProvider({ children }) {
+  return (
+    <ReactQueryClientProvider client={queryClient}>
+      {children}
+    </ReactQueryClientProvider>
+  )
+}

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useFetch } from './useFetch'
+export * from './useRouter'

package/src/hooks/useFetch.ts

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react'
+import axios from '../config/axios'
+
+export function useMockFetch(promiseFn: Function) {
+  const [data, setData] = useState<any>()
+  const [error, setError] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    setLoading(true)
+    promiseFn()
+      .then((res) => {
+        setData(res.data)
+        setLoading(false)
+      })
+      .catch((err) => {
+        setLoading(false)
+        setError(null)
+      })
+  }, [])
+
+  return {
+    data,
+    loading,
+  }
+}
+
+export default function useFetch(url: string, skip?: boolean) {
+  const [data, setData] = useState<any>()
+  const [error, setError] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (skip) return
+    setLoading(true)
+    axios
+      .get(url)
+      .then((res) => {
+        setData(res.data)
+        setLoading(false)
+      })
+      .catch((err) => {
+        setError(err)
+        setLoading(false)
+      })
+  }, [])
+
+  return {
+    data,
+    loading,
+    error,
+  }
+}

package/src/hooks/useRouter.ts

@@ -0,0 +1,31 @@
+import { useLocation, useMatch, useNavigate, useParams } from 'react-router-dom'
+
+const useHistory = () => {
+  const navigate = useNavigate()
+  const { pathname, search } = useLocation()
+
+  return {
+    push: navigate,
+    location: {
+      pathname: pathname,
+      search: search,
+    },
+  }
+}
+const useRouteMatch = (path?) => {
+  const { pathname } = useLocation()
+  const params = useParams()
+  const match = useMatch({ path, end: false })
+  // console.log({
+  //   match,
+  //   params,
+  //   pathname,
+  // })
+  return {
+    params: params,
+    path: match?.pattern?.path,
+    url: pathname,
+  }
+}
+
+export { useHistory, useRouteMatch }

package/src/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+
+import { enableMapSet } from 'immer'
+enableMapSet()
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
+root.render(<App />)

package/src/layouts/ComponentsLayout.tsx

@@ -0,0 +1,3 @@
+export default function ComponentsLayout() {
+  return <div>ComponentsLayout</div>
+}

package/src/pages/LoginPage/LoginPage.tsx

@@ -0,0 +1,166 @@
+import { Spinner } from '../../components'
+import { useFetch } from '../../hooks'
+import axios from '../../config/axios'
+import { Visibility, VisibilityOff } from '@mui/icons-material'
+import {
+  Alert,
+  Box,
+  IconButton,
+  InputAdornment,
+  Stack,
+  Typography,
+} from '@mui/material'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { welcomeImage } from '../../assets/images'
+import {
+  StyledBanner,
+  StyledBannerFooter,
+  StyledBannerImage,
+  StyledButton,
+  StyledFormSection,
+  StyledLink,
+  StyledMain,
+  StyledTextField,
+} from './styles'
+import { useNavigate } from 'react-router-dom'
+import Cookies from 'js-cookie'
+import axiosBase from 'axios'
+
+const LoginPage = () => {
+  const { loading, data: assets } = useFetch('/assets')
+
+  if (loading) {
+    return <Spinner />
+  }
+
+  return (
+    <>
+      <StyledMain>
+        <StyledBanner>
+          <StyledBannerImage>
+            <img src={welcomeImage} alt="login-banner" />
+          </StyledBannerImage>
+          <StyledBannerFooter>
+            <div className="logo">
+              <Typography variant="body1">Powered By</Typography>
+              <img
+                src={
+                  'https://campx-logos.s3.ap-south-1.amazonaws.com/CampX.png'
+                }
+                alt="login-banner"
+              />
+            </div>
+            <div className="copyright">
+              <Typography variant="subtitle1">
+                &#169; All Rights reserved to CampX Edutech Pvt. Ltd., 2022
+              </Typography>
+            </div>
+          </StyledBannerFooter>
+        </StyledBanner>
+        <StyledFormSection>
+          <Box width={'100%'}>
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                marginBottom: '54px',
+              }}
+            >
+              <img
+                src={assets?.logo}
+                style={{
+                  width: '200px',
+                }}
+              />
+            </Box>
+            <LoginForm />
+          </Box>
+        </StyledFormSection>
+      </StyledMain>
+      <StyledLink
+        style={{
+          textAlign: 'right',
+          display: 'block',
+          position: 'absolute',
+          top: '20px',
+          right: '20px',
+        }}
+        href="/results/search"
+      >
+        Student Results
+      </StyledLink>
+    </>
+  )
+}
+
+export default LoginPage
+
+export function LoginForm() {
+  const [showPassword, setShowPassword] = useState(false)
+  const { handleSubmit, control } = useForm()
+  const [error, setError] = useState('')
+
+  const onSubmit = async (values) => {
+    try {
+      const res = await axiosBase.post(
+        `https://auth-api.campx.in/auth/login`,
+        values,
+      )
+      Cookies.set('campx_session_key', res.data.cookie)
+      window.location.href = '/'
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.log(err)
+      setError(err.response.data.message ?? 'Server Error')
+    }
+  }
+
+  return (
+    <Box sx={{ maxWidth: '500px' }} margin="0 auto" padding={'0 1rem'}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Stack gap={'40px'}>
+          <Box>
+            <StyledTextField
+              size="medium"
+              control={control}
+              name="username"
+              label="User ID"
+              required
+            />
+          </Box>
+          <Box>
+            <StyledTextField
+              control={control}
+              name="password"
+              label="Password"
+              type={showPassword ? 'text' : 'password'}
+              required
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton
+                      size="small"
+                      aria-label="toggle password visibility"
+                      onClick={() => setShowPassword((prev) => !prev)}
+                      edge="end"
+                    >
+                      {showPassword ? <VisibilityOff /> : <Visibility />}
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }}
+            />
+          </Box>
+          <StyledButton type="submit">Login</StyledButton>
+        </Stack>
+      </form>
+      {error && (
+        <Alert severity="error" sx={{ marginTop: '20px' }}>
+          {error}
+        </Alert>
+      )}
+    </Box>
+  )
+}
+

package/src/pages/LoginPage/index.ts

@@ -0,0 +1 @@
+export { default } from './LoginPage'