-
Notifications
You must be signed in to change notification settings - Fork 0
/
GenresList.jsx
89 lines (79 loc) · 2.19 KB
/
GenresList.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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import { Wrapper, WrapperBox, OptionText } from "../../components/popUpBox/PopUpBox";
import React, { useCallback, useEffect, useInsertionEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Subject } from "../../services/radioListServices";
import urlUpdate from "../../redux/urlUpdate.js"
import {
updatestart,
radioUpdateGenreSuccess,
updateCurrentPlaying,
updateError,
radioBaseUrlUpdateSuccess,
updateStart
} from "../../redux/radioSlice";
import { useInfiniteScroller } from "@pwn0x80/react-infinite-scroller";
// https://www.npmjs.com/package/@pwn0x80/react-infinite-scroller
let fetchFlowGenres
export const GenresList = ({ toggle }) => {
const { scrollFetch, setScrollFetch, InfiniteScroll } = useInfiniteScroller()
// store genres list here
let [flowgenres, setFlowgenres] = useState([])
// let observerRef = useRef();
const dispatch = new useDispatch()
useEffect(() => {
let Observer = {
signal: function() {
setScrollFetch(e => !e)
}
}
Subject.add(Observer);
}, [])
let isGenresDataAvailable = () => {
if (flowgenres[0] == null) {
return true;
}
return false;
}
useEffect(() => {
if (isGenresDataAvailable()) {
fetchFlowGenres = Subject.getFlow();
}
if (Subject.isDataAvailable()) {
let offset = 30;
for (let i = 0; i < offset; i++) {
let newGenres = fetchFlowGenres.next().value;
setFlowgenres((e) => [...e, newGenres]);
}
} else {
return
}
}, [scrollFetch])
let selectTrigger = (e) => {
toggle(false)
dispatch(updateStart())
try {
dispatch(radioUpdateGenreSuccess({ name: "radio", genres: e.target.innerHTML }))
} catch {
dispatch(updateError())
}
}
return (
<Wrapper>
<WrapperBox>
{
flowgenres?.map((element, keys) => {
return (
<>
<InfiniteScroll >
<OptionText onClick={selectTrigger} >
{element?.name}
</OptionText>
</InfiniteScroll>
</>
)
})
}
</WrapperBox>
</Wrapper>
)
}