waveringana/simplelink
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Lazy load Statistics Modal

Browse source
This commit is contained in:
Wavering Ana 2025-01-31 20:36:10 -05:00
parent 26e0a4f92f
commit 62feb55702
2 changed files with 20 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

32
frontend/src/components/LinkList.tsx
View file

@ -1,3 +1,5 @@
import { lazy, Suspense } from 'react'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { Link } from '../types/api' import { Link } from '../types/api'
import { getAllLinks, deleteLink } from '../api/client' import { getAllLinks, deleteLink } from '../api/client'
@ -22,7 +24,7 @@ import {
DialogFooter, DialogFooter,
} from "@/components/ui/dialog" } from "@/components/ui/dialog"
import { StatisticsModal } from "./StatisticsModal" const StatisticsModal = lazy(() => import('./StatisticsModal'))
interface LinkListProps { interface LinkListProps {
refresh?: number; refresh?: number;
@ -85,13 +87,13 @@ export function LinkList({ refresh = 0 }: LinkListProps) {
const baseUrl = window.location.origin const baseUrl = window.location.origin
navigator.clipboard.writeText(`${baseUrl}/${shortCode}`) navigator.clipboard.writeText(`${baseUrl}/${shortCode}`)
toast({ toast({
description: ( description: (
<> <>
Link copied to clipboard Link copied to clipboard
<br /> <br />
You can add ?source=TextHere to the end of the link to track the source of clicks You can add ?source=TextHere to the end of the link to track the source of clicks
</> </>
), ),
}) })
} }
@ -186,11 +188,15 @@ export function LinkList({ refresh = 0 }: LinkListProps) {
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
<StatisticsModal {statsModal.isOpen && (
isOpen={statsModal.isOpen} <Suspense fallback={<div>Loading...</div>}>
onClose={() => setStatsModal({ isOpen: false, linkId: null })} <StatisticsModal
linkId={statsModal.linkId!} isOpen={statsModal.isOpen}
/> onClose={() => setStatsModal({ isOpen: false, linkId: null })}
linkId={statsModal.linkId!}
/>
</Suspense>
)}
</> </>
) )
} }

2
frontend/src/components/StatisticsModal.tsx
View file

@ -58,7 +58,7 @@ const CustomTooltip = ({
return null; return null;
}; };
export function StatisticsModal({ isOpen, onClose, linkId }: StatisticsModalProps) { export default function StatisticsModal({ isOpen, onClose, linkId }: StatisticsModalProps) {
const [clicksOverTime, setClicksOverTime] = useState<EnhancedClickStats[]>([]); const [clicksOverTime, setClicksOverTime] = useState<EnhancedClickStats[]>([]);
const [sourcesData, setSourcesData] = useState<SourceStats[]>([]); const [sourcesData, setSourcesData] = useState<SourceStats[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);