Refactor Navigation

Author: completejavascript

src/components/Navigation/Navigation.js

@@ -4,42 +4,36 @@ import { FormattedMessage } from 'react-intl';
 import ChangeLanguage from '../ChangeLanguage/ChangeLanguage';
 import './Navigation.scss';
 
+const Item = ({ link, text }) => (
+  <li>
+    <A href={link}>{text}</A>
+  </li>
+);
+
+const Menu = () => (
+  <ul className="left">
+    <Item link="/" text={<FormattedMessage id="IDS_HOME_PAGE" />} />
+    <Item link="/terms" text={<FormattedMessage id="IDS_TERMS_OF_USE" />} />
+    <Item link="/privacy" text={<FormattedMessage id="IDS_PRIVACY_POLICY" />} />
+    <Item
+      link="/blog/1"
+      text={
+        <FormattedMessage id="IDS_BLOG_PAGE_WITH_ID" values={{ blogId: 1 }} />
+      }
+    />
+    <Item
+      link="/blog/2"
+      text={
+        <FormattedMessage id="IDS_BLOG_PAGE_WITH_ID" values={{ blogId: 2 }} />
+      }
+    />
+  </ul>
+);
+
 const Navigation = () => {
   return (
     <div className="navigation-container">
-      <ul className="left">
-        <li>
-          <A href="/">
-            <FormattedMessage id="IDS_HOME_PAGE" />
-          </A>
-        </li>
-        <li>
-          <A href="/terms">
-            <FormattedMessage id="IDS_TERMS_OF_USE" />
-          </A>
-        </li>
-        <li>
-          <A href="/privacy">
-            <FormattedMessage id="IDS_PRIVACY_POLICY" />
-          </A>
-        </li>
-        <li>
-          <A href="/blog/1">
-            <FormattedMessage
-              id="IDS_BLOG_PAGE_WITH_ID"
-              values={{ blogId: 1 }}
-            />
-          </A>
-        </li>
-        <li>
-          <A href="/blog/2">
-            <FormattedMessage
-              id="IDS_BLOG_PAGE_WITH_ID"
-              values={{ blogId: 2 }}
-            />
-          </A>
-        </li>
-      </ul>
+      <Menu />
       <ChangeLanguage />
     </div>
   );