Moved to next js ssr (with fixes)

2026-08-15 18:42:06 +03:00
parent 2184f1642c
commit 23bfad8956
21 changed files with 1473 additions and 1659 deletions
@@ -1,16 +1,71 @@
 'use client';
-import dynamic from 'next/dynamic';
-import { Box, LinearProgress } from '@mui/material';
+import React from 'react';
+import { ArrowBack } from '@mui/icons-material';
+import {
+    Box,
+    Container,
+    Typography,
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
+import { IMod } from '@/src/types/Imod';
+import { IRaceUnits } from '@/src/types/IUnitShort';
+import { IRaceBuildings } from '@/src/types/IBuildingShort';
+import UnitsTable from '@/src/classes/UnitsTable';
+import { BackButton } from '@/src/commons/BackButton';

-const ModPageLegacy = dynamic(() => import('@/src/legacy-pages/ModPage'), {
-    ssr: false,
-    loading: () => (
-        <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
-            <LinearProgress sx={{ width: '200px' }} />
-        </Box>
-    ),
-});
+const ModNotFound = styled(Typography)(({ theme }) => ({
+    color: theme.palette.text.secondary,
+}));

-export default function ModPageClient() {
-    return <ModPageLegacy />;
+interface ModPageClientProps {
+    initialMod: IMod | null;
+    racesUnits: IRaceUnits[];
+    racesBuildings: IRaceBuildings[];
+}
+
+export default function ModPageClient({ initialMod, racesUnits, racesBuildings }: ModPageClientProps) {
+    const theme = useTheme();
+
+    if (initialMod != null) {
+        const isDark = theme.palette.mode === 'dark';
+
+        return (
+            <Container maxWidth="lg">
+                <BackButton
+                    variant="outlined"
+                    startIcon={<ArrowBack />}
+                    href="/"
+                >
+                    Back to mods list
+                </BackButton>
+
+                <Typography variant="h3" component="h1" sx={{
+                    fontWeight: 800,
+                    mb: 1,
+                    WebkitBackgroundClip: isDark ? 'text' : 'initial',
+                    WebkitTextFillColor: isDark ? '#dee2e6' : 'initial',
+                    color: isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)',
+                }}>
+                    {initialMod.name} <Box component="span" sx={{
+                        fontSize: '0.5em',
+                        color: theme.palette.text.secondary,
+                        fontWeight: 500,
+                    }}>({initialMod.version})</Box>
+                </Typography>
+
+                <Box>
+                    <UnitsTable modId={initialMod.id} racesUnits={racesUnits} racesBuildings={racesBuildings} />
+                </Box>
+            </Container>
+        );
+    } else {
+        return (
+            <Container maxWidth="lg" sx={{ py: 8, textAlign: 'center' }}>
+                <ModNotFound variant="h5">
+                    Mod not found
+                </ModNotFound>
+            </Container>
+        );
+    }
 }