From f6d888fd91d5c51bd2a5ae6a25747ad87d609958 Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jan.tuomi@eficode.com>
Date: Sat, 17 Nov 2018 13:46:18 +0200
Subject: [PATCH] Refactor classname mapping

---
 src/components/Button/Button.tsx           | 14 ++++++++++++--
 src/components/Button/index.ts             |  3 ++-
 src/components/PageSection/PageSection.tsx | 14 +++++---------
 src/pages/FrontPage/FrontPage.tsx          |  6 +++---
 4 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index adb9f3d..66ffaeb 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,15 +1,25 @@
 import * as React from "react";
 import "./Button.scss";
 
+export enum ButtonType {
+  Hero,
+  Filled,
+}
+
+const buttonClassNames = new Map<ButtonType, string>([
+  [ButtonType.Hero, "hero"],
+  [ButtonType.Filled, "filled"],
+]);
+
 export interface ButtonProps {
   onClick: () => void;
-  type: string;
+  type: ButtonType;
 }
 
 export default class Button extends React.Component<ButtonProps, undefined> {
   render() {
     const { type } = this.props;
-    const className = `button ${type}`;
+    const className = `button ${buttonClassNames.get(type)}`;
     return (
       <button onClick={this.props.onClick} className={className}>
         {this.props.children}
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
index 317a298..ac9ab65 100644
--- a/src/components/Button/index.ts
+++ b/src/components/Button/index.ts
@@ -1,2 +1,3 @@
-import Button from "./Button";
+import Button, { ButtonType } from "./Button";
 export default Button;
+export { ButtonType };
diff --git a/src/components/PageSection/PageSection.tsx b/src/components/PageSection/PageSection.tsx
index 927ea2e..2e67f97 100644
--- a/src/components/PageSection/PageSection.tsx
+++ b/src/components/PageSection/PageSection.tsx
@@ -11,19 +11,15 @@ export interface PageSectionProps {
 }
 export interface PageSectionState {}
 
-const colorToClass = (color: BackgroundColor): string => {
-  if (color === BackgroundColor.DarkBlue) {
-    return "dark-blue";
-  }
-  else if (color === BackgroundColor.White) {
-    return "white";
-  }
-};
+const colors = new Map<BackgroundColor, string>([
+  [BackgroundColor.DarkBlue, "dark-blue"],
+  [BackgroundColor.White, "white"],
+]);
 
 class PageSection extends React.Component<PageSectionProps, PageSectionState> {
   render() {
     const { backgroundColor, children } = this.props;
-    const className = `page-section ${colorToClass(backgroundColor)}`;
+    const className = `page-section ${colors.get(backgroundColor)}`;
     return (
       <div className={className}>
         {children}
diff --git a/src/pages/FrontPage/FrontPage.tsx b/src/pages/FrontPage/FrontPage.tsx
index 029b8f4..9b38d1a 100644
--- a/src/pages/FrontPage/FrontPage.tsx
+++ b/src/pages/FrontPage/FrontPage.tsx
@@ -11,7 +11,7 @@ import PageSection from "../../components/PageSection";
 import { BackgroundColor as PageSectionColor }  from "../../components/PageSection/PageSection";
 import HeroMainSection from "../../components/HeroMainSection";
 import HeroAsideSection from "../../components/HeroAsideSection";
-import Button from "../../components/Button";
+import Button, { ButtonType } from "../../components/Button";
 
 interface FrontPageProps {
   staticContext: StaticContext;
@@ -72,8 +72,8 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
             Kilta kasaa yhteen yli 600 alansa huippua, jotka ovat
             avainasemassa vauhdilla sähköistyvän maailmamme
             kehityksessä.</p>
-            <Button type="hero" onClick={() => { }}>Killan tehtävät ›</Button>
-            <Button type="hero" onClick={() => { }}>Vastapainoa opiskelulle ›</Button>
+            <Button type={ButtonType.Hero} onClick={() => { }}>Killan tehtävät ›</Button>
+            <Button type={ButtonType.Hero} onClick={() => { }}>Vastapainoa opiskelulle ›</Button>
           </HeroMainSection>
           <HeroAsideSection>
             Kikkeli