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