From 282a555519310f995e3aeaa84841bbf91e38af77 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 12 Dec 2020 19:31:14 +0200
Subject: [PATCH] closes #211

---
 components/u/AvatarWithInfo.tsx  | 43 +++++++++++++++++---------------
 prisma/queries/getPlayersPeak.ts |  4 +--
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/components/u/AvatarWithInfo.tsx b/components/u/AvatarWithInfo.tsx
index eb0924e05..90ae23237 100644
--- a/components/u/AvatarWithInfo.tsx
+++ b/components/u/AvatarWithInfo.tsx
@@ -18,7 +18,6 @@ import { getFullUsername } from "lib/strings";
 import { useMyTheme } from "lib/useMyTheme";
 import useUser from "lib/useUser";
 import { GetUserByIdentifierData } from "prisma/queries/getUserByIdentifier";
-import { Fragment } from "react";
 import { FaGamepad, FaTwitch, FaTwitter, FaYoutube } from "react-icons/fa";
 import { FiInfo } from "react-icons/fi";
 import { RiTrophyLine } from "react-icons/ri";
@@ -145,38 +144,42 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({
                 </Flex>
               )}
               {Object.keys(peakXPowers).length > 0 && (
-                <Flex mt={8} w="100%">
+                <Flex mt={8}>
                   {(["SZ", "TC", "RM", "CB"] as RankedMode[])
                     .filter((mode) => peakXPowers[mode])
                     .map((mode, i) => (
-                      <Fragment key={mode}>
-                        <Flex align="center" justify="center" mx="auto">
-                          {i !== 0 && <Divider orientation="vertical" mx={2} />}
-                          <ModeImage mode={mode} size={32} />{" "}
-                          <Box ml={2} color={gray}>
-                            {peakXPowers[mode]}
-                          </Box>
-                        </Flex>
-                      </Fragment>
+                      <Flex
+                        key={mode}
+                        align="center"
+                        justify="center"
+                        mx="auto"
+                      >
+                        {i !== 0 && <Divider orientation="vertical" mx={2} />}
+                        <ModeImage mode={mode} size={32} />{" "}
+                        <Box ml={2} color={gray}>
+                          {peakXPowers[mode]}
+                        </Box>
+                      </Flex>
                     ))}
                 </Flex>
               )}
 
               {Object.keys(peakLeaguePowers).length > 0 && (
-                <Flex mt={4}>
-                  {(["TWIN", "QUAD"] as LeagueType[])
-                    .filter((type) => peakLeaguePowers[type])
-                    .map((type) => (
-                      <Fragment key={type}>
-                        <Flex align="center" justify="center" mx={2}>
+                <>
+                  <Box flexBasis="100%" h="0" />
+                  <Flex mt={4}>
+                    {(["TWIN", "QUAD"] as LeagueType[])
+                      .filter((type) => peakLeaguePowers[type])
+                      .map((type) => (
+                        <Flex key={type} align="center" justify="center" mx={2}>
                           <Box ml={2} color={gray}>
                             <SubText>{type}</SubText>
                             {peakLeaguePowers[type]}
                           </Box>
                         </Flex>
-                      </Fragment>
-                    ))}
-                </Flex>
+                      ))}
+                  </Flex>
+                </>
               )}
               <Box width="100%" textAlign="center" mt={4}>
                 {!!user.player?.switchAccountId && (
diff --git a/prisma/queries/getPlayersPeak.ts b/prisma/queries/getPlayersPeak.ts
index 8b7063415..d8c99bb31 100644
--- a/prisma/queries/getPlayersPeak.ts
+++ b/prisma/queries/getPlayersPeak.ts
@@ -33,14 +33,14 @@ export const getPlayersPeak = async (switchAccountId: string) => {
   }
 
   const peakLeaguePowers = player.leaguePlacements.reduce(
-    (acc: { TWIN?: number; QUAD?: number }, cur) => {
+    (acc: { TWIN: number | null; QUAD: number | null }, cur) => {
       acc[cur.squad.type] = Math.max(
         acc[cur.squad.type] ?? 0,
         cur.squad.leaguePower
       );
       return acc;
     },
-    { TWIN: undefined, QUAD: undefined }
+    { TWIN: null, QUAD: null }
   );
 
   return { peakXPowers, peakLeaguePowers };