@campxdev/shared 0.5.21 → 0.5.22

package/src/config/axiosXTenant.ts

@@ -0,0 +1,57 @@
+import Axios from 'axios'
+import Cookies from 'js-cookie'
+import { NetworkStore } from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
+import { isDevelopment } from '../constants'
+import { formatParams } from './axios'
+
+const sessionKey = Cookies.get('campx_session_key')
+const clientId = window.location.pathname.split('/')[1] ?? 'campx_dev'
+const evaluatorKey = Cookies.get('campx_evaluator_key')
+
+const axiosTenant = Axios.create({
+  baseURL: process.env.REACT_APP_API_HOST,
+  withCredentials: true,
+  headers: {
+    'x-tenant-id': isDevelopment ? 'campx_dev' : clientId,
+    ...(isDevelopment &&
+      sessionKey && {
+        campx_session_key: sessionKey,
+      }),
+    ...(evaluatorKey && {
+      campx_evaluator_key: evaluatorKey,
+    }),
+  },
+})
+
+axiosTenant.interceptors.request.use(
+  function (config) {
+    const params = formatParams(config?.params)
+    NetworkStore.update((s) => {
+      s.loading = true
+    })
+    return { ...config, params }
+  },
+  function (error) {
+    NetworkStore.update((s) => {
+      s.loading = false
+    })
+    return Promise.reject(error)
+  },
+)
+
+axiosTenant.interceptors.response.use(
+  function (response) {
+    NetworkStore.update((s) => {
+      s.loading = false
+    })
+    return response
+  },
+  function (err) {
+    NetworkStore.update((s) => {
+      s.loading = false
+    })
+    return Promise.reject(err)
+  },
+)
+
+export default axiosTenant

package/src/constants/isDevelopment.ts

@@ -1,3 +1,3 @@
 export const isDevelopment =
-	process.env.NODE_ENV === 'development' ||
-	window.location.origin.split('.').slice(-2).join('.') === 'campx.dev'
+  process.env.NODE_ENV === 'development' ||
+  window.location.origin.split('.').slice(-2).join('.') === 'campx.dev'

package/src/contexts/LoginFormProvider.tsx

@@ -1,39 +1,39 @@
-import {createContext, useContext} from 'react'
-import {LoginForm} from '../components'
-import {useModal} from '../components/DrawerWrapper/DrawerWrapper'
+import { createContext, useContext } from 'react'
+import { LoginForm } from '../components'
+import { useModal } from '../components/DrawerWrapper/DrawerWrapper'
 
 const LoginContext = createContext<{
-	openLoginForm: () => void
+  openLoginForm: () => void
 }>({
-	openLoginForm: () => {},
+  openLoginForm: () => {},
 })
 
-export default function LoginFormProvider({children}) {
-	const modal = useModal()
+export default function LoginFormProvider({ children }) {
+  const modal = useModal()
 
-	const onLogin = () => {
-		modal({
-			title: 'Developer Login',
-			content({close}) {
-				return <LoginForm />
-			},
-		})
-	}
+  const onLogin = () => {
+    modal({
+      title: 'Developer Login',
+      content({ close }) {
+        return <LoginForm />
+      },
+    })
+  }
 
-	return (
-		<LoginContext.Provider
-			value={{
-				openLoginForm: onLogin,
-			}}
-		>
-			{children}
-		</LoginContext.Provider>
-	)
+  return (
+    <LoginContext.Provider
+      value={{
+        openLoginForm: onLogin,
+      }}
+    >
+      {children}
+    </LoginContext.Provider>
+  )
 }
 
 export const useLoginForm = () => {
-	const context = useContext(LoginContext)
-	return {
-		openLoginForm: context.openLoginForm,
-	}
+  const context = useContext(LoginContext)
+  return {
+    openLoginForm: context.openLoginForm,
+  }
 }

package/src/contexts/Providers.tsx

@@ -1,57 +1,57 @@
 import MuiThemeProvider from '../theme/MuiThemeProvider'
 import ConfirmContextProvider from '../components/PopupConfirm/ConfirmContextProvider'
-import {CssBaseline} from '@mui/material'
-import {BrowserRouter} from 'react-router-dom'
+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'
+import { ToastContainer } from '../components'
 import LoginFormProvider from './LoginFormProvider'
-import {ReactNode} from 'react'
-import {isDevelopment} from '../constants'
+import { ReactNode } from 'react'
+import { isDevelopment } from '../constants'
 import useAppInit from '../hooks/useAppInit'
 import Cookies from 'js-cookie'
 
 export const campxTenantKey = Cookies.get('campx_tenant')
 export const urlTenantKey = window.location.pathname.split('/')[1]
 
-export default function Providers({children}: {children: ReactNode}) {
-	const {isInvalid} = useAppInit()
+export default function Providers({ children }: { children: ReactNode }) {
+  const { isInvalid } = useAppInit()
 
-	return (
-		<BrowserRouter basename={isDevelopment ? 'campx_dev' : campxTenantKey}>
-			<QueryClientProvider>
-				<MuiThemeProvider>
-					<DialogProvider>
-						<LoginFormProvider>
-							<ConfirmContextProvider>{children}</ConfirmContextProvider>
-							<CssBaseline />
-						</LoginFormProvider>
-						<ToastContainer />
-					</DialogProvider>
-				</MuiThemeProvider>
-			</QueryClientProvider>
-		</BrowserRouter>
-	)
+  return (
+    <BrowserRouter basename={isDevelopment ? 'campx_dev' : campxTenantKey}>
+      <QueryClientProvider>
+        <MuiThemeProvider>
+          <DialogProvider>
+            <LoginFormProvider>
+              <ConfirmContextProvider>{children}</ConfirmContextProvider>
+              <CssBaseline />
+            </LoginFormProvider>
+            <ToastContainer />
+          </DialogProvider>
+        </MuiThemeProvider>
+      </QueryClientProvider>
+    </BrowserRouter>
+  )
 }
 
 const InvalidClientKey = () => {
-	return (
-		<div
-			style={{
-				height: '95vh',
-				width: '95vw',
-				display: 'grid',
-				placeItems: 'center',
-				fontFamily: 'sans-serif',
-			}}
-		>
-			<h1>Invalid Tenant Key</h1>
-			{!isDevelopment && (
-				<a href='https://id.campx.in'>
-					<p>Login to continue</p>
-				</a>
-			)}
-		</div>
-	)
+  return (
+    <div
+      style={{
+        height: '95vh',
+        width: '95vw',
+        display: 'grid',
+        placeItems: 'center',
+        fontFamily: 'sans-serif',
+      }}
+    >
+      <h1>Invalid Tenant Key</h1>
+      {!isDevelopment && (
+        <a href="https://id.campx.in">
+          <p>Login to continue</p>
+        </a>
+      )}
+    </div>
+  )
 }

package/src/contexts/QueryClientProvider.tsx

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

package/src/hooks/index.ts

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

package/src/hooks/useAppInit.ts

@@ -1,33 +1,33 @@
 import Cookies from 'js-cookie'
-import {useEffect, useState} from 'react'
-import {isDevelopment} from '../constants'
-import {campxTenantKey} from '../contexts/Providers'
+import { useEffect, useState } from 'react'
+import { isDevelopment } from '../constants'
+import { campxTenantKey } from '../contexts/Providers'
 
 const urlTenantKey = window.location.pathname.split('/')[1]
 
 export default function useAppInit() {
-	const [isInvalid, setIsInvalid] = useState(false)
+  const [isInvalid, setIsInvalid] = useState(false)
 
-	useEffect(() => {
-		if (!isDevelopment) {
-			if (!campxTenantKey) {
-				return window.location.replace('https://id.campx.in')
-			}
+  useEffect(() => {
+    if (!isDevelopment) {
+      if (!campxTenantKey) {
+        return window.location.replace('https://id.campx.in')
+      }
 
-			if (!urlTenantKey) {
-				return window.location.replace(
-					window.location.origin + `/${campxTenantKey}`
-				)
-			}
-		}
+      if (!urlTenantKey) {
+        return window.location.replace(
+          window.location.origin + `/${campxTenantKey}`,
+        )
+      }
+    }
 
-		if (window.location.pathname === '/' && isDevelopment) {
-			Cookies.set('campx_tenant', 'campx_dev')
-			window.location.href = window.location.origin + '/campx_dev'
-		}
-	}, [])
+    if (window.location.pathname === '/' && isDevelopment) {
+      Cookies.set('campx_tenant', 'campx_dev')
+      window.location.href = window.location.origin + '/campx_dev'
+    }
+  }, [])
 
-	return {
-		isInvalid,
-	}
+  return {
+    isInvalid,
+  }
 }

package/src/hooks/useAuth.ts

@@ -1,90 +1,91 @@
-import {useEffect, useState} from 'react'
-import {useQuery} from 'react-query'
-import {toast} from 'react-toastify'
+import { useEffect, useState } from 'react'
+import { useQuery } from 'react-query'
+import { toast } from 'react-toastify'
 import axios from '../config/axios'
-import {isDevelopment} from '../constants'
-import {useLoginForm} from '../contexts/LoginFormProvider'
-import {PermissionsStore} from '../permissions'
-import {AssetsStore, UserStore} from '../shared-state'
+import { isDevelopment } from '../constants'
+import { useLoginForm } from '../contexts/LoginFormProvider'
+import { PermissionsStore } from '../permissions'
+import { AssetsStore, UserStore } from '../shared-state'
 
 const url = window.location.origin
 
 function useAuth(): {
-	loading: boolean
-	data: {
-		user?: any
-		roles?: any
-		username?: any
-		permissions?: any
-		assets?: {
-			logo: string
-			logo_square: string
-		}
-	}
+  loading: boolean
+  data: {
+    user?: any
+    roles?: any
+    username?: any
+    permissions?: any
+    assets?: {
+      logo: string
+      logo_square: string
+    }
+  }
 } {
-	const {openLoginForm} = useLoginForm()
-	const [loading, setLoading] = useState<boolean>(false)
-	const [data, setData] = useState(null)
-	const appInit = async () => {
-		setLoading(true)
+  const { openLoginForm } = useLoginForm()
+  const [loading, setLoading] = useState<boolean>(false)
+  const [data, setData] = useState(null)
+  const appInit = async () => {
+    setLoading(true)
 
-		axios
-			.get('/auth/my-permissions')
-			.then((res) => {
-				console.log(res.data)
-				setLoading(false)
-				setData(res.data)
-				UserStore.update((s) => {
-					s.username = res.data?.username
-					s.user = res.data?.user
-					s.roles = res.data?.roles
-				})
+    axios
+      .get('/auth/my-permissions')
+      .then((res) => {
+        console.log(res.data)
+        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) => {
-				setLoading(false)
-				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')
-					}
-				}
-				if (isDevelopment) {
-					openLoginForm()
-				} else {
-					window.location.replace(`https://www.id.campx.in/?redirect_to=${url}`)
-				}
-			})
-	}
+        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) => {
+        setLoading(false)
+        if (isDevelopment) {
+          openLoginForm()
+          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(() => {
-		if (window.location.pathname === '/') {
-			if (isDevelopment) {
-				window.location.replace(window.location.origin + '/campx_dev')
-			}
-		}
-		appInit()
-	}, [])
+  useEffect(() => {
+    if (window.location.pathname === '/') {
+      if (isDevelopment) {
+        window.location.replace(window.location.origin + '/campx_dev')
+      }
+    }
+    appInit()
+  }, [])
 
-	return {
-		loading: loading || !data?.permissions,
-		data,
-	}
+  return {
+    loading: loading || !data?.permissions,
+    data,
+  }
 }
 
 export default useAuth