From 501a02d36238235b9580f83b57cf3f68aa0887c7 Mon Sep 17 00:00:00 2001
From: vantage-ola <vantageola4@gmail.com>
Date: Tue, 20 Aug 2024 13:10:42 +0100
Subject: [PATCH] fix: fixes to overall design and presentation

---
 tracknow/web/src/components/MainLayout.tsx    |   2 +-
 tracknow/web/src/components/Post/Post.tsx     |  12 +-
 .../web/src/components/User/UserProfile.tsx   | 145 ++----------------
 3 files changed, 23 insertions(+), 136 deletions(-)

diff --git a/tracknow/web/src/components/MainLayout.tsx b/tracknow/web/src/components/MainLayout.tsx
index 8f0d6eb..625b059 100644
--- a/tracknow/web/src/components/MainLayout.tsx
+++ b/tracknow/web/src/components/MainLayout.tsx
@@ -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>
 
diff --git a/tracknow/web/src/components/Post/Post.tsx b/tracknow/web/src/components/Post/Post.tsx
index 55ef526..a4bcc52 100644
--- a/tracknow/web/src/components/Post/Post.tsx
+++ b/tracknow/web/src/components/Post/Post.tsx
@@ -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[];
@@ -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>
@@ -192,7 +194,11 @@ export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore
                         */}
                 </Box>
             ))}
-
+            {hasMore && (
+                <Center>
+                    <BeatLoader size={8} color='red' />
+                </Center>
+            )}
         </>
 
     );
diff --git a/tracknow/web/src/components/User/UserProfile.tsx b/tracknow/web/src/components/User/UserProfile.tsx
index 9e36860..d70c699 100644
--- a/tracknow/web/src/components/User/UserProfile.tsx
+++ b/tracknow/web/src/components/User/UserProfile.tsx
@@ -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 }) => {
 
@@ -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 = () => {
@@ -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>
@@ -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>
+                                    <BeatLoader size={8} color='red' />
+                                </Center>
+                            )}
                         </CardBody>
 
                     </Card>
                 </>
 
-            )};
+            )}
         </>
     );