Skip to content

Commit 53cef33

Browse files
author
yaron nachshon
committed
eslint
1 parent 7af1d25 commit 53cef33

File tree

5 files changed

+128
-81
lines changed

5 files changed

+128
-81
lines changed

‎.eslintrc‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": [
3+
"airbnb",
4+
"airbnb/hooks"
5+
],
6+
"rules": {
7+
"eslint-disable react/jsx-filename-extension": 0
8+
}
9+
}

‎components/Player/Player.js‎

Lines changed: 80 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,100 @@
1-
import React, { useState, useEffect } from 'react'
2-
import styles from './Player.module.scss';
1+
/* eslint-disable react/jsx-filename-extension */
2+
/* eslint-disable react/prop-types */
3+
import React, { useState, useEffect, useRef } from 'react';
34
import Button from '@material-ui/core/Button';
45
import ReactAudioPlayer from 'react-audio-player';
5-
const Player = ({ playlist }) => {
6-
const [currentIndex, setCurrentIndex] = useState(-1);
6+
import styles from './Player.module.scss';
77

8-
const startPlay = () => {
8+
const Player = ({ playlist }) => {
9+
const [currentIndex, setCurrentIndex] = useState(-1);
10+
const audioPlayerElement = useRef(null);
911

12+
const onPasukEnd = () => {
13+
if (currentIndex + 1 <= playlist.length - 1) {
14+
setCurrentIndex(currentIndex + 1);
1015
}
16+
};
1117

12-
const onPasukEnd = () => {
13-
if (currentIndex + 1 <= playlist.length - 1) {
14-
setCurrentIndex(currentIndex + 1)
18+
const next = () => {
19+
if (currentIndex + 1 <= playlist.length - 1) {
20+
setCurrentIndex(currentIndex + 1);
21+
}
22+
};
1523

16-
}
24+
const back = () => {
25+
if (currentIndex - 1 >= 0) {
26+
setCurrentIndex(currentIndex - 1);
1727
}
28+
};
1829

19-
const next = () => {
20-
if (currentIndex + 1 <= playlist.length - 1) {
21-
setCurrentIndex(currentIndex + 1)
22-
}
30+
const pause = () => {
31+
if (audioPlayerElement.current) {
32+
audioPlayerElement.current.audioEl.current.pause();
2333
}
34+
};
2435

25-
const back = () => {
26-
if (currentIndex - 1 >= 0) {
27-
setCurrentIndex(currentIndex - 1)
28-
}
36+
const play = () => {
37+
if (audioPlayerElement.current) {
38+
audioPlayerElement.current.audioEl.current.play();
2939
}
40+
};
3041

31-
useEffect(() => {
32-
setCurrentIndex(0)
33-
}, [playlist])
42+
useEffect(() => {
43+
setCurrentIndex(0);
44+
}, [playlist]);
3445

35-
if (currentIndex < 0) {
36-
return null;
37-
}
38-
const currentItem = playlist[currentIndex];
46+
if (currentIndex < 0) {
47+
return null;
48+
}
49+
const currentItem = playlist[currentIndex];
3950

40-
if (!currentItem) {
41-
return null;
42-
}
51+
if (!currentItem) {
52+
return null;
53+
}
4354

44-
return (
45-
<div className={styles.player}>
46-
<div className={styles.image}>
47-
<img src={currentItem.image} />
48-
</div>
49-
<div className={styles.audio}>
50-
<ReactAudioPlayer
51-
src={currentItem.audio}
52-
controls
53-
autoPlay
54-
onEnded={onPasukEnd}
55-
/>
56-
</div>
57-
<div className={styles.caption}>
58-
פסוק{currentIndex + 1} מתוך {playlist.length}
59-
</div>
60-
{<div>
61-
<Button variant="contained" color="primary" onClick={back}>
62-
אחורה
63-
</Button>
55+
return (
56+
<div className={styles.player}>
57+
<div className={styles.image}>
58+
<img src={currentItem.image} />
59+
</div>
60+
<div className={styles.audio}>
61+
<ReactAudioPlayer
62+
ref={audioPlayerElement}
63+
src={currentItem.audio}
64+
controls
65+
autoPlay
66+
onEnded={onPasukEnd}
67+
/>
68+
</div>
69+
<div className={styles.caption}>
70+
פסוק
71+
{currentIndex + 1}
72+
{' '}
73+
מתוך
74+
{' '}
75+
{playlist.length}
76+
</div>
77+
<div>
78+
<Button variant="contained" color="primary" onClick={pause}>
79+
הפסק
80+
</Button>
81+
&#160;
82+
<Button variant="contained" color="primary" onClick={play}>
83+
המשך
84+
</Button>
85+
&#160;
86+
<Button variant="contained" color="primary" onClick={back}>
87+
פסוק אחורה
88+
</Button>
6489
&#160;
6590

66-
<Button variant="contained" color="primary" onClick={next}>
67-
קדימה
68-
</Button>
91+
<Button variant="contained" color="primary" onClick={next}>
92+
פסוק הבא
93+
</Button>
6994

70-
</div>}
71-
</div>)
72-
}
95+
</div>
96+
</div>
97+
);
98+
};
7399

74-
export default Player;
100+
export default Player;

‎components/Player/Player.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
.image {
88
border: solid 1px #CCC;
9-
max-width: 400px;
9+
max-width: 600px;
1010
height: 400px;
1111
// background-color: green;
1212
}

‎components/Search/Search.js‎

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,34 @@
1+
/* eslint-disable react/jsx-filename-extension */
12
/* eslint-disable no-use-before-define */
2-
import React from "react";
3-
import TextField from "@material-ui/core/TextField";
4-
import Autocomplete from "@material-ui/lab/Autocomplete";
5-
import tora from "../../consts/tora.json";
3+
import React from 'react';
4+
import TextField from '@material-ui/core/TextField';
5+
import Autocomplete from '@material-ui/lab/Autocomplete';
6+
import { matchSorter } from 'match-sorter';
7+
import tora from '../../consts/tora.json';
8+
9+
const filterOptions = (options, { inputValue }) => matchSorter(options, inputValue);
610

711
export default function Search({ onChange }) {
8-
return (
9-
<div style={{ width: 300 }} dir="rtl">
10-
<Autocomplete
11-
dir="rtl"
12-
id="free-solo-2-demo"
13-
disableClearable
14-
onChange={onChange}
15-
options={Object.keys(tora.parasha).map((option) => option)}
16-
renderInput={(params) => (
17-
<TextField
18-
dir="rtl"
19-
{...params}
20-
label="חפש פרשה"
21-
margin="normal"
22-
variant="outlined"
23-
InputProps={{ ...params.InputProps, type: "search" }}
24-
/>
25-
)}
26-
/>
27-
</div>
28-
);
12+
return (
13+
<div style={{ width: 300 }} dir="rtl">
14+
<Autocomplete
15+
dir="rtl"
16+
id="free-solo-2-demo"
17+
disableClearable
18+
onChange={onChange}
19+
options={Object.keys(tora.parasha).map((option) => option)}
20+
filterOptions={filterOptions}
21+
renderInput={(params) => (
22+
<TextField
23+
dir="rtl"
24+
{...params}
25+
label="חפש פרשה"
26+
margin="normal"
27+
variant="outlined"
28+
InputProps={{ ...params.InputProps, type: 'search' }}
29+
/>
30+
)}
31+
/>
32+
</div>
33+
);
2934
}

‎package.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"@material-ui/lab": "4.0.0-alpha.56",
1717
"babel-preset-next": "^1.4.0",
1818
"jss-rtl": "^0.3.0",
19+
"match-sorter": "^5.0.0",
1920
"next": "^10.0.3",
2021
"react": "^17.0.1",
2122
"react-audio-player": "^0.14.0",
@@ -24,6 +25,12 @@
2425
"styled-components": "^5.2.1"
2526
},
2627
"devDependencies": {
27-
"babel-plugin-styled-components": "^1.12.0"
28+
"babel-plugin-styled-components": "^1.12.0",
29+
"eslint": "^7.2.0",
30+
"eslint-config-airbnb": "^18.2.1",
31+
"eslint-plugin-import": "^2.22.1",
32+
"eslint-plugin-jsx-a11y": "^6.4.1",
33+
"eslint-plugin-react": "^7.21.5",
34+
"eslint-plugin-react-hooks": "^4.2.0"
2835
}
2936
}

0 commit comments

Comments
 (0)