Generate list of all patterns on Patterns page

Author: zoltantothcom

src/components/PatternsList.jsx

@@ -1,16 +1,22 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
+import { patterns } from '../static/patterns';
 
 const StyledPatterns = styled.div``;
 
 const PatternsList = () => {
   return (
     <StyledPatterns>
       <h1>LIST OF PATTERNS</h1>
-      <Link to="/patterns/memento">Memento</Link>
-      <Link to="/patterns/singleton">Singleton</Link>
-      <Link to="/patterns/command">Command</Link>
+
+      <ul>
+        {patterns.map(pattern => (
+          <li key={pattern.id}>
+            <Link to={`/patterns/${pattern.id}`}>{pattern.name}</Link>
+          </li>
+        ))}
+      </ul>
     </StyledPatterns>
   );
 };

src/static/patterns/index.js

@@ -22,7 +22,7 @@ import STRATEGY from './behavioral_strategy';
 import TEMPLATE from './behavioral_template';
 import VISITOR from './behavioral_visitor';
 
-const patterns = [
+export const patterns = [
   ABSTRACT_FACTORY,
   BUILDER,
   FACTORY,
@@ -50,9 +50,10 @@ const patterns = [
   VISITOR
 ];
 
-for (let i = patterns.length - 1; i > 0; i--) {
+const mixed = [...patterns];
+for (let i = mixed.length - 1; i > 0; i--) {
   const rand = Math.floor(Math.random() * (i + 1));
-  [patterns[i], patterns[rand]] = [patterns[rand], patterns[i]];
+  [mixed[i], mixed[rand]] = [mixed[rand], mixed[i]];
 }
 
-export default patterns;
+export default mixed;