@campxdev/shared 1.11.29 → 1.11.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.11.29",
+  "version": "1.11.30",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",
@@ -13,7 +13,7 @@
     "lint:fix": "eslint --fix \"./src/**/*.{js,jsx,ts,tsx,json}\"",
     "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,css,md,json}\" --config ./.prettierrc",
     "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public"
+    "build-storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider build-storybook"
   },
   "browserslist": {
     "production": [
@@ -91,6 +91,7 @@
     "storybook-addon-react-router-v6": "^0.2.1"
   },
   "resolutions": {
-    "react-dev-utils/fork-ts-checker-webpack-plugin": "^6.5.3"
+    "react-dev-utils/fork-ts-checker-webpack-plugin": "^6.5.3",
+    "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
   }
 }

package/src/components/ActivityLog/ActivityLog.tsx

@@ -1,145 +1,209 @@
 import {
   Timeline,
-  TimelineConnector,
   TimelineContent,
   TimelineItem,
   TimelineSeparator,
 } from '@mui/lab'
 import { Box, SxProps, Typography } from '@mui/material'
-import { useQuery } from 'react-query'
-import axios from '../../config/axios'
+import axios from 'axios'
+import { useCallback, useRef } from 'react'
+import { useInfiniteQuery } from 'react-query'
 import { useErrorModal } from '../ErrorModalWrapper/ErrorModalWrapper'
-import { PageContent } from '../PageContent'
-import PageHeader from '../PageHeader'
 import Spinner from '../Spinner'
 import Table from '../Tables/BasicTable/Table'
-import { StyledAvatar, StyledCircleIcon, StyledTimeLineDot } from './Styles'
-
-export const getData = async (url: string) => {
-  return await axios.get(url).then((res) => res.data)
-}
+import {
+  StyledAvatar,
+  StyledCircleIcon,
+  StyledSpinnerBox,
+  StyledTimeLineDot,
+} from './Styles'
 
-export interface Activity {
-  id: number
-  date: string
-  time: string
-  message: string
-  userName: string
+interface Props {
+  endPoint: string
+  tableView: boolean
+  sx?: SxProps
 }
 
-const ActivityLog = ({
-  activities,
-  endPoint,
-  tableView,
-  title,
-  sx,
-}: {
-  activities: Activity[]
-  sx?: SxProps
-  endPoint?: string
-  title?: string
-  tableView: boolean
-}) => {
+export default function ActivityLog({ endPoint, tableView, sx }: Props) {
   const errorModal = useErrorModal()
-  const { data, isLoading } = useQuery('activity', () => getData(endPoint), {
-    onError: (error) => {
+  const fetchActivities = async ({ pageParam = 0 }) => {
+    try {
+      const response = await axios.get(endPoint, {
+        params: {
+          limit: 4,
+          skip: pageParam,
+        },
+      })
+      return response.data.posts
+    } catch (error) {
       // eslint-disable-next-line no-console
       console.log(error)
       errorModal({ error: error })
-    },
-  })
-
-  if (isLoading) {
-    return <Spinner />
+    }
   }
 
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
+    useInfiniteQuery('activities', fetchActivities, {
+      getNextPageParam: (lastPage) => {
+        return lastPage.length ? lastPage[lastPage.length - 1].id : null
+      },
+    })
+
+  const activitesData = data ? data.pages.flatMap((page) => page) : []
+
+  if (isLoading) return <Spinner />
+
+  return (
+    <Box>
+      <Typography
+        variant="h1"
+        sx={{ fontSize: '18px', fontWeight: 700, margin: '20px' }}
+      >
+        Activity Log
+      </Typography>
+
+      {!tableView ? (
+        <Box
+          sx={{
+            overflowY: 'scroll',
+            '&::-webkit-scrollbar': {
+              display: 'none',
+            },
+            height: '380px',
+          }}
+        >
+          <TimeLineComponent
+            activitesData={activitesData}
+            fetchNextPage={fetchNextPage}
+            isFetchingNextPage={isFetchingNextPage}
+            hasNextPage={hasNextPage}
+            sx={sx}
+          />
+        </Box>
+      ) : (
+        <Box sx={{ margin: '0 25px' }}>
+          <Table
+            columns={columns}
+            dataSource={activitesData}
+            loading={isLoading}
+          />
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+const columns = [
+  { title: 'Date', dataIndex: 'date', key: 'date' },
+  { title: 'Time', dataIndex: 'time', key: 'time' },
+  { title: 'Message', dataIndex: 'message', key: 'message' },
+  { title: 'User', dataIndex: 'userName', key: 'userName' },
+]
+
+export const TimeLineComponent = ({
+  activitesData,
+  isFetchingNextPage,
+  hasNextPage,
+  fetchNextPage,
+  sx,
+}) => {
+  const lastItemRef = useIntersectionObserver<HTMLElement>(() => {
+    if (!isFetchingNextPage && hasNextPage) fetchNextPage()
+  })
+
   return (
-    <>
-      <PageHeader title={title ?? 'Activity Log'} />
-      <PageContent>
-        {!tableView ? (
-          <Box
+    <Timeline sx={{ padding: 0, margin: 0 }}>
+      {activitesData.map((item, index, items) => (
+        <Box
+          key={index}
+          ref={items.length - 1 === index ? lastItemRef : null}
+          sx={{ maxWidth: '550px', ...sx }}
+        >
+          <TimelineItem
             sx={{
-              padding: '20px',
-              maxWidth: '550px',
-              ...sx,
+              margin: 2,
+              padding: 0,
+              '&:before': { display: 'none' },
             }}
           >
-            <Timeline>
-              {activities.map((item, index) => (
-                <TimelineItem
-                  key={index}
+            <TimelineSeparator>
+              <StyledTimeLineDot>
+                <StyledCircleIcon />
+              </StyledTimeLineDot>
+              {index < activitesData.length - 1 && (
+                <Box
                   sx={{
-                    margin: 0,
-                    padding: 0,
-                    '&:before': { flex: 'none' },
+                    width: '1px',
+                    height: '110px',
+                    bgcolor: '#12121233',
+                    position: 'absolute',
+                    top: '25px',
+                  }}
+                />
+              )}
+            </TimelineSeparator>
+            <TimelineContent sx={{ padding: '6px 10px' }}>
+              <Box>
+                <Typography variant="subtitle2" sx={{ fontSize: '14px' }}>
+                  {`${Math.floor(Math.random() * 30) + 1} ${
+                    Math.random() > 0.5 ? 'June' : 'July'
+                  }, 2023`}{' '}
+                  -{' '}
+                  {`${Math.floor(Math.random() * 12) + 1}:${
+                    Math.floor(Math.random() * 60) + 1
+                  } ${Math.random() > 0.5 ? 'AM' : 'PM'}`}
+                  {/* {item.date} - {item.time} */}
+                </Typography>
+                <Typography sx={{ fontSize: '16px' }} variant="body1">
+                  {item.title}
+                  {/* {item.message} */}
+                </Typography>
+                <Typography
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    marginTop: '8px',
                   }}
                 >
-                  <TimelineSeparator>
-                    <StyledTimeLineDot>
-                      <StyledCircleIcon />
-                    </StyledTimeLineDot>
-                    {index < activities.length - 1 && (
-                      <TimelineConnector
-                        sx={{ bgcolor: '#12121233', width: '1px' }}
-                      />
-                    )}
-                  </TimelineSeparator>
-                  <TimelineContent sx={{ padding: '6px 16px' }}>
-                    <Box>
-                      <Typography variant="subtitle2" sx={{ fontSize: '14px' }}>
-                        {item.date} - {item.time}
-                      </Typography>
-                      <Typography sx={{ fontSize: '16px' }} variant="body1">
-                        {item.message}
-                      </Typography>
-                      <Typography
-                        style={{
-                          display: 'flex',
-                          alignItems: 'center',
-                          marginTop: '5px',
-                        }}
-                      >
-                        <StyledAvatar />
-                        <Typography sx={{ fontSize: '13px', fontWeight: 900 }}>
-                          {item.userName}
-                        </Typography>
-                      </Typography>
-                    </Box>
-                  </TimelineContent>
-                </TimelineItem>
-              ))}
-            </Timeline>
-          </Box>
-        ) : (
-          <Table columns={columns} dataSource={activities ?? []} />
-        )}
-      </PageContent>
-    </>
+                  <StyledAvatar>
+                    {'John Doe'
+                      .split(' ')
+                      .map((n) => n[0])
+                      .join('')
+                      .toUpperCase()}
+                  </StyledAvatar>
+                  <Typography sx={{ fontSize: '13px', fontWeight: 900 }}>
+                    {`John Doe ${item.id}`}
+                    {/* {item.userName} */}
+                  </Typography>
+                </Typography>
+              </Box>
+            </TimelineContent>
+          </TimelineItem>
+          {isFetchingNextPage && index === items.length - 1 && hasNextPage && (
+            <StyledSpinnerBox>
+              <Spinner />
+            </StyledSpinnerBox>
+          )}
+        </Box>
+      ))}
+    </Timeline>
   )
 }
 
-export default ActivityLog
+function useIntersectionObserver<T extends HTMLElement>(callback: () => void) {
+  const observer = useRef<IntersectionObserver | null>(null)
 
-const columns = [
-  {
-    title: 'Date',
-    dataIndex: 'date',
-    key: 'date',
-  },
-  {
-    title: 'Time',
-    dataIndex: 'time',
-    key: 'time',
-  },
-  {
-    title: 'Message',
-    dataIndex: 'message',
-    key: 'message',
-  },
-  {
-    title: 'User',
-    dataIndex: 'userName',
-    key: 'userName',
-  },
-]
+  const handleObserver = useCallback(
+    (node: T) => {
+      if (observer.current) observer.current.disconnect()
+      observer.current = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting) callback()
+      })
+      if (node) observer.current.observe(node)
+    },
+    [callback],
+  )
+
+  return handleObserver
+}

package/src/components/ActivityLog/Styles.tsx

@@ -1,6 +1,6 @@
 import CircleRoundedIcon from '@mui/icons-material/CircleRounded'
 import { TimelineDot } from '@mui/lab'
-import { Avatar, styled } from '@mui/material'
+import { Avatar, Box, styled } from '@mui/material'
 
 export const StyledTimeLineDot = styled(TimelineDot)({
   width: '20px',
@@ -21,8 +21,17 @@ export const StyledCircleIcon = styled(CircleRoundedIcon)({
   height: '7px',
 })
 
-export const StyledAvatar = styled(Avatar)({
+export const StyledAvatar = styled(Avatar)(({ theme }) => ({
   width: 30,
   height: 30,
   marginRight: '8px',
+  backgroundColor: theme.palette.primary.main,
+  fontSize: '14px',
+}))
+
+export const StyledSpinnerBox = styled(Box)({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '20px',
 })

package/src/components/Input/SearchSingleSelect.tsx

@@ -87,7 +87,7 @@ export const SearchSingleSelect = ({ options, value, onChange }: Props) => {
           <TextField
             inputRef={(input) => {
               if (input && value) {
-                input.style.width = `${value.label.length * 9}px`
+                input.style.width = `${value.label?.length * 9}px`
               }
             }}
             InputProps={{

package/src/components/Layout/Header/AppHeader.tsx

@@ -38,6 +38,7 @@ interface AppHeaderProps {
   clientLogo: string
   fullName: string
   profileUrl?: string
+  showMenu?: boolean
   actions?: ReactNode[]
   userBoxActions: {
     label: ReactNode
@@ -45,23 +46,30 @@ interface AppHeaderProps {
     onClick: any
   }[]
   customHeaderActions?: ReactNode
+  headerSx?: any
+  imageSx?: any
+  profileSx?: any
   cogWheelMenu?: { label: string; path: string; openNewTab?: boolean }[]
 }
 
 export default function AppHeader({
   clientLogo = imageMap.campx,
+  showMenu = true,
   fullName,
   userBoxActions = [],
   cogWheelMenu = [],
   customHeaderActions,
   profileUrl,
   actions = [],
+  headerSx = {},
+  profileSx = {},
+  imageSx = {},
 }: AppHeaderProps) {
   return (
-    <StyledHeader>
+    <StyledHeader sx={headerSx}>
       <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-        <AppsMenu />
-        <AppLogo clientLogo={clientLogo} />
+        {showMenu && <AppsMenu />}
+        <AppLogo clientLogo={clientLogo} imageSx={imageSx} />
       </Box>
       <Box className="actions">
         {customHeaderActions ? (
@@ -73,6 +81,7 @@ export default function AppHeader({
             userBoxActions={userBoxActions}
             profileUrl={profileUrl}
             actions={actions}
+            profileSx={profileSx}
           />
         )}
       </Box>
@@ -80,16 +89,16 @@ export default function AppHeader({
   )
 }
 
-const AppLogo = ({ clientLogo }) => {
+const AppLogo = ({ clientLogo, imageSx }) => {
   const originSubdomain = window.location.host.split('.')?.slice(-3)[0] ?? 'ums'
   const currentApp =
     applications.find((item) => item.domainName === originSubdomain)
-      ?.domainName ?? 'campx'
+      ?.domainName ?? 'admin'
 
   return (
     <StyledRouterLink to={'/'}>
       <StyledLogosWrapper>
-        <StyledImageWrapper>
+        <StyledImageWrapper sx={imageSx}>
           <img src={imageMap[currentApp]} />
         </StyledImageWrapper>
         <Box

package/src/components/Layout/Header/HeaderActions/HeaderActions.tsx

@@ -18,12 +18,14 @@ export default function HeaderActions({
   userBoxActions,
   profileUrl = '',
   actions = [],
+  profileSx = {},
 }: {
   cogWheelMenu?: any[]
   fullName: string
   userBoxActions: IMenuItemProps[] | []
   profileUrl: string
   actions?: ReactNode[]
+  profileSx?: any
 }) {
   const navigate = useNavigate()
   return (
@@ -46,6 +48,7 @@ export default function HeaderActions({
           fullName={fullName}
           actions={userBoxActions}
           profileUrl={profileUrl}
+          profileSx={profileSx}
         />
       </Stack>
     </Stack>

package/src/components/Layout/Header/HeaderActions/UserBox.tsx

@@ -27,17 +27,19 @@ export default function UserBox({
   actions,
   customActions = [],
   profileUrl,
+  profileSx = {},
 }: {
   fullName: string
   actions: IMenuItemProps[] | []
   customActions?: IMenuItemProps[] | []
   profileUrl?: string
+  profileSx?: any
 }) {
   const navigate = useNavigate()
   return (
     <DropDownButton
       anchor={({ open }) => (
-        <StyledAvatar src={profileUrl ?? ''} onClick={open}>
+        <StyledAvatar src={profileUrl ?? ''} onClick={open} sx={profileSx}>
           {getStartingLetters(fullName)}
         </StyledAvatar>
       )}