🎨 ✨ find by name

Search on word/name, if partially found in resource it will return the resource

components/Search.vue

@@ -3,6 +3,8 @@
 </template>
 
 <script>
+import * as R from 'ramda'
+
 export default {
   data() {
     return {
@@ -11,7 +13,19 @@ export default {
   },
   watch: {
     searchInput(e) {
-      console.log(this.$store.getters['data/findByTags']([e]))
+      const isTag = R.startsWith('#')
+      const removeFirstChar = x => R.splitAt(1, x)[1]
+
+      const words = R.split(' ', e)
+      const tags = R.filter(isTag, words)
+      const titles = R.filter(R.compose(R.not, isTag), words)
+      console.group()
+      console.log("words:", words)
+      console.log("tags:", tags)
+      console.log("titles:", titles)
+      console.log(this.$store.getters['data/findByName'](titles))
+      console.log(this.$store.getters['data/findByTags'](R.map(removeFirstChar, tags)))
+      console.groupEnd()
     },
   },
   methods: {

store/data.js

@@ -1,6 +1,6 @@
 import resources from '../resources'
-import { prop, compose, filter } from 'ramda'
+import * as R from 'ramda'
-import { includesElOf, getAllResources, tagsNotEmpty } from '../utils/pure'
+import { includesElOf, getAllResources, tagsNotEmpty, partiallyIncludesElOf, cleanString } from '../utils/pure'
 
 // Polyfill for flat 
 if (!Array.prototype.flat) {
@@ -49,15 +49,29 @@ export const getters = {
 	findCategory: state => categoryTitle => {
 		return Object.assign(state.resources.find(category => category.title.toLowerCase() === categoryTitle.toLowerCase()))
 	},
+	findByName: state => names => {
+		const cleaned = R.map(cleanString, names)
+
+		// [Resource] -> [Resource]
+		const appearsInResource = R.filter(({ cleanTitle, url, desc }) => 
+			partiallyIncludesElOf([cleanTitle, url, desc], cleaned)
+		)
+		// [Category] -> [Resource]
+		const getDesiredResources = R.compose(appearsInResource, getAllResources)
+		return getDesiredResources(state.resources)
+
+	},
 	findByTags: state => tags => {
+		const cleaned = R.map(cleanString, tags)
+
 		// containsTags :: [Resource] -> [Resource]
-		const containsTags = filter(tagsNotEmpty)
+		const containsTags = R.filter(tagsNotEmpty)
 		// includesDesiredTags :: Resource -> Bool
-		const includesDesiredTags = compose(includesElOf(tags), prop('tags'))
+		const includesDesiredTags = R.compose(includesElOf(cleaned), R.prop('tags'))
 		// findResourcesByTag :: [Resource] -> [Resource]
-		const findResourcesByTag = filter(includesDesiredTags)
+		const findResourcesByTag = R.filter(includesDesiredTags)
 		// getDesiredResources :: [Category] -> [Resource]
-		const getDesiredResources = compose(findResourcesByTag, containsTags, getAllResources)
+		const getDesiredResources = R.compose(findResourcesByTag, containsTags, getAllResources)
 
 		return getDesiredResources(state.resources)
 	},

utils/pure.js

@@ -18,16 +18,35 @@ const Category = {
 }
 
 /// Functions
+// isNotEmpty [a] -> Bool
+const isNotEmpty = R.compose(R.not, R.isEmpty)
+
 // getAllResources :: [Category] -> [Resource]
 const getAllResources = R.compose(R.flatten, R.map(R.prop('resources')))
 
 // tagsNotEmpty :: Resource -> Bool
-const tagsNotEmpty = R.compose(R.not, R.isEmpty, R.prop('tags'))
+const tagsNotEmpty = R.compose(isNotEmpty, R.prop('tags'))
+
+// cleanString :: String -> String
+const cleanString = R.compose(R.toLower, R.trim)
 
 // true if list2 has element that appears in list1 else false
 // includesElOf([1, 2])([2]) -> true
 // includesElOf([1, 2], [3]) -> false
+// includesElOf(['a', 'b'], ['a']) -> true
+// includesElOf(['aa', 'b'], ['a']) -> false
 // includesElOf :: [a] -> [a] -> Bool
 const includesElOf = R.curry((list1, list2) => R.any(el => R.includes(el, list2), list1))
 
-export { getAllResources, tagsNotEmpty, includesElOf }
+// Similar to includesElOf, but partially included strings are also allowed
+// includesElOf(['a', 'b'])(['a']) -> true
+// includesElOf(['aa', 'b'], ['a']) -> true
+// includesElOf(['aa', 'b'], ['c']) -> false
+// includesElOf :: [String] -> [String] -> Bool
+const partiallyIncludesElOf = R.curry((list1, list2) => 
+  R.any(el2 =>
+    R.any(R.includes(el2), list1),
+  list2)
+)
+
+export { getAllResources, tagsNotEmpty, includesElOf, partiallyIncludesElOf, cleanString }