feat: 4 column card view on wide screen

bigcommerce · Dec 29, 2022 · 28b53bb · 28b53bb
1 parent 7d5c1f1
commit 28b53bb
Show file tree

Hide file tree

Showing 12 changed files with 93 additions and 18 deletions.
diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx
@@ -14,7 +14,7 @@ import {
   useOpenPDP,
   useRefresh,
   useRegisteredbctob2b,
-} from '@/shared/hook'
+} from '@/hooks'
 
 import {
   getChannelId,

diff --git a/apps/storefront/src/hooks/index.ts b/apps/storefront/src/hooks/index.ts
@@ -1,7 +1,30 @@
+import {
+  useRefresh,
+} from './useRefresh'
+
+import {
+  useOpenPDP,
+} from './useOpenPDP'
+
+import {
+  useRegisteredbctob2b,
+} from './useRegisteredbctob2b'
+
+import {
+  useCardListColumn,
+} from './useCardListColumn'
+
 export {
   useMobile,
 } from './useMobile'
 
 export {
   useDebounce,
 } from './useDebounce'
+
+export {
+  useRefresh,
+  useOpenPDP,
+  useRegisteredbctob2b,
+  useCardListColumn,
+}
diff --git a/apps/storefront/src/hooks/useCardListColumn.ts b/apps/storefront/src/hooks/useCardListColumn.ts
@@ -0,0 +1,25 @@
+import {
+  useWindowSize,
+} from '@b3/hooks'
+import {
+  useEffect,
+  useState,
+} from 'react'
+
+export const useCardListColumn = () => {
+  const {
+    width,
+  } = useWindowSize()
+
+  const [isExtraLarge, setExtraLarge] = useState<boolean>(false)
+
+  useEffect(() => {
+    if (+width >= 1536) {
+      setExtraLarge(true)
+    } else {
+      setExtraLarge(false)
+    }
+  }, [width])
+
+  return isExtraLarge
+}
diff --git a/.../storefront/src/shared/hook/useOpenPDP.ts → apps/storefront/src/hooks/useOpenPDP.ts b/.../storefront/src/shared/hook/useOpenPDP.ts → apps/storefront/src/hooks/useOpenPDP.ts
diff --git a/.../storefront/src/shared/hook/useRefresh.ts → apps/storefront/src/hooks/useRefresh.ts b/.../storefront/src/shared/hook/useRefresh.ts → apps/storefront/src/hooks/useRefresh.ts
diff --git a/...t/src/shared/hook/useRegisteredbctob2b.ts → ...refront/src/hooks/useRegisteredbctob2b.ts b/...t/src/shared/hook/useRegisteredbctob2b.ts → ...refront/src/hooks/useRegisteredbctob2b.ts
diff --git a/apps/storefront/src/pages/address/Address.tsx b/apps/storefront/src/pages/address/Address.tsx
@@ -41,6 +41,10 @@ import {
   getB2BAddressConfig,
 } from '@/shared/service/b2b'
 
+import {
+  useCardListColumn,
+} from '@/hooks'
+
 import {
   filterFormConfig,
   convertBCToB2BAddress,
@@ -89,6 +93,8 @@ const Address = () => {
     dispatch,
   } = useContext(GlobaledContext)
 
+  const isExtraLarge = useCardListColumn()
+
   const addEditAddressRef = useRef<RefCurrntProps | null>(null)
 
   const [isRequestLoading, setIsRequestLoading] = useState(false)
@@ -289,6 +295,7 @@ const Address = () => {
           getRequestList={getAddressList}
           searchParams={filterData || {}}
           isCustomRender
+          itemXs={isExtraLarge ? 3 : 4}
           requestLoading={setIsRequestLoading}
           tableKey="id"
           renderItem={(row: AddressItemType) => (

diff --git a/apps/storefront/src/pages/shoppingLists/ShoppingLists.tsx b/apps/storefront/src/pages/shoppingLists/ShoppingLists.tsx
@@ -34,6 +34,7 @@ import {
 
 import {
   useMobile,
+  useCardListColumn,
 } from '@/hooks'
 
 import {
@@ -65,6 +66,8 @@ const shoppingLists = () => {
     },
   } = useContext(GlobaledContext)
 
+  const isExtraLarge = useCardListColumn()
+
   const isEnableBtnPermissions = true
 
   const customItem = {
@@ -186,6 +189,7 @@ const shoppingLists = () => {
           getRequestList={fetchList}
           searchParams={filterSearch}
           isCustomRender
+          itemXs={isExtraLarge ? 3 : 4}
           requestLoading={setIsRequestLoading}
           renderItem={(row: ShoppingListsItemsProps) => (
             <ShoppingListsCard

diff --git a/apps/storefront/src/pages/usermanagement/Usermanagement.tsx b/apps/storefront/src/pages/usermanagement/Usermanagement.tsx
@@ -7,6 +7,7 @@ import {
 import {
   Box,
 } from '@mui/material'
+
 import {
   B3Sping,
 } from '@/components/spin/B3Sping'
@@ -34,6 +35,7 @@ import {
 
 import {
   useMobile,
+  useCardListColumn,
 } from '@/hooks'
 
 import {
@@ -75,6 +77,8 @@ const Usermanagement = () => {
 
   const [isMobile] = useMobile()
 
+  const isExtraLarge = useCardListColumn()
+
   const {
     state: {
       companyInfo,
@@ -199,6 +203,7 @@ const Usermanagement = () => {
           getRequestList={fetchList}
           searchParams={filterSearch || {}}
           isCustomRender
+          itemXs={isExtraLarge ? 3 : 4}
           requestLoading={setIsRequestLoading}
           renderItem={(row: UsersList) => (
             <UserItemCard

diff --git a/apps/storefront/src/shared/hook/index.ts b/apps/storefront/src/shared/hook/index.ts
diff --git a/packages/hooks/index.ts b/packages/hooks/index.ts
@@ -6,6 +6,10 @@ export {
   useMutationObservable,
 } from './useMutationObservable'
 
+export {
+  useWindowSize,
+} from './useWindowSize'
+
 export type {
   OpenPageState,
 } from './useB3AppOpen'

diff --git a/packages/hooks/useWindowSize.ts b/packages/hooks/useWindowSize.ts
@@ -0,0 +1,24 @@
+import {
+  useState, useEffect, useCallback,
+} from 'react'
+
+export function useWindowSize() {
+  const [size, setSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  })
+
+  const handleResize = useCallback(() => {
+    setSize({
+      width: window.innerWidth,
+      height: window.innerHeight,
+    })
+  }, [])
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [handleResize])
+
+  return size
+}