forked from reactplay/react-play
-
Notifications
You must be signed in to change notification settings - Fork 0
/
PlayList.jsx
51 lines (43 loc) · 1.46 KB
/
PlayList.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import PlayThumbnail from "./PlayThumbnail";
import { ReactComponent as ImageOops } from "images/img-oops.svg";
import React, { Fragment, useEffect, useState } from "react";
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import Loader from "common/spinner/spinner";
import * as all_plays from "plays";
import { useParams } from "react-router-dom";
import useGetPlays from 'common/hooks/useGetPlays'
import "./playlist.css";
import { toSanitized } from "common/services/string";
const PlayList = () => {
const [loading, error, plays] = useGetPlays();
const [allPlays, setAllPlays] = useState([])
let { playid } = useParams(); // return the parameter of url
if (loading) {
return <Loader />;
}
if (plays?.length === 0) {
return (
<div className='play-not-found'>
<ImageOops className='play-not-found-image' />
<p className='page-404-lead'>Play not found</p>
<p className='page-404-desc'>
Please change your search or adjust filters to find plays.
</p>
</div>
);
}
return (
<Fragment>
<ol className='list-plays'>
{plays?.map((play, index) => (
<React.Fragment key={index}>
{
all_plays[play.component ? play.component : toSanitized(play.title_name)] && <PlayThumbnail key={play.id} play={play}/>
}
</React.Fragment>
))}
</ol>
</Fragment>
);
};
export default PlayList;