@campxdev/shared 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@campxdev/shared",
-	"version": "0.3.3",
+	"version": "0.3.5",
 	"main": "./exports.ts",
 	"scripts": {
 		"start": "react-scripts start",

package/src/components/ErrorBoundary/ErrorBoundary.tsx

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

package/src/components/ErrorBoundary/ErrorFallback.tsx

@@ -23,7 +23,7 @@ export default function ErrorFallback({error, resetErrorBoundary}) {
 	return (
 		<Box sx={{marginTop: '16px', padding: '16px'}}>
 			<StyledAlert severity='error'>
-				{error?.message}
+				{error?.response?.data?.message ?? error?.message}
 				<Button
 					className='retryBtn'
 					onClick={() => resetErrorBoundary()}

package/src/components/PageContent.tsx

@@ -1,14 +1,17 @@
-import styled from 'styled-components'
+import {Box, styled} from '@mui/material'
+import ErrorBoundary from './ErrorBoundary'
 
-const StyledPageContent = styled.div`
-  padding-left: 25px;
-  padding-right: 25px;
-  margin-top: 16px;
-  padding-bottom: 3rem;
-`
+const StyledPageContent = styled(Box)(() => ({
+	paddingLeft: '25px',
+	paddingRight: '25px',
+	marginTop: '16px',
+	paddingBottom: '3rem',
+}))
 
 export function PageContent(props) {
-  return (
-    <StyledPageContent style={props.style}>{props.children}</StyledPageContent>
-  )
+	return (
+		<StyledPageContent style={props.style}>
+			<ErrorBoundary>{props.children}</ErrorBoundary>
+		</StyledPageContent>
+	)
 }

package/src/components/PopupConfirm/ConfirmContextProvider.tsx

@@ -1,22 +1,40 @@
-import { createContext, useState } from 'react'
+import {createContext, ReactNode, useState} from 'react'
 import PopupConfirm from './PopupConfirm'
 
-export const ConfirmContext = createContext(null)
+interface ConfirmContextProps {
+	confirm: {
+		prompt: ReactNode
+		isOpen: boolean
+		proceed: () => void
+		cancel: () => void
+	}
+	setConfirm: any
+}
+
+export const ConfirmContext = createContext<ConfirmContextProps>({
+	confirm: {
+		cancel: () => {},
+		proceed: () => {},
+		prompt: 'Are you sure?',
+		isOpen: false,
+	},
+	setConfirm: () => {},
+})
 
-const ConfirmContextProvider = ({ children }) => {
-  const [confirm, setConfirm] = useState({
-    prompt: '',
-    isOpen: false,
-    proceed: null,
-    cancel: null,
-  })
+const ConfirmContextProvider = ({children}) => {
+	const [confirm, setConfirm] = useState({
+		prompt: '',
+		isOpen: false,
+		proceed: null,
+		cancel: null,
+	})
 
-  return (
-    <ConfirmContext.Provider value={[confirm, setConfirm]}>
-      {children}
-      <PopupConfirm />
-    </ConfirmContext.Provider>
-  )
+	return (
+		<ConfirmContext.Provider value={{confirm, setConfirm}}>
+			{children}
+			<PopupConfirm />
+		</ConfirmContext.Provider>
+	)
 }
 
 export default ConfirmContextProvider

package/src/components/PopupConfirm/useConfirm.ts

@@ -1,47 +1,47 @@
-import { useContext, useEffect, useState } from 'react'
-import { ConfirmContext } from './ConfirmContextProvider'
+import {ReactNode, useContext, useEffect, useState} from 'react'
+import {ConfirmContext} from './ConfirmContextProvider'
 
 export default function useConfirm(): {
-  isConfirmed: (prompt?: string) => Promise<boolean>
-  prompt?: ''
-  isOpen?: false
-  proceed?: null
-  cancel?: null
+	isConfirmed: (prompt?: string) => Promise<boolean>
+	prompt?: ReactNode
+	isOpen?: boolean
+	proceed?: () => void
+	cancel?: () => void
 } {
-  const [confirm, setConfirm] = useContext(ConfirmContext)
-  const [needsCleanup, setNeedsCleanup] = useState(false)
+	const {confirm, setConfirm} = useContext(ConfirmContext)
+	const [needsCleanup, setNeedsCleanup] = useState(false)
 
-  const isConfirmed = (prompt) => {
-    setNeedsCleanup(true)
-    const promise = new Promise((resolve, reject) => {
-      setConfirm({
-        prompt,
-        isOpen: true,
-        proceed: resolve,
-        cancel: reject,
-      })
-    })
-    return promise.then(
-      () => {
-        setConfirm({ ...confirm, isOpen: false })
-        return true
-      },
-      () => {
-        setConfirm({ ...confirm, isOpen: false })
-        return false
-      },
-    )
-  }
+	const isConfirmed = (prompt) => {
+		setNeedsCleanup(true)
+		const promise = new Promise((resolve, reject) => {
+			setConfirm({
+				prompt,
+				isOpen: true,
+				proceed: resolve,
+				cancel: reject,
+			})
+		})
+		return promise.then(
+			() => {
+				setConfirm({...confirm, isOpen: false})
+				return true
+			},
+			() => {
+				setConfirm({...confirm, isOpen: false})
+				return false
+			}
+		)
+	}
 
-  useEffect(() => {
-    return () => {
-      if (confirm.cancel && needsCleanup) {
-        confirm.cancel()
-      }
-    }
-  }, [confirm, needsCleanup])
-  return {
-    ...confirm,
-    isConfirmed,
-  }
+	useEffect(() => {
+		return () => {
+			if (confirm.cancel && needsCleanup) {
+				confirm.cancel()
+			}
+		}
+	}, [confirm, needsCleanup])
+	return {
+		...confirm,
+		isConfirmed,
+	}
 }

package/src/utils/index.ts

@@ -1,6 +1,7 @@
-export { default as getUrlParams } from './getUrlParams'
-export { default as arrayPadEnd } from './arrayPadEnd'
-export { default as romanize } from './romanize'
+export {default as getUrlParams} from './getUrlParams'
+export {default as arrayPadEnd} from './arrayPadEnd'
+export {default as romanize} from './romanize'
 
-export { default as withRouteWrapper } from './withRouteWrapper'
-export { default as withSuspense } from './withSuspense'
+export {default as withRouteWrapper} from './withRouteWrapper'
+export {default as withSuspense} from './withSuspense'
+export {default as withLocalization} from './withLocalization'

package/src/utils/withLocalization.tsx

@@ -0,0 +1,11 @@
+import {LocalizationProvider} from '@mui/x-date-pickers'
+import {AdapterMoment} from '@mui/x-date-pickers/AdapterMoment'
+import {ReactNode} from 'react'
+
+export default function withLocalization(component: ReactNode) {
+	return (
+		<LocalizationProvider dateAdapter={AdapterMoment}>
+			{component}
+		</LocalizationProvider>
+	)
+}