-
Notifications
You must be signed in to change notification settings - Fork 3
/
test.jsx
113 lines (92 loc) · 2.65 KB
/
test.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import React, { useCallback, useState } from 'react';
import ReactDOM from 'react-dom/client';
import InfiniteScroll from 'react-infinite-scroller';
// Some random lines lol (I'm tired).
const lines =
[
"A magical line",
"A cool line",
"Another line",
"Some random text",
"Random text 2",
"Best Mods testing!",
"I feel sick.",
"This is random."
];
// Probably no need, but just in-case keep track of item ID globally.
var item_id = 0;
async function loadMore(page)
{
var toReturn = [];
// Simple for loop.
/*
for (var i = 0; i < 50; i++)
{
item_id++;
toReturn.push({id: item_id, line: lines[Math.floor(Math.random()*lines.length)]});
}
*/
// AJAX request.
// More Info => routes/web.php
return fetch('/items?page=' + page).then(res => res.json());
//return toReturn;
}
const App = () =>
{
// Loggg
console.log("Launching app...");
// The stateful functions (I love this type of functionality from React).
const [pageNum, setPageNum] = useState(0);
const [items, setItems] = useState([]);
const [fetching, setFetching] = useState(false);
// If our page number is below one, set to one.
if (pageNum < 1)
{
setPageNum(1);
}
const fetchItems = useCallback(
// ASYNC.
async () =>
{
// If we're already fetching. Return.
if (fetching)
{
console.log("Already fetching! Returning...");
return;
}
// We're fetching!
setFetching(true);
// Try to fetch new lines/data.
try
{
console.log("Retrieving new items on page " + pageNum + "!");
// Call our load more function.
const newItems = await loadMore(pageNum);
// Now set our items.
setItems([...items, ...newItems]);
}
finally
{
// Increase page number and set fetching to false.
setPageNum(pageNum + 1);
setFetching(false);
}
},
[items, fetching, pageNum]
);
return (
<InfiniteScroll
loadMore={fetchItems}
hasMore={(pageNum <= 50)}
loader={<div class="loadindicator">Loading...</div>}>
<ol id="contentList">
{items.map(item => (
<li key={item.id}>
<p>{item.line} ({item.id})</p>
</li>
))}
</ol>
</InfiniteScroll>);
};
const content = ReactDOM.createRoot(document.getElementById('test'));
content.render(<App/>);