Skip to content

Commit 5235e8e

Browse files
c4lyp5oc4lyp5o
committed
converted cpray app to react js
1 parent a8abc51 commit 5235e8e

File tree

15 files changed

+227
-153
lines changed

15 files changed

+227
-153
lines changed

‎src/App.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
22
import Layout from "./pages/Layout";
33
import Home from "./pages/Home";
44
import Quran from "./pages/Quran";
5+
import Hadith from "./pages/Hadith";
56
import Contact from "./pages/Contact";
67
import Fourohfour from "./pages/404";
78

@@ -12,6 +13,7 @@ function App () {
1213
<Route path="/" element={<Layout />}>
1314
<Route index element={<Home />} />
1415
<Route path="quran" element={<Quran />} />
16+
<Route path="hadith" element={<Hadith />} />
1517
<Route path="contact" element={<Contact />} />
1618
<Route path="*" element={<Fourohfour />} />
1719
</Route>

‎src/pages/404.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
1-
const NoPage = () => {
2-
return <h1>404</h1>;
3-
};
1+
import { useEffect } from 'react';
2+
3+
function NoPage() {
4+
5+
useEffect(() => { document.title = "404" }, []);
6+
7+
return (
8+
<main className="container">
9+
<br /><br /><br />
10+
<h1 class='centered'>Maaf, laman yang anda minta tidak wujud</h1>
11+
</main>
12+
);
13+
}
414

515
export default NoPage;

‎src/pages/Contact.js‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
1-
const Contact = () => {
2-
return (
3-
<main className="container">
4-
<h1>Contact</h1>
5-
<br />
6-
<p>Reach us:</p><a href='https://github.com/c4lyp5o'>@c4lyp5o</a>
7-
</main>
8-
)
9-
};
1+
import { useEffect } from 'react';
2+
3+
function Contact() {
4+
5+
useEffect(() => { document.title = "Contact Us" }, []);
6+
7+
return (
8+
<main className="container">
9+
<div className='centered'>
10+
<h1>Contact</h1>
11+
<br />
12+
<p>Reach us:</p><a href='https://github.com/c4lyp5o'>@c4lyp5o</a>
13+
</div>
14+
</main>
15+
);
16+
}
1017

1118
export default Contact;

‎src/pages/Hadith.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import { useState, useEffect } from 'react';
2+
import { getTheKeetab, giveTheKeetab } from './getTimes';
3+
4+
function Hadith() {
5+
6+
const [intro, setIntro] = useState(true);
7+
const [hadith, setHadith] = useState([]);
8+
const [search, setSearch] = useState("");
9+
const [keetab, setKeetab] = useState([]);
10+
const [display, setDisplay] = useState(false);
11+
12+
useEffect(() => { document.title = "Hadith" }, []);
13+
14+
function TheIntro() {
15+
if (intro === true) {
16+
return (
17+
<p>Assalamualaikum</p>
18+
);
19+
}
20+
}
21+
22+
async function handleSubmit(event) {
23+
event.preventDefault();
24+
await giveTheKeetab(search).then(data => {
25+
setDisplay(true);
26+
setIntro(false);
27+
setHadith(data);
28+
});
29+
}
30+
31+
async function handleClick(event) {
32+
if (keetab.length > 5) {
33+
setSearch(event.target.value);
34+
return;
35+
} else if (keetab.length === 0) {
36+
await getTheKeetab().then(data => {
37+
setKeetab(data);
38+
setSearch(event.target.value);
39+
});
40+
}
41+
}
42+
43+
function HadithPage() {
44+
if (display) {
45+
return (
46+
<>
47+
{hadith.map((hadis, index) => (
48+
<div className='quranAyats' key={index}>
49+
<h3 className='hadis'>{hadis.arab}</h3>
50+
<p>{hadis.id}</p>
51+
<br />
52+
</div>
53+
))}
54+
</>
55+
);
56+
}
57+
}
58+
59+
return (
60+
<main className="container">
61+
<div className="grid">
62+
<div>
63+
<form onSubmit={handleSubmit}>
64+
<select onClick={handleClick} id="keetab" required="" name="keetab">
65+
<option value="">Sila pilih kitab...</option>
66+
{keetab.map((solkeetab) => (
67+
<option key={solkeetab.id} value={solkeetab.id}>{solkeetab.name}</option>
68+
))}
69+
</select>
70+
<button type="submit" value="Submit">Pilih</button>
71+
</form>
72+
</div>
73+
<div />
74+
<div />
75+
<div>
76+
<h1>Hadith</h1>
77+
</div>
78+
</div>
79+
{HadithPage(keetab)}
80+
{TheIntro()}
81+
</main>
82+
);
83+
}
84+
85+
export default Hadith;

‎src/pages/Home.js‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,40 @@
1-
import { useState } from "react";
1+
import { useState, useEffect } from "react";
22
import { getTimes, timeCruncher, zoneDeterminer } from "./getTimes";
33

44
function Home() {
55

6+
const [click, setClick] = useState(false);
67
const [search, setSearch] = useState("");
78
const [times, setTimes] = useState([]);
89
const [zone, setZone] = useState("");
910
const [display, setDisplay] = useState(false);
1011
const [intro, setIntro] = useState(true);
1112

13+
useEffect(() => { document.title = "Waktu Solat" }, []);
14+
1215
async function handleSubmit(event) {
1316
event.preventDefault();
1417
await getTimes(search).then(data => {
1518
setZone(zoneDeterminer(search));
1619
setDisplay(true);
1720
setIntro(false);
18-
setTimes(timeCruncher(data));
21+
if (click === false) {
22+
setTimes(timeCruncher(data));
23+
setClick(true);
24+
} else if (click === true) {
25+
return;
26+
}
1927
});
2028
}
2129

30+
async function handleChange(event) {
31+
setSearch(event.target.value);
32+
}
33+
2234
function TheIntro() {
2335
if (intro === true) {
2436
return (
25-
<p1>Assalamualaikum</p1>
37+
<p>Assalamualaikum</p>
2638
);
2739
}
2840
}
@@ -31,7 +43,7 @@ function Home() {
3143
if (display) {
3244
return (
3345
<>
34-
<div class='zoneName'>
46+
<div className='centered'>
3547
<h1>{zone}</h1>
3648
</div>
3749
<table>
@@ -66,10 +78,10 @@ function Home() {
6678

6779
return (
6880
<main className="container">
69-
<div class="grid">
81+
<div className="grid">
7082
<div>
7183
<form onSubmit={handleSubmit}>
72-
<select onChange={(e) => setSearch(e.target.value)} id="zone" required="" name="zone">
84+
<select onChange={handleChange} id="zone" required="" name="zone">
7385
<option value="">Sila pilih zon...</option>
7486
<optgroup label="Kedah">
7587
<option value="kdh01">KOTA SETAR, POKOK SENA DAN KUBANG PASU</option>
@@ -167,7 +179,7 @@ function Home() {
167179
<h1>Waktu Solat</h1>
168180
</div>
169181
</div>
170-
<p>{TheIntro()}</p>
182+
{TheIntro()}
171183
{displayTimes(times)}
172184
</main>
173185
);

‎src/pages/Layout.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ const Layout = () => {
1414
<li>
1515
<Link to="/quran">Quran</Link>
1616
</li>
17+
<li>
18+
<Link to="/hadith">Hadith</Link>
19+
</li>
1720
<li>
1821
<Link to="/contact">Contact</Link>
1922
</li>

‎src/pages/Quran.js‎

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

44
function Quran() {
55

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

12-
const TheIntro = () => {
13+
useEffect(() => { document.title = "Al-Quran" }, []);
14+
15+
function TheIntro() {
1316
if (intro === true) {
1417
return (
15-
<p1>Assalamualaikum</p1>
18+
<p>Assalamualaikum</p>
1619
);
1720
}
1821
}
1922

2023
async function handleSubmit(event) {
2124
event.preventDefault();
25+
await giveQuranAudio(search).then(data => { setAudio(data) });
2226
await giveTheQuran(search).then(data => {
2327
setDisplay(true);
2428
setIntro(false);
@@ -31,9 +35,9 @@ function Quran() {
3135
setSearch(event.target.value);
3236
return;
3337
} else if (surah.length === 0) {
34-
setSearch(event.target.value);
3538
await getTheQuran().then(data => {
3639
setSurah(data);
40+
setSearch(event.target.value);
3741
});
3842
}
3943
}
@@ -43,9 +47,10 @@ function Quran() {
4347
return (
4448
<>
4549
{quran.map((ayats, index) => (
46-
<div class='quranAyats' key={index}>
47-
<h3 class='arabic'>{ayats.text}</h3>
50+
<div className='quranAyats' key={index}>
51+
<h3 className='quranic'>{ayats.text} ({index + 1})</h3>
4852
<p>{ayats.translation}</p>
53+
<audio key={index} controls><source src={audio[index].audio.primary} /></audio>
4954
<br />
5055
</div>
5156
))}
@@ -56,13 +61,13 @@ function Quran() {
5661

5762
return (
5863
<main className="container">
59-
<div class="grid">
64+
<div className="grid">
6065
<div>
6166
<form onSubmit={handleSubmit}>
6267
<select onClick={handleClick} id="surah" required="" name="surah">
6368
<option value="">Sila pilih surah...</option>
6469
{surah.map((thesurah, index) => (
65-
<option key={index} value={index}>{thesurah}</option>
70+
<option key={index} value={index}>{thesurah.transliteration}</option>
6671
))}
6772
</select>
6873
<button type="submit" value="Submit">Pilih</button>
@@ -74,7 +79,7 @@ function Quran() {
7479
<h1>Al Quran</h1>
7580
</div>
7681
</div>
77-
{Surah(quran)}
82+
<div>{Surah(quran)}</div>
7883
{TheIntro()}
7984
</main>
8085
);

‎src/pages/css/custom.css‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,39 @@
11
@font-face {
2-
font-family: 'Amiri';
3-
src: local('Amiri-Regular'), url(./fonts/Amiri-Regular.ttf) format('truetype');
4-
src: local('Amiri-Bold'), url(./fonts/Amiri-Bold.ttf) format('truetype');
5-
src: local('Amiri-Italic'), url(./fonts/Amiri-Italic.ttf) format('truetype');
6-
src: local('Amiri-BoldItalic'), url(./fonts/Amiri-BoldItalic.ttf) format('truetype');
7-
font-weight: normal;
2+
font-family: 'Uthmanic';
3+
src: local('Uthmanic Script'), url(./fonts/KFGQPC-Uthmanic-Script-HAFS-Regular.otf) format('opentype');
84
font-style: normal;
9-
/* font-display: swap; */
10-
/* other formats include: 'woff2', 'truetype, 'opentype',
11-
'embedded-opentype', and 'svg' */
12-
}
5+
font-display: swap;
6+
}
137

14-
.zoneName {
8+
.centered {
159
text-align: center;
1610
}
1711

1812
.quranAyats {
1913
text-align: center;
2014
}
2115

22-
.arabic {
23-
font-size: normal;
24-
font-family: 'Amiri', serif;
25-
word-spacing: 0em;
26-
}
16+
.quranic {
17+
/* position: relative; */
18+
/* top: -6px; */
19+
font-weight: 50;
20+
font-family: 'Uthmanic';
21+
font-size: 35pt;
22+
line-height: 3;
23+
display: inline-block;
24+
vertical-align: top;
25+
word-spacing: normal;
26+
}
27+
28+
.hadis {
29+
/* position: relative; */
30+
/* top: -6px; */
31+
font-weight: 50;
32+
font-family: 'Uthmanic';
33+
font-size: 25pt;
34+
line-height: 1.75;
35+
display: inline-block;
36+
vertical-align: top;
37+
word-spacing: normal;
38+
}
39+

‎src/pages/css/fonts/Amiri-Bold.ttf‎

-519 KB
Binary file not shown.

‎src/pages/css/fonts/Amiri-BoldItalic.ttf‎

-519 KB
Binary file not shown.

0 commit comments

Comments
 (0)