Infrastructure/zipline
1
Fork 0
Code Issues Pull requests Activity

fix: react hooks error

Browse source
This commit is contained in:
diced 2023-01-14 11:21:56 -08:00
parent a97ace6e73
commit cc0ffc6e60
No known key found for this signature in database
GPG key ID: 370BD1BA142842D1
6 changed files with 65 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/icons/DiscordIcon.tsx
View file

@ -1,7 +1,5 @@
// https://discord.com/branding
import Image from 'next/image';
export default function DiscordIcon({ ...props }) {
return (
<svg width='24' height='24' viewBox='0 0 71 55' xmlns='http://www.w3.org/2000/svg'>

2
src/components/icons/GoogleIcon.tsx
View file

@ -2,7 +2,7 @@
import Image from 'next/image';
export default function GoogleIcon({ ...props }) {
export default function GoogleIcon({ colorScheme, ...props }) {
return (
<Image
alt='google'

13
src/components/pages/Dashboard/index.tsx
View file

@ -103,27 +103,28 @@ export default function Dashboard({ disableMediaPreview, exifEnabled }) {
width: '100%',
},
td: {
':nth-child(1)': {
':nth-of-child(1)': {
minWidth: 170,
},
':nth-child(2)': {
':nth-of-child(2)': {
minWidth: 100,
},
},
th: {
':nth-child(1)': {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
':nth-of-child(1)': {
minWidth: 170,
padding: theme.spacing.lg,
borderTopLeftRadius: theme.radius.sm,
},
':nth-child(2)': {
':nth-of-child(2)': {
minWidth: 100,
padding: theme.spacing.lg,
},
':nth-child(3)': {
':nth-of-child(3)': {
padding: theme.spacing.lg,
},
':nth-child(4)': {
':nth-of-child(4)': {
padding: theme.spacing.lg,
borderTopRightRadius: theme.radius.sm,
},

2
src/components/pages/Manage/index.tsx
View file

@ -40,7 +40,7 @@ import useFetch from 'hooks/useFetch';
import { userSelector } from 'lib/recoil/user';
import { bytesToHuman } from 'lib/utils/bytes';
import { capitalize } from 'lib/utils/client';
import { useEffect, useState } from 'react';
import { useEffect, useReducer, useState } from 'react';
import { useRecoilState } from 'recoil';
import Flameshot from './Flameshot';
import ShareX from './ShareX';

36
src/components/pages/Stats/Graphs.tsx
View file

@ -1,16 +1,17 @@
import { Box, Card, Grid, LoadingOverlay, Title } from '@mantine/core';
import { Box, Card, Grid, LoadingOverlay, Title, useMantineTheme } from '@mantine/core';
import { useStats } from 'lib/queries/stats';
import { bytesToHuman } from 'lib/utils/bytes';
import { useMemo } from 'react';
import { useEffect, useMemo, useState } from 'react';
import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
export default function Graphs() {
const historicalStats = useStats(10);
const theme = useMantineTheme();
const chartData = useMemo(() => {
if (historicalStats.isLoading || !historicalStats.data) return;
if (historicalStats.isLoading || !historicalStats.data) return null;
const data = Array.from(historicalStats.data).reverse();
@ -18,6 +19,7 @@ export default function Graphs() {
date: new Date(stat.created_at).toLocaleDateString(),
views: stat.data.views_count,
}));
const uploads = data.map((stat) => ({
date: new Date(stat.created_at).toLocaleDateString(),
uploads: stat.data.count,
@ -35,10 +37,10 @@ export default function Graphs() {
};
}, [historicalStats]);
return (
return historicalStats.isLoading ? (
<LoadingOverlay visible={historicalStats.isLoading} />
) : (
<Box mt='md'>
<LoadingOverlay visible={historicalStats.isLoading} />
<Grid>
{/* 3/4 - views */}
<Grid.Col md={12}>
@ -50,7 +52,12 @@ export default function Graphs() {
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='date' />
<YAxis />
<Tooltip />
<Tooltip
contentStyle={{
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : 'white',
borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : 'white',
}}
/>
<Line type='monotone' dataKey='views' name='Views' stroke='#8884d8' activeDot={{ r: 8 }} />
</LineChart>
</ResponsiveContainer>
@ -68,7 +75,12 @@ export default function Graphs() {
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='date' />
<YAxis />
<Tooltip />
<Tooltip
contentStyle={{
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : 'white',
borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : 'white',
}}
/>
<Line
type='monotone'
dataKey='uploads'
@ -92,7 +104,13 @@ export default function Graphs() {
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='date' />
<YAxis width={80} tickFormatter={(value) => bytesToHuman(value as number)} />
<Tooltip formatter={(value) => bytesToHuman(value as number)} />
<Tooltip
contentStyle={{
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : 'white',
borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[3],
}}
formatter={(value) => bytesToHuman(value as number)}
/>
<Line
type='monotone'
stroke='#8884d8'

40
src/components/pages/Stats/Types.tsx
View file

@ -1,30 +1,39 @@
import { Box, Card, Center, Grid, LoadingOverlay, Title } from '@mantine/core';
import { Box, Card, Center, Grid, LoadingOverlay, Title, useMantineTheme } from '@mantine/core';
import { SmallTable } from 'components/SmallTable';
import { useStats } from 'lib/queries/stats';
import { colorHash } from 'lib/utils/client';
import { useMemo } from 'react';
import { useEffect, useMemo, useState } from 'react';
import { Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
export default function Types() {
const stats = useStats();
const theme = useMantineTheme();
if (stats.isLoading) return <LoadingOverlay visible />;
const latest = useMemo(() => {
if (stats.isLoading || !stats.data) return null;
const latest = stats.data[0];
return stats.data[0];
}, [stats]);
const chartData = useMemo(() => {
if (!latest) return null;
const data = latest.data.types_count.map((type) => ({
name: type.mimetype,
value: type.count,
fill: colorHash(type.mimetype),
}));
return {
data: latest.data.types_count.map((type) => ({
name: type.mimetype,
value: type.count,
fill: colorHash(type.mimetype),
})),
data,
};
}, [latest]);
return (
return !latest ? (
<LoadingOverlay visible={stats.isLoading} />
) : (
<Box mt='md'>
{latest.data.count_by_user.length ? (
<Card>
@ -64,7 +73,16 @@ export default function Types() {
outerRadius={80}
label={({ name, value }) => `${name} (${value})`}
/>
<Tooltip />
<Tooltip
contentStyle={{
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : 'white',
borderColor:
theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[3],
}}
itemStyle={{
color: theme.colorScheme === 'dark' ? 'white' : 'black',
}}
/>
</PieChart>
</ResponsiveContainer>
)}