Skip to content

Commit bdf583d

Browse files
DinoxhDinoxh
committed
fixed favourite function. made it fully functioning
1 parent 7443181 commit bdf583d

5 files changed

Lines changed: 95 additions & 71 deletions

File tree

‎my-app/src/presenters/ListViewPresenter.jsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,19 @@ import { observer } from "mobx-react-lite";
33
import ListView from "../views/ListView.jsx";
44

55
const ListViewPresenter = observer(({ model }) => {
6+
const addFavourite = (course) => {
7+
model.addFavourite(course);
8+
}
9+
const removeFavourite = (course) => {
10+
model.removeFavourite(course);
11+
}
12+
613
return <ListView
714
courses={model.courses}
815
searchResults={model.currentSearch}
916
favouriteCourses={model.favourites}
10-
addFavourite={model.addFavourite}
11-
removeFavourite={model.removeFavourite}
17+
addFavourite={addFavourite}
18+
removeFavourite={removeFavourite}
1219
/>;
1320
});
1421

‎my-app/src/presenters/SearchbarPresenter.jsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,16 @@ const SearchbarPresenter = observer(({ model }) => {
77
model.searchCourses(query);
88
}
99

10+
const removeFavourite = (course) => {
11+
model.removeFavourite(course);
12+
}
13+
1014
return (
1115
<SearchbarView
1216
model={model}
1317
searchCourses={searchCourses}
1418
favouriteCourses = {model.favourites}
15-
removeFavourite={model.removeFavourite}
19+
removeFavourite={removeFavourite}
1620
/>
1721
);
1822
});

‎my-app/src/views/Components/FavouriteDropdown.jsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,28 @@ import React from 'react';
22

33
function FavouritesDropdown(props) {
44
return (
5-
<div className=" absolute mt-2 w-48 bg-white border border-gray-300 rounded-lg">
5+
<div className="absolute mt-2 w-48 bg-white border border-solid border-black rounded-lg z-50">
66
{props.favouriteCourses.length > 0 ? (
77
props.favouriteCourses.map(course => (
8-
98
<div
109
key={course.code}
11-
className="p-2 flex justify-between items-center">
12-
13-
<p>{course.name}</p>
14-
10+
className="p-2 flex justify-between items-center w-full border border-solid border-black">
11+
<p
12+
className="text-black">
13+
{course.name}
14+
</p>
1515
<button
1616
className="text-red-500 cursor-pointer"
17-
onClick={() => props.removeFavourite(course.code)}>
17+
onClick={() => props.removeFavourite(course)}>
1818
X
1919
</button>
20-
2120
</div>
2221
))
23-
) :
24-
(
25-
<div className="p-2 text-gray-500">No favourites</div>
26-
)
27-
}
22+
) : (
23+
<div className="p-2 text-[#000061]">
24+
No favourites
25+
</div>
26+
)}
2827
</div>
2928
);
3029
}

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

Lines changed: 57 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -8,60 +8,74 @@ function ListView(props) {
88

99
const toggleReadMore = (courseCode) => {
1010
setReadMoreState(prevState => (
11-
{...prevState, [courseCode]: !prevState[courseCode]}));
11+
{ ...prevState, [courseCode]: !prevState[courseCode] }
12+
));
1213
};
1314

14-
const handleFavouriteClick = (courseCode) => {
15-
if (props.favouriteCourses.includes(courseCode)) {
16-
props.removeFavourite(courseCode);
17-
}
18-
else {
19-
props.addFavourite(courseCode);
15+
const handleFavouriteClick = (course) => {
16+
if (props.favouriteCourses.some(fav => fav.code === course.code)) {
17+
props.removeFavourite(course);
18+
} else {
19+
props.addFavourite(course);
2020
}
2121
};
2222

2323
return (
2424
<div className="relative bg-white text-black p-2 flex flex-col gap-5 h-full overflow-auto">
25-
{
26-
coursesToDisplay.length > 0 ?
27-
coursesToDisplay.map((course) => (
28-
<div
29-
key={course.code}
30-
className="p-5 hover:bg-blue-100 flex items-center border border-b-black border-solid w-full rounded-lg cursor-pointer">
25+
{coursesToDisplay.length > 0 ? (
26+
coursesToDisplay.map((course) => (
27+
<div
28+
key={course.code}
29+
className="p-5 hover:bg-blue-100 flex items-center border border-b-black border-solid w-full rounded-lg cursor-pointer"
30+
>
31+
<div>
32+
<p className="font-bold text-[#000061]">{course.code}</p>
33+
<p className="font-bold">{course.name}</p>
34+
<p
35+
className="text-gray-600"
36+
dangerouslySetInnerHTML={{
37+
__html: readMoreState[course.code]
38+
? course.description
39+
: course.description.slice(0, 150),
40+
}}
41+
/>
42+
{course.description.length > 150 && (
43+
<span
44+
className="text-blue-500 cursor-pointer"
45+
onClick={() => toggleReadMore(course.code)}
46+
>
47+
{readMoreState[course.code]
48+
?
49+
' show less'
50+
:
51+
' read more'}
52+
</span>
53+
)}
3154
<div>
32-
<p className={"font-bold text-[#000061]"}>{course.code}</p>
33-
<p className="font-bold">{course.name}</p>
34-
<p className="text-gray-600" dangerouslySetInnerHTML={
35-
{ __html: readMoreState[course.code] ? course.description : course.description.slice(0, 150) }
36-
}
37-
/>
38-
{course.description.length > 150 && (
39-
<span className="text-blue-500" onClick={() => toggleReadMore(course.code)}>
40-
{readMoreState[course.code] ? ' show less' : 'read more'}
41-
</span>
42-
)}
43-
44-
<div>
45-
<button className="text-yellow-500 cursor-pointer" onClick={() => handleFavouriteClick(course.code)}>
46-
{props.favouriteCourses.includes(course.code)
47-
?
48-
'Remove from Favourites'
49-
:
50-
'Add to Favourites'
51-
}
52-
</button>
53-
</div>
55+
<button
56+
className="text-yellow-500 cursor-pointer"
57+
onClick={() => handleFavouriteClick(course)}
58+
>
59+
{props.favouriteCourses.some(fav => fav.code === course.code)
60+
?
61+
'Unfavourite'
62+
:
63+
'Favourite'
64+
}
65+
</button>
5466
</div>
5567
</div>
56-
)) :
57-
<Quantum
58-
size="1000"
59-
speed="2"
60-
color="#000061"
61-
/>
62-
}
68+
</div>
69+
))
70+
) : (
71+
<Quantum
72+
size="1000"
73+
speed="2"
74+
color="#000061"
75+
/>
76+
)}
6377
</div>
6478
);
6579
}
6680

67-
export default ListView;
81+
export default ListView;

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function SearchbarView(props) {
3737
};
3838

3939
return (
40-
<div className="w-full px-6 py-6 bg-[#000061] flex items-center justify-between">
40+
<div className="w-full px-6 py-6 bg-[#000061] flex items-center justify-between relative">
4141
<a href="https://www.kth.se" className="flex items-center h-[90px] w-auto">
4242
<img
4343
src={project_logo}
@@ -61,18 +61,18 @@ function SearchbarView(props) {
6161
About us
6262
</button>
6363

64-
<button onClick={() => setShowFavourites(!showFavourites)}
65-
className="w-[120px] h-[44px] bg-[#003399] text-white rounded-full border border-[#000061] cursor-pointer hover:bg-[#001a4d] transition-all duration-200">
66-
Favourites
67-
</button>
68-
6964
<div className="relative">
70-
{showFavourites && (
71-
<FavouritesDropdown
72-
favouriteCourses={props.favouriteCourses}
73-
removeFavourite={props.removeFavourite}
74-
/>
75-
)}
65+
<button onClick={() => setShowFavourites(!showFavourites)}
66+
className="w-[120px] h-[44px] bg-[#003399] text-white rounded-full border border-[#000061] cursor-pointer hover:bg-[#001a4d] transition-all duration-200">
67+
Favourites
68+
</button>
69+
{showFavourites && (
70+
<FavouritesDropdown
71+
courses={props.courses}
72+
favouriteCourses={props.favouriteCourses}
73+
removeFavourite={props.removeFavourite}
74+
/>
75+
)}
7676
</div>
7777

7878
<div className="flex items-center cursor-pointer">

0 commit comments

Comments
 (0)