From 560893972355918932bccc98178c2f08bd77fa1c Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 10 Nov 2019 20:44:56 +0400
Subject: [PATCH] Add badges to guide page

---
 components/guide-header/index.js    | 17 +++++++++++++++++
 components/roadmap-summary/index.js |  6 ++++++
 data/guides.json                    | 10 ----------
 path-map.js                         |  2 +-
 4 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/components/guide-header/index.js b/components/guide-header/index.js
index 551bfae55..320999e26 100644
--- a/components/guide-header/index.js
+++ b/components/guide-header/index.js
@@ -12,6 +12,9 @@ import {
 } from './style';
 import { getContributionUrl } from "lib/guide";
 import { getTwitterUrl } from "lib/url";
+import { faClock, faEnvelope, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+import { BadgeLink, BadgesList, PrimaryBadge, SecondaryBadge, DarkBadge } from 'components/badges';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const GuideHeader = ({
  guide,
@@ -33,6 +36,20 @@ const GuideHeader = ({
     <GuideTitle>{ guide.title }</GuideTitle>
     <GuideSubtitle>{ guide.description }</GuideSubtitle>
     <ActionItems>
+      <BadgesList className="mt-4">
+        <BadgeLink href="/guides">
+          <SecondaryBadge>
+            <FontAwesomeIcon icon={faArrowLeft}/>
+            Other Guides
+          </SecondaryBadge>
+        </BadgeLink>
+        <BadgeLink href="/signup">
+          <PrimaryBadge>
+            <FontAwesomeIcon icon={faEnvelope}/>
+            Send me Updates
+          </PrimaryBadge>
+        </BadgeLink>
+      </BadgesList>
     </ActionItems>
   </HeaderWrap>
 );
diff --git a/components/roadmap-summary/index.js b/components/roadmap-summary/index.js
index 71f557838..15240e71a 100644
--- a/components/roadmap-summary/index.js
+++ b/components/roadmap-summary/index.js
@@ -31,6 +31,12 @@ const RoadmapSummary = ({ roadmap }) => (
       <Description>{ roadmap.description }</Description>
 
       <BadgesList className="mt-4">
+        <BadgeLink href="/roadmaps">
+          <DarkBadge>
+            <FontAwesomeIcon icon={faArrowLeft}/>
+            Other Roadmaps
+          </DarkBadge>
+        </BadgeLink>
         { roadmap.upcoming && (
           <SecondaryBadge>
             <FontAwesomeIcon icon={faClock}/>
diff --git a/data/guides.json b/data/guides.json
index 8f2db932c..dba0805a1 100644
--- a/data/guides.json
+++ b/data/guides.json
@@ -39,16 +39,6 @@
     "createdAt": "2019-11-01T12:00:00.860Z",
     "updatedAt": "2019-11-01T12:00:00.860Z"
   },
-  {
-    "title": "Using React Hooks",
-    "description": "Start using React hooks in your react applications today with this guide.",
-    "url": "/guides/using-react-hooks",
-    "fileName": "using-react-hooks",
-    "featured": true,
-    "author": "kamranahmedse",
-    "createdAt": "2019-01-23T17:00:00.860Z",
-    "updatedAt": "2019-01-23T17:00:00.860Z"
-  },
   {
     "title": "HTTP Caching",
     "description": "Everything you need to know about web caching",
diff --git a/path-map.js b/path-map.js
index 7f7f8eb00..27b4ec334 100644
--- a/path-map.js
+++ b/path-map.js
@@ -67,7 +67,7 @@ const getRoadmapRoutes = () => {
       },
       // Route for each of the versions of this roadmap i.e.
       // `{ '/frontend/2019': { page: '/[roadmap]/[version]', query: 'frontend/2019' } }`
-      ...(roadmap.versions.reduce((versionRoutes, version) => {
+      ...((roadmap.versions || []).reduce((versionRoutes, version) => {
         return {
           ...versionRoutes,
           [`${roadmap.url}/${version}`]: {