diff --git a/src/components/pages/Dashboard.tsx b/src/components/pages/Dashboard.tsx index 05ca34e..2957e50 100644 --- a/src/components/pages/Dashboard.tsx +++ b/src/components/pages/Dashboard.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useState } from 'react'; import { - Paper, Table, TableBody, TableCell, @@ -11,12 +10,12 @@ import { Button, ButtonGroup, Typography, - Grid + Grid, + Skeleton } from '@material-ui/core'; import Link from 'components/Link'; import Card from 'components/Card'; -import Backdrop from 'components/Backdrop'; import useFetch from 'lib/hooks/useFetch'; import { useStoreSelector } from 'lib/redux/store'; @@ -88,18 +87,13 @@ export default function Dashboard() { const [images, setImages] = useState([]); const [page, setPage] = useState(0); const [stats, setStats] = useState(null); - const [apiLoading, setApiLoading] = useState(true); const [rowsPerPage, setRowsPerPage] = useState(10); const updateImages = async () => { - setApiLoading(true); - const imgs = await useFetch('/api/user/images'); const stts = await useFetch('/api/stats'); setImages(imgs); setStats(stts); - - setApiLoading(false); }; const handleChangePage = (event, newPage) => { @@ -122,36 +116,31 @@ export default function Dashboard() { return ( <> - Welcome back {user?.username} - You have {images.length} images - + You have {images.length ? images.length : '...'} images + Stats - {stats && ( - - - - {stats.size} - Average Size - {bytesToRead(stats.size_num / stats.count)} - - - - - {stats.count} - Views - {stats.views_count} ({isNaN(stats.views_count / stats.count) ? '0' : stats.views_count / stats.count}) - - - - - {stats.count_users} - - + + + + {stats ? stats.size : } + Average Size + {stats ? bytesToRead(stats.size_num / stats.count) : } + - )} - - + + + {stats ? stats.count : } + Views + {stats ? `${stats.views_count} (${isNaN(stats.views_count / stats.count) ? '0' : stats.views_count / stats.count})` : } + + + + + {stats ? stats.count_users : } + + + View Gallery @@ -167,7 +156,7 @@ export default function Dashboard() { ))} - Actions + Actions @@ -203,32 +192,24 @@ export default function Dashboard() { rowsPerPage={rowsPerPage} page={page} onPageChange={handleChangePage} - onRowsPerPageChange={handleChangeRowsPerPage} - /> + onRowsPerPageChange={handleChangeRowsPerPage} /> + + + + + + - {stats && ( - <> - - - - - - - - - )} ); } \ No newline at end of file