Don't show empty table or chart if there are no weight entries

Author: rolandgeider

src/components/BodyWeight/Table/index.tsx

@@ -1,5 +1,4 @@
 import {
-    Paper,
     Table,
     TableBody,
     TableCell,
@@ -54,7 +53,7 @@ export const WeightTable = ({ weights }: WeightTableProps) => {
 
     return (
         <div className={classes.table}>
-            <TableContainer component={Paper}>
+            <TableContainer>
                 <Table sx={{ minWidth: 650 }} aria-label="simple table">
                     <TableHead>
                         <TableRow>

src/components/BodyWeight/index.tsx

@@ -1,36 +1,40 @@
-import { Box, Stack, Button, ButtonGroup } from "@mui/material";
+import { Box, Stack } from "@mui/material";
 import { useBodyWeightQuery } from "components/BodyWeight/queries";
 import { WeightTable } from "components/BodyWeight/Table";
 import { WeightChart } from "components/BodyWeight/WeightChart";
 import { AddBodyWeightEntryFab } from "components/BodyWeight/widgets/fab";
+import { FilterButtons, FilterType } from "components/BodyWeight/widgets/FilterButtons";
 import { LoadingPlaceholder } from "components/Core/LoadingWidget/LoadingWidget";
 import { WgerContainerRightSidebar } from "components/Core/Widgets/Container";
 import { OverviewEmpty } from "components/Core/Widgets/OverviewEmpty";
-import { useTranslation } from "react-i18next";
-import { FilterButtons, FilterType } from "components/BodyWeight/widgets/FilterButtons";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 
 export const BodyWeight = () => {
     const [t] = useTranslation();
-    const [filter, setFilter] = useState<FilterType>('lastYear'); 
+    const [filter, setFilter] = useState<FilterType>('lastYear');
     const weightyQuery = useBodyWeightQuery(filter);
     const handleFilterChange = (newFilter: FilterType) => {
         setFilter(newFilter);
     };
 
-    return weightyQuery.isLoading
-        ? <LoadingPlaceholder />
-        : <WgerContainerRightSidebar
-            title={t("weight")}
-            mainContent={<Stack spacing={2}>
+    if (weightyQuery.isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    return <WgerContainerRightSidebar
+        title={t("weight")}
+        mainContent={<Stack spacing={2}>
             <FilterButtons currentFilter={filter} onFilterChange={handleFilterChange} />
-                {weightyQuery.data!.length === 0 && <OverviewEmpty />}
+            {weightyQuery.data!.length === 0 && <OverviewEmpty />}
+            {weightyQuery.data!.length !== 0 && <>
                 <WeightChart weights={weightyQuery.data!} />
                 <Box sx={{ mt: 4 }} />
                 <WeightTable weights={weightyQuery.data!} />
-            </Stack>
-            }
-            fab={<AddBodyWeightEntryFab />}
-        />;
+            </>}
+        </Stack>
+        }
+        fab={<AddBodyWeightEntryFab />}
+    />;
 };

src/components/BodyWeight/widgets/FilterButtons.tsx

@@ -28,39 +28,39 @@ export const FilterButtons = ({ currentFilter, onFilterChange }: FilterButtonsPr
                 onClick={() => handleFilterChange('')}
                 color={currentFilter === '' ? 'primary' : 'inherit'}
                 variant={currentFilter === '' ? 'contained' : 'outlined'}
-                sx={{ fontFamily: theme.typography.fontFamily }} 
+                sx={{ fontFamily: theme.typography.fontFamily }}
             >
                 {t('all')}
             </Button>
             <Button
                 onClick={() => handleFilterChange('lastYear')}
                 color={currentFilter === 'lastYear' ? 'primary' : 'inherit'}
                 variant={currentFilter === 'lastYear' ? 'contained' : 'outlined'}
-                sx={{ fontFamily: theme.typography.fontFamily }} 
+                sx={{ fontFamily: theme.typography.fontFamily }}
             >
                 {t('lastYear')}
             </Button>
             <Button
                 onClick={() => handleFilterChange('lastHalfYear')}
                 color={currentFilter === 'lastHalfYear' ? 'primary' : 'inherit'}
                 variant={currentFilter === 'lastHalfYear' ? 'contained' : 'outlined'}
-                sx={{ fontFamily: theme.typography.fontFamily }} 
+                sx={{ fontFamily: theme.typography.fontFamily }}
             >
                 {t('lastHalfYear')}
             </Button>
             <Button
                 onClick={() => handleFilterChange('lastMonth')}
                 color={currentFilter === 'lastMonth' ? 'primary' : 'inherit'}
                 variant={currentFilter === 'lastMonth' ? 'contained' : 'outlined'}
-                sx={{ fontFamily: theme.typography.fontFamily }} 
+                sx={{ fontFamily: theme.typography.fontFamily }}
             >
                 {t('lastMonth')}
             </Button>
             <Button
                 onClick={() => handleFilterChange('lastWeek')}
                 color={currentFilter === 'lastWeek' ? 'primary' : 'inherit'}
                 variant={currentFilter === 'lastWeek' ? 'contained' : 'outlined'}
-                sx={{ fontFamily: theme.typography.fontFamily }} 
+                sx={{ fontFamily: theme.typography.fontFamily }}
             >
                 {t('lastWeek')}
             </Button>