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;