my moments page +new create moments page

tracknow/web/src/components/User/UserAddLaptimes.tsx

@@ -1,6 +1,110 @@
 import * as React from "react";
+import {
+    Box, Flex, Card, CardHeader, CardBody,
+    Heading, Stack, Button, FormControl,
+    Textarea, FormHelperText, Input, Select,
+    HStack,
+} from "@chakra-ui/react";
+import { useParams } from "react-router-dom";
+import { SimracingTitles } from "../../misc/dropDown";
 
-export const Laptimes = () => (
-    <>
-    </>
-);
+const UserAddLaptimes = () => {
+
+    return (
+        <Flex mt={10} bg="dark">
+            {/* Left section*/}
+            <Box flex="1" borderRight="1px solid #323536" overflowY="auto" display={["none", "none", "block"]}>
+                {/* left section content */}
+            </Box>
+
+            {/* Main Section */}
+            <Box flex="4"
+                rounded={'sm'}
+                my={1}
+                mx={[0, 5]}
+                overflow={'hidden'}
+                borderRadius={"1px"}>
+
+                <Card size={'lg'} maxW='600px' >
+                    <CardHeader>
+                        <Heading size='lg'>Add Racing Moment</Heading>
+                    </CardHeader>
+
+                    <HStack spacing={6} pt={3}>
+                        <Select borderColor={'#323536'}
+                            focusBorderColor="grey"
+                            ml={4}
+                        >
+                            <option style={{ backgroundColor: 'black' }} value="true">Sim racing</option>
+                            <option style={{ backgroundColor: 'black' }} value="false">Real life</option>
+                        </Select>
+
+                        <SimracingTitles />
+                    </HStack>
+
+
+                    <CardBody >
+                        <Stack spacing='5'>
+                            <Input borderColor={'#323536'} focusBorderColor="grey" placeholder='Title' isRequired />
+                            <FormControl isRequired>
+                                <Textarea
+                                    borderColor={'#323536'}
+                                    focusBorderColor="grey"
+                                    maxLength={500}
+                                    placeholder='Body'
+
+                                />
+                                <FormHelperText></FormHelperText>
+                            </FormControl>
+                        </Stack>
+                        <Stack pt={4} spacing='3'>
+                            <Box>
+                                <Heading size='xs' textTransform='uppercase'>
+                                    Car
+                                </Heading>
+                                <Input borderColor={'#323536'} focusBorderColor="grey" variant='flushed' placeholder='Porsche 911 GT3' isRequired />
+
+                            </Box>
+
+                            <Box>
+                                <Heading size='xs' textTransform='uppercase'>
+                                    Track
+                                </Heading>
+                                <Input borderColor={'#323536'} focusBorderColor="grey" variant='flushed' placeholder='Nürburgring Nordschleife' isRequired />
+
+                            </Box>
+
+                            <Box>
+                                <Heading size='xs' textTransform='uppercase'>
+                                    Hotlap/Time
+                                </Heading>
+                                <Input borderColor={'#323536'} focusBorderColor="grey" variant='flushed' placeholder='6.59.34' isRequired />
+
+                            </Box>
+                            <Box>
+                                <Heading size='xs' textTransform='uppercase'>
+                                    Images / Videos
+                                </Heading>
+                                <FormControl>
+                                    <Input borderColor={'#323536'} focusBorderColor="grey" variant='flushed' placeholder='https://www.youtube.com/watch?v=l_hbqBxxISY&feature=youtu.be' isRequired />
+                                    <FormHelperText fontSize={'11px'}>Only Youtube links(Videos) are supported now, bear with me :)</FormHelperText>
+                                </FormControl>
+
+                            </Box>
+                        </Stack>
+                    </CardBody>
+                    <Flex pr={5} mb={6} justifyContent={'flex-end'}>
+                        <Button variant={"navbarButton"}>
+                            Post
+                        </Button>
+                    </Flex>
+                </Card>
+
+            </Box >
+
+
+        </Flex >
+    );
+};
+
+export default UserAddLaptimes;

tracknow/web/src/components/User/UserLaptimes.tsx

@@ -1,6 +1,18 @@
 import * as React from "react";
+import { HomePost } from "../Post/Post";
+import { useLaptimes } from "../../hooks/useLaptimes";
 
-export const UserLaptimes = () => (
-    <>
-    </>
-);
+const UserLaptimes = () => {
+
+    const { mylaptime } = useLaptimes();
+
+    return (
+        <>
+
+            < HomePost laptimes={mylaptime} />
+
+        </>
+    )
+};
+
+export default UserLaptimes

tracknow/web/src/hooks/API.ts

@@ -119,7 +119,7 @@ async function CreateUser(newUser: Login): Promise<SignUpResponse> {
 };
 
 // function to create a user's personal laptime and get personal laptimes
-async function handleLaptimes(newLaptime?: Laptime): Promise<CreateLaptimeResponse | GetUserLaptimesResponse> {
+async function handleLaptimes(newLaptime?: Laptime): Promise<CreateLaptimeResponse | GetUserLaptimesResponse[]> {
 
     const token = localStorage.getItem('access_token') // after logging in, we retrieve the token to get access to some of the functions
 
@@ -152,7 +152,7 @@ async function handleLaptimes(newLaptime?: Laptime): Promise<CreateLaptimeRespon
             throw new Error('Failed to fetch Personal laptimes');
         }
 
-        const data: GetUserLaptimesResponse = await response.json();
+        const data: GetUserLaptimesResponse[] = await response.json();
         return data;
     };
 };

tracknow/web/src/hooks/useLaptimes.ts

@@ -6,6 +6,7 @@ import { GetUserLaptimesResponse, Laptime } from "../Types";
 export const useLaptimes = () => {
 
     const [laptime, setLaptime] = React.useState<GetUserLaptimesResponse[]>([]);
+    const [mylaptime, setmylaptimes] = React.useState<GetUserLaptimesResponse[]>([]);
 
     // fetch all laptimes from the server
     const fetchLaptime = async () => {
@@ -22,9 +23,27 @@ export const useLaptimes = () => {
         }
     };
 
+    // fetch connected user personal uploaded laptimes/moments
+    const fetchMyLaptimes = async () => {
+        try {
+            const response = await API.handleLaptimes();
+
+            if (Array.isArray(response)) {
+
+                setmylaptimes(response);
+
+            } else {
+                // CreateLaptimeResponse  - addLaptime function lol
+            }
+        } catch (error) {
+            throw new Error("My Laptimes not loaded");
+        }
+    }
+
     React.useEffect(() => {
         //console.log("useEffect called");
         fetchLaptime();
+        fetchMyLaptimes();
     }, [])
 
     // add laptimes
@@ -41,6 +60,6 @@ export const useLaptimes = () => {
         }
     };
 
-    return { laptime, addLaptime };
+    return { laptime, addLaptime, mylaptime };
 
 }