updated way of getting categories

.gitignore

@@ -1,2 +1,4 @@
 node_modules
 build
+
+.now

now.json

@@ -0,0 +1,9 @@
+{
+  "version": 2,
+  "builds": [
+    {
+      "src": "package.json",
+      "use": "@frontity/now"
+    }
+  ]
+}

packages/custom-homepackage-theme/src/Home.js

@@ -1,6 +1,6 @@
-import React from "react";
+import React, {useEffect} from "react";
 import { connect, styled } from "frontity";
-import {getPostsGroupedByCategory, createMarkupObject, getRandomColor} from '../helpers/'
+import {getPostsGroupedByCategory, createMarkupObject, getRandomColor} from './helpers'
 import {
   Box,
   Card,
@@ -10,11 +10,13 @@ import {
 } from 'rebass'
 import Link from './Link'
 
-const Home = ({ state }) => {
+const Home = ({ state, actions }) => {
 
   const data = state.source.get(state.router.link)
   const postsPerCategory = getPostsGroupedByCategory(state.source)
-console.log(postsPerCategory)
+
+  console.log(postsPerCategory)
+
   return (
     <>
       <Flex>
@@ -33,7 +35,7 @@ console.log(postsPerCategory)
 
                         <Box px={2}>
                           <Link href={post.link}>
-                            <Heading as='h3'>{post.title.rendered}</Heading>
+                            <Heading as='h3' dangerouslySetInnerHTML={createMarkupObject(post.title.rendered)}  />
                           </Link>
                           <Text dangerouslySetInnerHTML={createMarkupObject(post.excerpt.rendered)} />
                         </Box>

packages/custom-homepackage-theme/src/Root.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { connect, Global, css } from "frontity";
 import Home from './Home'
+import Link from './Link'
 
 import { ThemeProvider } from 'emotion-theming'
 import theme from './styles/theme'
@@ -21,7 +22,12 @@ const Root = ({ state }) => {
 
       <ThemeProvider theme={theme}>
         {data.isHome && <Home />}
-        {!data.isHome && <p>You're at <pre>{state.router.link}</pre></p>}
+        {!data.isHome && (
+          <div>
+            <p>You're at <pre>{state.router.link}</pre></p>
+            <Link href='/'>&lt; Back to Home</Link>
+          </div>
+          )}
       </ThemeProvider>
     </>
   );

packages/custom-homepackage-theme/src/config.js

@@ -0,0 +1,9 @@
+export const categoriesWidgetsHome = {
+  3: "photography",
+  4: "cities",
+  6: "culture",
+  7: "nature",
+  8: "travel",
+  56: "news",
+  59: "lifestyle"
+}

packages/custom-homepackage-theme/helpers/index.js → packages/custom-homepackage-theme/src/helpers/index.js

@@ -1,13 +1,15 @@
-export const getCategoriesIds = ({ category }) => Object.keys(category)
+import {categoriesWidgetsHome} from '../config'
+
+// export const getCategoriesIds = categories => Object.keys(categories)
+// export const getCategoriesValues = categories => Object.keys(categories)
 
 export const getPostsFromCategory = ({ post }, categoryId) =>
   Object.keys(post)
     .map(postID => post[postID])
     .filter(({categories}) => categories.includes(+categoryId) )
 
 export const getPostsGroupedByCategory = source =>  {
-  const categoriesIDs = getCategoriesIds(source)
-  return categoriesIDs.reduce((acc, categoryId) => {
+  return Object.keys(categoriesWidgetsHome).reduce((acc, categoryId) => {
     const posts = getPostsFromCategory(source, categoryId).slice(0,5)
     const category = source.category[categoryId] 
     return [{posts, category}, ...acc]
@@ -17,5 +19,4 @@ export const getPostsGroupedByCategory = source =>  {
 export const createMarkupObject = renderedHtml => ({__html: renderedHtml})
 
 export const getRandomColor = () =>
-  '#' + new Array(6).fill(0).map(digit => '0123456789ABCDEF'[Math.floor(Math.random() * 16)]).join('')
-
+  '#' + new Array(6).fill(0).map(digit => '0123456789ABCDEF'[Math.floor(Math.random() * 16)]).join('')  

packages/custom-homepackage-theme/src/index.js

@@ -1,4 +1,6 @@
 import Root from './Root'
+import {categoriesWidgetsHome} from './config'
+import {getCategoriesIds, getPostsGroupedByCategory} from './helpers'
 
 export default {
   name: "custom-homepackage-theme",
@@ -9,6 +11,13 @@ export default {
     theme: {}
   },
   actions: {
-    theme: {}
+    theme: {
+      beforeSSR: async ({ state, actions }) => {
+        await Promise.all(
+          Object.values(categoriesWidgetsHome)
+            .map(category => actions.source.fetch(`/category/${category}/`))
+        )
+      }
+    }
   }
 };