14 | Take a look at the "Running Locally" section 👇 to get started. 15 | 16 | ## Running Locally 🖥 17 | 1. Follow steps 1 and 2 from [Google's Tutorial](https://firebase.google.com/docs/web/setup). 18 | 2. Set your Firebase config accordingly in the `.env` file. 19 | - If you don't know how to get your Firebase project config, [see this](https://support.google.com/firebase/answer/7015592). 20 | - If you'd like to know more about why all the variables are structured like this `REACT_APP_`, check out [this docuemnt by Facebook](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables). 21 | 3. Download all the dependencies using by running either `$ npm install` or `$ yarn`. 22 | 4. Run the development server on `localhost:3000` by excuting either `$ npm run start` or `$ yarn start`. 23 | 24 | ## Show your support 🥰 25 | Give this project a ⭐️ if you like it! 26 | 27 | ## LICENSE 📝 28 | This project is Licensed under the [GNU General Public License v3.0](https://choosealicense.com/licenses/gpl-3.0/). 29 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "build", 4 | "ignore": [ 5 | "firebase.json", 6 | "**/.*", 7 | "**/node_modules/**" 8 | ], 9 | "rewrites": [ 10 | { 11 | "source": "**", 12 | "destination": "/index.html" 13 | } 14 | ], 15 | "headers": [ 16 | {"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]} 17 | ], 18 | "redirects": [ 19 | { 20 | "source": "/**", 21 | "destination": "https://learn-quran.now.sh", 22 | "type": 301 23 | } 24 | ] 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /now.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "learn-quran", 3 | "version": 2, 4 | "build": { 5 | "env": { 6 | "REACT_APP_API_KEY": "@api_key", 7 | "REACT_APP_AUTH_DOMAIN": "@auth_domain", 8 | "REACT_APP_DATABASE_URL": "@database_url", 9 | "REACT_APP_PROJECT_ID": "@project_id", 10 | "REACT_APP_STORAGE_BUCKET": "@storage_bucket", 11 | "REACT_APP_MESSAGING_SENDER_ID": "@messaging_sender_id", 12 | "REACT_APP_APP_ID": "@app_id" 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "learn-quran", 3 | "version": "0.1.0", 4 | "author": "Mohammad Shbool <@mohshbool> (https://github.com/mohshbool)", 5 | "homepage": "https://learn-quran-remastered.now.sh", 6 | "license": "GPL-3.0", 7 | "scripts": { 8 | "start": "react-scripts start", 9 | "build": "GENERATE_SOURCEMAP=false react-scripts build", 10 | "test": "react-scripts test", 11 | "eject": "react-scripts eject", 12 | "deploy": "yarn build && firebase deploy" 13 | }, 14 | "dependencies": { 15 | "@material-ui/core": "^4.0.2", 16 | "@material-ui/icons": "^4.2.1", 17 | "firebase": "^6.0.4", 18 | "formik": "^1.5.7", 19 | "i18next": "^15.1.3", 20 | "jss": "10.0.0-alpha.16", 21 | "jss-rtl": "^0.2.3", 22 | "moment": "^2.24.0", 23 | "node-sass": "^4.12.0", 24 | "prop-types": "^15.7.2", 25 | "react": "^16.8.6", 26 | "react-audio-player": "^0.11.1", 27 | "react-dom": "^16.8.6", 28 | "react-i18next": "^10.10.0", 29 | "react-lottie": "^1.2.3", 30 | "react-router-dom": "^5.0.0", 31 | "react-scripts": "3.0.1", 32 | "react-spinners": "^0.5.4", 33 | "react-toastify": "^5.1.1", 34 | "yup": "^0.27.0" 35 | }, 36 | "eslintConfig": { 37 | "extends": "react-app" 38 | }, 39 | "browserslist": { 40 | "production": [ 41 | ">0.2%", 42 | "not dead", 43 | "not op_mini all" 44 | ], 45 | "development": [ 46 | "last 1 chrome version", 47 | "last 1 firefox version", 48 | "last 1 safari version" 49 | ] 50 | }, 51 | "devDependencies": { 52 | "eslint-config-prettier": "^4.3.0", 53 | "eslint-plugin-prettier": "^3.1.0", 54 | "prettier": "^1.17.1", 55 | "react-hot-loader": "^4.12.8" 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /public/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learn-quran/web/274f84e7212e90b9ee18406b78b4cc0cb1a2d8c6/public/banner.jpg -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/learn-quran/web/274f84e7212e90b9ee18406b78b4cc0cb1a2d8c6/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
{field}
41 | {fieldValue}
42 |
45 |
66 |
46 | handleKeyPress(e)}
55 | />
56 |
64 |
65 |
13 |
29 | );
30 | };
31 | AfterPlay.propTypes = {
32 | animationData: PropTypes.object,
33 | init: PropTypes.func,
34 | buttonText: PropTypes.string,
35 | };
36 |
37 | export default AfterPlay;
38 |
--------------------------------------------------------------------------------
/src/Components/FAB.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { withRouter } from 'react-router-dom';
3 |
4 | import { Fab, Tooltip, Menu, MenuItem } from '@material-ui/core';
5 | import {
6 | Menu as MenuIcon,
7 | Language,
8 | InsertChartOutlined,
9 | } from '@material-ui/icons';
10 |
11 | import PropTypes from 'prop-types';
12 | import { withFirebase } from '../Firebase';
13 | import { useTranslation } from 'react-i18next';
14 | import Account from './Account';
15 |
16 | const FAB = ({ firebase, history, user }) => {
17 | const [isOpen, changeIsOpen] = useState(false);
18 | const [menu, setMenu] = useState(null);
19 | const { t, i18n } = useTranslation();
20 | const handleClick = e => setMenu(e.currentTarget);
21 | const handleClose = () => setMenu(null);
22 | const handleLanguageChange = language => {
23 | if ((localStorage.getItem('language') || 'en') !== language) {
24 | i18n.changeLanguage(language).then(() => {
25 | localStorage.setItem('language', language);
26 | handleClose();
27 | if (firebase.isLoggedIn) {
28 | firebase
29 | .updateUserOnDB({ language })
30 | .then(() => {
31 | window.location.reload();
32 | })
33 | .catch(() => {});
34 | } else {
35 | window.location.reload();
36 | }
37 | });
38 | }
39 | };
40 | const userStatus = user ? 'signed-in' : 'not-signed-in';
41 | return (
42 |
14 |
21 |
28 |
43 |
44 | changeIsOpen(!isOpen)}>
49 |
51 |
52 |
88 | );
89 | };
90 | FAB.propTypes = {
91 | firebase: PropTypes.object,
92 | history: PropTypes.object,
93 | user: PropTypes.object,
94 | };
95 |
96 | export default withRouter(withFirebase(FAB));
97 |
--------------------------------------------------------------------------------
/src/Components/InputDialog.js:
--------------------------------------------------------------------------------
1 | import React, { useState, Fragment } from 'react';
2 | import PropTypes from 'prop-types';
3 | import {
4 | Dialog,
5 | DialogActions,
6 | DialogContent,
7 | DialogContentText,
8 | DialogTitle,
9 | TextField,
10 | Button,
11 | Icon,
12 | } from '@material-ui/core';
13 |
14 | const PasswordInputDialog = ({
15 | title,
16 | variant,
17 | headerText,
18 | label,
19 | textFieldType,
20 | initialValue,
21 | submitButtonText,
22 | onSubmit,
23 | isSubmitting,
24 | }) => {
25 | const [open, setOpen] = useState(false);
26 | const [value, setValue] = useState('');
27 |
28 | const handleClickOpen = () => {
29 | setOpen(true);
30 | setValue(initialValue || '');
31 | };
32 | const handleClose = () => setOpen(false);
33 | const handleChange = ({ target }) => setValue(target.value);
34 | const handleSubmit = () => {
35 | onSubmit(value, handleClose);
36 | setValue('');
37 | };
38 | const handleKeyPress = ({ keyCode, charCode }) => {
39 | if (keyCode === 13 || charCode === 13) {
40 | onSubmit(value, handleClose);
41 | }
42 | };
43 |
44 | return (
45 |
53 |
54 |
55 |
60 |
62 |
63 |
75 |
76 |
77 | history.push('/leaderboard')}>
82 |
84 |
85 | {!!user &&
87 |
20 |
89 | );
90 | };
91 | Login.propTypes = {
92 | firebase: PropTypes.object,
93 | history: PropTypes.object,
94 | };
95 |
96 | export default Landing;
97 |
--------------------------------------------------------------------------------
/src/Containers/Leaderboard.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withRouter } from 'react-router-dom';
4 | import { ScaleLoader } from 'react-spinners';
5 |
6 | import {
7 | Table,
8 | TableHead,
9 | TableBody,
10 | TableRow,
11 | TableCell,
12 | Tooltip,
13 | Fab,
14 | } from '@material-ui/core';
15 | import { Home } from '@material-ui/icons';
16 |
17 | import * as moment from 'moment';
18 | import 'moment/locale/ar';
19 |
20 | import { withTranslation } from 'react-i18next';
21 | import { withFirebase } from '../Firebase';
22 | import { objectToArray } from '../Helpers';
23 |
24 | import '../Assets/StyleSheets/Leaderboard.scss';
25 |
26 | class Leaderboard extends React.Component {
27 | constructor(props) {
28 | super(props);
29 | this.state = {
30 | users: [],
31 | currentUser: {},
32 | };
33 | }
34 | componentDidMount() {
35 | document.title = this.props.t('leaderboard');
36 | this._mounted = true;
37 | const { firebase } = this.props;
38 | firebase
39 | .getLeaderboard()
40 | .then(
41 | users =>
42 | this._mounted && this.setState({ users: objectToArray(users) }),
43 | );
44 | firebase
45 | .getUser()
46 | .then(currentUser => this._mounted && this.setState({ currentUser }))
47 | .catch(() => {});
48 | }
49 | componentWillUnmount() {
50 | this._mounted = false;
51 | }
52 | render() {
53 | const { users, currentUser } = this.state;
54 | const { t } = this.props;
55 | return users.length === 0 ? (
56 |
21 | {!!navigator.userAgent.match(/android/i) && (
22 |
72 |
23 |
37 |
38 | )}
39 |
40 | 
41 |
42 |
43 |
71 |
44 | {`${t('learn-quran')} `}
45 | {`${t(
46 | 'is-a-hybrid-platform-for-testing-your-knowledge-in-the-holy-quran',
47 | )}!`}
48 |
49 |
50 |
70 |
51 |
60 |
52 | {`${t('how-to-play')} `}
53 |
54 | 🎮
55 |
56 |
57 | {`${t('landing-page-how-to-play-paragprah')} `}
58 | ~(^-^)~
59 |
61 |
69 |
62 | {`${t('inspiration')} `}
63 |
64 | ✨
65 |
66 |
67 | {t('landing-page-inspiration-paragprah')}
68 |
73 | {isLogin ? (
74 |
87 |
59 |
92 | this.props.history.push('/')}>
97 |
99 |
100 |
101 | );
102 | }
103 | }
104 | Leaderboard.propTypes = {
105 | firebase: PropTypes.object,
106 | t: PropTypes.func,
107 | history: PropTypes.object,
108 | };
109 |
110 | export default withRouter(withTranslation()(withFirebase(Leaderboard)));
111 |
--------------------------------------------------------------------------------
/src/Containers/MonitorConnection.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Lottie from 'react-lottie';
3 | import PropTypes from 'prop-types';
4 |
5 | import {
6 | noConnection as noConnectionAnimation,
7 | connecting,
8 | } from '../Assets/Animations';
9 |
10 | const MonitorConnection = ({ noConnection, loading, children }) => {
11 | return noConnection ? (
12 |
60 |
61 |
88 |
89 |
13 |
23 | ) : loading ? (
24 |
14 |
22 |
25 |
35 | ) : (
36 | children
37 | );
38 | };
39 | MonitorConnection.propTypes = {
40 | noConnection: PropTypes.bool,
41 | loading: PropTypes.bool,
42 | children: PropTypes.node,
43 | };
44 |
45 | export default MonitorConnection;
46 |
--------------------------------------------------------------------------------
/src/Containers/Player.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import * as moment from 'moment';
3 | import PropTypes from 'prop-types';
4 | import ReactAudioPlayer from 'react-audio-player';
5 | import { toast } from 'react-toastify';
6 | import { Button, Grid, Slider, IconButton, Tooltip } from '@material-ui/core';
7 | import { VolumeDown, VolumeUp, Refresh } from '@material-ui/icons';
8 |
9 | import {
10 | getRandomDatom,
11 | getRandomAsset,
12 | getFourRandomDatoms,
13 | } from '../Assets/Audio';
14 | import { onWin, onLose } from '../Assets/Animations';
15 |
16 | import '../Assets/StyleSheets/Player.scss';
17 | import { withTranslation } from 'react-i18next';
18 | import { withFirebase } from '../Firebase';
19 | import AfterPlay from '../Components/AfterPlay';
20 |
21 | class Player extends React.Component {
22 | static propTypes = {
23 | firebase: PropTypes.object,
24 | t: PropTypes.func,
25 | };
26 |
27 | constructor() {
28 | super();
29 | this.state = {
30 | url: '',
31 | volume: 0.5,
32 | won: false,
33 | lost: false,
34 | user: {},
35 | };
36 | this.initalize();
37 | }
38 |
39 | componentDidMount() {
40 | this.getAsset();
41 | this.persistUserInfo();
42 | }
43 |
44 | getAsset = () => {
45 | this.props.firebase
46 | .getAsset(getRandomAsset(this.datom))
47 | .then(url => this.setState({ url }))
48 | .catch(() => {
49 | toast.error(
50 | this.props.t(
51 | 'something-went-wrong-please-close-the-tab-and-try-again',
52 | ),
53 | );
54 | });
55 | };
56 | persistUserInfo = () => {
57 | const { firebase, t } = this.props;
58 | firebase
59 | .getUser()
60 | .then(user => {
61 | this.setState({ user: { ...user } });
62 | })
63 | .catch(() => {
64 | toast.error(
65 | t('something-went-wrong-please-close-the-tab-and-try-again'),
66 | );
67 | });
68 | };
69 | initalize = (reset = false) => {
70 | this.datom = getRandomDatom();
71 | this.datoms = getFourRandomDatoms(this.datom);
72 | this.points = 3;
73 | if (reset) {
74 | this.setState({
75 | url: '',
76 | won: false,
77 | lost: false,
78 | });
79 | this.getAsset();
80 | }
81 | };
82 |
83 | handleResetClick = () => {
84 | const el = this.audioComponent.audioEl;
85 | el.pause();
86 | el.currentTime = 0;
87 | el.play();
88 | };
89 | handleVolumeChange = (_, volume) => this.setState({ volume });
90 | handleAnswerClick = index => {
91 | const { t, firebase } = this.props;
92 | if (this.datoms[index].index === this.datom.index) {
93 | this.setState({
94 | won: true,
95 | });
96 | this.audioComponent.audioEl.pause();
97 | firebase
98 | .updateUserPoints(this.points)
99 | .then(() => {
100 | toast.success(
101 | t('congratulations-you-earned-n-points', { points: this.points }),
102 | );
103 | this.persistUserInfo();
104 | })
105 | .catch(() => {
106 | toast.error(
107 | t(
108 | 'there-was-an-error-adding-your-points-please-contact-us-to-fix-it',
109 | ),
110 | );
111 | });
112 | } else {
113 | toast.warn(t('try-again'));
114 | this.datoms[index].disabled = true;
115 | this.points -= 1;
116 | if (this.points === 0) {
117 | this.setState({ lost: true });
118 | this.audioComponent.audioEl.pause();
119 | } else {
120 | this.forceUpdate();
121 | }
122 | }
123 | firebase.updateUserLastPlayed(
124 | moment()
125 | .locale('en')
126 | .format(),
127 | );
128 | };
129 |
130 | render() {
131 | const { volume, url, lost, won, user } = this.state;
132 | const { t } = this.props;
133 | return (
134 |
26 |
34 |
135 | {!!user.uid && (
136 |
155 |
159 |
163 |
165 |
166 |
167 |
168 |
170 |
171 |
180 |
181 |
183 |
184 |
223 | )}
224 | (this.audioComponent = o)}
229 | />
230 |
231 | );
232 | }
233 | }
234 |
235 | export default withTranslation()(withFirebase(Player));
236 |
--------------------------------------------------------------------------------
/src/Containers/PrivacyPolicy.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import { withTranslation } from 'react-i18next';
5 |
6 | import '../Assets/StyleSheets/PrivacyPolicy.scss';
7 |
8 | const PrivacyPolicy = ({ t }) => (
9 |
137 |
140 | )}
141 | {lost ? (
142 | {t('your-points')}
138 | {user.points}
139 |
156 | {t('please-click-the-button-below-if-no-audio-is-playing')}
157 |
158 |
185 |
222 |
186 |
194 |
202 |
203 |
204 |
212 |
220 |
221 |
10 |
160 | );
161 | PrivacyPolicy.propTypes = {
162 | t: PropTypes.func,
163 | };
164 |
165 | export default withTranslation()(PrivacyPolicy);
166 |
--------------------------------------------------------------------------------
/src/Firebase.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/display-name */
2 | import React from 'react';
3 | import app from 'firebase/app';
4 | import moment from 'moment';
5 |
6 | // Firebase dependencies
7 | import 'firebase/auth';
8 | import 'firebase/database';
9 | import 'firebase/storage';
10 |
11 | const config = {
12 | apiKey: process.env.REACT_APP_API_KEY,
13 | authDomain: process.env.REACT_APP_AUTH_DOMAIN,
14 | databaseURL: process.env.REACT_APP_DATABASE_URL,
15 | projectId: process.env.REACT_APP_PROJECT_ID,
16 | storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
17 | messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
18 | appId: process.env.REACT_APP_APP_ID,
19 | };
20 |
21 | class Firebase {
22 | constructor() {
23 | app.initializeApp(config);
24 |
25 | this.auth = app.auth;
26 | this.database = app.database();
27 | this.storage = app.storage;
28 | this.isLoggedIn = false;
29 | }
30 |
31 | errors = [
32 | 'check-your-internet-connection',
33 | 'auth/email-already-in-use',
34 | 'auth/user-disabled',
35 | 'auth/user-not-found',
36 | 'auth/wrong-password',
37 | 'auth/email-already-in-use',
38 | 'auth/invalid-email',
39 | 'auth/weak-password',
40 | 'username-already-exists',
41 | 'an-error-occured-please-try-again-later',
42 | 'auth/requires-recent-login',
43 | 'auth/user-mismatch',
44 | 'auth/user-not-found',
45 | 'auth/invalid-credential',
46 | ];
47 |
48 | getErrorMessage = code =>
49 | this.errors.includes(code) ? code : 'check-your-internet-connection';
50 |
51 | signIn = ({ email, password }) =>
52 | new Promise((resovle, reject) => {
53 | this.auth()
54 | .signInWithEmailAndPassword(email, password)
55 | .then(() => resovle())
56 | .catch(({ code, message }) => {
57 | reject(this.getErrorMessage(code) || message);
58 | });
59 | });
60 | createUser = ({ email, password, username, language }) =>
61 | new Promise((resolve, reject) => {
62 | this.isUsernameDuplicated(username)
63 | .then(() => {
64 | this.auth()
65 | .createUserWithEmailAndPassword(email, password)
66 | .then(({ user }) => {
67 | if (user && user.uid) {
68 | let updates = {};
69 | updates['users/private/' + user.uid] = {
70 | uid: user.uid,
71 | email: email,
72 | language: language,
73 | username: username,
74 | points: 0,
75 | lastPlayed: 'never-played',
76 | createdAt: moment()
77 | .locale('en')
78 | .format(),
79 | };
80 | updates['users/public/' + user.uid] = {
81 | username: username,
82 | points: 0,
83 | lastPlayed: 'never-played',
84 | };
85 | this.database.ref().update(updates);
86 | resolve();
87 | }
88 | })
89 | .catch(({ code, message }) => {
90 | reject(this.getErrorMessage(code) || message);
91 | });
92 | })
93 | .catch(err => reject(err));
94 | });
95 | resetPassword = (email, lang) =>
96 | new Promise((resolve, reject) => {
97 | const auth = this.auth();
98 | auth.languageCode = lang;
99 | auth
100 | .sendPasswordResetEmail(email)
101 | .then(() => resolve())
102 | .catch(error => reject(error.message));
103 | });
104 | getUser = () =>
105 | new Promise((resolve, reject) => {
106 | this.database
107 | .ref(`users/private/${this.auth().currentUser.uid}`)
108 | .once('value')
109 | .then(snapshot => {
110 | resolve(snapshot.val());
111 | })
112 | .catch(error => reject(error.message));
113 | });
114 | isUsernameDuplicated = username =>
115 | new Promise((resolve, reject) => {
116 | this.database
117 | .ref('users/public')
118 | .orderByChild('username')
119 | .equalTo(username)
120 | .once('value')
121 | .then(snapshot => {
122 | if (snapshot.val()) {
123 | reject('username-already-exists');
124 | } else {
125 | resolve();
126 | }
127 | })
128 | .catch(({ code, message }) => {
129 | reject(this.getErrorMessage(code) || message);
130 | });
131 | });
132 | getLeaderboard = () =>
133 | new Promise((resolve, reject) => {
134 | this.database
135 | .ref('users/public')
136 | .orderByChild('points')
137 | .once('value')
138 | .then(snapshot => {
139 | resolve(snapshot.val());
140 | });
141 | });
142 | updateUserOnDB = (_updates, _public = false, _private = true) =>
143 | new Promise((resolve, reject) => {
144 | if (!_public && !_private) return;
145 | const { uid } = this.auth().currentUser;
146 | const promises = [];
147 | if (_public)
148 | promises.push(
149 | this.database.ref(`users/public/${uid}`).update(_updates),
150 | );
151 | if (_private)
152 | promises.push(
153 | this.database.ref(`users/private/${uid}`).update(_updates),
154 | );
155 | Promise.all(promises)
156 | .then(() => resolve())
157 | .catch(() => reject('an-error-occured-please-try-again-later'));
158 | });
159 | updateUserEmail = email =>
160 | new Promise((resolve, reject) => {
161 | this.auth()
162 | .currentUser.updateEmail(email)
163 | .then(() => this.updateUserOnDB({ email }).then(() => resolve()))
164 | .catch(({ code, message }) => {
165 | reject(this.getErrorMessage(code) || message);
166 | });
167 | });
168 | updateUserPassword = password =>
169 | new Promise((resolve, reject) => {
170 | this.auth()
171 | .currentUser.updatePassword(password)
172 | .then(() => resolve())
173 | .catch(({ code, message }) => {
174 | reject(this.getErrorMessage(code) || message);
175 | });
176 | });
177 | reauthenticate = password =>
178 | new Promise((resolve, reject) => {
179 | const user = this.auth().currentUser;
180 | const credintial = this.auth.EmailAuthProvider.credential(
181 | user.email,
182 | password,
183 | );
184 | user
185 | .reauthenticateWithCredential(credintial)
186 | .then(() => resolve())
187 | .catch(({ code, message }) => {
188 | reject(this.getErrorMessage(code) || message);
189 | });
190 | });
191 | getAsset = assetId =>
192 | new Promise((resolve, reject) => {
193 | this.storage()
194 | .ref(`audio/${assetId}.mp3`)
195 | .getDownloadURL()
196 | .then(url => resolve(url))
197 | .catch(({ code, message }) => {
198 | reject(this.getErrorMessage(code) || message);
199 | });
200 | });
201 | updateUserPoints = newPoints =>
202 | new Promise((resolve, reject) => {
203 | this.getUser()
204 | .then(({ points }) => {
205 | this.updateUserOnDB({ points: points + newPoints }, true)
206 | .then(() => resolve())
207 | .catch(() => reject());
208 | })
209 | .catch(() => reject());
210 | });
211 | updateUserLastPlayed = lastPlayed =>
212 | new Promise(() => {
213 | this.getUser()
214 | .then(({ points }) => {
215 | this.updateUserOnDB({ lastPlayed }, true)
216 | .then(() => {})
217 | .catch(() => {});
218 | })
219 | .catch(() => {});
220 | });
221 | }
222 |
223 | const FirebaseContext = React.createContext(null);
224 |
225 | const withFirebase = Component => props => (
226 | Privacy Policy
11 |12 | Mohammad Shbool built the Learn Quran app as an Open Source app. This 13 | SERVICE is provided by Mohammad Shbool at no cost and is intended for use 14 | as is. 15 |
16 |17 | This page is used to inform visitors regarding my policies with the 18 | collection, use, and disclosure of Personal Information if anyone decided 19 | to use my Service. 20 |
21 |22 | If you choose to use my Service, then you agree to the collection and use 23 | of information in relation to this policy. The Personal Information that I 24 | collect is used for providing and improving the Service. I will not use or 25 | share your information with anyone except as described in this Privacy 26 | Policy. 27 |
28 |29 | The terms used in this Privacy Policy have the same meanings as in our 30 | Terms and Conditions, which is accessible at Learn Quran unless otherwise 31 | defined in this Privacy Policy. 32 |
33 |34 | Information Collection and Use 35 |
36 |37 | For a better experience, while using our Service, I may require you to 38 | provide us with certain personally identifiable information, including but 39 | not limited to email, username. The information that I request will be 40 | retained on your device and is not collected by me in any way. 41 |
42 |43 | The app does use third party services that may collect information used to 44 | identify you. 45 |
46 |
47 |
51 | 48 | Link to privacy policy of third party service providers used by the app 49 |
50 |52 | Log Data 53 |
54 |55 | I want to inform you that whenever you use my Service, in a case of an 56 | error in the app I collect data and information (through third party 57 | products) on your phone called Log Data. This Log Data may include 58 | information such as your device Internet Protocol (“IP”) address, device 59 | name, operating system version, the configuration of the app when 60 | utilizing my Service, the time and date of your use of the Service, and 61 | other statistics. 62 |
63 |64 | Cookies 65 |
66 |67 | Cookies are files with a small amount of data that are commonly used as 68 | anonymous unique identifiers. These are sent to your browser from the 69 | websites that you visit and are stored on your device's internal 70 | memory. 71 |
72 |73 | This Service does not use these “cookies” explicitly. However, the app may 74 | use third party code and libraries that use “cookies” to collect 75 | information and improve their services. You have the option to either 76 | accept or refuse these cookies and know when a cookie is being sent to 77 | your device. If you choose to refuse our cookies, you may not be able to 78 | use some portions of this Service. 79 |
80 |81 | Service Providers 82 |
83 |84 | I may employ third-party companies and individuals due to the following 85 | reasons: 86 |
87 |-
88 |
- To facilitate our Service; 89 |
- To provide the Service on our behalf; 90 |
- To perform Service-related services; or 91 |
- To assist us in analyzing how our Service is used. 92 |
94 | I want to inform users of this Service that these third parties have 95 | access to your Personal Information. The reason is to perform the tasks 96 | assigned to them on our behalf. However, they are obligated not to 97 | disclose or use the information for any other purpose. 98 |
99 |100 | Security 101 |
102 |103 | I value your trust in providing us your Personal Information, thus we are 104 | striving to use commercially acceptable means of protecting it. But 105 | remember that no method of transmission over the internet, or method of 106 | electronic storage is 100% secure and reliable, and I cannot guarantee its 107 | absolute security. 108 |
109 |110 | Links to Other Sites 111 |
112 |113 | This Service may contain links to other sites. If you click on a 114 | third-party link, you will be directed to that site. Note that these 115 | external sites are not operated by me. Therefore, I strongly advise you to 116 | review the Privacy Policy of these websites. I have no control over and 117 | assume no responsibility for the content, privacy policies, or practices 118 | of any third-party sites or services. 119 |
120 |121 | Children’s Privacy 122 |
123 |124 | These Services do not address anyone under the age of 13. I do not 125 | knowingly collect personally identifiable information from children under 126 | 13. In the case I discover that a child under 13 has provided me with 127 | personal information, I immediately delete this from our servers. If you 128 | are a parent or guardian and you are aware that your child has provided us 129 | with personal information, please contact me so that I will be able to do 130 | necessary actions. 131 |
132 |133 | Changes to This Privacy Policy 134 |
135 |136 | I may update our Privacy Policy from time to time. Thus, you are advised 137 | to review this page periodically for any changes. I will notify you of any 138 | changes by posting the new Privacy Policy on this page. These changes are 139 | effective immediately after they are posted on this page. 140 |
141 |142 | Contact Us 143 |
144 |145 | If you have any questions or suggestions about my Privacy Policy, do not 146 | hesitate to contact me at 147 | 148 | contactus.learnquran@gmail.com 149 | 150 |
151 |152 | 153 | This Privacy Policy was originally generated by 154 | 155 | www.spanprivacypolicytemplate.net 156 | 157 | 158 |
159 |