feature: right side bar+ formula 1 standings

vantage-ola · Jul 24, 2024 · aadfdb0 · aadfdb0
1 parent 81fffe4
commit aadfdb0
Show file tree

Hide file tree

Showing 8 changed files with 194 additions and 18 deletions.
diff --git a/tracknow/web/public/f1_logo.png b/tracknow/web/public/f1_logo.png
diff --git a/tracknow/web/src/Types.ts b/tracknow/web/src/Types.ts
@@ -80,12 +80,32 @@ export interface EditUserPic {
     profile_picture_url?: string;
 }
 
-// Define the type for the user data
 export interface UserData {
     userId: number;
     username: string;
     profilePic: string;
     editProfile: (editProfile: EditUser) => Promise<void>;
     editProfilePic: (editProfilePic: EditUserPic) => Promise<void>;
     loading: boolean
+}
+
+export interface TeamStanding {
+    points: number;
+    position: number;
+    season: number;
+    team_id: number;
+    team_name: string;
+}
+
+export interface DriverStanding {
+    driver_id: number;
+    driver_name: string;
+    is_reserve: number;
+    nationality: string;
+    points: number;
+    position: number;
+    season: number;
+    team_id: number;
+    team_name: string;
+    updated: string;
 }
diff --git a/tracknow/web/src/components/Post/Post.tsx b/tracknow/web/src/components/Post/Post.tsx
@@ -27,19 +27,14 @@ export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore
     const { LazyLoadYoutubeEmbed } = miscFunctions();
     const textLimit = 100;
 
-    if (laptimes.length == 0) {
+    if (laptimes.length === 0) {
 
         return (
             <LoadingSpinner />
         )
     };
 
     return (
-
-
-
-
-
         <InfiniteScroll
             dataLength={laptimes.length}
             next={fetchMoreData}

diff --git a/tracknow/web/src/components/SideBar/RightSideBar.tsx b/tracknow/web/src/components/SideBar/RightSideBar.tsx
@@ -1,13 +1,164 @@
-
+import * as React from "react";
+import {
+    Box, Heading, List, ListItem,
+    Text, Divider, Image, Stack, Flex, Center,
+    Accordion, AccordionButton, AccordionIcon,
+    AccordionItem,
+    AccordionPanel,
+    HStack,
+    VStack,
+} from "@chakra-ui/react";
+import useMotorsportData from "../../hooks/useMotorsport";
+import { TeamStanding, DriverStanding } from "../../Types";
 
 const RightSideBar = () => {
+    const { fetchTeamStandings, fetchDriverStandings, teamColors } = useMotorsportData();
+    const [teamStandings, setTeamStandings] = React.useState<TeamStanding[]>([]);
+    const [driverStandings, setDriverStandings] = React.useState<DriverStanding[]>([]);
+
+    React.useEffect(() => {
+        // Check if the data is already cached in local storage
+        const cachedTeamStandings = localStorage.getItem('teamStandings');
+        const cachedDriverStandings = localStorage.getItem('driverStandings');
+
+        if (cachedTeamStandings && cachedDriverStandings) {
+            // If the data is cached, parse it and set it to state
+            setTeamStandings(JSON.parse(cachedTeamStandings));
+            setDriverStandings(JSON.parse(cachedDriverStandings));
+        } else {
+            // If the data is not cached, fetch it and set it to state
+            const fetchData = async () => {
+                const teamData = await fetchTeamStandings();
+                setTeamStandings(teamData.results);
+                localStorage.setItem('teamStandings', JSON.stringify(teamData.results));
+
+                const driverData = await fetchDriverStandings();
+                setDriverStandings(driverData.results);
+                localStorage.setItem('driverStandings', JSON.stringify(driverData.results));
+            };
+            fetchData();
+        }
+    }, []);
+
+
+    const today = new Date();
 
     return (
         <>
+            <Center >
+                <Image src='f1_logo.png' boxSize='55px' />
 
-        </>
+            </Center>
+            <Center pb={2}>
+                <VStack>
+                    <Heading size='xs' color={'grey'} textTransform='uppercase'>
+                        {today.getFullYear()} Standings
+                    </Heading>
+                    {driverStandings.length > 0 && (
+                        <Text fontSize={'8px'}>
+                            Last Updated: {new Date(driverStandings[0].updated).toLocaleDateString('en-US', {
+                                year: 'numeric',
+                                month: 'long',
+                                day: 'numeric',
+                            })}
+                        </Text>
+                    )}
+                </VStack>
+
+            </Center>
+            <Accordion allowMultiple>
+                <AccordionItem>
+
+                    <h2>
+                        <AccordionButton>
+                            <Box as='span' color={'grey'} flex='1' textAlign='left'>
+                                CONSTRUCTORS
+                            </Box>
+                            <AccordionIcon />
+                        </AccordionButton>
+                    </h2>
+                    <AccordionPanel pb={4}>
+                        <Flex mb={2} color={'grey'} justifyContent="space-between" alignItems="center">
+                            <Text fontSize="10px" >Rank</Text>
+                            <Text width="120px" fontSize="10px" >Constructor</Text>
+                            <Text width="30px" fontSize="10px" >Points</Text>
+                        </Flex>
+                        <Divider mb={2} />
+                        {teamStandings.map((team) => (
+                            <Box key={team.team_id}>
+                                <Flex justifyContent="space-between" alignItems="flex-start">
+                                    <HStack >
+                                        <Text color={'grayText'}>{team.position}</Text>
+                                    </HStack>
+                                    <Box width="100px">
+                                        <Text color={teamColors[team.team_name]}>{team.team_name}</Text>
+                                    </Box>
+                                    <HStack>
+                                        <Box width="30px">
+                                            <Text>{team.points}</Text>
+                                        </Box>
+                                    </HStack>
+                                </Flex>
+                            </Box>
+                        ))}
+                    </AccordionPanel>
+                </AccordionItem>
+                <AccordionItem>
+                    <h2>
+                        <AccordionButton>
+                            <Box as='span' flex='1' color={'grey'} textAlign='left'>
+                                DRIVERS
+                            </Box>
+                            <AccordionIcon />
+                        </AccordionButton>
+                    </h2>
+                    <AccordionPanel pb={4}>
+                        <Flex mb={2} color={'grey'} justifyContent="space-between" alignItems="center">
+                            <Text fontSize="10px" >Rank</Text>
+                            <Text width="120px" fontSize="10px" >Constructor</Text>
+                            <Text width="30px" fontSize="10px" >Points</Text>
+                        </Flex>
+                        <Divider mb={2} />
+                        {driverStandings.map((driver) => (
+                            <Box key={driver.driver_id}>
 
-    )
+                                <Flex p={1} justifyContent="space-between" alignItems="flex-start">
 
+                                    <HStack >
+                                        <Text color={'grayText'}>{driver.position}</Text>
+                                    </HStack>
+                                    <Box width="100px">
+                                        <Text fontSize={'15px'}>
+                                            {driver.driver_name.split(' ').map((name, index) => (
+                                                index === 0 ? name.charAt(0) + '.' : name
+                                            )).join(' ')}
+                                        </Text>
+
+                                        <Text color={teamColors[driver.team_name]} fontSize={'8px'}>{driver.team_name}</Text>
+                                    </Box>
+                                    <HStack>
+                                        <Box width="30px">
+                                            <Text >{driver.points}</Text>
+                                        </Box>
+                                    </HStack>
+
+                                </Flex>
+                            </Box>
+                        ))}
+                    </AccordionPanel>
+                </AccordionItem >
+            </Accordion >
+
+            <Center>
+                <Box mt={2} fontSize="10px" color="GrayText">
+                    More motorsport data coming soon...
+                </Box>
+            </Center>
+
+
+        </>
+
+    );
 };
-export default RightSideBar;
+
+export default RightSideBar;
diff --git a/tracknow/web/src/components/User/UserLaptimes.tsx b/tracknow/web/src/components/User/UserLaptimes.tsx
@@ -10,7 +10,6 @@ import { UserProfile } from "./UserProfile";
 
 const UserLaptimes = () => {
 
-    const { mylaptime, fetchMoreData2, hasMore2, laptime_loading } = useLaptimes();
     const { username, profilePic, loading, userId } = useUsers();
 
     const { isOpen, onOpen, onClose } = useDisclosure();

diff --git a/tracknow/web/src/components/User/UserProfile.tsx b/tracknow/web/src/components/User/UserProfile.tsx
@@ -22,7 +22,6 @@ import { FaCar } from "react-icons/fa";
 
 import MobileDrawer from "../../misc/MobileDrawer";
 import LeftSideBar from "../SideBar/LeftSideBar";
-import RightSideBar from "../SideBar/RightSideBar";
 
 export const UserProfile = ({ id }: { id: number }) => {
 

diff --git a/tracknow/web/src/hooks/useMotorsport.tsx b/tracknow/web/src/hooks/useMotorsport.tsx
@@ -1,5 +1,3 @@
-import * as React from "react";
-
 import API from "./API";
 
 const useMotorsportData = () => {
@@ -26,7 +24,21 @@ const useMotorsportData = () => {
 
     };
 
-    return { fetchDriverStandings, fetchTeamStandings }
+
+    const teamColors: { [key: string]: string } = {
+        'Mercedes': '#00D2BE',
+        'Red Bull': '#0600EF',
+        'Ferrari': '#DC0000',
+        'Aston Martin': '#006F62',
+        'Alpine': '#0090FF',
+        'Williams': '#005AFF',
+        'Team RB': '#2c18c5',
+        'Haas': '#FFFFFF',
+        'McLaren': '#FF8700',
+        'Kick Sauber': '#00e00b'
+    };
+
+    return { fetchDriverStandings, fetchTeamStandings, teamColors }
 
 };
 

diff --git a/tracknow/web/src/hooks/useUsers.tsx b/tracknow/web/src/hooks/useUsers.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { EditUser, EditUserPic, UserData } from "../Types";
 import API from "./API";
-import { useToast } from "@chakra-ui/react";
+//import { useToast } from "@chakra-ui/react";
 import { useNavigate } from "react-router-dom";
 
 
@@ -22,7 +22,7 @@ export const useUsers = () => {
 
 export const UserProvider = ({ children }: { children: React.ReactNode }) => {
 
-    const toast = useToast();
+    //const toast = useToast();
     const navigate = useNavigate();
 
     const [userId, setMyUserId] = React.useState<number>(0);