discover: youtube

tracknow/web/src/App.tsx

@@ -9,6 +9,7 @@ import { UserLogin } from "./components/User/UserLogin";
 import { UserSignUp } from "./components/User/UserSignUp";
 import { Welcome } from "./components/Welcome/Welcome";
 import { Home } from "./components/Home/Home";
+import Discover from "./components/Discover/Discover";
 
 import UserAddLaptimes from "./components/User/UserAddLaptimes";
 import UserAccountSettings from "./components/User/UserAccountSettings";
@@ -55,6 +56,7 @@ export const App = () => {
                         <Route path="/create-user" element={<UserSignUp />} />
                     </Route>
 
+
                     {/*user is logged in */}
                     <Route element={
                         <UserProvider>
@@ -67,6 +69,7 @@ export const App = () => {
                             </Flex>
                         }>
 
+                            <Route path="/discover" element={<Discover />} />
 
                             <Route
                                 path="/home"

tracknow/web/src/Types.ts

@@ -34,12 +34,12 @@ export interface Laptime {
     platform?: string;
     youtube_link?: string;
     comment: string;
-}
+};
 
 export interface CreateLaptimeResponse {
     "Laptime Added Successfully": Laptime;
     by: string;
-}
+};
 
 export interface GetUserLaptimesResponse {
     title: string;
@@ -54,31 +54,31 @@ export interface GetUserLaptimesResponse {
     id: number;
     by: string;
     date_created: string;
-}
+};
 
 export interface identity {
     "message": "User Found";
     id: number;
     name: string; // username
     pp: string; // profile_pic
-}
+};
 
 export interface identityProfile {
     name: string; // username
     pp: string; // profile_pic
     onOpen: () => void;
-}
+};
 
 export interface EditUser {
     username?: string;
     password?: string;
     nationality?: string;
 
-}
+};
 
 export interface EditUserPic {
     profile_picture_url?: string;
-}
+};
 
 export interface UserData {
     userId: number;
@@ -87,7 +87,7 @@ export interface UserData {
     editProfile: (editProfile: EditUser) => Promise<void>;
     editProfilePic: (editProfilePic: EditUserPic) => Promise<void>;
     loading: boolean
-}
+};
 
 export interface F1DriverStanding {
     position: string;
@@ -97,12 +97,47 @@ export interface F1DriverStanding {
     };
     Constructors: Array<{ name: string }>;
     points: string;
-}
+};
 
 export interface F1ConstructorStanding {
     position: string;
     Constructor: {
         name: string;
     };
     points: string;
-}
+};
+
+export interface YoutubeSearchResult {
+    kind: string;
+    etag: string;
+    id: {
+        kind: string;
+        videoId: string;
+    };
+    snippet: {
+        publishedAt: string;
+        channelId: string;
+        title: string;
+        description: string;
+        thumbnails: {
+            default: {
+                url: string;
+                width: number;
+                height: number;
+            };
+            medium: {
+                url: string;
+                width: number;
+                height: number;
+            };
+            high: {
+                url: string;
+                width: number;
+                height: number;
+            };
+        };
+        channelTitle: string;
+        liveBroadcastContent: string;
+        publishTime: string;
+    };
+};

tracknow/web/src/components/Discover/Discover.tsx

@@ -0,0 +1,11 @@
+import Youtube from "./Youtube";
+const Discover: React.FC = () => {
+
+    return (
+        <>
+            <Youtube />
+        </>
+    );
+};
+
+export default Discover;

tracknow/web/src/components/Discover/Youtube.tsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+import { Box, Card, CardBody, Flex, HStack, Icon, Stack, Text } from "@chakra-ui/react";
+import useMiscFunctions from "../../misc/miscFunctions";
+import { FaYoutube, FaHashtag } from "react-icons/fa";
+import { formatDistanceToNow } from "date-fns";
+
+import getInternetData from "../../hooks/useInternet";
+import { YoutubeSearchResult } from "../../Types";
+
+const Youtube: React.FC = () => {
+
+    const { LazyLoadYoutubeEmbed } = useMiscFunctions();
+    const { fetchYoutube } = getInternetData();
+
+    const [youtube, setYoutube] = React.useState<YoutubeSearchResult[]>([]);
+
+    React.useEffect(() => {
+        const fetchData = async () => {
+            const youtubeData = await fetchYoutube();
+            setYoutube(youtubeData);
+        };
+        fetchData();
+    })
+    return (
+        <>
+            {youtube.map((video) => (
+                <Card key={video.id.videoId}>
+                    <CardBody>
+                        <Flex justifyContent={"space-between"} p={2}>
+                            <Text as="b">{video.snippet.title}</Text>
+                            <Text fontSize="smaller" color={"GrayText"}>
+                                {formatDistanceToNow(new Date(video.snippet.publishedAt), { addSuffix: true })}
+                            </Text>
+                        </Flex>
+                        <Box>
+                            <LazyLoadYoutubeEmbed youtubeLink={video.id.videoId} />
+                        </Box>
+                        <Box p={2}>
+                            <Stack direction={"row"} spacing={2} align="flex-start" flexShrink="0">
+                                <Box
+                                    display={"inline-block"}
+                                    px={2}
+                                    py={1}
+                                    color="white"
+                                    mb={2}
+                                >
+                                    <Flex justifyContent={"space-between"}>
+                                        <HStack>
+                                            <Icon color="red" as={FaYoutube} />
+                                            <Text color={"GrayText"} fontSize={"xs"} fontWeight="medium">
+                                                {video.snippet.channelTitle}
+                                            </Text>
+                                        </HStack>
+                                    </Flex>
+                                </Box>
+                                <Box
+                                    display={"inline-block"}
+                                    px={2}
+                                    py={1}
+                                    color="white"
+                                    mb={2}
+                                >
+                                    <Flex justifyContent={"space-between"}>
+                                        <HStack>
+                                            <Icon color="red" as={FaHashtag} />
+                                            <Text color={"GrayText"} fontSize={"xs"} fontWeight="medium">
+                                                simracing
+                                            </Text>
+                                        </HStack>
+                                    </Flex>
+                                </Box>
+                                <Box
+                                    display={"inline-block"}
+                                    px={2}
+                                    py={1}
+                                    color="white"
+                                    mb={2}
+                                >
+                                    <Flex justifyContent={"space-between"}>
+                                        <HStack>
+                                            <Icon color="red" as={FaHashtag} />
+                                            <Text color={"GrayText"} fontSize={"xs"} fontWeight="medium">
+                                                motorsports
+                                            </Text>
+                                        </HStack>
+                                    </Flex>
+                                </Box>
+                            </Stack>
+                        </Box>
+                        <Text fontSize={"smaller"}>{video.snippet.description}</Text>
+                    </CardBody>
+                </Card>
+            ))}
+        </>
+    );
+
+};
+
+export default Youtube;

tracknow/web/src/components/SideBar/LeftSideBar.tsx

@@ -19,7 +19,7 @@ interface SideItemProps extends FlexProps {
 
 const LinkItems: Array<LinkItemProps> = [
     { name: 'Home', icon: FiHome, disabled: false },
-    { name: 'Discover', icon: FiGlobe, disabled: true },
+    { name: 'Discover', icon: FiGlobe, disabled: false },
     { name: 'Events', icon: FiCalendar, disabled: true },
     { name: 'Leaderboard', icon: FiAward, disabled: true },
     { name: 'Setups', icon: FiSettings, disabled: true },
@@ -31,8 +31,8 @@ const LinkItems: Array<LinkItemProps> = [
 
 const linkMap: { [key: string]: string } = {
     Home: "/home",
+    Discover: "/discover",
 
-    // TODO make this items open in a new page.
     Donate: 'https://www.buymeacoffee.com/vantageola',
     Contribute: 'https://github.com/vantage-ola',
 

tracknow/web/src/hooks/API.ts

@@ -37,7 +37,10 @@ const endpoints = {
 
     // formula 1 standings
     FORMULA_1_TEAMS: `${API_PREFIX_URL}/f1/teams`,
-    FORMULA_1_DRIVERS: `${API_PREFIX_URL}/f1/drivers`
+    FORMULA_1_DRIVERS: `${API_PREFIX_URL}/f1/drivers`,
+
+    // content from internet
+    YOUTUBE: (date: string) => `${API_PREFIX_URL}/internet/youtube?date=${date}`
 
 };
 
@@ -331,6 +334,23 @@ async function fetchF1Drivers() {
     return data;
 };
 
+// function to fetch daily youtube data
+async function fetchYoutube(date: string) {
+    const response = await fetch(endpoints.YOUTUBE(date), {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    });
+
+    if (!response.ok) {
+        throw new Error(`Failed to fetch youtube data`)
+    };
+
+    const data = await response.json();
+    return data;
+};
+
 const API = {
     fetchUser,
     fetchUsers,
@@ -345,7 +365,8 @@ const API = {
     fetchAUserLaptime,
     fetchUsersLaptimes,
     fetchF1Drivers,
-    fetchF1Teams
+    fetchF1Teams,
+    fetchYoutube
 };
 
 

tracknow/web/src/hooks/useInternet.ts

@@ -0,0 +1,23 @@
+import API from "./API";
+
+const getInternetData = () => {
+
+    const fetchYoutube = async () => {
+
+        const currentDate = new Date().toLocaleDateString('en-CA'); //YYYY-MM-DD
+
+        try {
+            const response = await API.fetchYoutube(currentDate);
+            return response;
+
+        } catch (error) {
+            throw new Error("Error Fetching Youtube Data !");
+        }
+
+
+    };
+
+    return { fetchYoutube }
+};
+
+export default getInternetData;

tracknow/web/src/misc/miscFunctions.tsx

@@ -27,10 +27,10 @@ const useMiscFunctions = () => {
             overflow: "hidden",
         };
 
-        const getYouTubeId = (url: string) => {
+        const getYouTubeId = (urlOrId: string) => {
             const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
-            const match = url.match(regExp);
-            return (match && match[7].length === 11) ? match[7] : false;
+            const match = urlOrId.match(regExp);
+            return (match && match[7].length === 11) ? match[7] : urlOrId;
         }
 
         const youtubeID = getYouTubeId(youtubeLink);
@@ -50,6 +50,7 @@ const useMiscFunctions = () => {
         );
     };
 
+
     const dummyLaptimes = [
         {
             title: "Fast Lap at Brands Hatch",