Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix pagination bug #120

Merged
merged 9 commits into from
Aug 19, 2024
Merged

Fix pagination bug #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
562cc39
chore: make navabarLoggedin central to other logged in compoenents
vantage-ola Aug 15, 2024
1f3c6b0
make navbar central to other components(logged out)
vantage-ola Aug 15, 2024
a5168b1
refactor: create Main Layout to center components inside
vantage-ola Aug 15, 2024
53080ea
refactor: main layout refactor
vantage-ola Aug 15, 2024
7e447a9
fix: mobile view
vantage-ola Aug 19, 2024
d82b603
fix: pc view by changing to intersection obv api
vantage-ola Aug 19, 2024
f1d82a2
complete: bug fixes
vantage-ola Aug 19, 2024
a1a5e3a
chore: remove unnessary imports
vantage-ola Aug 19, 2024
f2fe265
update tests
vantage-ola Aug 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions tracknow/web/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions tracknow/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"react-dom": "^18.3.1",
"react-icons": "^3.11.0",
"react-infinite-scroll-component": "^6.1.0",
"react-lite-youtube-embed": "^2.4.0",
"react-router-dom": "^6.23.1",
"react-scripts": "5.0.1",
"react-slick": "^0.30.2",
Expand Down
152 changes: 93 additions & 59 deletions tracknow/web/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import React from "react";
import { ChakraProvider } from "@chakra-ui/react";
import { ChakraProvider, Flex, useDisclosure } from "@chakra-ui/react";
import { theme } from "./tracknowTheme";
import { BrowserRouter, Routes, Route, useParams } from "react-router-dom";
import { NavbarLayout, NavbarLoggedInLayout, NavbarWelcomeLayout } from "./components/Navbar/Navbar";
import MainLayout from "./components/MainLayout";

import { UserLogin } from "./components/User/UserLogin";
import { UserSignUp } from "./components/User/UserSignUp";
Expand All @@ -17,66 +19,98 @@

import { UserProvider } from "./hooks/useUsers";

export const App = () => (
<ChakraProvider theme={theme}>
<BrowserRouter>
<Routes>
<Route path="/*" element={<ErrorPage />} />
<Route path="/" element={<Welcome />} />
<Route path="/login" element={<UserLogin />} />
<Route path="/create-user" element={<UserSignUp />} />
<Route
path="/home"
element={
<UserProvider>
<Home />
</UserProvider>
}
/>
<Route
path="/user/:username/create-moments"
element={
<UserProvider>
<UserAddLaptimes />
</UserProvider>
}
/>
<Route
path="/user/:username/account-settings"
element={
<UserProvider>
<UserAccountSettings />
</UserProvider>
}
/>
<Route
path="/user/:username/my-moments"
element={
<UserProvider>
<UserLaptimes />
</UserProvider>
}
/>
<Route
path="user/:user_id/:username/"
element={

export const App = () => {

Check warning on line 23 in tracknow/web/src/App.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/App.tsx#L23 

Added line #L23 was not covered by tests

const UserProfileWrapper = () => {
const { user_id } = useParams();

Check warning on line 26 in tracknow/web/src/App.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/App.tsx#L25-L26 

Added lines #L25 - L26 were not covered by tests
// fetch user data based on user_id
const id = Number(user_id);

Check warning on line 28 in tracknow/web/src/App.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/App.tsx#L28 

Added line #L28 was not covered by tests

return <UserProfile id={id} />;

Check warning on line 30 in tracknow/web/src/App.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/App.tsx#L30 

Added line #L30 was not covered by tests
};
const { isOpen, onOpen, onClose } = useDisclosure();

Check warning on line 32 in tracknow/web/src/App.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/App.tsx#L32 

Added line #L32 was not covered by tests

return (

Check warning on line 34 in tracknow/web/src/App.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/App.tsx#L34 

Added line #L34 was not covered by tests

<ChakraProvider theme={theme}>
<BrowserRouter>
<Routes>
<Route path="/*" element={<ErrorPage />} />

{/*welcome page*/}
<Route element={
<NavbarWelcomeLayout />
}>
<Route path="/" element={<Welcome />} />
</Route>

{/*user is about to login/signup */}
<Route element={
<NavbarLayout />
}>
<Route path="/login" element={<UserLogin />} />
<Route path="/create-user" element={<UserSignUp />} />
</Route>

{/*user is logged in */}
<Route element={
<UserProvider>
<UserProfileWrapper />
<NavbarLoggedInLayout onOpen={onOpen} />
</UserProvider>
}>
<Route element={
<Flex height={{ base: "auto", md: "100vh" }}>
<MainLayout isOpen={isOpen} onOpen={onOpen} onClose={onClose} />
</Flex>
}>

}
>

</Route>
</Routes>
</BrowserRouter>
</ChakraProvider>
);

const UserProfileWrapper = () => {
const { user_id } = useParams();
// fetch user data based on user_id
const id = Number(user_id);
<Route
path="/home"
element={
<UserProvider>
<Home />
</UserProvider>
}
/>
<Route
path="/user/:username/create-moments"
element={
<UserProvider>
<UserAddLaptimes />
</UserProvider>
}
/>
<Route
path="/user/:username/account-settings"
element={
<UserProvider>
<UserAccountSettings />
</UserProvider>
}
/>
<Route
path="/user/:username/my-moments"
element={
<UserProvider>
<UserLaptimes />
</UserProvider>
}
/>
<Route
path="user/:user_id/:username/"
element={
<UserProvider>
<UserProfileWrapper />
</UserProvider>
}
/>
</Route>
</Route>
</Routes>
</BrowserRouter>
</ChakraProvider >
)
};

return <UserProfile id={id} />;
};
76 changes: 12 additions & 64 deletions tracknow/web/src/components/Home/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,27 @@
import { NavbarLoggedIn } from "../Navbar/Navbar";
import { HomePost } from "../Post/Post";
import { useLaptimes } from "../../hooks/useLaptimes";
import { useUsers } from "../../hooks/useUsers";
import { LoadingSpinner } from "../Loading/LoadingSpinner";
import {
Box,
Flex,
useBreakpointValue,
useDisclosure,
} from "@chakra-ui/react";

import MobileDrawer from "../../misc/MobileDrawer";
import LeftSideBar from "../SideBar/LeftSideBar";
import RightSideBar from "../SideBar/RightSideBar";


export const Home = () => {
const { laptime, fetchMoreData, hasMore, laptime_loading } = useLaptimes();
const { username, profilePic, loading } = useUsers();

const { isOpen, onOpen, onClose } = useDisclosure();
const isMobile = useBreakpointValue({ base: true, md: false });
const { loading } = useUsers();

Check warning on line 10 in tracknow/web/src/components/Home/Home.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/components/Home/Home.tsx#L10 

Added line #L10 was not covered by tests

return (
<>
<NavbarLoggedIn name={username} pp={profilePic} onOpen={onOpen} />

<Flex mt={10} bg="dark" height="calc(100vh - 45px)"> {/* Adjust height to fit the viewport */}
{/* Left section */}
{isMobile ? (
<MobileDrawer isOpen={isOpen} onClose={onClose}>
<LeftSideBar />
</MobileDrawer>
) : (
<Box
flex="1"
borderRight="1px solid #323536"
overflowY="auto"
height="full"
>
<LeftSideBar />
</Box>
)}

{/* Middle section */}
<Box
flex="3"
rounded={"sm"}
my={1}
mx={[0, 5]}
overflow={"hidden"}
borderRadius={"1px"}
overflowY="auto"
height="full"
>
{loading && laptime_loading ? (
<LoadingSpinner />
) : (
<HomePost
laptimes={laptime}
fetchMoreData={fetchMoreData}
hasMore={hasMore}
/>
)}
</Box>
{/* Middle section */}
{loading && laptime_loading ? (
<LoadingSpinner />

Check warning on line 16 in tracknow/web/src/components/Home/Home.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/components/Home/Home.tsx#L16 

Added line #L16 was not covered by tests
) : (
<HomePost

Check warning on line 18 in tracknow/web/src/components/Home/Home.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/components/Home/Home.tsx#L18 

Added line #L18 was not covered by tests
laptimes={laptime}
fetchMoreData={fetchMoreData}
hasMore={hasMore}
/>
)}

{/* Right section */}
<Box
flex="1"
overflowY="auto"
display={["none", "none", "block"]}
height="full"
>
<RightSideBar /> {/* right sidebar content*/}
</Box>
</Flex>
</>
);
};
57 changes: 57 additions & 0 deletions tracknow/web/src/components/MainLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import * as React from "react";
import { Flex, Box, useBreakpointValue } from '@chakra-ui/react';
import LeftSideBar from './SideBar/LeftSideBar';
import RightSideBar from './SideBar/RightSideBar';
import MobileDrawer from "../misc/MobileDrawer";
import { Outlet } from 'react-router-dom';

type MainLayoutProps = {
isOpen: boolean;
onOpen: () => void;
onClose: () => void;
};

const MainLayout: React.FC<MainLayoutProps> = ({ isOpen, onOpen, onClose }) => {

Check warning on line 14 in tracknow/web/src/components/MainLayout.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/components/MainLayout.tsx#L14 

Added line #L14 was not covered by tests


const isMobile = useBreakpointValue({ base: true, md: false });

Check warning on line 17 in tracknow/web/src/components/MainLayout.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/components/MainLayout.tsx#L17 

Added line #L17 was not covered by tests

return (

Check warning on line 19 in tracknow/web/src/components/MainLayout.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/components/MainLayout.tsx#L19 

Added line #L19 was not covered by tests
<Flex mt={10} bg="dark" flex={1}>
{/* Left section */}

{isMobile ? (
<MobileDrawer isOpen={isOpen} onClose={onClose}>

Check warning on line 24 in tracknow/web/src/components/MainLayout.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/components/MainLayout.tsx#L24 

Added line #L24 was not covered by tests
<LeftSideBar />
</MobileDrawer>
) : (
<Box

Check warning on line 28 in tracknow/web/src/components/MainLayout.tsx

View check run for this annotation

Codecov / codecov/patch

tracknow/web/src/components/MainLayout.tsx#L28 

Added line #L28 was not covered by tests
flex="1"
borderRight="1px solid #323536"
overflowY="auto"
display={["none", "none", "block"]}

>
<LeftSideBar />
</Box>
)}

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

{/* Right section */}
<Box
flex="1"
overflowY="auto"
display={["none", "none", "block"]}
>
<RightSideBar /> {/* right sidebar content*/}
</Box>

</Flex>
);
};

export default MainLayout;
Loading
Loading