gilles/webgems
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨 Rewrite findByTags & add Search

Browse Source
This commit is contained in:
Kevin Van Der Werff
2019-10-21 13:46:33 +02:00
parent 240f82f339
commit 0d3a0489ae
5 changed files with 66 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/Search.vue
View File

@@ -1,7 +1,27 @@
<template lang="pug"> <template lang="pug">
input.search(placeholder="Search (does not work currently, sorry)") input.search(v-model="searchInput" type="text" placeholder="Search (does not work currently, sorry)")
</template> </template>
<script>
export default {
data() {
return {
searchInput: '',
}
},
watch: {
searchInput(e) {
console.log(this.$store.getters['data/findByTags']([e]))
},
},
methods: {
updateSearchResults(e) {
console.log(e)
},
},
}
</script>
<style lang="scss"> <style lang="scss">
input { input {
padding: .5rem 1.5rem .5rem 1.5rem; padding: .5rem 1.5rem .5rem 1.5rem;
@@ -13,5 +33,4 @@ input {
outline:none; outline:none;
} }
} }
</style> </style>

3
layouts/default.vue
View File

@@ -2,6 +2,7 @@
.layout .layout
Github Github
Logo Logo
Search
Sidebar Sidebar
nuxt.content nuxt.content
</template> </template>
@@ -73,7 +74,7 @@ h1 {
grid-template-columns: fit-content(200px) auto; grid-template-columns: fit-content(200px) auto;
grid-gap: 1rem; grid-gap: 1rem;
grid-template-areas: grid-template-areas:
'logo .' 'logo search'
'sidebar content'; 'sidebar content';
} }

46
package-lock.json generated
View File

@@ -4456,8 +4456,7 @@
}, },
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@@ -4475,13 +4474,11 @@
}, },
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@@ -4494,18 +4491,15 @@
}, },
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@@ -4608,8 +4602,7 @@
}, },
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@@ -4619,7 +4612,6 @@
"is-fullwidth-code-point": { "is-fullwidth-code-point": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@@ -4632,20 +4624,17 @@
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
}, },
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@@ -4662,7 +4651,6 @@
"mkdirp": { "mkdirp": {
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@@ -4735,8 +4723,7 @@
}, },
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@@ -4746,7 +4733,6 @@
"once": { "once": {
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@@ -4822,8 +4808,7 @@
}, },
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@@ -4853,7 +4838,6 @@
"string-width": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@@ -4871,7 +4855,6 @@
"strip-ansi": { "strip-ansi": {
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@@ -4910,13 +4893,11 @@
}, },
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true
"optional": true
} }
} }
}, },
@@ -8895,6 +8876,11 @@
"resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz", "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
"integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=" "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM="
}, },
"ramda": {
"version": "0.26.1",
"resolved": "https://registry.npmjs.org/ramda/-/ramda-0.26.1.tgz",
"integrity": "sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ=="
},
"randombytes": { "randombytes": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",

1
package.json
View File

@@ -16,6 +16,7 @@
"cross-env": "^5.2.0", "cross-env": "^5.2.0",
"nuxt": "^2.4.0", "nuxt": "^2.4.0",
"nuxt-clipboard2": "^0.2.1", "nuxt-clipboard2": "^0.2.1",
"ramda": "^0.26.1",
"vue-i18n": "^8.11.2" "vue-i18n": "^8.11.2"
}, },
"devDependencies": { "devDependencies": {

38
store/data.js
View File

@@ -1,4 +1,5 @@
import resources from '../resources' import resources from '../resources'
import { prop, compose, flatten, map, filter, isEmpty, not, any, includes, curry } from 'ramda'
// Polyfill for flat // Polyfill for flat
if (!Array.prototype.flat) { if (!Array.prototype.flat) {
@@ -21,13 +22,13 @@ if (!Array.prototype.flat) {
}) })
} }
/** // True if list2 has element that appears in list1
* Check if list 2 has an element of list 1. // includesElOf([1, 2], [3]) -> false
* includesElOf(list1, list2) -> read as list1 includesElOf list2. // includesElOf([1, 2])([3]) -> false
* @param {any[]} list1 // includesElOf([1, 2], [2]) -> true
* @param {any[]} list2 // includesElOf([1, 2])([2]) -> true
*/ // includesElOf :: [a] -> [a] -> Bool
const includesElOf = (list1, list2) => list1.some(element => list2.includes(element)) // const includesElOf = curry((list1, list2) => any(flip(includes)(list2), list1))
export const state = () => ({ export const state = () => ({
resources: resources.map(category => ({ resources: resources.map(category => ({
@@ -52,15 +53,28 @@ export const state = () => ({
export const getters = { export const getters = {
tags: state => state.tags, tags: state => state.tags,
resources: state => state.resources, resources: state => state.resources,
findResources: state => title => { findCategory: state => categoryTitle => {
return Object.assign(state.resources.find(resource => resource.title.toLowerCase() === title.toLowerCase())) return Object.assign(state.resources.find(category => category.title.toLowerCase() === categoryTitle.toLowerCase()))
}, },
findByTags: state => tags => { findByTags: state => tags => {
const flat = state.resources.map(category => category.resources).flat() // true if list2 has element that appears in list1 else false
return flat.filter(resource => resource.tags && includesElOf(resource.tags, tags)) // includesElOf [a] -> [a] -> Bool
const includesElOf = curry((list1, list2) => any(el => includes(el, list2), list1))
// getAllResources :: [Category] -> [Resource]
const getAllResources = compose(flatten, map(prop('resources')))
// tagsNotEmpty :: [Resource] -> Bool
const tagsNotEmpty = compose(not, isEmpty, prop('tags'))
// containsTags :: [Resource] -> [Resource]
const containsTags = filter(tagsNotEmpty)
// findResourcesByTag :: [Resource] -> [Resource]
const findResourcesByTag = filter(compose(includesElOf(tags), prop('tags')))
// getDesiredResources :: [Category] -> [Resource]
const getDesiredResources = compose(findResourcesByTag, containsTags, getAllResources)
return getDesiredResources(state.resources)
}, },
sortByTitle: (_, getters) => title => { sortByTitle: (_, getters) => title => {
const category = getters.findResources(title) const category = getters.findCategory(title)
const clone = [...category.resources] const clone = [...category.resources]
return { return {
...category, ...category,