Skip to content

Commit 73a6784

Browse files
c4lyp5oc4lyp5o
committed
added pagination, added tests route, changed helper name
1 parent 7b264e6 commit 73a6784

File tree

6 files changed

+455
-45
lines changed

6 files changed

+455
-45
lines changed

‎src/pages/Hadith.js‎

Lines changed: 126 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState, useEffect } from 'react';
2-
import { getTheKeetab, giveTheKeetab } from './getTimes';
2+
import { getTheKeetab, giveTheKeetab } from './js/Helper';
33

44
function Hadith() {
55

@@ -29,32 +29,141 @@ function Hadith() {
2929
setHadith([]);
3030
event.preventDefault();
3131
await giveTheKeetab(search).then(data => {
32-
setDisplay(true);
33-
setIntro(false);
34-
setHadith(data);
32+
// console.log(data);
33+
setHadith(data);
34+
setIntro(false);
35+
setDisplay(true);
3536
});
3637
}
3738

3839
async function handleClick(event) {
3940
setSearch(event.target.value);
4041
}
4142

42-
function HadithPage() {
43-
if (display) {
44-
return (
45-
<>
46-
{hadith.map((hadis, index) => (
47-
<div className='quranAyats' key={index}>
48-
<h3 className='hadis'>{hadis.arab}</h3>
49-
<p>{hadis.id}</p>
50-
<br />
51-
</div>
43+
function HadithData(props) {
44+
const { arab, id } = props.data;
45+
return (
46+
<div className="quranAyats">
47+
<h3 className="hadis">{arab}</h3>
48+
<p>{id}</p>
49+
</div>
50+
);
51+
}
52+
53+
function Pagination({ data, RenderComponent, pageLimit, dataLimit }) {
54+
const [pages] = useState(Math.round(data.length / dataLimit));
55+
const [currentPage, setCurrentPage] = useState(1);
56+
57+
useEffect(() => {
58+
window.scrollTo({ behavior: 'smooth', top: '0px' });
59+
}, [currentPage]);
60+
61+
function goToNextPage() {
62+
setCurrentPage((page) => page + 1);
63+
}
64+
65+
function goToPreviousPage() {
66+
setCurrentPage((page) => page - 1);
67+
}
68+
69+
function changePage(event) {
70+
const pageNumber = Number(event.target.textContent);
71+
setCurrentPage(pageNumber);
72+
}
73+
74+
const getPaginatedData = () => {
75+
const startIndex = currentPage * dataLimit - dataLimit;
76+
const endIndex = startIndex + dataLimit;
77+
return data.slice(startIndex, endIndex);
78+
};
79+
80+
const getPaginationGroup = () => {
81+
let start = Math.floor((currentPage - 1) / pageLimit) * pageLimit;
82+
return new Array(pageLimit).fill().map((_, idx) => start + idx + 1);
83+
};
84+
85+
function showPaginateNav() {
86+
if (pages <= 1)
87+
return null;
88+
else if (pages > 1)
89+
return (
90+
<div className="grid">
91+
<div />
92+
<div className="pagination">
93+
{/* previous button */}
94+
<button
95+
onClick={goToPreviousPage}
96+
className={`prev ${currentPage === 1 ? 'disabled' : ''}`}
97+
>
98+
Sebelumnya
99+
</button>
100+
101+
{/* show page numbers */}
102+
{getPaginationGroup().map((item, index) => (
103+
<button
104+
key={index}
105+
onClick={changePage}
106+
className={`paginationItem ${currentPage === item ? 'active' : null}`}
107+
>
108+
<span>{item}</span>
109+
</button>
52110
))}
53-
</>
54-
);
111+
112+
{/* next button */}
113+
<button
114+
onClick={goToNextPage}
115+
className={`next ${currentPage === pages ? 'disabled' : ''}`}
116+
>
117+
Seterusnya
118+
</button>
119+
</div>
120+
<div />
121+
</div>
122+
);
55123
}
124+
125+
return (
126+
<div>
127+
{/* show the ayats, 10 posts at a time */}
128+
<div className="dataContainer">
129+
{getPaginatedData().map((d, idx) => (
130+
<RenderComponent key={idx} data={d} />
131+
))}
132+
</div>
133+
<br /><br />
134+
{showPaginateNav()}
135+
</div>
136+
);
56137
}
57138

139+
function PaginateHadith() {
140+
if (display)
141+
return (
142+
<Pagination
143+
data={hadith}
144+
RenderComponent={HadithData}
145+
pageLimit={5}
146+
dataLimit={1}
147+
/>
148+
);
149+
}
150+
151+
// function HadithPage() {
152+
// if (display) {
153+
// return (
154+
// <>
155+
// {hadith.map((hadis, index) => (
156+
// <div className='quranAyats' key={index}>
157+
// <h3 className='hadis'>{hadis.arab}</h3>
158+
// <p>{hadis.id}</p>
159+
// <br />
160+
// </div>
161+
// ))}
162+
// </>
163+
// );
164+
// }
165+
// }
166+
58167
return (
59168
<main className="container">
60169
<div className="grid">
@@ -75,7 +184,7 @@ function Hadith() {
75184
<h1>Hadith</h1>
76185
</div>
77186
</div>
78-
{HadithPage(keetab)}
187+
<div>{PaginateHadith()}</div>
79188
{TheIntro()}
80189
</main>
81190
);

‎src/pages/Home.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState, useEffect } from "react";
2-
import { getTimes, timeCruncher, zoneDeterminer } from "./getTimes";
2+
import { getTimes, timeCruncher, zoneDeterminer } from "./js/Helper";
33

44
function Home() {
55

‎src/pages/Quran.js‎

Lines changed: 118 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState, useEffect } from 'react';
2-
import { getTheQuran, giveTheQuran, giveQuranAudio } from './getTimes';
2+
import { getTheQuran, giveTheQuran } from './js/Helper';
33

44
function Quran() {
55

@@ -8,7 +8,6 @@ function Quran() {
88
const [search, setSearch] = useState("");
99
const [quran, setQuran] = useState([]);
1010
const [display, setDisplay] = useState(false);
11-
const [audio, setAudio] = useState([]);
1211

1312
useEffect(() => {
1413
async function Awwalun() {
@@ -27,36 +26,129 @@ function Quran() {
2726
}
2827

2928
async function handleSubmit(event) {
30-
event.preventDefault();
31-
setAudio([]);
32-
setQuran([]);
33-
await giveQuranAudio(search).then(data => { setAudio(data) });
34-
await giveTheQuran(search).then(data => {
35-
setDisplay(true);
36-
setIntro(false);
37-
setQuran(data);
38-
});
39-
}
40-
29+
setQuran([]);
30+
event.preventDefault();
31+
await giveTheQuran(search).then(data => {
32+
setQuran(data);
33+
setIntro(false);
34+
setDisplay(true);
35+
});
36+
}
37+
4138
async function handleClick(event) {
4239
setSearch(event.target.value);
43-
}
40+
}
4441

45-
function Surah() {
46-
if (display) {
42+
function QuranData(props) {
43+
const { text, audio, translation, number } = props.data;
4744
return (
48-
<>
49-
{quran.map((ayats, index) => (
50-
<div className='quranAyats' key={index}>
51-
<h3 className='quranic'>{ayats.text} ({index + 1})</h3>
52-
<p>{ayats.translation}</p>
53-
<audio key={index} controls><source src={audio[index].audio.primary} /></audio>
54-
<br />
45+
<div className="quranAyats">
46+
<h3 className="quranic">{text.arab} ({number.inSurah})</h3>
47+
<p>{translation.id}</p>
48+
<audio controls>
49+
<source src={audio.primary} />
50+
Your browser does not support the audio element.
51+
</audio>
52+
</div>
53+
);
54+
}
55+
56+
function Pagination({ data, RenderComponent, title, pageLimit, dataLimit }) {
57+
const [pages] = useState(Math.round(data.length / dataLimit));
58+
const [currentPage, setCurrentPage] = useState(1);
59+
60+
useEffect(() => {
61+
window.scrollTo({ behavior: 'smooth', top: '0px' });
62+
}, [currentPage]);
63+
64+
function goToNextPage() {
65+
setCurrentPage((page) => page + 1);
66+
}
67+
68+
function goToPreviousPage() {
69+
setCurrentPage((page) => page - 1);
70+
}
71+
72+
function changePage(event) {
73+
const pageNumber = Number(event.target.textContent);
74+
setCurrentPage(pageNumber);
75+
}
76+
77+
const getPaginatedData = () => {
78+
const startIndex = currentPage * dataLimit - dataLimit;
79+
const endIndex = startIndex + dataLimit;
80+
return data.slice(startIndex, endIndex);
81+
};
82+
83+
const getPaginationGroup = () => {
84+
let start = Math.floor((currentPage - 1) / pageLimit) * pageLimit;
85+
return new Array(pageLimit).fill().map((_, idx) => start + idx + 1);
86+
};
87+
88+
function showPaginateNav() {
89+
if (pages <= 1)
90+
return null;
91+
else if (pages > 1)
92+
return (
93+
<div className="grid">
94+
<div />
95+
<div className="pagination">
96+
{/* previous button */}
97+
<button
98+
onClick={goToPreviousPage}
99+
className={`prev ${currentPage === 1 ? 'disabled' : ''}`}
100+
>
101+
Sebelumnya
102+
</button>
103+
104+
{/* show page numbers */}
105+
{getPaginationGroup().map((item, index) => (
106+
<button
107+
key={index}
108+
onClick={changePage}
109+
className={`paginationItem ${currentPage === item ? 'active' : null}`}
110+
>
111+
<span>{item}</span>
112+
</button>
113+
))}
114+
115+
{/* next button */}
116+
<button
117+
onClick={goToNextPage}
118+
className={`next ${currentPage === pages ? 'disabled' : ''}`}
119+
>
120+
Seterusnya
121+
</button>
55122
</div>
123+
<div />
124+
</div>
125+
);
126+
}
127+
128+
return (
129+
<div>
130+
{/* show the ayats, 10 posts at a time */}
131+
<div className="dataContainer">
132+
{getPaginatedData().map((d, idx) => (
133+
<RenderComponent key={idx} data={d} />
56134
))}
57-
</>
135+
</div>
136+
<br /><br />
137+
{showPaginateNav()}
138+
</div>
58139
);
59140
}
141+
142+
function PaginateQuran() {
143+
if (display)
144+
return (
145+
<Pagination
146+
data={quran}
147+
RenderComponent={QuranData}
148+
pageLimit={5}
149+
dataLimit={10}
150+
/>
151+
);
60152
}
61153

62154
return (
@@ -79,8 +171,9 @@ function Quran() {
79171
<h1>Al Quran</h1>
80172
</div>
81173
</div>
82-
<div>{Surah(quran)}</div>
174+
<div>{PaginateQuran()}</div>
83175
{TheIntro()}
176+
<br /><br />
84177
</main>
85178
);
86179
}

0 commit comments

Comments
 (0)