Skip to content

Commit

Permalink
finish discover page feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@vantage-ola
vantage-ola committed Aug 27, 2024
1 parent 2417b76 commit e881df2
Show file tree
Hide file tree
Showing 3 changed files with 181 additions and 71 deletions.
47 changes: 43 additions & 4 deletions tracknow/web/src/components/Discover/Discover.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,49 @@
import React from "react";
import { Box, Tabs, TabList, TabPanels, Tab, TabPanel, Icon, Center, Text, TabIndicator } from "@chakra-ui/react";
import Youtube from "./Youtube";
const Discover: React.FC = () => {
import { FaYoutube, FaTwitch, FaTwitter, FaRedditAlien } from "react-icons/fa";

const Discover: React.FC = () => {
return (

Check warning on line 7 in tracknow/web/src/components/Discover/Discover.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/components/Discover/Discover.tsx#L6-L7 

Added lines #L6 - L7 were not covered by tests
<>
<Youtube />
</>
<Box p={3} width={{ base: '100vw', md: 'auto' }}>
{/* unstyled for desktop variant */}
<Tabs isFitted variant={{ base: "line", md: "line" }} colorScheme="white" borderColor={'lightdark'}>
<TabList
mb="1em"
position={{ base: "fixed", md: "sticky" }}
top={{ base: 10, md: 0 }} left={{ base: 0 }}
right={{ base: 0 }} zIndex={1} bg={'dark'}

>
<Tab><Icon as={FaYoutube} color="red" boxSize={'24px'} /></Tab>
<Tab isDisabled><Icon as={FaTwitch} color="#8b44f7" boxSize={'24px'} /></Tab>
<Tab isDisabled><Icon as={FaTwitter} color="#1da1f2" boxSize={'24px'} /></Tab>
<Tab isDisabled><Icon as={FaRedditAlien} color="#ff4500" boxSize={'24px'} /></Tab>
</TabList>
{/*<TabIndicator mt='-1.5px' height='2px' bg='GrayText' borderRadius='1px' /> */}
<TabPanels>
<TabPanel>
<Youtube />
</TabPanel>
<TabPanel>
<Center>
<Text color={'GrayText'}>Coming Soon 🔜</Text>
</Center>
</TabPanel>
<TabPanel>
<Center>
<Text p={10} color={'GrayText'}>Coming Soon 🔜</Text>
</Center>
</TabPanel>
<TabPanel>

<Center>
<Text color={'GrayText'}>Coming Soon 🔜</Text>
</Center>
</TabPanel>
</TabPanels>
</Tabs>
</Box>
);
};

Expand Down
200 changes: 133 additions & 67 deletions tracknow/web/src/components/Discover/Youtube.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,162 @@
import * as React from "react";
import { Box, Card, CardBody, Flex, HStack, Icon, Stack, Text } from "@chakra-ui/react";
import { Box, Card, CardBody, Center, Flex, HStack, Icon, Stack, Text, useMediaQuery } 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";
import { LoadingSpinner } from "../Loading/LoadingSpinner";
import { BeatLoader } from "react-spinners";

const Youtube: React.FC = () => {

Check warning on line 12 in tracknow/web/src/components/Discover/Youtube.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L12 was not covered by tests

const { LazyLoadYoutubeEmbed } = useMiscFunctions();
const { fetchYoutube } = getInternetData();

Check warning on line 15 in tracknow/web/src/components/Discover/Youtube.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/components/Discover/Youtube.tsx#L14-L15 

Added lines #L14 - L15 were not covered by tests

const [youtube, setYoutube] = React.useState<YoutubeSearchResult[]>([]);
const [loading, setLoading] = React.useState<boolean>(true);

Check warning on line 18 in tracknow/web/src/components/Discover/Youtube.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/components/Discover/Youtube.tsx#L17-L18 

Added lines #L17 - L18 were not covered by tests

const [isMobile] = useMediaQuery("(max-width: 600px)");
const [visibleData, setVisibleData] = React.useState<YoutubeSearchResult[]>([]);
const [index, setIndex] = React.useState(5);
const [hasMoreData, setHasMoreData] = React.useState(true);

Check warning on line 23 in tracknow/web/src/components/Discover/Youtube.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/components/Discover/Youtube.tsx#L20-L23 

Added lines #L20 - L23 were not covered by tests

//lazy infinite load
const observer = React.useRef<IntersectionObserver>();
const lastElementRef = React.useCallback(
(node: HTMLDivElement) => {

Check warning on line 28 in tracknow/web/src/components/Discover/Youtube.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/components/Discover/Youtube.tsx#L26-L28 

Added lines #L26 - L28 were not covered by tests
if (observer.current) observer.current.disconnect();
observer.current = new IntersectionObserver((entries) => {

Check warning on line 30 in tracknow/web/src/components/Discover/Youtube.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L30 was not covered by tests
if (entries[0].isIntersecting && hasMoreData) {
setVisibleData((prevData) => [

Check warning on line 32 in tracknow/web/src/components/Discover/Youtube.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L32 was not covered by tests
...prevData,
...youtube.slice(index, index + 5),
]);
setIndex((prevIndex) => prevIndex + 5);

Check warning on line 36 in tracknow/web/src/components/Discover/Youtube.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L36 was not covered by tests
if (index + 5 >= youtube.length) {
setHasMoreData(false);

Check warning on line 38 in tracknow/web/src/components/Discover/Youtube.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L38 was not covered by tests
}
}
});
if (node) observer.current.observe(node);
},
[youtube, index, hasMoreData]
);

React.useEffect(() => {
const fetchData = async () => {
const youtubeData = await fetchYoutube();
setYoutube(youtubeData);
setVisibleData(youtubeData.slice(0, 5));
setLoading(false);

Check warning on line 52 in tracknow/web/src/components/Discover/Youtube.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/components/Discover/Youtube.tsx#L47-L52 

Added lines #L47 - L52 were not covered by tests
};
fetchData();

Check warning on line 54 in tracknow/web/src/components/Discover/Youtube.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L54 was not covered by tests
})
}, []);

return (

Check warning on line 57 in tracknow/web/src/components/Discover/Youtube.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L57 was not covered by tests
<>
{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>
{loading ? (
<LoadingSpinner />

Check warning on line 60 in tracknow/web/src/components/Discover/Youtube.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L60 was not covered by tests
) : (
<>

Check warning on line 62 in tracknow/web/src/components/Discover/Youtube.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L62 was not covered by tests
{visibleData.map((video, index) => (
<Card

Check warning on line 64 in tracknow/web/src/components/Discover/Youtube.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L64 was not covered by tests
key={`${video.id.videoId}-${index}`}

ref={index === visibleData.length - 1 ? lastElementRef : null}
>
<CardBody>
<Flex justifyContent={"space-between"} p={2}>
<Text as="b">
{video.snippet.title.length > 51
? `${video.snippet.title.substring(0, 51)}...`
: video.snippet.title}

Check warning on line 74 in tracknow/web/src/components/Discover/Youtube.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/components/Discover/Youtube.tsx#L73-L74 

Added lines #L73 - L74 were not covered by tests
</Text>
{!isMobile && (
<Text fontSize="smaller" color={"GrayText"}>

Check warning on line 77 in tracknow/web/src/components/Discover/Youtube.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L77 was not covered by tests
{formatDistanceToNow(new Date(video.snippet.publishedAt), { addSuffix: true }).replace("about ", "").replace("less than a minute", "now")}
</Text>
)}
</Flex>
<Box>
<LazyLoadYoutubeEmbed youtubeLink={video.id.videoId} />
</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>
<Box p={2}>
<Flex alignItems={"center"} justifyContent={"space-between"} overflowX="auto">
<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>
</Flex>

</Box>
</Stack>
</Box>
<Text fontSize={"smaller"}>{video.snippet.description}</Text>
</CardBody>
</Card>
))}
<Text fontSize={"smaller"}>{video.snippet.description}</Text>
</CardBody>
</Card>
))
}
{hasMoreData && (
<Center>

Check warning on line 146 in tracknow/web/src/components/Discover/Youtube.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L146 was not covered by tests
<BeatLoader size={8} color='red' />
</Center>
)}
{!hasMoreData &&
<Center>

Check warning on line 151 in tracknow/web/src/components/Discover/Youtube.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L151 was not covered by tests
<Text fontSize={'xs'} color={'GrayText'}>😥No more data to load...</Text>

</Center>
}
</>

)}

</>
);

Expand Down
5 changes: 5 additions & 0 deletions tracknow/web/src/components/Post/Post.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,11 @@ export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore
<BeatLoader size={8} color='red' />
</Center>
)}
{!hasMore &&
<Center>

Check warning on line 224 in tracknow/web/src/components/Post/Post.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/components/Post/Post.tsx#L224 

Added line #L224 was not covered by tests
<Text fontSize={'xs'} color={'GrayText'}>😥No more data to load...</Text>
</Center>}

</>

);
Expand Down

0 comments on commit e881df2

Please sign in to comment.