Skip to content

Commit

Permalink
fix(panel): solved react rendering errors + updated packages
Browse files Browse the repository at this point in the history
  • Loading branch information
@tabarra
tabarra committed Oct 3, 2024
1 parent 95cc1ca commit ca38df7
Show file tree
Hide file tree
Showing 8 changed files with 578 additions and 461 deletions.
832 changes: 470 additions & 362 deletions package-lock.json
View file

Large diffs are not rendered by default.

30 changes: 15 additions & 15 deletions panel/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,19 @@
"@formkit/auto-animate": "^0.8.2",
"@nivo/bar": "^0.87.0",
"@nivo/pie": "^0.87.0",
"@radix-ui/react-alert-dialog": "^1.0.5",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-navigation-menu": "^1.1.4",
"@radix-ui/react-scroll-area": "^1.0.5",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-tooltip": "^1.0.7",
"@radix-ui/react-alert-dialog": "^1.1.2",
"@radix-ui/react-avatar": "^1.1.1",
"@radix-ui/react-checkbox": "^1.1.2",
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-dropdown-menu": "^2.1.2",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-navigation-menu": "^1.2.1",
"@radix-ui/react-scroll-area": "^1.2.0",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.1",
"@radix-ui/react-tooltip": "^1.1.3",
"@tailwindcss/typography": "^0.5.15",
"@tanstack/react-query": "^5.59.0",
"@tanstack/react-virtual": "^3.10.8",
Expand All @@ -61,11 +61,11 @@
"react-markdown": "^9.0.1",
"socket.io-client": "^4.8.0",
"swr": "^2.2.5",
"tailwind-merge": "^2.5.2",
"tailwind-merge": "^2.5.3",
"tailwindcss-animate": "^1.0.7",
"throttle-debounce": "^5.0.2",
"usehooks-ts": "^3.1.0",
"wouter": "^2.12.1"
"wouter": "^3.3.5"
},
"devDependencies": {
"@types/node": "^22.7.4",
Expand Down
3 changes: 2 additions & 1 deletion panel/src/components/MainPageLink.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,8 +106,9 @@ export function NavLink({ href, children, className }: NavLinkProps) {
<MainPageLink
href={href}
isActive={isActive}
className={className}
>
<a className={className}>{children}</a>
{children}
</MainPageLink>
)
}
94 changes: 51 additions & 43 deletions panel/src/layout/DesktopNavbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,37 +36,45 @@ type HeaderMenuLinkProps = {
function HeaderMenuLink(props: HeaderMenuLinkProps) {
const [isActive] = useRoute(props.href);
return (
<NavigationMenuItem>
<NavigationMenuLink asChild active={isActive}>
{props.disabled ? (
<Tooltip>
<TooltipTrigger className="cursor-help">
<a className={cn(
buttonVariants({ variant: 'default' }),
"pointer-events-none opacity-50",
props.className,
)}>
{props.children}
</a>
</TooltipTrigger>
<TooltipContent side='bottom' className="text-destructive-inline text-center">
You do not have permission <br />
to access this page.
</TooltipContent>
</Tooltip>
) : (
<MainPageLink
href={props.href}
isActive={isActive}
className={cn(
buttonVariants({ variant: isActive ? 'secondary' : 'default' }),
<NavigationMenuLink asChild active={isActive}>
{props.disabled ? (
<Tooltip>
<TooltipTrigger className="cursor-help">
<a className={cn(
buttonVariants({ variant: 'default' }),
"pointer-events-none opacity-50",
props.className,
)}
>
{props.children}
</MainPageLink>
)}
</NavigationMenuLink>
)}>
{props.children}
</a>
</TooltipTrigger>
<TooltipContent side='bottom' className="text-destructive-inline text-center">
You do not have permission <br />
to access this page.
</TooltipContent>
</Tooltip>
) : (
<MainPageLink
href={props.href}
isActive={isActive}
className={cn(
buttonVariants({ variant: isActive ? 'secondary' : 'default' }),
props.className,
)}
>
{props.children}
</MainPageLink>
)}
</NavigationMenuLink>
);
}

function HeaderMenuItem(props: HeaderMenuLinkProps) {
return (
<NavigationMenuItem>
<HeaderMenuLink href={props.href} disabled={props.disabled} className={props.className}>
{props.children}
</HeaderMenuLink>
</NavigationMenuItem>
);
}
Expand All @@ -84,35 +92,35 @@ export default function DesktopHeader() {
{/* <DynamicNewItem featName='xxxxxxxx' durationDays={7}>
<div className="ml-1 mb-2 rounded-md size-2 bg-accent" />
</DynamicNewItem> */}
<HeaderMenuLink href="/players">
<HeaderMenuItem href="/players">
Players
</HeaderMenuLink>
<HeaderMenuLink href="/history">
</HeaderMenuItem>
<HeaderMenuItem href="/history">
History
</HeaderMenuLink>
<HeaderMenuLink href="/insights/player-drops">
</HeaderMenuItem>
<HeaderMenuItem href="/insights/player-drops">
Player Drops
<DynamicNewItem featName='newPlayerDropsPage' durationDays={7}>
<div className="ml-1 mb-2 rounded-md size-2 bg-accent" />
</DynamicNewItem>
</HeaderMenuLink>
<HeaderMenuLink href="/whitelist">
</HeaderMenuItem>
<HeaderMenuItem href="/whitelist">
Whitelist
</HeaderMenuLink>
<HeaderMenuLink href="/admins" disabled={!hasPerm('manage.admins')}>
</HeaderMenuItem>
<HeaderMenuItem href="/admins" disabled={!hasPerm('manage.admins')}>
Admins
</HeaderMenuLink>
<HeaderMenuLink href="/settings" disabled={!hasPerm('settings.view')}>
</HeaderMenuItem>
<HeaderMenuItem href="/settings" disabled={!hasPerm('settings.view')}>
Settings
<DynamicNewItem featName='hideAdminNames' durationDays={7}>
<div className="ml-1 mb-2 rounded-md size-2 bg-accent" />
</DynamicNewItem>
</HeaderMenuLink>
</HeaderMenuItem>
</NavigationMenuList>
</NavigationMenu>

<NavigationMenu>
<NavigationMenuList>
<NavigationMenuList className='aaaaaaaaaaa'>
<NavigationMenuItem>
<NavigationMenuTrigger
onClick={(e) => {
Expand Down
2 changes: 1 addition & 1 deletion panel/src/layout/MainRouter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Route as WouterRoute, Switch } from "wouter";
import { PageErrorFallback } from "@/components/ErrorFallback";
import { useAtomValue, useSetAtom } from "jotai";
import { contentRefreshKeyAtom, pageErrorStatusAtom, useSetPageTitle } from "@/hooks/pages";
import { navigate as setLocation } from 'wouter/use-location';
import { navigate as setLocation } from 'wouter/use-browser-location';

import Iframe from "@/pages/Iframe";
import NotFound from "@/pages/NotFound";
Expand Down
2 changes: 1 addition & 1 deletion panel/src/layout/MainShell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import AccountDialog from '@/components/AccountDialog';
import { useOpenAccountModal } from '@/hooks/dialogs';
import PlayerModal from './PlayerModal/PlayerModal';
import { useOpenPlayerModal } from '@/hooks/playerModal';
import { navigate as setLocation } from 'wouter/use-location';
import { navigate as setLocation } from 'wouter/use-browser-location';
import MainSocket from './MainSocket';
import { TooltipProvider } from '@/components/ui/tooltip';
import { useToggleTheme } from '@/hooks/theme';
Expand Down
50 changes: 25 additions & 25 deletions panel/src/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import AuthShell from './layout/AuthShell.tsx';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { isValidRedirectPath, redirectToLogin } from './lib/utils.ts';
import ThemeProvider from './components/ThemeProvider.tsx';
import { StrictMode } from 'react';
import { StrictMode, useEffect } from 'react';
import { isMobile } from 'is-mobile';
import { useAtomValue } from 'jotai';
import { pageTitleWatcher } from './hooks/pages.ts';
Expand Down Expand Up @@ -72,33 +72,33 @@ export function AuthContextSwitch() {
useAtomValue(pageTitleWatcher);
const isAuthenticated = useIsAuthenticated();

if (isAuthenticated) {
//Replace the current URL with the redirect path if it exists and is valid
const urlParams = new URLSearchParams(window.location.search);
const redirectPath = urlParams.get('r');
if (redirectPath) {
if (isValidRedirectPath(redirectPath)) {
window.history.replaceState(null, '', redirectPath);
} else {
useEffect(() => {
if (isAuthenticated) {
//Replace the current URL with the redirect path if it exists and is valid
const urlParams = new URLSearchParams(window.location.search);
const redirectPath = urlParams.get('r');
if (redirectPath) {
if (isValidRedirectPath(redirectPath)) {
window.history.replaceState(null, '', redirectPath);
} else {
window.history.replaceState(null, '', '/');
}
} else if (isAuthRoute(window.location.pathname)) {
window.history.replaceState(null, '', '/');
}
} else if (isAuthRoute(window.location.pathname)) {
window.history.replaceState(null, '', '/');
}

return <MainShell />;
} else {
//Unless the user is already in the auth pages, redirect to the login page
if (!window.txConsts.hasMasterAccount && !window.location.pathname.startsWith('/addMaster')) {
console.log('No master account detected. Redirecting to addMaster page.');
window.history.replaceState(null, '', '/addMaster/pin');
} else if (!isAuthRoute(window.location.pathname)) {
console.log('User is not authenticated. Redirecting to login page.');
redirectToLogin();
} else {
//Unless the user is already in the auth pages, redirect to the login page
if (!window.txConsts.hasMasterAccount && !window.location.pathname.startsWith('/addMaster')) {
console.log('No master account detected. Redirecting to addMaster page.');
window.history.replaceState(null, '', '/addMaster/pin');
} else if (!isAuthRoute(window.location.pathname)) {
console.log('User is not authenticated. Redirecting to login page.');
redirectToLogin();
}
}

return <AuthShell />;
}
}, [isAuthenticated]);

return isAuthenticated ? <MainShell /> : <AuthShell />;
}

//Creating a global query client
Expand Down
26 changes: 13 additions & 13 deletions panel/src/pages/Dashboard/FullPerfCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,25 +39,15 @@ const FullPerfChart = memo(({ threadName, apiData, apiDataAge, width, height, is

//Process data only once
const processedData = useMemo(() => {
if (!apiData) {
setServerStats(undefined);
return null;
}
if (!apiData) return null;
const parsed = processPerfLog(apiData.threadPerfLog, (perfLog) => {
const bucketTicketsEstimatedTime = getBucketTicketsEstimatedTime(apiData.boundaries);
return getTimeWeightedHistogram(
perfLog.buckets,
bucketTicketsEstimatedTime
);
});
if (!parsed) {
setServerStats(undefined);
return null;
}

//Calculate server stats here because the data comes from SWR instead of jotai
const serverStatsData = getServerStatsData(parsed.lifespans, 24, apiDataAge);
setServerStats(serverStatsData);
if (!parsed) return null;

return {
...parsed,
Expand All @@ -72,6 +62,16 @@ const FullPerfChart = memo(({ threadName, apiData, apiDataAge, width, height, is
}
}, [apiData, apiDataAge, threadName, isDarkMode, renderError]);

//Update server stats when data changes
useEffect(() => {
if (!processedData) {
setServerStats(undefined);
} else {
const serverStatsData = getServerStatsData(processedData.lifespans, 24, apiDataAge);
setServerStats(serverStatsData);
}
}, [processedData, apiDataAge]);


//Redraw chart when data or size changes
useEffect(() => {
Expand Down Expand Up @@ -201,7 +201,7 @@ export default function FullPerfCard() {
//the data min interval is 5 mins, so we can safely cache for 1 min
revalidateOnMount: true,
revalidateOnFocus: false,
refreshInterval: 60 * 1000,
refreshInterval: 60 * 1000,
});

//Rendering
Expand Down

0 comments on commit ca38df7

Please sign in to comment.