https://unb.com.bd/v2/custom/react-app.js

1const { useState, useEffect, useCallback, useRef, Suspense } = React;
2
3function SmallCard(params) {
4    return (
5        <div className="flex my-8">
6            <div className="shine box"></div>
7            <div className="shimmer-div mx-8">
8                <div className="shine lines"></div>
9                <div className="shine lines"></div>
10                <div className="shine lines"></div>
11            </div>
12        </div>
13    );
14}
15function Shimmer({type}) {
16    if(type == 'blog') {
17        return (
18            <div className="">
19                <div className="shine box"></div>
20    
21                <div className="shimmer-div">
22                    <SmallCard/>
23                    <SmallCard/>
24                    <SmallCard/>
25                </div>
26            </div>
27        );
28    }
29    if(type == 'post') {
30        return (
31            <div className="">
32                <div className="shine box"></div>
33    
34                <div className="shimmer-div">
35                    <div className="shine lines"></div>
36                    <div className="shine lines"></div>
37                    <div className="shine lines"></div>
38                </div>
39            </div>
40        );
41    }
42    return (<p>Loading...</p>);
43}
44
45function useFetch(url) {
46    const [loading, setLoading] = useState(true);
47    const [error, setError] = useState(false);
48    const [data, setData] = useState(null);
49
50    const sendQuery = useCallback(async () => {
51        try {
52            await setLoading(true);
53            await setError(false);
54
55            const result = await fetch(url).then(data => data.json());
56            // console.log("🚀 ~ file: react-app.js ~ line 29 ~ sendQuery ~ result", result.html)
57            setData(result);
58            setLoading(false);
59        } catch (err) {
60            setError(err);
61            setLoading(false);
62        }
63    }, []);
64
65    useEffect(() => {
66        sendQuery();
67    }, [sendQuery]);
68
69    return { loading, error, data };
70}
71
72function WidgetNews({url, type}) {
73    
74    const { loading, error, data } = useFetch(url);
75    // console.log("🚀 ~ file: react-app.js ~ line 46 ~ TrendingNews ~ data", data)
76
77    const createMarkup = (item) => {
78        return { __html: item };
79    }
80    return (
81        <Suspense fallback={<Shimmer/>}>
82            {loading && <Shimmer type={type} />}
83            {(data && data.html) && <div dangerouslySetInnerHTML={createMarkup(data.html)} />}
84        </Suspense>
85    );
86}
87
88function ReactInfiniteScroller({ url, initialPage = 0 }) {
89    // console.log(url)
90    const [query, setQuery] = useState("");
91    const [page, setPage] = useState(initialPage);
92    const { loading, error, list } = useFetch(query, url);
93    const loader = useRef(null);
94
95    const handleChange = (e) => {
96        setQuery(e.target.value);
97    };
98
99    const handleObserver = useCallback((entries) => {
100        const target = entries[0];
101        if (target.isIntersecting) {
102          setPage((prev) => prev + 1);
103        }
104    }, []);
105
106    useEffect(() => {
107        const option = {
108          root: null,
109          rootMargin: "20px",
110          threshold: 0
111        };
112        const observer = new IntersectionObserver(handleObserver, option);
113        if (loader.current) observer.observe(loader.current);
114    }, [handleObserver]);
115
116    const createMarkup = (item) => {
117        return { __html: item };
118    }
119
120    return (
121        <div>
122            <Suspense fallback={<Shimmer/>}>
123                {list.map((item, index) => (
124                  <div dangerouslySetInnerHTML={createMarkup(item)} key={index} />
125                ))}
126            </Suspense>
127            {loading && <Shimmer/>}
128            {/* {error && <p>Error!</p>} */}
129            <div ref={loader} />
130        </div>
131    );
132}