G

app.js

public
Guest May 15, 2024 Never 17
Clone
Plaintext paste1.txt 54 lines (44 loc) | 1.55 KB
1
import React, { useState, useEffect } from "react";
2
import TutorialService from "../services/TutorialService";
3
import { Link } from "react-router-dom";
4
5
6
const TutorialList = () => {
7
8
const [tutorials, setTutorials] = useState([]);
9
const [currentTutorial, setCurrentTutorial] = useState(null);
10
const [currentIndex, setCurrentIndex] = useState(-1);
11
const [searchTutorial, setSearchTutorial] = useState("");
12
13
useEffect(() => {
14
retrieveTutorials();
15
}, []);
16
17
const retrieveTutorials = () => {
18
TutorialService.getAll().
19
then(response => {
20
setTutorials(response.data);
21
})
22
.catch(e => {
23
console.log(e);
24
});
25
};
26
27
const setActiveTutorial = (tutorial, index) => {
28
29
setCurrentTutorial(tutorial);
30
setCurrentIndex(index);
31
}
32
33
return (
34
<div className="col-md-6">
35
<h4>Tutorials List</h4>
36
<ul className="list-group">
37
{tutorials &&
38
tutorials.map((tutorial, index) => (
39
<li className={
40
"list-group-item" + (index === currentIndex ? "active" : "")
41
}
42
onclick={() => setActiveTutorial(tutorial, index)}
43
key={index}
44
>
45
{tutorial.title}
46
</li>
47
))}
48
</ul>
49
</div>
50
)
51
}
52
53
54
export default TutorialList;