@campxdev/shared 1.8.13 → 1.8.14

package/src/components/DropDownButton/DropDownButton.tsx

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

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

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

package/src/components/DropDownButton/styles.tsx

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

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

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

@@ -1,13 +0,0 @@
-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 +0,0 @@
-export { default } from './ErrorBoundary'

package/src/components/ErrorBox.tsx

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