Made everything more responsive

bento-platform · Oct 16, 2024 · 02e943a · 02e943a
1 parent 70e49ae
commit 02e943a
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 37 deletions.
diff --git a/src/js/components/Overview/ChartCard.tsx b/src/js/components/Overview/ChartCard.tsx
@@ -1,13 +1,12 @@
 import type React from 'react';
 import { memo, useRef } from 'react';
-import { Card, Button, Tooltip, Space, Typography, Row } from 'antd';
+import { Button, Card, Row, Space, Tooltip, Typography } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
 import Chart from './Chart';
 import CustomEmpty from '../Util/CustomEmpty';
-import { CHART_HEIGHT, BOX_SHADOW } from '@/constants/overviewConstants';
+import { BOX_SHADOW, CHART_HEIGHT } from '@/constants/overviewConstants';
 import { useElementWidth, useTranslationCustom, useTranslationDefault } from '@/hooks';
 import type { ChartDataField } from '@/types/data';
-import { useResponsive } from '@/components/ResponsiveContext';
 
 const ROW_EMPTY_STYLE: React.CSSProperties = { height: `${CHART_HEIGHT}px` };
 
@@ -30,8 +29,7 @@ const ChartCard: React.FC<ChartCardProps> = memo(({ section, chart, onRemoveChar
   const td = useTranslationDefault();
   const containerRef = useRef<HTMLDivElement>(null);
   const width = useElementWidth(containerRef, chart.width);
-  const { isMobile } = useResponsive();
-  const CARD_STYLE: React.CSSProperties = { height: isMobile ? '350px' : '415px', borderRadius: '11px', ...BOX_SHADOW };
+  const CARD_STYLE: React.CSSProperties = { height: '415px', borderRadius: '11px', ...BOX_SHADOW };
 
   const {
     data,
@@ -85,8 +83,6 @@ const ChartCard: React.FC<ChartCardProps> = memo(({ section, chart, onRemoveChar
   );
 });
 
-ChartCard.displayName = 'ChartCard';
-
 export interface ChartCardProps {
   section: string;
   chart: ChartDataField;

diff --git a/src/js/components/Overview/Counts.tsx b/src/js/components/Overview/Counts.tsx
@@ -1,10 +1,10 @@
 import type { CSSProperties } from 'react';
-import { Typography, Card, Space, Statistic } from 'antd';
+import { Card, Space, Statistic, Typography } from 'antd';
 import { TeamOutlined } from '@ant-design/icons';
 import { BiDna } from 'react-icons/bi';
 
 import ExpSvg from '../Util/ExpSvg';
-import { COUNTS_FILL, BOX_SHADOW } from '@/constants/overviewConstants';
+import { BOX_SHADOW, COUNTS_FILL } from '@/constants/overviewConstants';
 import { useAppSelector, useTranslationDefault } from '@/hooks';
 
 const styles: Record<string, CSSProperties> = {
@@ -41,7 +41,7 @@ const Counts = () => {
   return (
     <>
       <Typography.Title level={3}>{td('Counts')}</Typography.Title>
-      <Space direction="horizontal">
+      <Space wrap>
         {data.map(({ title, icon, count }, i) => (
           <Card key={i} style={{ ...styles.countCard, height: isFetchingData ? 138 : 114 }}>
             <Statistic

diff --git a/src/js/components/Overview/LastIngestion.tsx b/src/js/components/Overview/LastIngestion.tsx
@@ -1,6 +1,6 @@
 import type React from 'react';
 import { useCallback } from 'react';
-import { Typography, Card, Space, Empty } from 'antd';
+import { Card, Empty, Space, Typography } from 'antd';
 import { CalendarOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 
@@ -43,7 +43,7 @@ const LastIngestionInfo: React.FC = () => {
   return (
     <Space direction="vertical" size={0}>
       <Typography.Title level={3}>{t('Latest Data Ingestion')}</Typography.Title>
-      <Space direction="horizontal">
+      <Space wrap>
         {hasData ? (
           queryableDataTypes.map((dataType: LastIngestionDataTypeResponse) => (
             <Card style={BOX_SHADOW} key={dataType.id}>

diff --git a/src/js/components/Overview/OverviewDisplayData.tsx b/src/js/components/Overview/OverviewDisplayData.tsx
@@ -5,9 +5,12 @@ import { disableChart } from '@/features/data/data.store';
 import type { ChartDataField } from '@/types/data';
 import ChartCard from './ChartCard';
 import { CHART_WIDTH, GRID_GAP } from '@/constants/overviewConstants';
+import { useSmallScreen } from '@/components/ResponsiveContext';
+import { Space } from 'antd';
 
 const OverviewDisplayData = ({ section, allCharts }: OverviewDisplayDataProps) => {
   const dispatch = useDispatch();
+  const isSmallScreen = useSmallScreen();
 
   const containerStyle = {
     display: 'grid',
@@ -28,6 +31,14 @@ const OverviewDisplayData = ({ section, allCharts }: OverviewDisplayDataProps) =
     return <ChartCard key={chart.id} chart={chart} section={section} onRemoveChart={onRemoveChart} />;
   };
 
+  if (isSmallScreen) {
+    return (
+      <Space direction="vertical" style={{ width: '100%' }}>
+        {displayedCharts.map(renderItem)}
+      </Space>
+    );
+  }
+
   return <div style={containerStyle}>{displayedCharts.map(renderItem)}</div>;
 };
 

diff --git a/src/js/components/ResponsiveContext.tsx b/src/js/components/ResponsiveContext.tsx
@@ -1,35 +1,49 @@
 import type { ReactNode } from 'react';
-import React, { createContext, useState, useContext, useEffect } from 'react';
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+import { DeviceBreakpoints } from '@/constants/deviceBreakpoints';
 
 interface ResponsiveContextType {
   isMobile: boolean;
+  isTablet: boolean;
 }
 
-const ResponsiveContext = createContext<ResponsiveContextType | undefined>(undefined);
+const DefaultResponsiveContext: ResponsiveContextType = {
+  isMobile: false,
+  isTablet: false,
+};
+
+const ResponsiveContext = createContext<ResponsiveContextType>(DefaultResponsiveContext);
 
 interface ResponsiveProviderProps {
   children: ReactNode;
 }
 
 export const ResponsiveProvider = ({ children }: ResponsiveProviderProps) => {
   const [isMobile, setIsMobile] = useState<boolean>(false);
+  const [isTablet, setIsTablet] = useState<boolean>(false);
 
   useEffect(() => {
     const handleResize = () => {
-      setIsMobile(window.innerWidth <= 768); // Adjust this breakpoint as needed
+      setIsMobile(window.innerWidth <= DeviceBreakpoints.MOBILE);
+      setIsTablet(window.innerWidth > DeviceBreakpoints.MOBILE && window.innerWidth <= DeviceBreakpoints.TABLET);
     };
     handleResize();
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  return <ResponsiveContext.Provider value={{ isMobile }}>{children}</ResponsiveContext.Provider>;
+  return <ResponsiveContext.Provider value={{ isMobile, isTablet }}>{children}</ResponsiveContext.Provider>;
+};
+
+export const useResponsiveMobileContext = (): boolean => {
+  return useContext(ResponsiveContext).isMobile;
+};
+
+export const useResponsiveTabletContext = (): boolean => {
+  return useContext(ResponsiveContext).isTablet;
 };
 
-export const useResponsive = (): ResponsiveContextType => {
-  const context = useContext(ResponsiveContext);
-  if (context === undefined) {
-    throw new Error('useResponsive must be used within a ResponsiveProvider');
-  }
-  return context;
+export const useSmallScreen = (): boolean => {
+  return useContext(ResponsiveContext).isMobile || useContext(ResponsiveContext).isTablet;
 };
diff --git a/src/js/components/SiteHeader.tsx b/src/js/components/SiteHeader.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
-import { Button, Flex, Layout, Typography, Space } from 'antd';
+import { Button, Flex, Layout, Space, Typography } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { useAuthState, useIsAuthenticated, useOpenIdConfig, usePerformAuth, usePerformSignOut } from 'bento-auth-js';
 
@@ -15,7 +15,7 @@ import { DEFAULT_TRANSLATION, LNG_CHANGE, LNGS_FULL_NAMES } from '@/constants/co
 import { CLIENT_NAME, PORTAL_URL, TRANSLATED } from '@/config';
 
 import ScopePickerModal from './Scope/ScopePickerModal';
-import { useResponsive } from '@/components/ResponsiveContext';
+import { useSmallScreen } from '@/components/ResponsiveContext';
 
 const { Header } = Layout;
 
@@ -25,7 +25,7 @@ const SiteHeader = () => {
   const { t, i18n } = useTranslation(DEFAULT_TRANSLATION);
   const navigate = useNavigate();
   const location = useLocation();
-  const { isMobile } = useResponsive();
+  const isSmallScreen = useSmallScreen();
 
   const { isFetching: openIdConfigFetching } = useOpenIdConfig();
   const { isHandingOffCodeForToken } = useAuthState();
@@ -67,8 +67,8 @@ const SiteHeader = () => {
   return (
     <Header style={{ position: 'fixed', width: '100%', zIndex: 100, top: 0 }}>
       <Flex align="center" justify="space-between">
-        <Space size={isMobile ? 'small' : 'middle'}>
-          {isMobile ? (
+        <Space size={isSmallScreen ? 'small' : 'middle'}>
+          {isSmallScreen ? (
             <img
               src="/public/assets/icon_small.png"
               alt="logo"
@@ -106,28 +106,28 @@ const SiteHeader = () => {
           <ScopePickerModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
         </Space>
 
-        <Space size={isMobile ? 0 : 'small'}>
+        <Space size={isSmallScreen ? 0 : 'small'}>
           {TRANSLATED && (
             <Button
               type="text"
               className="header-button"
               icon={<RiTranslate style={{ transform: 'translateY(1px)' }} />}
               onClick={changeLanguage}
             >
-              {isMobile ? '' : LNGS_FULL_NAMES[LNG_CHANGE[i18n.language]]}
+              {isSmallScreen ? '' : LNGS_FULL_NAMES[LNG_CHANGE[i18n.language]]}
             </Button>
           )}
           <Button type="text" className="header-button" icon={<LinkOutlined />} onClick={openPortalWindow}>
-            {isMobile ? '' : t('Portal')}
-            {isMobile || <ExportOutlined />}
+            {isSmallScreen ? '' : t('Portal')}
+            {isSmallScreen || <ExportOutlined />}
           </Button>
           {isAuthenticated ? (
             <Button type="text" className="header-button" icon={<LogoutOutlined />} onClick={performSignOut}>
-              {isMobile ? '' : t('Sign Out')}
+              {isSmallScreen ? '' : t('Sign Out')}
             </Button>
           ) : (
             <Button type="primary" shape="round" icon={<LoginOutlined />} onClick={performSignIn}>
-              {openIdConfigFetching || isHandingOffCodeForToken ? t('Loading...') : isMobile ? '' : t('Sign In')}
+              {openIdConfigFetching || isHandingOffCodeForToken ? t('Loading...') : isSmallScreen ? '' : t('Sign In')}
             </Button>
           )}
         </Space>

diff --git a/src/js/components/SiteSider.tsx b/src/js/components/SiteSider.tsx
@@ -1,9 +1,9 @@
 import type React from 'react';
-import { useMemo, useCallback } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useCallback, useMemo } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 
-import { Layout, Menu } from 'antd';
 import type { MenuProps, SiderProps } from 'antd';
+import { Layout, Menu } from 'antd';
 import Icon, { PieChartOutlined, SearchOutlined, SolutionOutlined } from '@ant-design/icons';
 
 import BeaconSvg from '@/components/Beacon/BeaconSvg';

diff --git a/src/js/constants/deviceBreakpoints.ts b/src/js/constants/deviceBreakpoints.ts
@@ -0,0 +1,4 @@
+export const DeviceBreakpoints = {
+  MOBILE: 576,
+  TABLET: 768,
+};