@campxdev/shared 0.2.15 → 0.3.1

package/src/config/axios.ts

@@ -1,8 +1,8 @@
 import Axios from 'axios'
 import _ from 'lodash'
 import {toast} from 'react-toastify'
-import {globalStore} from '../shared-state/GlobalStore'
 import Cookies from 'js-cookie'
+import {NetworkStore} from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
 
 const isDevelopment =
 	process.env.NODE_ENV === 'development' ||
@@ -31,49 +31,30 @@ let axios = Axios.create({
 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 = ''
-		// })
+		NetworkStore.update((s) => {
+			s.loading = true
+		})
 		return {...config, params}
 	},
 	function (error) {
-		// globalStore.update((s) => {
-		// 	s.loading = true
-		// })
+		NetworkStore.update((s) => {
+			s.loading = false
+		})
 		return Promise.reject(error)
 	}
 )
 
 axios.interceptors.response.use(
 	function (response) {
-		// globalStore.update((s) => {
-		// 	s.loading = false
-		// })
+		NetworkStore.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)
-		// 	// }
-		// }
-
+		NetworkStore.update((s) => {
+			s.loading = false
+		})
 		return Promise.reject(err)
 	}
 )
@@ -89,51 +70,3 @@ export const axiosErrorToast = (error: any, fallback?: string) => {
 
 	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/index.ts

@@ -2,3 +2,4 @@ export * from './UIConstants'
 export * from './formValidations'
 export * from './permissions'
 export * from './validateMessages'
+export * from './isDevelopment'

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: (error: AxiosError) => error.response?.status >= 400,
-    },
-  },
+	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/permissions/PageWithPermission.tsx

@@ -1,57 +1,18 @@
 import PermissionDeniedPage from './PermissionDeniedPage'
 import {PermissionsStore} from './PermissionsStore'
-import React, {ReactNode, useEffect} from 'react'
-import {globalStore} from '../shared-state/GlobalStore'
-import {Box, Typography} from '@mui/material'
-import {useHistory} from '../hooks/useRouter'
 
 const accessIfNoKey = process.env.NODE_ENV === 'development' ? true : false
 
 export default function PageWithPermission({
 	permissionKey,
-	component: Component,
 	children,
-	...props
 }: {
 	permissionKey: string
-	component?: any
 	children?: any
 }) {
-	// const history = useHistory()
-	// const errorState = globalStore.useState((s) => s.error)
-
 	const permissions = PermissionsStore.useState((s) => s).permissions
 	const hasAccess = permissionKey ? permissions[permissionKey] : accessIfNoKey
 
-	// useEffect(() => {
-	// 	globalStore.update((s) => {
-	// 		s.error = {
-	// 			message: '',
-	// 			statusCode: null,
-	// 			description: '',
-	// 		}
-	// 	})
-	// }, [history])
-
-	// if (errorState.statusCode) return <ErrorPage />
-	// if (hasAccess) return Component
 	if (hasAccess) return children
 	return <PermissionDeniedPage />
 }
-
-const ErrorPage = () => {
-	const globalState = globalStore.useState((s) => s).error
-	return (
-		<Box
-			sx={{
-				display: 'flex',
-				alignItems: 'center',
-				justifyContent: 'center',
-			}}
-		>
-			<Typography variant='h1' marginTop={'100px'}>
-				{globalState.description}
-			</Typography>
-		</Box>
-	)
-}

package/src/permissions/PermissionDeniedPage.tsx

@@ -1,23 +1,16 @@
-import { Typography } from '@mui/material'
-import React from 'react'
-import { Link } from 'react-router-dom'
-import styled from 'styled-components'
+import {Box, Typography} from '@mui/material'
+
 export default function PermissionDeniedPage() {
-  return (
-    <StyledPageContainer>
-      <div>
-        <Typography>Permission Denied</Typography>
-        {/* <Link to={'/'}>Go Back</Link> */}
-      </div>
-    </StyledPageContainer>
-  )
+	return (
+		<Box
+			sx={{
+				height: '100vh',
+				width: '100%',
+				display: 'grid',
+				placeItems: 'center',
+			}}
+		>
+			<Typography variant='h6'>Permission Denied</Typography>
+		</Box>
+	)
 }
-
-const StyledPageContainer = styled.div`
-  height: 100vh;
-  width: 100%;
-  center: #233659;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`

package/src/shared-state/index.ts

@@ -1,4 +1,3 @@
 import {AssetsStore} from './AssetsStore'
 import {UserStore} from './UserStore'
-import {globalStore} from './GlobalStore'
-export {AssetsStore, UserStore, globalStore as GlobalStore}
+export {AssetsStore, UserStore}

package/src/theme/MuiThemeProvider.tsx

@@ -1,11 +1,13 @@
-import { CssBaseline, ThemeProvider } from '@mui/material'
+import {CssBaseline, ThemeProvider} from '@mui/material'
+import GlobalNetworkLoadingIndicator from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
 import muiTheme from './muiTheme'
 
-export default function MuiThemeProvider({ children }) {
-  return (
-    <ThemeProvider theme={muiTheme}>
-      {children}
-      <CssBaseline />
-    </ThemeProvider>
-  )
+export default function MuiThemeProvider({children}) {
+	return (
+		<ThemeProvider theme={muiTheme}>
+			{children}
+			<CssBaseline />
+			<GlobalNetworkLoadingIndicator />
+		</ThemeProvider>
+	)
 }

package/src/theme/theme.d.ts

@@ -1,75 +1,75 @@
-import { ThemeOptions as MuiThemeOptions } from '@mui/material/styles'
+import {ThemeOptions as MuiThemeOptions} from '@mui/material/styles'
 
 declare module '@mui/material/styles' {
-  interface Theme {
-    borders: {
-      grayLight: string
-      primary: string
-    }
-    palette: {
-      primary: {
-        dark: string
-        main: string
-        light: string
-        lighter: string
-      }
-      secondary: {
-        main: string
-        light: string
-        dark: string
-        lighter: string
-      }
-      common: {
-        black: string
-        white: string
-        green: string
-        yellow: string
-        blue: string
-      }
-      error: {
-        main: string
-      }
-      text: {
-        primary: string
-        secondary: string
-        disabled: string
-      }
-    }
-  }
-  // allow configuration using `createTheme`
-  interface CustomThemeOptions extends MuiThemeOptions {
-    borders?: {
-      grayLight?: string
-    }
-    palette: {
-      secondary?: {
-        main?: string
-        light?: string
-        dark?: string
-        lighter?: string
-      }
-      primary?: {
-        dark?: string
-        main?: string
-        light?: string
-        lighter?: string
-      }
-      common?: {
-        black?: string
-        white?: string
-        green?: string
-        yellow?: string
-        blue?: string
-      }
-      error?: {
-        main?: string
-      }
-      text?: {
-        primary?: string
-        secondary?: string
-        disabled?: string
-      }
-    }
-  }
-  export function createTheme(options?: CustomThemeOptions): CustomTheme
+	interface Theme {
+		borders: {
+			grayLight: string
+			primary: string
+		}
+		palette: {
+			primary: {
+				dark: string
+				main: string
+				light: string
+				lighter: string
+			}
+			secondary: {
+				main: string
+				light: string
+				dark: string
+				lighter: string
+			}
+			common: {
+				black: string
+				white: string
+				green: string
+				yellow: string
+				blue: string
+			}
+			error: {
+				main: string
+			}
+			text: {
+				primary: string
+				secondary: string
+				disabled: string
+			}
+		}
+	}
+	// allow configuration using `createTheme`
+	interface CustomThemeOptions extends MuiThemeOptions {
+		borders?: {
+			grayLight?: string
+		}
+		palette: {
+			secondary?: {
+				main?: string
+				light?: string
+				dark?: string
+				lighter?: string
+			}
+			primary?: {
+				dark?: string
+				main?: string
+				light?: string
+				lighter?: string
+			}
+			common?: {
+				black?: string
+				white?: string
+				green?: string
+				yellow?: string
+				blue?: string
+			}
+			error?: {
+				main?: string
+			}
+			text?: {
+				primary?: string
+				secondary?: string
+				disabled?: string
+			}
+		}
+	}
+	export function createTheme(options?: CustomThemeOptions): CustomTheme
 }

package/src/utils/withRouteWrapper.tsx

@@ -1,25 +1,26 @@
-import { Spinner } from '../components'
-import { Suspense } from 'react'
+import {Spinner} from '../components'
+import {Suspense} from 'react'
 import PageWithPermission from '../permissions/PageWithPermission'
+import {LinearProgress} from '../components/LinearProgress'
 
 const withRouteWrapper = (routes) => {
-  return routes?.map((item, index) => {
-    if (item?.children) {
-      return {
-        ...item,
-        children: withRouteWrapper(item.children),
-      }
-    }
-    return {
-      ...item,
-      element: item?.element ? (
-        <Suspense fallback={<Spinner />} key={index}>
-          <PageWithPermission permissionKey={item?.permissionKey}>
-            {item.element}
-          </PageWithPermission>
-        </Suspense>
-      ) : undefined,
-    }
-  })
+	return routes?.map((item, index) => {
+		if (item?.children) {
+			return {
+				...item,
+				children: withRouteWrapper(item.children),
+			}
+		}
+		return {
+			...item,
+			element: item?.element ? (
+				<Suspense fallback={<LinearProgress />} key={index}>
+					<PageWithPermission permissionKey={item?.permissionKey}>
+						{item.element}
+					</PageWithPermission>
+				</Suspense>
+			) : undefined,
+		}
+	})
 }
 export default withRouteWrapper

package/src/utils/withSuspense.tsx

@@ -1,6 +1,6 @@
-import { Spinner } from '../components'
-import { ReactNode, Suspense } from 'react'
+import {LinearProgress, Spinner} from '../components'
+import {ReactNode, Suspense} from 'react'
 
 export default function withSuspense(component: ReactNode) {
-  return <Suspense fallback={<Spinner />}>{component}</Suspense>
+	return <Suspense fallback={<LinearProgress />}>{component}</Suspense>
 }