more link looking links

TODO.md

@@ -7,7 +7,7 @@
   - [x] Builds link to /analyzer
 - [x] Check that user page fallback / redirect works
 - [x] Builds mode icons
-- [ ] Fix db hitting connection limit
+- [x] Fix db hitting connection limit
 - [ ] Script to parse data from Top 500 .json to the DB
 - [ ] Top 500 Leaderboards
 - [ ] Localization
@@ -17,6 +17,7 @@
 - [ ] Frontpage
 - [ ] Set favicon
 - [ ] Social media preview / SEO stuff
+- [ ] DB connection limit one last stress test
 
 ### Before being able to shut down old site and bot
 

components/common/MyLink.tsx

@@ -0,0 +1,21 @@
+import { Link as ChakraLink } from "@chakra-ui/react";
+import { useMyTheme } from "lib/useMyTheme";
+import NextLink from "next/link";
+
+interface Props {
+  children: React.ReactNode;
+  href: string;
+}
+
+const MyLink: React.FC<Props> = ({ children, href }) => {
+  const { themeColorShade } = useMyTheme();
+  return (
+    <NextLink href={href}>
+      <ChakraLink href={href} color={themeColorShade}>
+        {children}
+      </ChakraLink>
+    </NextLink>
+  );
+};
+
+export default MyLink;

components/top500/Top500Table.tsx

@@ -1,5 +1,6 @@
 import { Text } from "@chakra-ui/react";
 import { Trans } from "@lingui/macro";
+import MyLink from "components/common/MyLink";
 import {
   Table,
   TableBody,
@@ -62,7 +63,11 @@ const Top500Table: React.FC<Props> = ({ placements }) => {
                     </Link>
                   )}
                 </TableCell>
-                <TableCell>{placement.playerName}</TableCell>
+                <TableCell>
+                  <MyLink href={`/player/${placement.player.switchAccountId}`}>
+                    {placement.playerName}
+                  </MyLink>
+                </TableCell>
                 <TableCell>
                   <Text fontWeight="bold">{placement.xPower}</Text>
                 </TableCell>

components/u/AvatarWithInfo.tsx

@@ -1,20 +1,13 @@
-import {
-  Box,
-  Divider,
-  Flex,
-  Heading,
-  IconButton,
-  Link as ChakraLink,
-} from "@chakra-ui/react";
+import { Box, Divider, Flex, Heading, IconButton } from "@chakra-ui/react";
 import { t, Trans } from "@lingui/macro";
 import { RankedMode } from "@prisma/client";
 import ModeImage from "components/common/ModeImage";
+import MyLink from "components/common/MyLink";
 import UserAvatar from "components/common/UserAvatar";
 import WeaponImage from "components/common/WeaponImage";
 import { getEmojiFlag } from "countries-list";
 import { getFullUsername } from "lib/strings";
 import { useMyTheme } from "lib/useMyTheme";
-import NextLink from "next/link";
 import { GetUserByIdentifierData } from "prisma/queries/getUserByIdentifier";
 import { Fragment } from "react";
 import { FaGamepad, FaTwitch, FaTwitter, FaYoutube } from "react-icons/fa";
@@ -158,11 +151,9 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({
               )}
               {!!user.player?.switchAccountId && (
                 <Box mt={2} color={gray}>
-                  <NextLink href={`/player/${user.player?.switchAccountId}`}>
-                    <ChakraLink>
-                      <Trans>View all Top 500 results</Trans>
-                    </ChakraLink>
-                  </NextLink>
+                  <MyLink href={`/player/${user.player?.switchAccountId}`}>
+                    <Trans>View all Top 500 results</Trans>
+                  </MyLink>
                 </Box>
               )}
             </Flex>