Skip to content

Commit

Permalink
feature: click on laptimes
Browse files Browse the repository at this point in the history
  • Loading branch information
@vantage-ola
vantage-ola committed Aug 22, 2024
1 parent 3e7f90d commit 5faf6ef
Show file tree
Hide file tree
Showing 3 changed files with 251 additions and 40 deletions.
22 changes: 16 additions & 6 deletions tracknow/web/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import UserAccountSettings from "./components/User/UserAccountSettings";
import UserLaptimes from "./components/User/UserLaptimes";
import { UserProfile } from "./components/User/UserProfile";

import { SelectedPost } from "./components/Post/Post";

import ErrorPage from "./components/404/ErrorPage";

import { UserProvider } from "./hooks/useUsers";
Expand Down Expand Up @@ -69,9 +71,9 @@ export const App = () => {
<Route
path="/home"
element={
<UserProvider>
<Home />
</UserProvider>

<Home />

}
/>
<Route
Expand Down Expand Up @@ -101,9 +103,17 @@ export const App = () => {
<Route
path="user/:user_id/:username/"
element={
<UserProvider>
<UserProfileWrapper />
</UserProvider>

<UserProfileWrapper />

}
/>
<Route
path="user/:user_id/moments/:id/"
element={

<SelectedPost />

}
/>
</Route>
Expand Down
267 changes: 234 additions & 33 deletions tracknow/web/src/components/Post/Post.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from "react";
import { Box, Flex, Text, Stack, Icon, HStack, Link, Center } from "@chakra-ui/react";
import { Box, Flex, Text, Stack, Icon, HStack, Link, Center, Divider, Button } from "@chakra-ui/react";
import { ArrowBackIcon } from "@chakra-ui/icons";
import { GetUserLaptimesResponse } from "../../Types";
import { RiComputerLine, RiMapPinLine, RiTimerFlashLine } from "react-icons/ri";
import { FaCar } from "react-icons/fa";
Expand All @@ -8,6 +9,9 @@ import { Link as ReactRouterLink } from 'react-router-dom';
import { LoadingSpinner } from "../Loading/LoadingSpinner";
import { BeatLoader } from "react-spinners";

import { useLaptimes } from "../../hooks/useLaptimes";
import { useParams, useNavigate } from "react-router-dom";

type PostProps = {
laptimes: GetUserLaptimesResponse[];
fetchMoreData: () => void;
Expand Down Expand Up @@ -38,7 +42,14 @@ export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore
}, []);

//const [liked, setLiked] = React.useState(false);
const [showFullText, setShowFullText] = React.useState(false);
const [showFullText, setShowFullText] = React.useState<{ [id: string]: boolean }>({});

const toggleShowFullText = (id: string) => {
setShowFullText((prevState) => ({
...prevState,
[id]: !prevState[id],
}));
};
const { LazyLoadYoutubeEmbed } = miscFunctions();
const textLimit = 100;

Expand All @@ -52,25 +63,232 @@ export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore
return (
<>
{laptimes.map((laptime, index) => (
// width fixes mobile maximum width increasing.
<Box width={{ base: '100vw', md: 'auto' }} key={laptime.id} ref={index === laptimes.length - 1 ? lastLaptimeRef : null} p={1} borderBottom="1px solid #323536">
<>
<Box bg={'dark'} key={laptime.id} _hover={{ bg: "lightdark" }} borderRadius="15px" p={1} width={{ base: '100vw', md: 'auto' }}>
<Box
as={ReactRouterLink}
to={`/user/${laptime.user_id}/moments/${laptime.id}`}
textDecoration="none"
key={laptime.id}
ref={index === laptimes.length - 1 ? lastLaptimeRef : null}

>
<Flex justifyContent={"space-between"} p={2}>
<Text as="b" fontSize={{ base: 'sm', md: 'lg' }}>{laptime.title}</Text>

<Link as={ReactRouterLink} to={`/user/${laptime.user_id}/${laptime.by}/`} fontSize="sm" color={"GrayText"}>@{laptime.by}</Link>
</Flex>
<Box onClick={(event) => event.preventDefault()}>
{laptime.youtube_link && (
<LazyLoadYoutubeEmbed youtubeLink={laptime.youtube_link} />
)}
</Box>

<Box p={4} >
<Flex alignItems={"center"} justifyContent={"space-between"} overflowX="auto"
>
<Stack direction={"row"} spacing={2} align="flex-start" flexShrink="0">

{laptime.car && (
<Box

display={"inline-block"}
px={2}
py={1}
color="white"
mb={2}
>
<Flex justifyContent={"space-between"}>
<HStack>
<Icon color="red" as={FaCar} />
<Text color={"GrayText"} fontSize={"xs"} fontWeight="medium">
{laptime.car}
</Text>
</HStack>
</Flex>
</Box>
)}
{laptime.track && (

<Flex>
<Box

display={"inline-block"}
px={2}
py={1}
color="white"
mb={2}
>
<Flex justifyContent={"space-between"}>
<HStack>
<Icon color="red" as={RiMapPinLine} />

<Text color={"GrayText"} fontSize={"xs"} fontWeight="medium">
{laptime.track}
</Text>
</HStack>
</Flex>
</Box>
</Flex>
)}
{laptime.platform && (
<Box
display={"inline-block"}
px={2}
py={1}
color="white"
mb={2}
>
<Flex justifyContent={"space-between"}>
<HStack>
<Icon color="red" as={RiComputerLine} />
<Text color={"GrayText"} fontSize={"xs"} fontWeight="medium">
{laptime.platform}
</Text>
</HStack>
</Flex>
</Box>
)}
{laptime.time && (
<Box
display={"inline-block"}
px={2}
py={1}
color="white"
mb={2}
>
<Flex justifyContent={"space-between"}>
<HStack>
<Icon color="red" as={RiTimerFlashLine} />
<Text color={"GrayText"} fontSize={"xs"} fontWeight="medium">
{laptime.time}
</Text>
</HStack>
</Flex>
</Box>
)}
</Stack>
</Flex>
<Text onClick={(event) => event.preventDefault()} fontSize={"smaller"} color={"white"} mt={3}>
{showFullText[laptime.id] ? laptime.comment : laptime.comment.substring(0, textLimit)}
{laptime.comment.length > textLimit && (
<span
style={{ color: "red", fontWeight: "bold", cursor: "pointer" }}
onClick={() => toggleShowFullText(laptime.id.toString())}
>
{showFullText[laptime.id] ? " Read less" : "... Read more"}
</span>
)}
</Text>

</Box>

{/*like, comments
<Flex alignItems={"center"} justifyContent={"right"} p={2}>
<Stack direction={"row"} spacing={2}>
<Flex >
<HStack justifyContent={"space-between"}>
<Box onClick={() => setLiked(!liked)}>
{liked ? (
<BsHeartFill fill="red" fontSize={"18px"} />
) : (
<BsHeart fontSize={"18px"} />
)}
</Box>
<Text color={"grey"} fontSize={"15px"}>200</Text>
</HStack>
</Flex>
<Flex justifyContent={"space-between"} p={2}>
<Text as="b" fontSize={{ base: 'sm', md: 'lg' }}>{laptime.title}</Text>
<Flex>
<HStack justifyContent={"space-between"}>
<Icon as={GoCommentDiscussion} fontSize={"18px"} />
<Text color={"grey"} fontSize={"15px"}>7</Text>
</HStack>
</Flex>
</Stack>
</Flex>
*/}
</Box>

</Box>
{index !== laptimes.length - 1 && <Divider borderColor="#323536" my={1} />}
</>
))}
{hasMore && (
<Center>
<BeatLoader size={8} color='red' />
</Center>
)}
</>

);
};

export const SelectedPost: React.FC = () => {
const { fetchAUserLaptime } = useLaptimes();
const { id, user_id } = useParams<{ id: string; user_id: string }>();
const [laptime, setLaptime] = React.useState<GetUserLaptimesResponse | null>(null);

const navigate = useNavigate();
const { LazyLoadYoutubeEmbed } = miscFunctions();

React.useEffect(() => {
const fetchData = async () => {
try {
const response = await fetchAUserLaptime({
user_id: Number(user_id),
id: Number(id),
});
setLaptime(response);
} catch (error) {
console.error(error);
}
};

fetchData();
}, [id, user_id, fetchAUserLaptime]);

if (!laptime) {
return <LoadingSpinner />
}

return (
<>

<Box key={laptime.id} borderRadius="15px" p={1} width={{ base: '100vw', md: 'auto' }}>

<Box
textDecoration="none"
key={laptime.id}

>
<Flex justifyContent="space-between" alignItems="center" p={2}>
<Button variant="navbarButton" onClick={() => navigate(-1)}><ArrowBackIcon /></Button>

<Flex justifyContent={"space-between"} p={2}>

<Text as="b" fontSize={{ base: 'xs', md: 'lg' }}>{laptime.title}</Text>

</Flex>
<Link as={ReactRouterLink} to={`/user/${laptime.user_id}/${laptime.by}/`} fontSize={{ base: 'xs', md: 'sm' }} color={"GrayText"}>@{laptime.by}</Link>

<Link as={ReactRouterLink} to={`/user/${laptime.user_id}/${laptime.by}/`} fontSize="sm" color={"GrayText"}>@{laptime.by}</Link>
</Flex>
{laptime.youtube_link && (
<LazyLoadYoutubeEmbed youtubeLink={laptime.youtube_link} />
)}

<Box onClick={(event) => event.preventDefault()}>
{laptime.youtube_link && (
<LazyLoadYoutubeEmbed youtubeLink={laptime.youtube_link} />
)}
</Box>

<Box p={4} >
<Flex alignItems={"center"} justifyContent={"space-between"} overflowX="auto"
>
<Stack direction={"row"} spacing={2} align="flex-start" flexShrink="0">

{laptime.car && (
<Box
bg="black"

display={"inline-block"}
px={2}
py={1}
Expand All @@ -91,7 +309,7 @@ export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore

<Flex>
<Box
bg="black"

display={"inline-block"}
px={2}
py={1}
Expand All @@ -111,9 +329,7 @@ export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore
</Flex>
)}
{laptime.platform && (

<Box
bg="black"
display={"inline-block"}
px={2}
py={1}
Expand All @@ -131,9 +347,7 @@ export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore
</Box>
)}
{laptime.time && (

<Box
bg="black"
display={"inline-block"}
px={2}
py={1}
Expand All @@ -153,15 +367,7 @@ export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore
</Stack>
</Flex>
<Text fontSize={"smaller"} color={"white"} mt={3}>
{showFullText ? laptime.comment : laptime.comment.substring(0, textLimit)}
{laptime.comment.length > textLimit && (
<span
style={{ color: "red", fontWeight: "bold", cursor: "pointer" }}
onClick={() => setShowFullText(!showFullText)}
>
{showFullText ? "Read less" : "... Read more"}
</span>
)}
{laptime.comment}
</Text>

</Box>
Expand Down Expand Up @@ -193,14 +399,9 @@ export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore
</Flex>
*/}
</Box>
))}
{hasMore && (
<Center>
<BeatLoader size={8} color='red' />
</Center>
)}
</>

</Box>

</>
);
};

2 changes: 1 addition & 1 deletion tracknow/web/src/hooks/useLaptimes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ export const useLaptimes = () => {
return {
laptime, addLaptime, mylaptime, fetchMoreData,
hasMore, fetchMoreData2, hasMore2, laptime_loading,
fetchUsersLaptimes
fetchUsersLaptimes, fetchAUserLaptime

};

Expand Down

0 comments on commit 5faf6ef

Please sign in to comment.