Book functional component (#256)

* Add bookTable functional component * Implement responsive booktable * Fix unwanted scroll bar on chromium browsers * Add column self-organization and 3 new columns * Add responsive behaviour on depth chart * Run prettier * Add minimum pageSize (book must at least be 1 row height) * Adjust circular spinner div height * Add order ID column style * Refactor window resize event listener * Add depth chart outline * Review fixes
RoboSats · Sep 27, 2022 · e47d55b · e47d55b
1 parent 33941ce
commit e47d55b
Show file tree

Hide file tree

Showing 11 changed files with 800 additions and 563 deletions.
diff --git a/frontend/src/components/BookPage.js b/frontend/src/components/BookPage.js
diff --git a/frontend/src/components/BookTable.tsx b/frontend/src/components/BookTable.tsx
diff --git a/frontend/src/components/Charts/DepthChart/index.tsx b/frontend/src/components/Charts/DepthChart/index.tsx
@@ -30,6 +30,7 @@ import PaymentText from '../../PaymentText';
 import getNivoScheme from '../NivoScheme';
 import median from '../../../utils/match';
 import { apiClient } from '../../../services/api/index';
+import statusBadgeColor from '../../../utils/statusBadgeColor';
 
 interface DepthChartProps {
   bookLoading: boolean;
@@ -38,7 +39,8 @@ interface DepthChartProps {
   currency: number;
   setAppState: (state: object) => void;
   limits: LimitList;
-  compact?: boolean;
+  maxWidth: number;
+  maxHeight: number;
 }
 
 const DepthChart: React.FC<DepthChartProps> = ({
@@ -48,7 +50,8 @@ const DepthChart: React.FC<DepthChartProps> = ({
   currency,
   setAppState,
   limits,
-  compact,
+  maxWidth,
+  maxHeight,
 }) => {
   const { t } = useTranslation();
   const history = useHistory();
@@ -61,6 +64,9 @@ const DepthChart: React.FC<DepthChartProps> = ({
   const [currencyCode, setCurrencyCode] = useState<number>(1);
   const [center, setCenter] = useState<number>();
 
+  const height = maxHeight < 20 ? 20 : maxHeight;
+  const width = maxWidth < 20 ? 20 : maxWidth > 72.8 ? 72.8 : maxWidth;
+
   useEffect(() => {
     if (Object.keys(limits).length === 0) {
       apiClient.get('/api/limits/').then((data) => {
@@ -216,17 +222,6 @@ const DepthChart: React.FC<DepthChartProps> = ({
     />
   );
 
-  const statusBadgeColor = (status: string) => {
-    if (status === 'Active') {
-      return 'success';
-    }
-    if (status === 'Seen recently') {
-      return 'warning';
-    }
-
-    return 'error';
-  };
-
   const generateTooltip: React.FunctionComponent<PointTooltipProps> = (
     pointTooltip: PointTooltipProps,
   ) => {
@@ -293,94 +288,109 @@ const DepthChart: React.FC<DepthChartProps> = ({
     history.push('/order/' + point.data?.order?.id);
   };
 
-  return bookLoading || center == undefined || enrichedOrders.length < 1 ? (
-    <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 200, height: 420 }}>
-      <CircularProgress />
-    </div>
-  ) : (
-    <Grid container style={{ paddingTop: 15 }}>
-      <Grid
-        container
-        direction='row'
-        justifyContent='space-around'
-        alignItems='flex-start'
-        style={{ position: 'absolute' }}
-      >
-        <Grid
-          container
-          justifyContent='flex-start'
-          alignItems='flex-start'
-          style={{ paddingLeft: 20 }}
-        >
-          <Select variant='standard' value={xType} onChange={(e) => setXType(e.target.value)}>
-            <MenuItem value={'premium'}>
-              <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
-                {t('Premium')}
-              </div>
-            </MenuItem>
-            <MenuItem value={'base_amount'}>
-              <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
-                {t('Price')}
-              </div>
-            </MenuItem>
-          </Select>
-        </Grid>
-      </Grid>
-      <Grid container direction='row' justifyContent='center' alignItems='center'>
-        <Grid container justifyContent='center' alignItems='center'>
-          <Grid item>
-            <IconButton onClick={() => setXRange(xRange + rangeSteps)}>
-              <RemoveCircleOutline />
-            </IconButton>
-          </Grid>
-          <Grid item>
-            <Box justifyContent='center'>
-              {xType === 'base_amount' ? `${center} ${currencyDict[currencyCode]}` : `${center}%`}
-            </Box>
-          </Grid>
-          <Grid item>
-            <IconButton onClick={() => setXRange(xRange - rangeSteps)} disabled={xRange <= 1}>
-              <AddCircleOutline />
-            </IconButton>
+  return (
+    <Paper style={{ width: `${width}em`, maxHeight: `${height}em` }}>
+      <Paper variant='outlined'>
+        {bookLoading || center == undefined || enrichedOrders.length < 1 ? (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              paddingTop: `${(height - 3) / 2 - 1}em`,
+              height: `${height - 3}em`,
+            }}
+          >
+            <CircularProgress />
+          </div>
+        ) : (
+          <Grid container style={{ paddingTop: 15 }}>
+            <Grid
+              container
+              direction='row'
+              justifyContent='space-around'
+              alignItems='flex-start'
+              style={{ position: 'absolute' }}
+            >
+              <Grid
+                container
+                justifyContent='flex-start'
+                alignItems='flex-start'
+                style={{ paddingLeft: 20 }}
+              >
+                <Select variant='standard' value={xType} onChange={(e) => setXType(e.target.value)}>
+                  <MenuItem value={'premium'}>
+                    <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
+                      {t('Premium')}
+                    </div>
+                  </MenuItem>
+                  <MenuItem value={'base_amount'}>
+                    <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
+                      {t('Price')}
+                    </div>
+                  </MenuItem>
+                </Select>
+              </Grid>
+            </Grid>
+            <Grid container direction='row' justifyContent='center' alignItems='center'>
+              <Grid container justifyContent='center' alignItems='center'>
+                <Grid item>
+                  <IconButton onClick={() => setXRange(xRange + rangeSteps)}>
+                    <RemoveCircleOutline />
+                  </IconButton>
+                </Grid>
+                <Grid item>
+                  <Box justifyContent='center'>
+                    {xType === 'base_amount'
+                      ? `${center} ${currencyDict[currencyCode]}`
+                      : `${center}%`}
+                  </Box>
+                </Grid>
+                <Grid item>
+                  <IconButton onClick={() => setXRange(xRange - rangeSteps)} disabled={xRange <= 1}>
+                    <AddCircleOutline />
+                  </IconButton>
+                </Grid>
+              </Grid>
+            </Grid>
+            <Grid container style={{ height: `${height - 7}em`, padding: 15 }}>
+              <ResponsiveLine
+                data={series}
+                enableArea={true}
+                useMesh={true}
+                animate={false}
+                crosshairType='cross'
+                tooltip={generateTooltip}
+                onClick={handleOnClick}
+                axisRight={{
+                  tickSize: 5,
+                  format: formatAxisY,
+                }}
+                axisLeft={{
+                  tickSize: 5,
+                  format: formatAxisY,
+                }}
+                axisBottom={{
+                  tickSize: 5,
+                  tickRotation: xType === 'base_amount' && width < 40 ? 45 : 0,
+                  format: formatAxisX,
+                }}
+                margin={{ left: 65, right: 60, bottom: width < 40 ? 36 : 25, top: 10 }}
+                xFormat={(value) => Number(value).toFixed(0)}
+                lineWidth={3}
+                theme={getNivoScheme(theme)}
+                colors={[theme.palette.secondary.main, theme.palette.primary.main]}
+                xScale={{
+                  type: 'linear',
+                  min: center - xRange,
+                  max: center + xRange,
+                }}
+                layers={['axes', 'areas', 'crosshair', 'lines', centerLine, 'slices', 'mesh']}
+              />
+            </Grid>
           </Grid>
-        </Grid>
-      </Grid>
-      <Grid container style={{ height: 357, padding: 15 }}>
-        <ResponsiveLine
-          data={series}
-          enableArea={true}
-          useMesh={true}
-          animate={false}
-          crosshairType='cross'
-          tooltip={generateTooltip}
-          onClick={handleOnClick}
-          axisRight={{
-            tickSize: 5,
-            format: formatAxisY,
-          }}
-          axisLeft={{
-            tickSize: 5,
-            format: formatAxisY,
-          }}
-          axisBottom={{
-            tickSize: 5,
-            tickRotation: xType === 'base_amount' && compact ? 45 : 0,
-            format: formatAxisX,
-          }}
-          margin={{ left: 65, right: 60, bottom: compact ? 36 : 25, top: 10 }}
-          xFormat={(value) => Number(value).toFixed(0)}
-          lineWidth={3}
-          theme={getNivoScheme(theme)}
-          colors={[theme.palette.secondary.main, theme.palette.primary.main]}
-          xScale={{
-            type: 'linear',
-            min: center - xRange,
-            max: center + xRange,
-          }}
-          layers={['axes', 'areas', 'crosshair', 'lines', centerLine, 'slices', 'mesh']}
-        />
-      </Grid>
-    </Grid>
+        )}
+      </Paper>
+    </Paper>
   );
 };
 

diff --git a/frontend/src/components/Dialogs/UpdateClient.tsx b/frontend/src/components/Dialogs/UpdateClient.tsx
@@ -46,7 +46,7 @@ const UpdateClientDialog = ({
         <Typography>
           {t(
             'The RoboSats coordinator is on version {{coordinatorVersion}}, but your client app is {{clientVersion}}. This version mismatch might lead to a bad user experience.',
-            { coordinatorVersion: coordinatorVersion, clientVersion: clientVersion },
+            { coordinatorVersion, clientVersion },
           )}
         </Typography>
 
@@ -63,7 +63,7 @@ const UpdateClientDialog = ({
 
             <ListItemText
               secondary={t('Download RoboSats {{coordinatorVersion}} APK from Github releases', {
-                coordinatorVersion: coordinatorVersion,
+                coordinatorVersion,
               })}
               primary={t('On Android RoboSats app ')}
             />

diff --git a/frontend/src/components/HomePage.js b/frontend/src/components/HomePage.js
@@ -31,6 +31,23 @@ export default class HomePage extends Component {
     };
   }
 
+  componentDidMount = () => {
+    if (typeof window !== undefined) {
+      this.setState({ windowWidth: window.innerWidth, windowHeight: window.innerHeight });
+      window.addEventListener('resize', this.onResize);
+    }
+  };
+
+  componentWillUnmount = () => {
+    if (typeof window !== undefined) {
+      window.removeEventListener('resize', this.onResize);
+    }
+  };
+
+  onResize = () => {
+    this.setState({ windowWidth: window.innerWidth, windowHeight: window.innerHeight });
+  };
+
   setAppState = (newState) => {
     this.setState(newState);
   };
@@ -106,7 +123,7 @@ export default class HomePage extends Component {
         </div>
         <div
           className='bottomBar'
-          style={{ height: `${40 * fontSizeFactor}px`, width: window.innerWidth }}
+          style={{ height: `${40 * fontSizeFactor}px`, width: this.state.windowWidth }}
         >
           <BottomBar
             redirectTo={this.redirectTo}

diff --git a/frontend/src/components/OrderPage.js b/frontend/src/components/OrderPage.js
@@ -56,6 +56,7 @@ import { copyToClipboard } from '../utils/clipboard';
 import { getWebln } from '../utils/webln';
 import { apiClient } from '../services/api';
 import RobotAvatar from './Robots/RobotAvatar';
+import statusBadgeColor from '../utils/statusBadgeColor';
 
 class OrderPage extends Component {
   constructor(props) {
@@ -666,19 +667,6 @@ class OrderPage extends Component {
     return null;
   };
 
-  // Colors for the status badges
-  statusBadgeColor(status) {
-    if (status === 'Active') {
-      return 'success';
-    }
-    if (status === 'Seen recently') {
-      return 'warning';
-    }
-    if (status === 'Inactive') {
-      return 'error';
-    }
-  }
-
   orderBox = () => {
     const { t } = this.props;
     return (
@@ -694,7 +682,7 @@ class OrderPage extends Component {
               <ListItem>
                 <ListItemAvatar sx={{ width: 56, height: 56 }}>
                   <RobotAvatar
-                    statusColor={this.statusBadgeColor(this.state.maker_status)}
+                    statusColor={statusBadgeColor(this.state.maker_status)}
                     nickname={this.state.maker_nick}
                     tooltip={t(this.state.maker_status)}
                     orderType={this.state.type}
@@ -726,7 +714,7 @@ class OrderPage extends Component {
                         <ListItemAvatar>
                           <RobotAvatar
                             avatarClass='smallAvatar'
-                            statusColor={this.statusBadgeColor(this.state.taker_status)}
+                            statusColor={statusBadgeColor(this.state.taker_status)}
                             nickname={this.state.taker_nick}
                             tooltip={t(this.state.taker_status)}
                             orderType={this.state.type === 0 ? 1 : 0}

diff --git a/frontend/src/components/Robots/RobotAvatar/index.tsx b/frontend/src/components/Robots/RobotAvatar/index.tsx
@@ -4,7 +4,7 @@ import { Avatar, Badge, Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { SendReceiveIcon } from '../../Icons';
 
-interface DepthChartProps {
+interface Props {
   nickname: string;
   smooth?: boolean;
   style?: object;
@@ -15,7 +15,7 @@ interface DepthChartProps {
   onLoad?: () => void;
 }
 
-const RobotAvatar: React.FC<DepthChartProps> = ({
+const RobotAvatar: React.FC<Props> = ({
   nickname,
   orderType,
   statusColor,

diff --git a/frontend/src/utils/checkVer.ts b/frontend/src/utils/checkVer.ts
@@ -15,8 +15,8 @@ export const checkVer: (
   const patchAvailable = !updateAvailable && patch > Number(semver[2]);
 
   return {
-    updateAvailable: updateAvailable,
-    patchAvailable: patchAvailable,
+    updateAvailable,
+    patchAvailable,
     coordinatorVersion: `v${major}.${minor}.${patch}`,
     clientVersion: `v${semver[0]}.${semver[1]}.${semver[2]}`,
   };

diff --git a/frontend/src/utils/hexToRgb.js b/frontend/src/utils/hexToRgb.js
@@ -0,0 +1,14 @@
+export default function hexToRgb(c) {
+  if (c.includes('rgb')) {
+    const vals = c.split('(')[1].split(')')[0];
+    return vals.split(',');
+  }
+  if (/^#([a-f0-9]{3}){1,2}$/.test(c)) {
+    if (c.length == 4) {
+      c = '#' + [c[1], c[1], c[2], c[2], c[3], c[3]].join('');
+    }
+    c = '0x' + c.substring(1);
+    return [(c >> 16) & 255, (c >> 8) & 255, c & 255];
+  }
+  return '';
+}