Merge pull request #85 from vantage-ola/chore/refactor

chore: refactor
vantage-ola · Jul 15, 2024 · 17b4b78 · 17b4b78
2 parents 3ff7120 + 130130a
commit 17b4b78
Show file tree

Hide file tree

Showing 15 changed files with 196 additions and 277 deletions.
diff --git a/tracknow/web/src/App.tsx b/tracknow/web/src/App.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import { ChakraProvider } from "@chakra-ui/react";
 import { theme } from "./tracknowTheme";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
@@ -9,19 +8,22 @@ import { Home } from "./components/Home/Home";
 import UserAddLaptimes from "./components/User/UserAddLaptimes";
 import UserAccountSettings from "./components/User/UserAccountSettings";
 import UserLaptimes from "./components/User/UserLaptimes";
+import { UserProvider } from "./hooks/useUsers";
 
 export const App = () => (
     <ChakraProvider theme={theme}>
         <BrowserRouter>
-            <Routes>
-                <Route path="/" element={<Welcome />} />
-                <Route path="/login" element={<UserLogin />} />
-                <Route path="/create-user" element={<UserSignUp />} />
-                <Route path="/home" element={<Home />} />
-                <Route path="/user/:username/create-moments" element={<UserAddLaptimes />} />
-                <Route path="/user/:username/account-settings" element={<UserAccountSettings />} />
-                <Route path="/user/:username/my-moments" element={<UserLaptimes />} />
-            </Routes>
+            <UserProvider>
+                <Routes>
+                    <Route path="/" element={<Welcome />} />
+                    <Route path="/login" element={<UserLogin />} />
+                    <Route path="/create-user" element={<UserSignUp />} />
+                    <Route path="/home" element={<Home />} />
+                    <Route path="/user/:username/create-moments" element={<UserAddLaptimes />} />
+                    <Route path="/user/:username/account-settings" element={<UserAccountSettings />} />
+                    <Route path="/user/:username/my-moments" element={<UserLaptimes />} />
+                </Routes>
+            </UserProvider>
         </BrowserRouter>
     </ChakraProvider>
 );
diff --git a/tracknow/web/src/Types.ts b/tracknow/web/src/Types.ts
@@ -51,7 +51,7 @@ export interface GetUserLaptimesResponse {
 
 export interface identity {
     "message": "User Found";
-    id: Number;
+    id: number;
     name: string; // username
     pp: string; // profile_pic
 }
@@ -71,3 +71,13 @@ export interface EditUser {
 export interface EditUserPic {
     profile_picture_url?: string;
 }
+
+// Define the type for the user data
+export interface UserData {
+    userId: number;
+    username: string;
+    profilePic: string;
+    editProfile: (editProfile: EditUser) => Promise<void>;
+    editProfilePic: (editProfilePic: EditUserPic) => Promise<void>;
+    loading: boolean
+}
diff --git a/tracknow/web/src/components/CarouselCard/CarouselCard.tsx b/tracknow/web/src/components/CarouselCard/CarouselCard.tsx
@@ -16,6 +16,38 @@ import { Laptime, SignUpResponse } from "../../Types";
 import Marquee from "../Marquee/Marquee";
 
 
+// setting for slide carousel
+/*const settings = {
+    dots: true,
+    arrows: false,
+    fade: true,
+    infinite: true,
+    autoplay: false,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+}
+*/
+
+/* CSS files for react-slick 
+            <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
+            <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
+*/
+
+//const [slider, setSlider] = React.useState<Slider | null>(null)
+
+/* carousel card...
+            <Slider {...settings} ref={(slider) => setSlider(slider)}>
+                {laptime &&
+                    laptime.map((laptime, index) => (
+                        <CarouselCard key={index} laptime={laptime} username={{ username: laptime.by }} />
+                    ))}
+            </Slider>
+
+            <Text textAlign="center" fontSize='xs' color="grey" mb={1}>
+                Swipe right or left to change
+            </Text>
+*/
 
 const CarouselCard: React.FC<{ laptime: Laptime, username: SignUpResponse }> = ({ laptime, username }) => {
     const [liked, setLiked] = React.useState(false);

diff --git a/tracknow/web/src/components/Home/Home.tsx b/tracknow/web/src/components/Home/Home.tsx
@@ -1,93 +1,29 @@
-import * as React from "react";
 import { NavbarLoggedIn } from "../Navbar/Navbar";
-// import Footer from "../Footer/Footer";
-// import CarouselCard from "../CarouselCard/CarouselCard";
 import { HomePost } from "../Post/Post";
-import Slider from "react-slick";
-import { useToast } from "@chakra-ui/react";
-import { useNavigate } from 'react-router-dom';
 
-import API from "../../hooks/API";
-import { LoadingSpinner } from "../Loading/LoadingSpinner";
 import { useLaptimes } from "../../hooks/useLaptimes";
+import { useUsers } from "../../hooks/useUsers";
+import { LoadingSpinner } from "../Loading/LoadingSpinner";
 
-// setting for slide carousel
-/*const settings = {
-    dots: true,
-    arrows: false,
-    fade: true,
-    infinite: true,
-    autoplay: false,
-    speed: 500,
-    slidesToShow: 1,
-    slidesToScroll: 1,
-}
-*/
 
 export const Home = () => {
-    const [slider, setSlider] = React.useState<Slider | null>(null)
-    const [username, setUsername] = React.useState("");
-    const [profilepic, setProfilePic] = React.useState("");
-    const [loading, setLoading] = React.useState(true);
-
-
-    const navigate = useNavigate();
-    const toast = useToast();
-
-    const { laptime, fetchMoreData, hasMore } = useLaptimes();
-    //console.log(laptime)
-    // useEffect to make sure user is in session, else /login
-    React.useEffect(() => {
-        const checkLoggedIn = async () => {
-            try {
-                const response = await API.getIdentity();
-                setUsername(response.name);
-                setProfilePic(response.pp);
-                setLoading(false);
-
-            } catch (error) {
-                toast({
-                    title: "Login required",
-                    description: "Please log in to view this page.",
-                    status: "error",
-                    duration: 3000,
-                    isClosable: true,
-                });
-                navigate("/login");
-                setLoading(false);
-            }
-        };
-        checkLoggedIn()
-    }, []);
 
+    const { laptime, fetchMoreData, hasMore, } = useLaptimes();
+    const { username, profilePic, loading } = useUsers();
 
 
     return (
         <>
-            {/* CSS files for react-slick 
-            <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
-            <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
-            */}
 
-            <NavbarLoggedIn name={username} pp={profilepic} />
-            {/* carousel card...
-            <Slider {...settings} ref={(slider) => setSlider(slider)}>
-                {laptime &&
-                    laptime.map((laptime, index) => (
-                        <CarouselCard key={index} laptime={laptime} username={{ username: laptime.by }} />
-                    ))}
-            </Slider>
 
-            <Text textAlign="center" fontSize='xs' color="grey" mb={1}>
-                Swipe right or left to change
-            </Text>
-            */}
+            <NavbarLoggedIn name={username} pp={profilePic} />
             {loading ? (
                 <LoadingSpinner />
             ) : (
                 <HomePost laptimes={laptime} fetchMoreData={fetchMoreData} hasMore={hasMore} />
             )}
 
+
         </>
     )
 };
diff --git a/tracknow/web/src/components/Post/Post.tsx b/tracknow/web/src/components/Post/Post.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Box, Flex, Text, AspectRatio, Stack, Icon, HStack, Center } from "@chakra-ui/react";
+import { Box, Flex, Text, Stack, Icon, HStack, Center } from "@chakra-ui/react";
 import { GetUserLaptimesResponse } from "../../Types";
 import { RiComputerLine, RiMapPinLine, RiTimerFlashLine } from "react-icons/ri";
 import { FaCar } from "react-icons/fa";
@@ -17,7 +17,7 @@ type PostProps = {
 // homepage posts( recent) posts of users
 export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore }) => {
 
-    const [liked, setLiked] = React.useState(false);
+    //const [liked, setLiked] = React.useState(false);
     const [showFullText, setShowFullText] = React.useState(false);
     const { LazyLoadYoutubeEmbed } = miscFunctions();
     const textLimit = 100;

diff --git a/tracknow/web/src/components/User/UserAccountSettings.tsx b/tracknow/web/src/components/User/UserAccountSettings.tsx
@@ -1,25 +1,21 @@
-import { Box, Button, Card, CardBody, CardHeader, useToast, Flex, FormControl, FormHelperText, Heading, HStack, Input, Select, Center, Stack, Textarea, Avatar, FormErrorMessage, InputRightElement, InputGroup, Spinner } from "@chakra-ui/react";
+import { Box, Button, Card, CardBody, CardHeader, useToast, Flex, FormControl, Heading, Stack, Avatar, FormErrorMessage, InputRightElement, InputGroup, Center, Input } from "@chakra-ui/react";
 import * as React from "react";
 import { CountryDropdown } from "../../misc/dropDown";
 import { NavbarLoggedIn } from "../Navbar/Navbar";
-import API from "../../hooks/API";
 import { useNavigate, Link as ReactRouterLink } from "react-router-dom";
 import { useUsers } from "../../hooks/useUsers";
 import { EditUser, EditUserPic } from "../../Types";
-import { LoadingSpinner } from "../Loading/LoadingSpinner";
+//import { LoadingSpinner } from "../Loading/LoadingSpinner";
 import { BeatLoader } from "react-spinners";
 import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
 import useMiscFunctions from "../../misc/miscFunctions";
 
 const UserAccountSettings = () => {
 
-    const [myusername, setMyUsername] = React.useState("");
-    const [username, setUsername] = React.useState("");
-    const [loading, setLoading] = React.useState(false);
+    const [newusername, setNewUsername] = React.useState("");
+    //const [loading, setLoading] = React.useState(false);
     const [password, setPassword] = React.useState("");
 
-    const [profile_picture, setProfilePic] = React.useState("");
-
     const [passwordValid, setPasswordValid] = React.useState(false);
     const [usernameValid, setUsernameValid] = React.useState(false);
 
@@ -30,48 +26,25 @@ const UserAccountSettings = () => {
     const [isUploading, setIsUploading] = React.useState(false); // for image uploading
 
     const { cloudName, uploadPreset, api_key, handleLogout } = useMiscFunctions(); // cloudinary names & preset
-
+    const { username, profilePic } = useUsers();
 
     const navigate = useNavigate();
     const toast = useToast();
 
     const { editProfilePic, editProfile } = useUsers();
     const fileInputRef = React.useRef<HTMLInputElement>(null);
 
-    // useEffect to make sure user is in session, else /login
-    React.useEffect(() => {
-        const checkLoggedIn = async () => {
-            try {
-                const response = await API.getIdentity();
-                setMyUsername(response.name);
-                setProfilePic(response.pp)
-
-                setLoading(false);
-
-            } catch (error) {
-                toast({
-                    title: "Login required",
-                    description: "Please log in to view this page.",
-                    status: "error",
-                    duration: 3000,
-                    isClosable: true,
-                });
-                navigate("/login");
-                setLoading(false);
-            }
-        };
-        checkLoggedIn()
-    }, []);
-
-    if (loading) {
+
+
+    /*if (loading) {
         return <LoadingSpinner />;
-    };
+    }; */
 
     const handleProfile = async () => {
         const newProfile: EditUser = {};
 
-        if (username !== myusername && username !== "") {
-            newProfile.username = username;
+        if (newusername !== username && newusername !== "") {
+            newProfile.username = newusername;
         }
         if (password !== "" && passwordValid) {
             newProfile.password = password;
@@ -166,7 +139,7 @@ const UserAccountSettings = () => {
                         isClosable: true,
                     });
                     setIsUploading(false); // Stop image uploading
-                    setProfilePic(profile_picture);
+                    //setProfilePic(profile_picture);
                     navigate(0);
                 } else {
                     // Show an error message to the user
@@ -187,7 +160,7 @@ const UserAccountSettings = () => {
     return (
         <>
 
-            <NavbarLoggedIn name={myusername} pp={profile_picture} />
+            <NavbarLoggedIn name={username} pp={profilePic} />
 
             <Flex mt={10} bg="dark">
                 {/* Left section*/}
@@ -218,7 +191,7 @@ const UserAccountSettings = () => {
                                         <Avatar
                                             size={"2xl"}
                                             src={
-                                                profile_picture
+                                                profilePic
                                             }
                                         >
                                         </Avatar>
@@ -247,14 +220,14 @@ const UserAccountSettings = () => {
                                         <Heading size='xs' textTransform='uppercase'>
                                             Username
                                         </Heading>
-                                        <FormControl isInvalid={username !== myusername && !usernameValid && username !== ""}>
+                                        <FormControl isInvalid={newusername !== username && !usernameValid && newusername !== ""}>
                                             <Input borderColor={'#323536'}
                                                 focusBorderColor="grey"
                                                 variant='flushed'
-                                                value={username}
-                                                placeholder={myusername}
+                                                value={newusername}
+                                                placeholder={username}
                                                 onChange={(e) => {
-                                                    setUsername(e.target.value);
+                                                    setNewUsername(e.target.value);
                                                     setUsernameValid(e.target.value.length >= 5 && e.target.value.length <= 10);
                                                 }}
                                             />
@@ -320,7 +293,7 @@ const UserAccountSettings = () => {
                                 spinner={<BeatLoader size={8} color='red' />}
                                 onClick={handleProfile}
                                 isDisabled={!(
-                                    (username !== myusername && usernameValid) ||
+                                    (newusername !== username && usernameValid) ||
                                     (password !== "" && passwordValid) ||
                                     nationality !== ""
                                 )}