@campxdev/shared 1.8.14 → 1.8.16

package/src/components/DropDownButton/DropDownButton.tsx

@@ -0,0 +1,184 @@
+import { MoreVert } from '@mui/icons-material'
+import {
+  ButtonProps,
+  DialogProps,
+  DrawerProps,
+  IconButtonProps,
+  MenuListProps,
+  MenuProps,
+} from '@mui/material'
+import { ReactNode, useState } from 'react'
+import { useImmer } from 'use-immer'
+import { CustomDialog } from '../ModalButtons/DialogButton'
+import { CustomDrawer } from '../ModalButtons/DrawerButton'
+import AnchorElement from './AnchorElement'
+import {
+  IMenuItemProps,
+  MenuItemType,
+  RenderMenuItem,
+} from './DropdownMenuItem'
+import { StyledMenu } from './styles'
+
+interface DropDownButtonProps {
+  icon?: {
+    icon: ReactNode
+    iconProps?: IconButtonProps
+    outlined?: boolean
+  }
+  button?: {
+    label?: string
+    buttonProps?: ButtonProps
+  }
+  anchor?: (props: { open: () => void }) => ReactNode
+  loading?: boolean
+  menu: IMenuItemProps[]
+  menuProps?: Omit<MenuProps, 'open'>
+  menuListProps?: MenuListProps
+}
+
+const defaultIcon = {
+  icon: <MoreVert color="primary" />,
+  outlined: true,
+}
+
+interface IModalState {
+  open: boolean
+  content: any
+  contentTitle: ReactNode
+  type: MenuItemType
+  props: Omit<DialogProps, 'open'> | Omit<DrawerProps, 'open'>
+}
+
+const DropDownButton = ({
+  button,
+  icon = defaultIcon,
+  menu = [],
+  menuProps,
+  menuListProps,
+  loading = false,
+  anchor,
+}: DropDownButtonProps) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const [open, setOpen] = useState(false)
+
+  const [modalState, setModalState] = useImmer<IModalState>({
+    open: false,
+    content: null,
+    contentTitle: '',
+    type: 'drawer',
+    props: null,
+  })
+
+  const handleClick = (event: any) => {
+    setAnchorEl(event.currentTarget)
+    setOpen(true)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+    setOpen(false)
+  }
+
+  const onModalClose = () => {
+    setModalState((s) => {
+      s.open = false
+      s.content = null
+    })
+  }
+  const onModalOpen = (item, props) => {
+    setModalState((s) => {
+      s.content = item.content
+      s.open = true
+      s.type = item.actionType
+      s.props = props
+      s.contentTitle = item?.contentTitle ?? ''
+    })
+  }
+
+  return (
+    <>
+      <AnchorElement
+        anchor={anchor}
+        loading={loading}
+        button={button}
+        icon={icon}
+        handleClick={handleClick}
+      />
+      <StyledMenu
+        elevation={0}
+        id="basic-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={open}
+        onClose={handleClose}
+        PaperProps={{
+          elevation: 0,
+        }}
+        MenuListProps={{ ...menuListProps }}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        transitionDuration={150}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        {...menuProps}
+      >
+        {menu.map((item, index) => (
+          <RenderMenuItem
+            key={index}
+            onModalOpen={(props) => onModalOpen(item, props)}
+            modalState={modalState}
+            handleClose={handleClose}
+            actionType={item?.actionType}
+            {...item}
+          />
+        ))}
+      </StyledMenu>
+      {modalState?.open && (
+        <RenderContent
+          onClose={onModalClose}
+          modalState={modalState}
+          contentType={modalState.type}
+        />
+      )}
+    </>
+  )
+}
+
+export default DropDownButton
+
+const RenderContent = ({
+  contentType,
+  modalState,
+  onClose,
+}: {
+  contentType: MenuItemType
+  modalState: any
+  onClose: () => void
+}) => {
+  if (contentType === 'dialog')
+    return (
+      <CustomDialog
+        onClose={onClose}
+        open={modalState.open}
+        content={modalState.content}
+        title={modalState?.contentTitle}
+        dialogProps={modalState?.props}
+      />
+    )
+
+  if (contentType === 'drawer')
+    return (
+      <CustomDrawer
+        onClose={onClose}
+        open={modalState.open}
+        content={modalState.content}
+        title={modalState?.contentTitle}
+        drawerProps={modalState?.props}
+      />
+    )
+  return <></>
+}

package/src/components/DropDownButton/DropdownMenuItem.tsx

@@ -0,0 +1,110 @@
+import {
+  DialogProps,
+  DrawerProps,
+  ListItemIcon,
+  ListItemText,
+  styled,
+} from '@mui/material'
+import { ReactNode } from 'react'
+import { Link } from 'react-router-dom'
+import { DrawerButtonProps } from '../ModalButtons/DrawerButton'
+import { StyledMenuItem } from './styles'
+
+const StyledLink = styled(Link)(({ theme }) => ({
+  display: 'block',
+  textTransform: 'none',
+  textDecoration: 'none',
+}))
+
+export type MenuItemType = 'normal' | 'dialog' | 'drawer' | 'link'
+
+export type MenuItemButtonProps = {
+  icon?: ReactNode
+  label: ReactNode
+  onClick: () => void
+  link?: {
+    to: string
+    target?: '_self' | '_blank'
+  }
+}
+
+const MenuItemButton = ({
+  icon,
+  label,
+  onClick,
+  ...props
+}: MenuItemButtonProps) => {
+  return (
+    <StyledMenuItem
+      sx={{ minWidth: '180px', width: '100%' }}
+      onClick={onClick}
+      {...props}
+    >
+      {icon && <ListItemIcon>{icon}</ListItemIcon>}
+      <ListItemText>{label}</ListItemText>
+    </StyledMenuItem>
+  )
+}
+
+export type IMenuItemProps = Omit<MenuItemButtonProps, 'onClick'> & {
+  content?: DrawerButtonProps['content']
+  contentTitle?: ReactNode
+  actionType?: MenuItemType
+  onClick?: () => void
+  dialogProps?: Omit<DialogProps, 'open'>
+  drawerProps?: Omit<DrawerProps, 'open'>
+}
+
+export interface IRenderMenuItemProps extends IMenuItemProps {
+  handleClose: () => void
+  modalState: any
+  onModalOpen: (props: any) => void
+}
+
+export const RenderMenuItem = ({
+  onClick,
+  actionType = 'normal',
+  handleClose,
+  modalState,
+  onModalOpen,
+  link,
+  drawerProps,
+  dialogProps,
+  ...props
+}: IRenderMenuItemProps) => {
+  const renderMenuItem: Record<MenuItemType, ReactNode> = {
+    normal: (
+      <MenuItemButton
+        {...props}
+        onClick={() => {
+          onClick()
+          handleClose()
+        }}
+      />
+    ),
+    dialog: (
+      <MenuItemButton
+        {...props}
+        onClick={() => {
+          onModalOpen(dialogProps)
+          handleClose()
+        }}
+      />
+    ),
+    drawer: (
+      <MenuItemButton
+        {...props}
+        onClick={() => {
+          onModalOpen(drawerProps)
+          handleClose()
+        }}
+      />
+    ),
+    link: (
+      <StyledLink to={link?.to ?? ''} target={link?.target ?? '_blank'}>
+        <MenuItemButton {...props} onClick={() => {}} />
+      </StyledLink>
+    ),
+  }
+  return <>{renderMenuItem[actionType]}</>
+}

package/src/components/DropDownButton/index.tsx

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

package/src/components/DropDownButton/styles.tsx

@@ -0,0 +1,59 @@
+import { Button, IconButton, Menu, MenuItem, styled } from '@mui/material'
+
+export const StyledIconButton = styled(IconButton, {
+  shouldForwardProp: (prop) => prop !== 'outlined',
+})<{ outlined?: boolean; size: 'small' | 'regular' }>(
+  ({ theme, outlined, size }) => ({
+    ...(outlined && {
+      border: `1px solid ${theme.palette.primary.main}`,
+      borderRadius: '5px',
+      height: '40px',
+      width: '40px',
+      ...(size === 'small' && {}),
+    }),
+  }),
+)
+
+export const StyledMenuItem = styled(MenuItem)(({}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  height: '60px',
+  '& .MuiListItemIcon-root': {
+    minWidth: '24px',
+  },
+  '& .MuiSvgIcon-root': {
+    height: '18px',
+    width: '18px',
+  },
+}))
+
+export const StyledDropDownButton = styled(Button)(({}) => ({
+  padding: '0 15px',
+  minWidth: '180px',
+  justifyContent: 'space-between',
+}))
+
+export const StyledMenu = styled(Menu)(({ theme }) => ({
+  '& .MuiPaper-root': {
+    borderRadius: '10px',
+    border: '1px solid #1212121A',
+    marginTop: '10px',
+    boxShadow: '0px 4px 16px #0000000F',
+  },
+  '& .MuiList-root': {
+    minWidth: '240px',
+    padding: 0,
+    '& li': {
+      borderBottom: theme.borders.grayLight,
+      ':hover': {
+        backgroundColor: 'rgba(0, 0, 0, 0.025)',
+      },
+    },
+    '& > :last-child': {
+      borderBottom: 'none',
+      '& li': {
+        borderBottom: 'none',
+      },
+    },
+  },
+}))

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,33 @@
+import { ReactElement, ReactNode } from 'react'
+import {
+  ErrorBoundary as ReactErrorBoundary,
+  FallbackProps,
+} from 'react-error-boundary'
+import { QueryErrorResetBoundary } from 'react-query'
+import { useLocation } from 'react-router-dom'
+import ErrorFallback from './ErrorFallback'
+
+export default function ErrorBoundary({
+  children,
+  resetKey,
+  customFallback,
+}: {
+  children: ReactNode
+  resetKey?: string
+  customFallback?: (props: FallbackProps) => JSX.Element
+}) {
+  const location = useLocation()
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ReactErrorBoundary
+          key={resetKey ?? location?.pathname}
+          fallbackRender={customFallback ?? ErrorFallback}
+          onReset={reset}
+        >
+          {children}
+        </ReactErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  )
+}

package/src/components/ErrorBoundary/ErrorFallback.tsx

@@ -0,0 +1,241 @@
+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 '../../shared-state'
+import axios from '../../config/axios'
+
+const StyledAlert = styled(Alert)(({ theme }) => ({
+  height: '60px',
+  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: '20px' }}>
+      <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
+            ? typeof error?.response?.data?.message === 'string'
+              ? error?.response?.data?.message
+              : JSON.stringify(error?.response?.data?.message)
+            : 'Internal Server Error'}
+        </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

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

package/src/components/ErrorBoundary/index.tsx

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

package/src/components/ErrorBox.tsx

@@ -0,0 +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',
+}))