Skip to content

Commit 7f8905f

Browse files
afk-marioafk-mario
committed
Add sorting buttons
- Add sorting buttons functionallity - Add web-ext config
1 parent ded26ba commit 7f8905f

17 files changed

+253
-43
lines changed

‎.eslintrc.js

+7
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,11 @@ module.exports = {
1313
Headers: true,
1414
location: true,
1515
},
16+
settings: {
17+
'import/resolver': {
18+
webpack: {
19+
config: 'webpack.config.js',
20+
},
21+
},
22+
},
1623
};

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -112,3 +112,4 @@ key.pem
112112

113113
web-ext-artifacts
114114
dist
115+
.tern*

‎CHANGELOG.md

+3
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
55
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
66

77
## [Unreleased]
8+
### Added
9+
- Buttons for changing the order of the search results
10+
- Add web-ext config file for easier build toolchain
811

912
## [1.2.1] - 2019-02-18
1013
### Added

‎package.json

+15-10
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,25 @@
44
"description": "busca.afk extension to search links on reddit or more",
55
"main": "js/script.js",
66
"scripts": {
7-
"start":
8-
"web-ext run -s dist --browser-console --firefox=firefox-developer-edition --verbose --pre-install",
9-
"start:macos":
10-
"web-ext run -s dist --browser-console -p default --firefox=/Applications/FirefoxDeveloperEdition.app/Contents/MacOS/firefox-bin --pre-install",
11-
"test": "eslint src/**/*.js && web-ext lint -s dist",
7+
"start": "web-ext run",
8+
"start:macos": "web-ext run -p default --firefox=/Applications/FirefoxDeveloperEdition.app/Contents/MacOS/firefox-bin",
9+
"lint": "eslint src/**/*.js",
10+
"lint:web": "web-ext lint",
1211
"build": "webpack --watch --progress",
13-
"build:chrome":
14-
"crx pack dist -o build/ligo.crx && web-ext build -s dist -a build",
15-
"build:fox": "webpack -p && web-ext build -s dist --overwrite-dest",
16-
"sign:fox": "env-cmd ./.env web-ext -s dist sign",
12+
"build:chrome": "crx pack dist -o build/ligo.crx",
13+
"build:fox": "webpack -p && web-ext build",
14+
"sign:fox": "env-cmd ./.env web-ext sign",
1715
"build:prod": "webpack -p",
1816
"precommit": "lint-staged"
1917
},
2018
"repository": "https://github.com/afk-mcz/reddit-submission-finder",
21-
"keywords": ["extension", "arlefreak", "afk", "ligo", "link"],
19+
"keywords": [
20+
"extension",
21+
"arlefreak",
22+
"afk",
23+
"ligo",
24+
"link"
25+
],
2226
"author": "AFK",
2327
"license": "MIT",
2428
"bugs": {
@@ -35,6 +39,7 @@
3539
"crx": "^3.2.1",
3640
"eslint": "^4.12.1",
3741
"eslint-config-airbnb": "^16.1.0",
42+
"eslint-import-resolver-webpack": "^0.11.0",
3843
"eslint-plugin-import": "^2.2.0",
3944
"eslint-plugin-jsx-a11y": "^6.0.2",
4045
"eslint-plugin-react": "^7.5.1",

‎src/components/icon-button/index.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import html from 'choo/html';
2+
3+
import './style.css';
4+
5+
export default ({ icon, value, label, onclick }) => html`
6+
<button onclick=${() => {
7+
onclick(value);
8+
}}>
9+
<i class="material-icons" alt=${label}>${icon}</i>
10+
</button>
11+
`;

‎src/components/icon-button/style.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎src/components/sorter/index.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import html from 'choo/html';
2+
import IconButton from '~components/icon-button';
3+
4+
import './style.css';
5+
6+
export default ({ sorters, onclick }) => {
7+
const buttons = sorters.map(item =>
8+
IconButton({
9+
...item,
10+
onclick,
11+
})
12+
);
13+
14+
return html`
15+
<div class="sort-list">
16+
<span class="sort-title">sort</span>
17+
<div className="sort-buttons">${buttons}</div>
18+
</div>
19+
`;
20+
};

‎src/components/sorter/style.css

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.sort-list {
2+
display: flex;
3+
flex-flow: row;
4+
align-items: center;
5+
justify-content: space-between;
6+
border-bottom: 2px solid var(--medium-gray);
7+
}
8+
9+
.sort-title {
10+
border-right: 2px solid var(--medium-gray);
11+
height: 100%;
12+
}
13+
14+
.sort-buttons {
15+
display: flex;
16+
flex: 1 0 auto;
17+
flex-flow: row;
18+
align-items: center;
19+
justify-content: center;
20+
}
21+
22+
.sort-buttons button {
23+
background: transparent;
24+
border-radius: 0;
25+
border: none;
26+
}

‎src/containers/app/index.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
import html from 'choo/html';
2+
3+
import Results from '~containers/results';
4+
5+
import Header from '~components/header';
6+
import Message from '~components/message';
7+
28
import './variables.css';
39
import './style.css';
410

5-
import Results from '../results';
6-
import Header from '../../components/header';
7-
import Message from '../../components/message';
8-
9-
export default function app(state) {
11+
export default function app(state, emit) {
1012
const { url, message } = state;
1113

1214
const messageBlank = typeof message === 'undefined' || !message;
13-
const content = messageBlank ? Results(state) : Message(message);
15+
const content = messageBlank ? Results(state, emit) : Message(message);
1416

1517
return html`
1618
<body>

‎src/containers/results/getResults.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,6 @@ function getYoutubeURLs(url) {
2121
}
2222
}
2323

24-
console.log(`id: ${videoId}`);
25-
2624
if (gotVidId) {
2725
const prefixes = [
2826
'http://www.youtube.com/watch?v=',
@@ -51,7 +49,7 @@ function constructUrls(URL) {
5149
} else {
5250
// remove query string
5351
[url] = url.split('?');
54-
console.log(url);
52+
// console.log(url);
5553
}
5654

5755
if (url.startsWith('https')) {
@@ -75,7 +73,7 @@ function getAllURLVersions(URL) {
7573
return redditUrl;
7674
});
7775

78-
console.log(result);
76+
// console.log(result);
7977

8078
return result;
8179
}

‎src/containers/results/index.js

+35-6
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,45 @@
11
import html from 'choo/html';
2+
3+
import List from '~components/list';
4+
import Sorter from '~components/sorter';
5+
import { ORDER_OPTIONS } from '~lib/constants';
6+
7+
import { getSortedResults } from '~lib/misc';
8+
29
import './style.css';
310

4-
import List from '../../components/list';
11+
const sortbuttons = [
12+
{
13+
label: 'By votes',
14+
value: 'VOTES',
15+
icon: 'arrow_drop_up',
16+
},
17+
{
18+
label: 'By comments',
19+
value: 'COMMENTS',
20+
icon: 'mode_comment',
21+
},
22+
{
23+
label: 'By date',
24+
value: 'DATE',
25+
icon: 'date_range',
26+
},
27+
];
528

6-
export default function ResultsList(state) {
7-
const { results = [] } = state;
29+
export default function ResultsList(state, emit) {
30+
const { results = [], order = ORDER_OPTIONS[0] } = state;
31+
const sorted = getSortedResults(order, results);
32+
const onclick = value => {
33+
emit('order:set', value);
34+
};
835

936
return html`
10-
<body>
1137
<section class="results">
12-
${List(results)}
38+
${Sorter({
39+
sorters: sortbuttons,
40+
onclick,
41+
})}
42+
${List(sorted)}
1343
</section>
14-
</body>
1544
`;
1645
}

‎src/containers/results/store.js

+16-11
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
import {
2-
getCurrentTabUrl,
3-
handleErrors,
4-
sortByScore,
5-
removeDuplicatesBy,
6-
} from '../../lib/misc';
7-
import getAllSubmissions from '../../containers/results/getResults';
8-
9-
export default (
1+
import { getCurrentTabUrl, handleErrors, removeDuplicatesBy } from '~lib/misc';
2+
3+
import getAllSubmissions from '~containers/results/getResults';
4+
5+
import { ORDER_OPTIONS } from '~lib/constants';
6+
7+
const store = (
108
state = {
119
results: [],
10+
order: ORDER_OPTIONS[0],
1211
},
1312
emitter
1413
) => {
@@ -22,6 +21,11 @@ export default (
2221
emitter.emit('render');
2322
});
2423

24+
emitter.on('order:set', order => {
25+
mState.order = order;
26+
emitter.emit('render');
27+
});
28+
2529
getCurrentTabUrl(url => {
2630
mState.url = url;
2731
// return;
@@ -34,12 +38,13 @@ export default (
3438
.then(() => getAllSubmissions(url))
3539
.then(results => {
3640
const filtered = removeDuplicatesBy(x => x.fullname, results);
37-
const sorted = filtered.sort(sortByScore);
38-
emitter.emit('results:got', sorted);
41+
emitter.emit('results:got', filtered);
3942
})
4043
.catch(error => console.error(error));
4144

4245
emitter.emit('render');
4346
});
4447
});
4548
};
49+
50+
export default store;

‎src/lib/constants.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const ORDER_OPTIONS = ['VOTE', 'DATE', 'COMMENTS'];

‎src/lib/misc.js

+35-4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { ORDER_OPTIONS } from '~lib/constants';
2+
13
export function restoreOptions(emitter) {
24
function setCurrentChoice(result) {
35
const { token = '' } = result;
@@ -13,13 +15,42 @@ export function restoreOptions(emitter) {
1315
}
1416

1517
export function sortByScore(a, b) {
16-
const scoreA = parseInt(a.score, 10);
17-
const scoreB = parseInt(b.score, 10);
18-
if (scoreA < scoreB) return 1;
19-
if (scoreA > scoreB) return -1;
18+
const sortA = a ? parseInt(a.score, 10) : 0;
19+
const sortB = b ? parseInt(b.score, 10) : 0;
20+
if (sortA < sortB) return 1;
21+
if (sortA > sortB) return -1;
22+
return 0;
23+
}
24+
25+
export function sortByComments(a, b) {
26+
const sortA = a ? parseInt(a.comments, 10) : 0;
27+
const sortB = b ? parseInt(b.comments, 10) : 0;
28+
if (sortA < sortB) return 1;
29+
if (sortA > sortB) return -1;
30+
return 0;
31+
}
32+
33+
export function sortByDate(a, b) {
34+
const sortA = a ? parseInt(a.age, 10) : 0;
35+
const sortB = b ? parseInt(b.age, 10) : 0;
36+
if (sortA < sortB) return 1;
37+
if (sortA > sortB) return -1;
2038
return 0;
2139
}
2240

41+
export function getSortedResults(order, results) {
42+
switch (order) {
43+
case ORDER_OPTIONS[0]:
44+
return results.sort(sortByScore);
45+
case ORDER_OPTIONS[1]:
46+
return results.sort(sortByComments);
47+
case ORDER_OPTIONS[2]:
48+
return results.sort(sortByDate);
49+
default:
50+
return results.sort(sortByScore);
51+
}
52+
}
53+
2354
export const flatten = list =>
2455
list.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
2556

‎web-ext-config.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
module.exports = {
2+
verbose: true,
3+
sourceDir: 'dist',
4+
build: {
5+
overwriteDest: true,
6+
},
7+
run: {
8+
firefox: 'firefox-developer-edition',
9+
browserConsole: true,
10+
startUrl: [
11+
'about:debugging',
12+
'https://www.youtube.com/watch?v=C4Uc-cztsJo',
13+
],
14+
},
15+
};

‎webpack.config.js

+10
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,14 @@ module.exports = {
4949
},
5050
]),
5151
],
52+
53+
resolve: {
54+
modules: ['node_modules'],
55+
alias: {
56+
'~lib': path.resolve('./src/lib/'),
57+
'~components': path.resolve('./src/components'),
58+
'~containers': path.resolve('./src/containers'),
59+
'~public': path.resolve('./src/public'),
60+
},
61+
},
5262
};

0 commit comments

Comments
 (0)