Skip to content

Commit

Permalink
fix: fixes to overall design and presentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@vantage-ola
vantage-ola committed Aug 20, 2024
1 parent 7158ea5 commit 501a02d
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 136 deletions.
2 changes: 1 addition & 1 deletion tracknow/web/src/components/MainLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const MainLayout: React.FC<MainLayoutProps> = ({ isOpen, onOpen, onClose }) => {
)}

{/* Middle section */}
<Box flex="3" rounded={'sm'} my={1} mx={[0, 5]} borderRadius={"1px"} overflowY="auto" >
<Box flex="3" rounded={'sm'} my={[0, 1]} mx={[0, 5]} borderRadius={"1px"} overflowY="auto" >
<Outlet />
</Box>

Expand Down
12 changes: 9 additions & 3 deletions tracknow/web/src/components/Post/Post.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import * as React from "react";
import { Box, Flex, Text, Stack, Icon, HStack, Link } from "@chakra-ui/react";
import { Box, Flex, Text, Stack, Icon, HStack, Link, Center } from "@chakra-ui/react";
import { GetUserLaptimesResponse } from "../../Types";
import { RiComputerLine, RiMapPinLine, RiTimerFlashLine } from "react-icons/ri";
import { FaCar } from "react-icons/fa";
import miscFunctions from "../../misc/miscFunctions";
import { Link as ReactRouterLink } from 'react-router-dom';
import { LoadingSpinner } from "../Loading/LoadingSpinner";
import { BeatLoader } from "react-spinners";

type PostProps = {
laptimes: GetUserLaptimesResponse[];
Expand Down Expand Up @@ -51,7 +52,8 @@ export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore
return (
<>
{laptimes.map((laptime, index) => (
<Box key={laptime.id} ref={index === laptimes.length - 1 ? lastLaptimeRef : null} p={1} borderBottom="1px solid #323536">
// 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">

<Flex justifyContent={"space-between"} p={2}>
<Text as="b" fontSize={{ base: 'sm', md: 'lg' }}>{laptime.title}</Text>
Expand Down Expand Up @@ -192,7 +194,11 @@ export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore
*/}
</Box>
))}

{hasMore && (
<Center>

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

View check run for this annotation

Codecov / codecov/patch

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

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

);
Expand Down
145 changes: 13 additions & 132 deletions tracknow/web/src/components/User/UserProfile.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,15 @@
import * as React from "react";
import { useUsers, getProfile } from "../../hooks/useUsers";
import {
Flex, Box, Card, CardBody,
Card, CardBody,
Center, Avatar, Stack, Text,
CardHeader, Heading,
Icon,
HStack,
} from "@chakra-ui/react";
import { LoadingSpinner } from "../Loading/LoadingSpinner";
import { GetUserLaptimesResponse, OneUser } from "../../Types";
//import useMiscFunctions from "../../misc/miscFunctions";
import { useLaptimes } from "../../hooks/useLaptimes";
import InfiniteScroll from "react-infinite-scroll-component";
import { HomePost } from "../Post/Post";
import { BeatLoader } from "react-spinners";
import miscFunctions from "../../misc/miscFunctions";
import { RiComputerLine, RiMapPinLine, RiTimerFlashLine } from "react-icons/ri";
import { FaCar } from "react-icons/fa";


export const UserProfile = ({ id }: { id: number }) => {

Expand All @@ -26,15 +19,11 @@ export const UserProfile = ({ id }: { id: number }) => {
const [hasMore, setHasMore] = React.useState(true);

const [page, setPage] = React.useState(1);
const [showFullText, setShowFullText] = React.useState(false);
const [laptime_loading, setLoading] = React.useState(true);

const textLimit = 100;


//const { dummyLaptimes } = useMiscFunctions()
const { fetchUsersLaptimes } = useLaptimes()
const { LazyLoadYoutubeEmbed } = miscFunctions();


const fetchMoreData = () => {
Expand Down Expand Up @@ -105,7 +94,7 @@ export const UserProfile = ({ id }: { id: number }) => {
<>
{/* Main Section */}

<Card size={'lg'} maxW='600px'>
<Card size={'lg'} width={{ base: '100vw', md: 'auto' }}>

<CardHeader>
<Heading size='md'>{userData ? userData.username : "Loading..."}'s Profile</Heading>
Expand All @@ -126,130 +115,22 @@ export const UserProfile = ({ id }: { id: number }) => {

</Center>
<CardBody >
<InfiniteScroll
dataLength={laptimes.length}
next={fetchMoreData}
<HomePost
laptimes={laptimes}
fetchMoreData={fetchMoreData}
hasMore={hasMore}
loader={<Center><BeatLoader size={8} color='red' /></Center>}
>
{laptimes.map((laptime) => (
<Box key={laptime.id.toString()} p={1} borderBottom="1px solid #323536">

{laptime.youtube_link && (
<LazyLoadYoutubeEmbed youtubeLink={laptime.youtube_link} />
)}
<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}
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
bg="black"
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
bg="black"
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
bg="black"
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 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>
)}
</Text>

</Box>

</Box>
))}
</InfiniteScroll>
/>
{hasMore && (
<Center>

Check warning on line 124 in tracknow/web/src/components/User/UserProfile.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/components/User/UserProfile.tsx#L124 

Added line #L124 was not covered by tests
<BeatLoader size={8} color='red' />
</Center>
)}
</CardBody>

</Card>
</>

)};
)}
</>
);

Expand Down

0 comments on commit 501a02d

Please sign in to comment.