@campxdev/shared 1.8.3 → 1.8.5-0.alpha-1

package/src/contexts/QueryClientProvider.tsx

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

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
-export { default as useFetch } from './useFetch'
-export * from './useRouter'
-export { default as useAuth } from './useAuth'
-export { default as useFilter } from './useFilters'
+export { default as useFetch } from './useFetch'
+export * from './useRouter'
+export { default as useAuth } from './useAuth'
+export { default as useFilter } from './useFilters'
+export { default as useExternalScript } from './useExternalScript'

package/src/hooks/useAuth.ts

@@ -1,96 +1,152 @@
-import { AxiosError } from 'axios'
-import { useEffect, useState } from 'react'
-import { toast } from 'react-toastify'
-import axios from '../config/axios'
-import { isDevelopment } from '../constants'
-import { useLoginForm } from '../contexts/LoginFormProvider'
-import { campxTenantKey, urlTenantKey } from '../contexts/Providers'
-import { PermissionsStore, AssetsStore, UserStore } from '../shared-state'
-
-const url = window.location.origin
-
-type AuthParams = {
-  permissionsEndpoint: string
-  loginUrl?: string
-}
-
-type AuthResponse = {
-  loading: boolean
-  data: {
-    user?: any
-    roles?: any
-    fullName?: any
-    permissions?: any
-    assets?: {
-      logo: string
-      logo_square: string
-    }
-  }
-}
-
-function useAuth({ permissionsEndpoint, loginUrl }: AuthParams): AuthResponse {
-  const { openLoginForm } = useLoginForm()
-  const [loading, setLoading] = useState<boolean>(false)
-  const [data, setData] = useState(null)
-
-  const appInit = async () => {
-    setLoading(true)
-    axios
-      .get(permissionsEndpoint)
-      .then((res) => {
-        setLoading(false)
-        setData(res.data)
-        UserStore.update((s) => {
-          s.username = res.data?.username
-          s.user = res.data?.user
-          s.roles = res.data?.roles
-        })
-
-        PermissionsStore.update((s) => {
-          s.permissions = {
-            ...res.data?.permissions,
-            can_settings_view: 1,
-            can_dashboard_view: 1,
-            can_individual_pages_view: 1,
-          } as any
-        })
-        AssetsStore.update((s) => {
-          s.logo = res.data?.assets.logo
-          s.logo_square = res.data?.assets.logo_square
-        })
-      })
-      .catch((err: AxiosError) => {
-        setLoading(false)
-        const origin = window.location.origin
-        const isStaging = origin.split('campx')[1] === '.dev'
-
-        if (isDevelopment || isStaging) {
-          openLoginForm(loginUrl)
-          return
-        } else {
-          window.location.replace(`https://www.id.campx.in/?redirect_to=${url}`)
-        }
-
-        if (err.response.status !== 401) {
-          if (err.response.status > 400 && err.response.status < 500) {
-            window.location.replace(
-              `https://www.id.campx.in/?redirect_to=${url}`,
-            )
-          } else {
-            toast.error('Server Error')
-          }
-        }
-      })
-  }
-
-  useEffect(() => {
-    appInit()
-  }, [])
-
-  return {
-    loading: loading || !data?.permissions,
-    data,
-  }
-}
-
-export default useAuth
+import { AxiosError } from 'axios'
+import { useEffect, useState } from 'react'
+import { toast } from 'react-toastify'
+import axios from '../config/axios'
+import { isDevelopment } from '../constants'
+import { useLoginForm } from '../contexts/LoginFormProvider'
+import { PermissionsStore, AssetsStore, UserStore } from '../shared-state'
+
+const url = window.location.origin
+
+type AuthParams = {
+  permissionsEndpoint: string
+  loginUrl?: string
+}
+
+type AuthResponse = {
+  loading: boolean
+  data: {
+    user?: any
+    roles?: any
+    fullName?: any
+    permissions?: any
+    assets?: {
+      logo: string
+      logo_square: string
+    }
+  }
+}
+
+const ApplicationObj = {
+  enroll: 'enroll_x',
+  ums: 'square',
+  payments: 'payments',
+  exams: 'exams',
+}
+
+const checkIsAdmin = (user) => {
+  let subDomain = window.location.host.split('.')?.slice(-3)[0]
+  const localSubDomain = process.env.REACT_APP_SUBDOMAIN
+
+  if (user?.isSuperuser) return 1
+
+  if (process.env.NODE_ENV === 'development') {
+    subDomain = localSubDomain
+
+    if (!localSubDomain) {
+      toast.warn('missing REACT_APP_SUBDOMAIN in .env')
+    }
+  }
+
+  // eslint-disable-next-line no-console
+  console.log(
+    'Current App ->',
+    ApplicationObj[subDomain],
+    '; subdomain env ->',
+    subDomain,
+  )
+
+  const profile = user?.profiles?.find(
+    (item) => item.application == ApplicationObj[subDomain],
+  )
+  return profile ? (profile.isAdmin == true ? 1 : 0) : 0
+}
+
+function useAuth({ permissionsEndpoint, loginUrl }: AuthParams): AuthResponse {
+  const { openLoginForm } = useLoginForm()
+  const [loading, setLoading] = useState<boolean>(false)
+  const [data, setData] = useState(null)
+
+  const appInit = async () => {
+    setLoading(true)
+    axios
+      .get(permissionsEndpoint)
+      .then((res) => {
+        const origin = window.location.origin
+        const originSubdomain =
+          window.location.host.split('.')?.slice(-3)[0] ?? 'ums'
+
+        const isStaging = origin.split('campx')[1] === '.dev'
+
+        if (isDevelopment == false && isStaging == false) {
+          if (
+            !res.data.applications.includes(ApplicationObj[originSubdomain])
+          ) {
+            window.location.replace(
+              `https://www.id.campx.in/apps?redirect_to=${url}`,
+            )
+          }
+        }
+
+        setLoading(false)
+        setData(res.data)
+        UserStore.update((s) => {
+          s.username = res.data?.user?.username
+          s.user = res.data?.user
+          s.roles = res.data?.roles
+        })
+        const isAdmin = checkIsAdmin(res.data.user)
+        // eslint-disable-next-line no-console
+        console.log('Is Admin -> ', isAdmin)
+
+        PermissionsStore.update((s) => {
+          s.permissions = {
+            ...res.data?.permissions,
+            can_settings_view: 1,
+            can_dashboard_view: 1,
+            can_individual_pages_view: 1,
+            can_analatics_view: isAdmin,
+            can_admin_view: isAdmin,
+          } as any
+          s.applications = res.data?.applications ?? []
+        })
+        AssetsStore.update((s) => {
+          s.logo = res.data?.assets.logo
+          s.logo_square = res.data?.assets.logo_square
+        })
+      })
+      .catch((err: AxiosError) => {
+        setLoading(false)
+        const origin = window.location.origin
+        const isStaging = origin.split('campx')[1] === '.dev'
+
+        if (isDevelopment || isStaging) {
+          openLoginForm(loginUrl)
+          return
+        } else {
+          window.location.replace(`https://www.id.campx.in/?redirect_to=${url}`)
+        }
+
+        if (err.response.status !== 401) {
+          if (err.response.status > 400 && err.response.status < 500) {
+            window.location.replace(
+              `https://www.id.campx.in/?redirect_to=${url}`,
+            )
+          } else {
+            toast.error('Server Error')
+          }
+        }
+      })
+  }
+
+  useEffect(() => {
+    appInit()
+  }, [])
+
+  return {
+    loading: loading || !data?.permissions,
+    data,
+  }
+}
+
+export default useAuth

package/src/hooks/useExternalScript.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react'
+const useExternalScript = (url) => {
+  let [state, setState] = useState(url ? 'loading' : 'idle')
+
+  useEffect(() => {
+    if (!url) {
+      setState('idle')
+      return
+    }
+    let script: any = document.querySelector(`script[src="${url}"]`)
+
+    const handleScript = (e) => {
+      setState(e.type === 'load' ? 'ready' : 'error')
+    }
+    if (!script) {
+      script = document.createElement('script')
+      script.type = 'application/javascript'
+      script.src = url
+      script.async = true
+      document.body.appendChild(script)
+      script.addEventListener('load', handleScript)
+      script.addEventListener('error', handleScript)
+    }
+
+    script.addEventListener('load', handleScript)
+    script.addEventListener('error', handleScript)
+
+    return () => {
+      script.removeEventListener('load', handleScript)
+      script.removeEventListener('error', handleScript)
+      document.body.removeChild(script)
+    }
+  }, [url])
+
+  return state
+}
+
+export default useExternalScript

package/src/hooks/useFetch.ts

@@ -1,53 +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,
-  }
-}
+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/useFilters.ts

@@ -1,80 +1,83 @@
-import React, { useEffect, useState } from 'react'
-
-export default function useFilters(initialState, key?: any) {
-  const [filters, setFilters] = useState(initialState)
-  const [filtersApplied, setFiltersApplied] = useState(false)
-
-  useEffect(() => {
-    const prevFilters = getSessionFilters()
-    setFilters({
-      ...filters,
-      ...prevFilters,
-    })
-  }, [])
-
-  function onFilterChange(modified) {
-    setFilters({
-      ...filters,
-      ...modified,
-    })
-
-    const filterData = {
-      ...filters,
-      ...modified,
-    }
-
-    const sessionData = Object.keys(filterData).map((item, key) => {
-      if (filtersCheck(item, filterData)) {
-        return { key: item, value: filterData[item] }
-      }
-    })
-
-    const filteredSessionArray = sessionData.filter(
-      (value) => value !== undefined,
-    )
-
-    if (filteredSessionArray?.length > 0) {
-      sessionStorage.setItem(key, JSON.stringify(filteredSessionArray))
-      setFiltersApplied(true)
-    }
-  }
-
-  function filtersCheck(item: any, filterData: any) {
-    switch (true) {
-      case !!filterData[item] &&
-        item !== 'limit' &&
-        item !== 'offset' &&
-        item !== 'page':
-        return true
-      default:
-        return false
-    }
-  }
-
-  function clearFilters() {
-    setFilters(initialState)
-    setFiltersApplied(false)
-    sessionStorage.removeItem(key)
-  }
-
-  const getSessionFilters = () => {
-    try {
-      if (sessionStorage.getItem(key)) {
-        setFiltersApplied(true)
-        const parsed = JSON.parse(sessionStorage.getItem(key))
-        const filters = parsed?.reduce(
-          (acc, curr) => ({ ...acc, [curr.key]: curr.value }),
-          {},
-        )
-        return filters
-      }
-    } catch (error) {}
-  }
-
-  return {
-    filters,
-    onFilterChange,
-    clearFilters,
-    filtersApplied,
-  }
-}
+import React, { useEffect, useState } from 'react'
+
+export default function useFilters(initialState, key?: any) {
+  const [filters, setFilters] = useState(initialState)
+  const [filtersApplied, setFiltersApplied] = useState(false)
+
+  useEffect(() => {
+    const prevFilters = getSessionFilters()
+    setFilters({
+      ...filters,
+      ...prevFilters,
+    })
+  }, [])
+
+  function onFilterChange(modified) {
+    setFilters((prev) => ({
+      ...prev,
+      ...modified,
+    }))
+
+    const filterData = {
+      ...filters,
+      ...modified,
+    }
+
+    const sessionData = Object.keys(filterData).map((item, key) => {
+      if (filtersCheck(item, filterData)) {
+        return { key: item, value: filterData[item] }
+      }
+    })
+
+    const filteredSessionArray = sessionData.filter(
+      (value) => value !== undefined,
+    )
+
+    if (filteredSessionArray?.length > 0) {
+      sessionStorage.setItem(key, JSON.stringify(filteredSessionArray))
+      setFiltersApplied(true)
+    } else {
+      sessionStorage.removeItem(key)
+      setFiltersApplied(false)
+    }
+  }
+
+  function filtersCheck(item: any, filterData: any) {
+    switch (true) {
+      case !!filterData[item] &&
+        item !== 'limit' &&
+        item !== 'offset' &&
+        item !== 'page':
+        return true
+      default:
+        return false
+    }
+  }
+
+  function clearFilters() {
+    setFilters(initialState)
+    setFiltersApplied(false)
+    sessionStorage.removeItem(key)
+  }
+
+  const getSessionFilters = () => {
+    try {
+      if (sessionStorage.getItem(key)) {
+        setFiltersApplied(true)
+        const parsed = JSON.parse(sessionStorage.getItem(key))
+        const filters = parsed?.reduce(
+          (acc, curr) => ({ ...acc, [curr.key]: curr.value }),
+          {},
+        )
+        return filters
+      }
+    } catch (error) {}
+  }
+
+  return {
+    filters,
+    onFilterChange,
+    clearFilters,
+    filtersApplied,
+  }
+}

package/src/hooks/useRouter.ts

@@ -1,31 +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 }
+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 }