diff --git a/src/components/pages/Manage.tsx b/src/components/pages/Manage.tsx
index 3f38263..780c3ea 100644
--- a/src/components/pages/Manage.tsx
+++ b/src/components/pages/Manage.tsx
@@ -1,14 +1,15 @@
-import React, { useEffect, useState } from 'react';
-
-import useFetch from 'hooks/useFetch';
-import Link from 'components/Link';
-import { useStoreDispatch, useStoreSelector } from 'lib/redux/store';
-import { updateUser } from 'lib/redux/reducers/user';
+import { Box, Button, Card, ColorInput, Group, MultiSelect, Space, Text, TextInput, PasswordInput, Title, Tooltip } from '@mantine/core';
import { randomId, useForm, useInterval } from '@mantine/hooks';
-import { Card, Tooltip, TextInput, Button, Text, Title, Group, ColorInput, MultiSelect, Space, Box, Table } from '@mantine/core';
-import { DownloadIcon, Cross1Icon, TrashIcon } from '@modulz/radix-icons';
-import { useNotifications } from '@mantine/notifications';
import { useModals } from '@mantine/modals';
+import { useNotifications } from '@mantine/notifications';
+import { Cross1Icon, DownloadIcon, TrashIcon } from '@modulz/radix-icons';
+import Link from 'components/Link';
+import { SmallTable } from 'components/SmallTable';
+import useFetch from 'hooks/useFetch';
+import { bytesToRead } from 'lib/clientUtils';
+import { updateUser } from 'lib/redux/reducers/user';
+import { useStoreDispatch, useStoreSelector } from 'lib/redux/store';
+import { useEffect, useState } from 'react';
function VarsTooltip({ children }) {
return (
@@ -18,7 +19,7 @@ function VarsTooltip({ children }) {
{'{image.mimetype}'} - mimetype
{'{image.id}'} - id of the image
{'{user.name}'} - your username
- visit
the docs for more variables
+ visit
the docs for more variables
}>
{children}
@@ -30,33 +31,6 @@ function ExportDataTooltip({ children }) {
return
{children};
}
-function ExportTable({ rows, columns }) {
- return (
-
-
-
-
- {columns.map(col => (
- | {col.name} |
- ))}
-
-
-
- {rows.map(row => (
-
- {columns.map(col => (
- |
- {col.format ? col.format(row[col.id]) : row[col.id]}
- |
- ))}
-
- ))}
-
-
-
- );
-}
-
export default function Manage() {
const user = useStoreSelector(state => state.user);
const dispatch = useStoreDispatch();
@@ -176,8 +150,9 @@ export default function Manage() {
const res = await useFetch('/api/user/export');
setExports(res.exports.map(s => ({
- date: new Date(Number(s.split('_')[3].slice(0, -4))),
- full: s,
+ date: new Date(Number(s.name.split('_')[3].slice(0, -4))),
+ size: s.size,
+ full: s.name,
})).sort((a, b) => a.date.getTime() - b.date.getTime()));
};
@@ -226,7 +201,6 @@ export default function Manage() {
},
});
-
const interval = useInterval(() => getExports(), 30000);
useEffect(() => {
getExports();
@@ -241,7 +215,7 @@ export default function Manage() {
-
Manage Data
-
Delete, or export your data into a zip file.
+
+ Manage Data
+ Delete, or export your data into a zip file.
+
+
}>Delete All Data
}>Export Data
- ({
name: Export {i + 1},
date: x.date.toLocaleString(),
+ size: bytesToRead(x.size),
})) : []} />
-
ShareX Config
+
ShareX Config
diff --git a/src/components/pages/Stats.tsx b/src/components/pages/Stats.tsx
index 809acef..f3f357e 100644
--- a/src/components/pages/Stats.tsx
+++ b/src/components/pages/Stats.tsx
@@ -1,52 +1,10 @@
-import React, { useEffect, useState } from 'react';
-
+import { SimpleGrid, Skeleton, Title } from '@mantine/core';
import Card from 'components/Card';
-import StatText from 'components/StatText';
+import MutedText from 'components/MutedText';
+import { SmallTable } from 'components/SmallTable';
+import { bytesToRead } from 'lib/clientUtils';
import useFetch from 'lib/hooks/useFetch';
-import { useStoreSelector } from 'lib/redux/store';
-import { Box, Text, Table, Skeleton, Title, SimpleGrid } from '@mantine/core';
-import { randomId } from '@mantine/hooks';
-
-export function bytesToRead(bytes: number) {
- if (isNaN(bytes)) return '0.0 B';
- if (bytes === Infinity) return '0.0 B';
- const units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB'];
- let num = 0;
-
- while (bytes > 1024) {
- bytes /= 1024;
- ++num;
- }
-
- return `${bytes.toFixed(1)} ${units[num]}`;
-}
-
-function StatTable({ rows, columns }) {
- return (
-
-
-
-
- {columns.map(col => (
- | {col.name} |
- ))}
-
-
-
- {rows.map(row => (
-
- {columns.map(col => (
- |
- {col.format ? col.format(row[col.id]) : row[col.id]}
- |
- ))}
-
- ))}
-
-
-
- );
-}
+import { useEffect, useState } from 'react';
export default function Stats() {
const [stats, setStats] = useState(null);
@@ -62,7 +20,7 @@ export default function Stats() {
return (
<>
- Stats
+ Stats
- {stats ? stats.size : }
+ {stats ? stats.size : }
Average Size
- {stats ? bytesToRead(stats.size_num / stats.count) : }
+ {stats ? bytesToRead(stats.size_num / stats.count) : }
- {stats ? stats.count : }
+ {stats ? stats.count : }
Views
- {stats ? `${stats.views_count} (${isNaN(stats.views_count / stats.count) ? 0 : Math.round(stats.views_count / stats.count)})` : }
+ {stats ? `${stats.views_count} (${isNaN(stats.views_count / stats.count) ? 0 : Math.round(stats.views_count / stats.count)})` : }
- {stats ? stats.count_users : }
+ {stats ? stats.count_users : }
-
- ;
- }
-
- if (status.rejected) {
- return ;
- }
-
- return ;
-}
-
-function getIconColor(status, theme) {
- return status.accepted
- ? theme.colors[theme.primaryColor][6]
- : status.rejected
- ? theme.colors.red[6]
- : theme.colorScheme === 'dark'
- ? theme.colors.dark[0]
- : theme.black;
-}
-
-function ImageDropzone({ file }: { file: File }) {
- const theme = useMantineTheme();
-
- return (
-
-
-
-
-
- | Name |
- {file.name} |
-
-
- | Type |
- {file.type} |
-
-
- | Last Modified |
- {new Date(file.lastModified).toLocaleString()} |
-
-
-
-