🎨 Refactor state and add mock output

store/data.js

@@ -1,4 +1,4 @@
-import resources from '../resources'
+import categories from '../resources'
 import * as R from 'ramda'
 import {
 	getAllResources,
@@ -7,22 +7,18 @@ import {
 	partiallyIncludesElOf,
 	tagsNotEmpty,
 	cleanString,
+	addCleanTitleAndPath,
 } from '../utils/pure'
 
-export const state = () => ({
+export const state = () => {
-  resources: resources.map(category => ({
+	const resourcesLens = R.lens(R.prop('resources'), R.assoc('resources'))
-		...category,
+	return {
-		resources: category.resources.map(resource => {
+		resources: R.map(category => 
-			const cleanTitle = resource.title.replace(/ /g, '').toLowerCase()
+				R.over(resourcesLens, R.map(addCleanTitleAndPath(category.slug)), category),
-			return {
+			categories),
-				...resource,
+		tags: getAllTags(categories),
-				cleanTitle,
+	}
-				path: `${category.slug}?card=${cleanTitle}`,
+}
-			}
-		}),
-	})),
-  tags: getAllTags(resources),
-})
 
 export const getters = {
 	tags: R.prop('tags'),

test/output.json

@@ -0,0 +1,86 @@
+[
+  {
+    "title": "CSS",
+    "slug": "/css",
+    "resources": [
+      {
+        "title": "CSS Grid Generator",
+        "desc": "Visually create your css grid and export the code.",
+        "url": "https://cssgrid-generator.netlify.com/",
+        "tags": [
+          "generator",
+          "grid",
+          "layout",
+          "visual tool"
+        ],
+        "cleanTitle": "cssgridgenerator",
+        "path": "/css?card=cssgridgenerator"
+      },
+      {
+        "title": "Keyframes Editor",
+        "desc": "An insanely simple way to create CSS animations",
+        "url": "https://keyframes.app/editor/",
+        "tags": [
+          "generator",
+          "animation",
+          "visual tool"
+        ],
+        "cleanTitle": "keyframeseditor",
+        "path": "/css?card=keyframeseditor"
+      },
+      {
+        "title": "Flexbox Froggy",
+        "desc": "A game to learn Flexbox",
+        "url": "https://flexboxfroggy.com",
+        "tags": [
+          "educational",
+          "beginner"
+        ],
+        "cleanTitle": "flexboxfroggy",
+        "path": "/css?card=flexboxfroggy"
+      }
+    ]
+  },
+  {
+    "title": "Design",
+    "slug": "/design",
+    "resources": [
+      {
+        "title": "UX/UI Designer Roadmap 2017",
+        "desc": "Roadmap to becoming a UI/UX Designer in 2017",
+        "url": "https://github.com/togiberlin/ui-ux-designer-roadmap",
+        "tags": [
+          "career",
+          "ui",
+          "ux"
+        ],
+        "cleanTitle": "ux/uidesignerroadmap2017",
+        "path": "/design?card=ux/uidesignerroadmap2017"
+      },
+      {
+        "title": "Undraw",
+        "desc": "Free vector illustrations for your website.",
+        "url": "https://undraw.co",
+        "tags": [
+          "illustration",
+          "svg",
+          "ui"
+        ],
+        "cleanTitle": "undraw",
+        "path": "/design?card=undraw"
+      },
+      {
+        "title": "Practical UI tips",
+        "desc": "7 Tips to boost your UI design.",
+        "url": "https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886",
+        "tags": [
+          "ui",
+          "tips",
+          "tricks"
+        ],
+        "cleanTitle": "practicaluitips",
+        "path": "/design?card=practicaluitips"
+      }
+    ]
+  }
+]

test/pure.test.js

@@ -26,4 +26,4 @@ test('partiallyIncludesElOf 2', () => {
 
 test('partiallyIncludesElOf 3', () => {
   expect(P.partiallyIncludesElOf(['aa', 'b'], ['c'])).toBeFalsy
-})
+})

utils/pure.js

@@ -2,20 +2,20 @@
 import * as R from 'ramda'
 
 /// Types
-const Category = {
+// const Category = {
-  title: String,
+//   title: String,
-  slug: String,
+//   slug: String,
-  resources: [Resource],
+//   resources: [Resource],
-}
+// }
 
-const Resource = {
+// const Resource = {
-  title: String,
+//   title: String,
-  cleanTitle: String,
+//   cleanTitle: String,
-  desc: String,
+//   desc: String,
-  path: String,
+//   path: String,
-  url: String,
+//   url: String,
-  tags: [String],
+//   tags: [String],
-}
+// }
 
 /// Functions
 // isNotEmpty [a] -> Bool
@@ -38,6 +38,9 @@ export const tagsNotEmpty = R.compose(isNotEmpty, R.prop('tags'))
 // cleanString :: String -> String
 export const cleanString = R.compose(R.toLower, R.trim)
 
+// removeSpacesLower :: String -> String
+export const cleanStringAndRemoveSpaces = R.compose(R.replace(/ /g, ''), cleanString)
+
 // true if list2 has element that appears in list1 else false
 // includesElOf :: [a] -> [a] -> Bool
 export const includesElOf = R.curry((list1, list2) => R.any(el => R.includes(el, list2), list1))
@@ -49,3 +52,13 @@ export const partiallyIncludesElOf = R.curry((list1, list2) =>
     R.any(R.includes(el2), list1),
   list2)
 )
+
+// addCleanTitleAndPath :: Object -> Resource
+export const addCleanTitleAndPath = R.curry((slug, obj) => {
+  const cleanTitle = cleanStringAndRemoveSpaces(obj.title)
+  return {
+    ...obj,
+    cleanTitle,
+    path: `${slug}?card=${cleanTitle}`,
+  }
+})