feat: add friend old name section

ledouxm · Jan 30, 2022 · ddf99e0 · ddf99e0
1 parent cae0bfc
commit ddf99e0
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 14 deletions.
diff --git a/src/features/FriendDetails/FriendDetails.tsx b/src/features/FriendDetails/FriendDetails.tsx
@@ -1,5 +1,5 @@
 import { ArrowBackIcon } from "@chakra-ui/icons";
-import { Box, Flex, Spinner, Stack } from "@chakra-ui/react";
+import { Box, Center, Flex, Spinner, Stack } from "@chakra-ui/react";
 import { useState } from "react";
 import { useQuery } from "react-query";
 import { useNavigate, useParams } from "react-router-dom";
@@ -8,6 +8,7 @@ import { electronRequest } from "../../utils";
 import { ProfileIcon } from "../DataDragon/Profileicon";
 import { FriendMatches } from "./FriendMatches";
 import { FriendNotifications } from "./FriendNotifications";
+import { FriendOldNames } from "./FriendOldNames";
 import { StateTabs } from "./StateTabs";
 
 export const formatRank = (ranking: Pick<RankDto, "division" | "tier" | "leaguePoints">) =>
@@ -26,14 +27,24 @@ export const FriendDetails = () => {
 
     const friendQuery = useQuery(["friend", puuid], () => getFriendRanks(puuid!));
 
-    if (friendQuery.isLoading) return <Spinner />;
-    if (friendQuery.error) return <Box>An error has occured</Box>;
+    if (friendQuery.isLoading)
+        return (
+            <Center h="100%">
+                <Spinner />
+            </Center>
+        );
+    if (friendQuery.error)
+        return (
+            <Center h="100%">
+                <Box>An error has occured</Box>
+            </Center>
+        );
     const friend = friendQuery.data!;
 
     return (
         <Stack flexDir="column" p="10px" w="100%" minW="700px" h="100%">
             <Flex pos="absolute" top="10px" left="10px" h="100%">
-                <ArrowBackIcon boxSize="30px" cursor="pointer" onClick={() => navigate("/")} />
+                <ArrowBackIcon boxSize="30px" cursor="pointer" onClick={() => navigate(-1)} />
             </Flex>
             <Flex alignItems="center" h="100px" justifyContent="center">
                 <ProfileIcon icon={friend.icon} />
@@ -57,14 +68,14 @@ export const FriendDetails = () => {
                 state={state}
             />
             <Flex whiteSpace="nowrap" w="100%" h="100%">
-                {renderComponentByState[state](puuid!)}
+                {renderComponentByState[state](friend)}
             </Flex>
         </Stack>
     );
 };
 
 const renderComponentByState = {
-    notifications: (puuid: string) => <FriendNotifications puuid={puuid} />,
-    "match-history": (puuid: string) => <FriendMatches puuid={puuid} />,
-    "old-names": (puuid: string) => <FriendNotifications puuid={puuid} />,
+    notifications: (friend: FriendDto) => <FriendNotifications puuid={friend.puuid} />,
+    "match-history": (friend: FriendDto) => <FriendMatches puuid={friend.puuid} />,
+    "old-names": (friend: FriendDto) => <FriendOldNames friend={friend} />,
 };
diff --git a/src/features/FriendDetails/FriendMatches.tsx b/src/features/FriendDetails/FriendMatches.tsx
@@ -15,8 +15,18 @@ const getMatchesByPuuid = async (puuid: string) =>
 export const FriendMatches = ({ puuid }: Pick<FriendDto, "puuid">) => {
     const query = useQuery(["matches", puuid], () => getMatchesByPuuid(puuid));
 
-    if (query.isLoading) return <Spinner />;
-    if (query.isError) return <Box>An error has occured</Box>;
+    if (query.isLoading)
+        return (
+            <Center w="100%">
+                <Spinner />
+            </Center>
+        );
+    if (query.isError)
+        return (
+            <Center w="100%">
+                <Box>An error has occured</Box>
+            </Center>
+        );
 
     const matchObj = query.data!;
     const games = matchObj?.games?.games;

diff --git a/src/features/FriendDetails/FriendNotifications.tsx b/src/features/FriendDetails/FriendNotifications.tsx
@@ -1,4 +1,4 @@
-import { Box, Spinner, Stack } from "@chakra-ui/react";
+import { Box, Center, Spinner, Stack } from "@chakra-ui/react";
 import { useQuery } from "react-query";
 import { FriendDto, NotificationDto } from "../../types";
 import { electronRequest } from "../../utils";
@@ -16,7 +16,7 @@ export const FriendNotifications = ({ puuid }: Pick<FriendDto, "puuid">) => {
     const notifications = query.data!;
 
     return (
-        <Stack h="100%" overflowY="auto" w="100%">
+        <Center flexDir="column" h="100%" overflowY="auto" w="100%">
             {notifications.map((notif) => (
                 <NotificationItem
                     notification={notif}
@@ -25,6 +25,6 @@ export const FriendNotifications = ({ puuid }: Pick<FriendDto, "puuid">) => {
                     withIcon={false}
                 />
             ))}
-        </Stack>
+        </Center>
     );
 };
diff --git a/src/features/FriendDetails/FriendOldNames.tsx b/src/features/FriendDetails/FriendOldNames.tsx
@@ -0,0 +1,25 @@
+import { Box, Center, Flex, Stack } from "@chakra-ui/react";
+import { FriendDto } from "../../types";
+
+export const FriendOldNames = ({ friend }: { friend: FriendDto }) => {
+    return !friend.oldNames?.length ? (
+        <Center w="100%">
+            <Box>No old names</Box>
+        </Center>
+    ) : (
+        <Center alignItems="flex-start" w="100%">
+            <Stack alignItems="center">
+                {friend.oldNames.map((oldName) => (
+                    <Box width="600px" key={oldName.id}>
+                        <Flex direction="column">
+                            <Box>{oldName.name}</Box>
+                            <Box fontSize="sm" color="gray.500">
+                                {oldName.createdAt.toLocaleDateString()}
+                            </Box>
+                        </Flex>
+                    </Box>
+                ))}
+            </Stack>
+        </Center>
+    );
+};
diff --git a/src/features/Notifications/NotificationItem.tsx b/src/features/Notifications/NotificationItem.tsx
@@ -18,7 +18,7 @@ export const NotificationItem = ({
     const isRed = ["LOSS", "DEMOTION"].includes(notification.type);
 
     return (
-        <Flex mt="10px">
+        <Flex mt="10px" width="700px">
             {withIcon && <ProfileIcon icon={notification.friend.icon} mr="10px" />}
             <Flex whiteSpace="nowrap" flexDir="column" pr="10px">
                 <Flex>

diff --git a/src/types.ts b/src/types.ts
@@ -9,6 +9,13 @@ export interface FriendDto {
     name: string;
     puuid: string;
     selected: boolean;
+    oldNames: OldNames[];
+}
+export interface OldNames {
+    id: number;
+    name: string;
+    createdAt: Date;
+    puuid: string;
 }
 
 export type FriendLastRankDto = FriendDto & Omit<RankDto, "id">;