You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1016 B
JavaScript
51 lines
1016 B
JavaScript
import { useState, useEffect } from 'react'
|
|
import { CardGroup } from 'react-bootstrap'
|
|
import PreviewCourses from './PreviewCourses'
|
|
|
|
export default function FeaturedCourses(){
|
|
|
|
const [previews, setPreviews] = useState([])
|
|
|
|
useEffect(() => {
|
|
fetch(`${ process.env.REACT_APP_API_URL}/courses/`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
console.log(data)
|
|
|
|
const numbers = []
|
|
const featured = []
|
|
|
|
const generateRandomNums = () => {
|
|
let randomNum = Math.floor(Math.random() * data.length)
|
|
|
|
if(numbers.indexOf(randomNum) === -1){
|
|
numbers.push(randomNum)
|
|
}else{
|
|
generateRandomNums()
|
|
}
|
|
}
|
|
|
|
for(let i = 0; i < 5; i++){
|
|
generateRandomNums()
|
|
|
|
featured.push(
|
|
<PreviewCourses data={data[numbers[i]]} key={data[numbers[i]]._id} breakPoint={2} />
|
|
)
|
|
}
|
|
|
|
setPreviews(featured)
|
|
})
|
|
}, [])
|
|
|
|
return(
|
|
<>
|
|
<h2 className="text-center">Featured Courses</h2>
|
|
<CardGroup className="justify-content-center">
|
|
|
|
|
|
{previews}
|
|
|
|
</CardGroup>
|
|
</>
|
|
)
|
|
} |