@campxdev/shared 1.0.5 → 1.1.0

package/src/components/ErrorBoundary/ErrorFallback.tsx

@@ -1,236 +1,236 @@
-import { Alert, Box, Button, Divider, styled, Typography } from '@mui/material'
-import { useEffect, useState } from 'react'
-import {
-  nointernet,
-  pagenotfound,
-  permissiondenied,
-  unauth,
-  internalserver,
-} from '../../assets/images'
-import Cookies from 'js-cookie'
-import LoginForm from '../LoginForm'
-import { useModal } from '../DrawerWrapper/DrawerWrapper'
-import { PermissionsStore } from '../../permissions'
-import axios from '../../config/axios'
-
-const StyledAlert = styled(Alert)(({ theme }) => ({
-  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,
-  },
-}))
-
-const StyledBox = styled(Box)(({ theme }) => ({
-  width: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-}))
-
-export default function ErrorFallback({ error, resetErrorBoundary }) {
-  if (error?.response?.status) {
-    switch (error?.response?.status) {
-      case 401:
-        return <UnAuth resetBoundary={resetErrorBoundary} />
-
-      case 500:
-        return (
-          <InternalServer resetBoundary={resetErrorBoundary} error={error} />
-        )
-
-      case 403:
-        return <PemissionDenied resetBoundary={resetErrorBoundary} />
-
-      default:
-        return (
-          <InternalServer resetBoundary={resetErrorBoundary} error={error} />
-        )
-    }
-  }
-
-  if (error?.message === 'Network Error') {
-    return <NoInternet resetBoundary={resetErrorBoundary} />
-  }
-
-  return (
-    <Box sx={{ marginTop: '16px', padding: '16px' }}>
-      <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>
-  )
-}
-
-export function PageNotFound({ resetBoundary }) {
-  return (
-    <>
-      <StyledBox>
-        <img
-          src={pagenotfound}
-          alt="page not found"
-          width={470}
-          style={{ marginTop: '20px' }}
-        />
-        <Typography variant="h1">Page Not Found.</Typography>
-        <Button sx={{ marginTop: '20px' }} onClick={() => resetBoundary()}>
-          Try Again
-        </Button>
-      </StyledBox>
-    </>
-  )
-}
-
-export function NoInternet({ resetBoundary }) {
-  return (
-    <>
-      <StyledBox>
-        <img src={nointernet} alt="No Internet Found" width={470} />
-        <Typography variant="h1">No Internet Found.</Typography>
-        <Button sx={{ marginTop: '20px' }} onClick={() => resetBoundary()}>
-          Try Again
-        </Button>
-      </StyledBox>
-    </>
-  )
-}
-
-export function PemissionDenied({ resetBoundary }) {
-  return (
-    <>
-      <StyledBox>
-        <img src={permissiondenied} alt="permission denied" width={470} />
-        <Typography variant="h1">Permission Denied.</Typography>
-        <Button sx={{ marginTop: '20px' }} onClick={() => resetBoundary()}>
-          Try Again
-        </Button>
-      </StyledBox>
-    </>
-  )
-}
-
-export function InternalServer({ resetBoundary, error }) {
-  return (
-    <>
-      <StyledBox>
-        <img src={internalserver} alt="internal server error" width={470} />
-        <Typography variant="h1" marginTop={'20px'}>
-          Internal Server Error.
-        </Typography>
-        <Typography variant="body1">
-          {error?.response?.data?.message}
-        </Typography>
-        <Button
-          size="small"
-          variant="outlined"
-          sx={{ marginTop: '20px' }}
-          onClick={() => resetBoundary()}
-        >
-          Try Again
-        </Button>
-      </StyledBox>
-    </>
-  )
-}
-
-export function UnAuth({ resetBoundary }) {
-  const modal = useModal()
-  const [username, setUsername] = useState('')
-  const [loading, setLoading] = useState(false)
-
-  const url = window.location.origin
-  const origin = window?.location?.origin?.split('.')
-  const isLocalHost =
-    process.env.NODE_ENV === 'development' ||
-    origin?.slice(-2).join('.') === 'campx.dev'
-  const sessionCookie = Cookies.get('campx_session_key')
-  const appinit = async () => {
-    setLoading(true)
-    await axios
-      .get('/auth/my-permissions')
-      .then((res) => {
-        setUsername(res.data.user.fullName)
-        PermissionsStore.update((s) => {
-          s.permissions = {
-            ...res.data?.permissions,
-            can_settings_view: 1,
-            can_dashboard_view: 1,
-            can_individual_pages_view: 1,
-          } as any
-        })
-        setLoading(false)
-      })
-      .catch((e) => {
-        modal({
-          title: 'Login',
-          content: () => <LoginForm />,
-        })
-      })
-  }
-  function LoginPage() {
-    if (isLocalHost) {
-      if (!sessionCookie) {
-        modal({
-          title: 'Login',
-          content: () => <LoginForm />,
-        })
-      } else {
-        appinit()
-      }
-    } else {
-      if (!sessionCookie) {
-        window.location.replace(`https://www.id.campx.in/?redirect_to=${url}`)
-      } else {
-        appinit()
-      }
-    }
-  }
-
-  return (
-    <>
-      <StyledBox>
-        <img src={unauth} alt="unauthorized" width={470} />
-        <Typography variant="h1" marginTop={'20px'}>
-          UnAuthorized.
-        </Typography>
-        <Box
-          sx={{
-            display: 'flex',
-            marginTop: '20px',
-          }}
-        >
-          <Button
-            variant="outlined"
-            sx={{ marginRight: '10px' }}
-            onClick={() => resetBoundary()}
-          >
-            Try Again
-          </Button>
-
-          <Button onClick={() => LoginPage()}>Click here to Login</Button>
-        </Box>
-      </StyledBox>
-    </>
-  )
-}
+import { Alert, Box, Button, Divider, styled, Typography } from '@mui/material'
+import { useEffect, useState } from 'react'
+import {
+  nointernet,
+  pagenotfound,
+  permissiondenied,
+  unauth,
+  internalserver,
+} from '../../assets/images'
+import Cookies from 'js-cookie'
+import LoginForm from '../LoginForm'
+import { useModal } from '../DrawerWrapper/DrawerWrapper'
+import { PermissionsStore } from '../../permissions'
+import axios from '../../config/axios'
+
+const StyledAlert = styled(Alert)(({ theme }) => ({
+  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,
+  },
+}))
+
+const StyledBox = styled(Box)(({ theme }) => ({
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+}))
+
+export default function ErrorFallback({ error, resetErrorBoundary }) {
+  if (error?.response?.status) {
+    switch (error?.response?.status) {
+      case 401:
+        return <UnAuth resetBoundary={resetErrorBoundary} />
+
+      case 500:
+        return (
+          <InternalServer resetBoundary={resetErrorBoundary} error={error} />
+        )
+
+      case 403:
+        return <PemissionDenied resetBoundary={resetErrorBoundary} />
+
+      default:
+        return (
+          <InternalServer resetBoundary={resetErrorBoundary} error={error} />
+        )
+    }
+  }
+
+  if (error?.message === 'Network Error') {
+    return <NoInternet resetBoundary={resetErrorBoundary} />
+  }
+
+  return (
+    <Box sx={{ marginTop: '16px', padding: '16px' }}>
+      <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>
+  )
+}
+
+export function PageNotFound({ resetBoundary }) {
+  return (
+    <>
+      <StyledBox>
+        <img
+          src={pagenotfound}
+          alt="page not found"
+          width={470}
+          style={{ marginTop: '20px' }}
+        />
+        <Typography variant="h1">Page Not Found.</Typography>
+        <Button sx={{ marginTop: '20px' }} onClick={() => resetBoundary()}>
+          Try Again
+        </Button>
+      </StyledBox>
+    </>
+  )
+}
+
+export function NoInternet({ resetBoundary }) {
+  return (
+    <>
+      <StyledBox>
+        <img src={nointernet} alt="No Internet Found" width={470} />
+        <Typography variant="h1">No Internet Found.</Typography>
+        <Button sx={{ marginTop: '20px' }} onClick={() => resetBoundary()}>
+          Try Again
+        </Button>
+      </StyledBox>
+    </>
+  )
+}
+
+export function PemissionDenied({ resetBoundary }) {
+  return (
+    <>
+      <StyledBox>
+        <img src={permissiondenied} alt="permission denied" width={470} />
+        <Typography variant="h1">Permission Denied.</Typography>
+        <Button sx={{ marginTop: '20px' }} onClick={() => resetBoundary()}>
+          Try Again
+        </Button>
+      </StyledBox>
+    </>
+  )
+}
+
+export function InternalServer({ resetBoundary, error }) {
+  return (
+    <>
+      <StyledBox>
+        <img src={internalserver} alt="internal server error" width={470} />
+        <Typography variant="h1" marginTop={'20px'}>
+          Internal Server Error.
+        </Typography>
+        <Typography variant="body1">
+          {error?.response?.data?.message}
+        </Typography>
+        <Button
+          size="small"
+          variant="outlined"
+          sx={{ marginTop: '20px' }}
+          onClick={() => resetBoundary()}
+        >
+          Try Again
+        </Button>
+      </StyledBox>
+    </>
+  )
+}
+
+export function UnAuth({ resetBoundary }) {
+  const modal = useModal()
+  const [username, setUsername] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const url = window.location.origin
+  const origin = window?.location?.origin?.split('.')
+  const isLocalHost =
+    process.env.NODE_ENV === 'development' ||
+    origin?.slice(-2).join('.') === 'campx.dev'
+  const sessionCookie = Cookies.get('campx_session_key')
+  const appinit = async () => {
+    setLoading(true)
+    await axios
+      .get('/auth/my-permissions')
+      .then((res) => {
+        setUsername(res.data.user.fullName)
+        PermissionsStore.update((s) => {
+          s.permissions = {
+            ...res.data?.permissions,
+            can_settings_view: 1,
+            can_dashboard_view: 1,
+            can_individual_pages_view: 1,
+          } as any
+        })
+        setLoading(false)
+      })
+      .catch((e) => {
+        modal({
+          title: 'Login',
+          content: () => <LoginForm />,
+        })
+      })
+  }
+  function LoginPage() {
+    if (isLocalHost) {
+      if (!sessionCookie) {
+        modal({
+          title: 'Login',
+          content: () => <LoginForm />,
+        })
+      } else {
+        appinit()
+      }
+    } else {
+      if (!sessionCookie) {
+        window.location.replace(`https://www.id.campx.in/?redirect_to=${url}`)
+      } else {
+        appinit()
+      }
+    }
+  }
+
+  return (
+    <>
+      <StyledBox>
+        <img src={unauth} alt="unauthorized" width={470} />
+        <Typography variant="h1" marginTop={'20px'}>
+          UnAuthorized.
+        </Typography>
+        <Box
+          sx={{
+            display: 'flex',
+            marginTop: '20px',
+          }}
+        >
+          <Button
+            variant="outlined"
+            sx={{ marginRight: '10px' }}
+            onClick={() => resetBoundary()}
+          >
+            Try Again
+          </Button>
+
+          <Button onClick={() => LoginPage()}>Click here to Login</Button>
+        </Box>
+      </StyledBox>
+    </>
+  )
+}

package/src/components/ErrorBoundary/GlobalNetworkLoadingIndicator.tsx

@@ -1,13 +1,13 @@
-import { Store } from 'pullstate'
-import { LinearProgress } from '../LinearProgress'
-
-export const NetworkStore = new Store({
-  loading: false,
-})
-
-export default function GlobalNetworkLoadingIndicator() {
-  const { loading } = NetworkStore.useState()
-
-  if (loading) return <LinearProgress />
-  if (loading) return null
-}
+import { Store } from 'pullstate'
+import { LinearProgress } from '../LinearProgress'
+
+export const NetworkStore = new Store({
+  loading: false,
+})
+
+export default function GlobalNetworkLoadingIndicator() {
+  const { loading } = NetworkStore.useState()
+
+  if (loading) return <LinearProgress />
+  if (loading) return null
+}

package/src/components/ErrorBoundary/index.tsx

@@ -1 +1 @@
-export { default } from './ErrorBoundary'
+export { default } from './ErrorBoundary'

package/src/components/ErrorBox.tsx

@@ -1,42 +1,42 @@
-import { Alert as MuiAlert, styled } from '@mui/material'
-import _ from 'lodash'
-import { ReactNode } from 'react'
-
-export default function ErrorBox({
-  err,
-  extra,
-}: {
-  err: any
-  extra?: string | ReactNode
-}) {
-  if (!err) {
-    return null
-  }
-
-  if (err.response) {
-    if (err.response.status == 401) {
-      return (
-        <Alert severity={'error'}>
-          {_.get(err, 'response.data.message', 'Server error!')} {extra}
-        </Alert>
-      )
-    }
-    if (err.response.status == 422) {
-      return (
-        <Alert severity={'error'}>
-          {_.get(err, 'response.data.message', 'Server error!')} {extra}
-        </Alert>
-      )
-    }
-
-    return (
-      <Alert severity={'error'}>
-        {'Unknown Error'} {extra}
-      </Alert>
-    )
-  }
-}
-
-const Alert = styled(MuiAlert)(({}) => ({
-  marginTop: '20px',
-}))
+import { Alert as MuiAlert, styled } from '@mui/material'
+import _ from 'lodash'
+import { ReactNode } from 'react'
+
+export default function ErrorBox({
+  err,
+  extra,
+}: {
+  err: any
+  extra?: string | ReactNode
+}) {
+  if (!err) {
+    return null
+  }
+
+  if (err.response) {
+    if (err.response.status == 401) {
+      return (
+        <Alert severity={'error'}>
+          {_.get(err, 'response.data.message', 'Server error!')} {extra}
+        </Alert>
+      )
+    }
+    if (err.response.status == 422) {
+      return (
+        <Alert severity={'error'}>
+          {_.get(err, 'response.data.message', 'Server error!')} {extra}
+        </Alert>
+      )
+    }
+
+    return (
+      <Alert severity={'error'}>
+        {'Unknown Error'} {extra}
+      </Alert>
+    )
+  }
+}
+
+const Alert = styled(MuiAlert)(({}) => ({
+  marginTop: '20px',
+}))

package/src/components/FloatingContainer.tsx

@@ -1,33 +1,33 @@
-import { Box, styled } from '@mui/material'
-export const StyledFooter = styled(Box)<{
-  show: boolean
-}>`
-  position: fixed;
-  background: #fff;
-  bottom: ${(props) => (props.show ? '0' : '-70px')};
-  right: 16px;
-  width: calc(100% - 236px);
-  height: 64px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 1.5rem;
-  padding: 1rem;
-  transition: bottom 400ms ease-in-out;
-  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
-`
-
-function FloatingContainer({
-  children,
-  show,
-}: {
-  show?: boolean
-  children: React.ReactNode
-}) {
-  return (
-    <>
-      <StyledFooter show={show ? show : true}>{children}</StyledFooter>
-    </>
-  )
-}
-export default FloatingContainer
+import { Box, styled } from '@mui/material'
+export const StyledFooter = styled(Box)<{
+  show: boolean
+}>`
+  position: fixed;
+  background: #fff;
+  bottom: ${(props) => (props.show ? '0' : '-70px')};
+  right: 16px;
+  width: calc(100% - 236px);
+  height: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 1rem;
+  transition: bottom 400ms ease-in-out;
+  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
+`
+
+function FloatingContainer({
+  children,
+  show,
+}: {
+  show?: boolean
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <StyledFooter show={show ? show : true}>{children}</StyledFooter>
+    </>
+  )
+}
+export default FloatingContainer