Skip to content

Commit 267c180

Browse files
DinoxhDinoxh
committed
fixed scrolling
1 parent bcc7c7c commit 267c180

2 files changed

Lines changed: 68 additions & 71 deletions

File tree

‎my-app/src/pages/App.jsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,25 @@
11
import React from 'react';
2-
import { SidebarPresenter } from "../presenters/SidebarPresenter.jsx";
3-
import { SearchbarPresenter } from "../presenters/SearchbarPresenter.jsx";
2+
import { SidebarPresenter } from '../presenters/SidebarPresenter.jsx';
3+
import { SearchbarPresenter } from '../presenters/SearchbarPresenter.jsx';
44
import { ListViewPresenter } from '../presenters/ListViewPresenter.jsx';
5-
import {model} from '/src/model.js';
5+
import { model } from '/src/model.js';
66

77
function App() {
88
return (
9-
<div className="flex h-screen w-screen">
10-
<div className="flex-auto w-40% h-full bg-gradient-to-t from-[#4f3646] to-[#6747c0]">
9+
<div className="flex h-screen w-screen overflow-hidden">
10+
<div className="w-1/4 h-full bg-gradient-to-t from-[#4f3646] to-[#6747c0]">
1111
<SidebarPresenter model={model} />
12-
1312
</div>
1413
<div className="w-3/4 h-full flex flex-col">
15-
<div className="bg-gradient-to-t from-[#6246a8] to-[#6747c0] text-white" style={{color: "red"}}>
16-
{/* bg-gradient-to-t from-[#6246a8] to-[#6747c0] */}
14+
<div className="bg-gradient-to-t from-[#6246a8] to-[#6747c0] text-white">
1715
<SearchbarPresenter model={model} />
1816
</div>
19-
<div className="flex-auto border overflow-auto bg-[#121212]">
17+
<div className="flex-auto border bg-[#121212] relative">
2018
<ListViewPresenter model={model} />
2119
</div>
2220
</div>
2321
</div>
2422
);
2523
}
2624

27-
export default App;
25+
export default App;

‎my-app/src/views/ListView.jsx‎

Lines changed: 60 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -37,81 +37,80 @@ function ListView(props) {
3737
if (!hasMore) return;
3838

3939
const nextItems = coursesToDisplay.slice(displayedCourses.length, displayedCourses.length + 10);
40-
4140
setDisplayedCourses(prevCourses => [...prevCourses, ...nextItems]);
4241
setHasMore(displayedCourses.length + nextItems.length < coursesToDisplay.length);
4342
}, [displayedCourses.length, coursesToDisplay, hasMore]);
4443

4544
return (
46-
<div className="relative bg-white text-black p-2 flex flex-col gap-5 h-full overflow-auto">
45+
<div className="relative bg-white text-black p-2 flex flex-col gap-5 h-screen">
4746
{isLoading ? (
4847
<div className="flex justify-center items-center h-full">
4948
<Quantum size="400" speed="10" color="#000061" />
5049
</div>
5150
) : (
52-
<InfiniteScroll
53-
dataLength={displayedCourses.length}
54-
next={fetchMoreCourses}
55-
hasMore={hasMore}
56-
loader={
57-
<div className="text-center py-3">
58-
<DotPulse size="100" speed="1.3" color="black" />
59-
</div>
60-
}
61-
endMessage={<p className="text-center py-2">No more courses</p>}
62-
scrollThreshold="200px"
63-
>
64-
{displayedCourses.map(course => (
65-
<div
66-
onClick={() => {
67-
props.setSelectedCourse(course);
68-
props.setIsPopupOpen(true);
69-
}}
70-
key={course.code}
71-
className="p-5 mb-3 hover:bg-blue-100 flex items-center border border-b-black border-solid w-full rounded-lg cursor-pointer"
72-
>
73-
<div>
74-
<p className="font-bold text-[#000061]">{course.code}</p>
75-
<p className="font-bold">{course.name}</p>
76-
<p
77-
className="text-gray-600"
78-
dangerouslySetInnerHTML={{
79-
__html: readMore[course.code]
80-
? course.description
81-
: course.description.slice(0, 150),
82-
}}
83-
/>
84-
{course.description.length > 150 && (
85-
<span
86-
className="text-blue-500 cursor-pointer"
87-
onClick={(e) => {
88-
e.stopPropagation();
89-
toggleReadMore(course.code);
90-
}}
91-
>
92-
{readMore[course.code] ? ' show less' : ' read more'}
93-
</span>
94-
)}
51+
<div className="h-full overflow-y-auto" id="scrollableDiv">
52+
<InfiniteScroll
53+
dataLength={displayedCourses.length}
54+
next={fetchMoreCourses}
55+
hasMore={hasMore}
56+
loader={
57+
<div className="text-center py-3">
58+
<DotPulse size="100" speed="1.3" color="black" />
59+
</div>
60+
}
61+
endMessage={<p className="text-center py-2">No more courses</p>}
62+
scrollThreshold={0.9}
63+
scrollableTarget="scrollableDiv"
64+
>
65+
{displayedCourses.map(course => (
66+
<div
67+
onClick={() => {
68+
props.setSelectedCourse(course);
69+
props.setIsPopupOpen(true);
70+
}}
71+
key={course.code}
72+
className="p-5 mb-3 hover:bg-blue-100 flex items-center border border-b-black border-solid w-full rounded-lg cursor-pointer"
73+
>
9574
<div>
96-
<button
97-
className="text-yellow-500 cursor-pointer"
98-
onClick={(e) => {
99-
e.stopPropagation();
100-
handleFavouriteClick(course);
75+
<p className="font-bold text-[#000061]">{course.code}</p>
76+
<p className="font-bold">{course.name}</p>
77+
<p
78+
className="text-gray-600"
79+
dangerouslySetInnerHTML={{
80+
__html: readMore[course.code]
81+
? course.description
82+
: course.description.slice(0, 150),
10183
}}
102-
>
103-
{props.favouriteCourses.some(fav => fav.code === course.code)
104-
?
105-
'Unfavourite'
106-
:
107-
'Favourite'
108-
}
109-
</button>
84+
/>
85+
{course.description.length > 150 && (
86+
<span
87+
className="text-blue-500 cursor-pointer"
88+
onClick={(e) => {
89+
e.stopPropagation();
90+
toggleReadMore(course.code);
91+
}}
92+
>
93+
{readMore[course.code] ? ' show less' : ' read more'}
94+
</span>
95+
)}
96+
<div>
97+
<button
98+
className="text-yellow-500 cursor-pointer"
99+
onClick={(e) => {
100+
e.stopPropagation();
101+
handleFavouriteClick(course);
102+
}}
103+
>
104+
{props.favouriteCourses.some(fav => fav.code === course.code)
105+
? 'Unfavourite'
106+
: 'Favourite'}
107+
</button>
108+
</div>
110109
</div>
111110
</div>
112-
</div>
113-
))}
114-
</InfiniteScroll>
111+
))}
112+
</InfiniteScroll>
113+
</div>
115114
)}
116115
{props.popup}
117116
</div>

0 commit comments

Comments
 (0)