From c66ccb99edcc69e4b6ab00596cbdad5360e5687d Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Mon, 25 Nov 2019 22:33:07 +0700
Subject: [PATCH] DetailsLoader accepts a pattern instead of a string

---
 client/App.tsx                            | 81 ++++++++++++-----------
 client/loaders/DetailsLoader.tsx          |  3 +-
 client/patterns/property-list/Details.tsx |  1 +
 3 files changed, 47 insertions(+), 38 deletions(-)

diff --git a/client/App.tsx b/client/App.tsx
index ab632e0..2eec746 100644
--- a/client/App.tsx
+++ b/client/App.tsx
@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-rou
 
 import './index.css';
 
+import Pattern from './constants/Pattern';
 import Home from './Home';
 import DetailsLoader from './loaders/DetailsLoader';
 
@@ -11,47 +12,53 @@ const App = () => {
         <Router>
             <RouteSwitch>
                 <Route exact={true} path='/'><Home /></Route>
-                <Route exact={true} path='/badge'><DetailsLoader pattern="Badge" /></Route>
-                <Route exact={true} path='/breadcrumb'><DetailsLoader pattern="Breadcrumb" /></Route>
-                <Route exact={true} path='/button-with-icon'><DetailsLoader pattern="Button with icon" /></Route>
-                <Route exact={true} path='/card'><DetailsLoader pattern="Card" /></Route>
-                <Route exact={true} path='/centering'><DetailsLoader pattern="Centering" /></Route>
-                <Route exact={true} path='/docked-at-corner'><DetailsLoader pattern="Docked at corner" /></Route>
-                <Route exact={true} path='/dot-navigation'><DetailsLoader pattern="Dot navigation" /></Route>
-                <Route exact={true} path='/feature-list'><DetailsLoader pattern="Feature list" /></Route>
-                <Route exact={true} path='/fixed-at-corner'><DetailsLoader pattern="Fixed at corner" /></Route>
-                <Route exact={true} path='/holy-grail'><DetailsLoader pattern="Holy grail" /></Route>
-                <Route exact={true} path='/input-add-on'><DetailsLoader pattern="Input add-on" /></Route>
-                <Route exact={true} path='/media-object'><DetailsLoader pattern="Media object" /></Route>
-                <Route exact={true} path='/menu'><DetailsLoader pattern="Menu" /></Route>
-                <Route exact={true} path='/modal'><DetailsLoader pattern="Modal" /></Route>
-                <Route exact={true} path='/notification'><DetailsLoader pattern="Notification" /></Route>
-                <Route exact={true} path='/pagination'><DetailsLoader pattern="Pagination" /></Route>
+                <Route exact={true} path='/badge'><DetailsLoader pattern={Pattern.Badge} /></Route>
+                <Route exact={true} path='/breadcrumb'><DetailsLoader pattern={Pattern.Breadcrumb} /></Route>
+                <Route exact={true} path='/button-with-icon'><DetailsLoader pattern={Pattern.ButtonWithIcon} /></Route>
+                <Route exact={true} path='/card'><DetailsLoader pattern={Pattern.Card} /></Route>
+                <Route exact={true} path='/centering'><DetailsLoader pattern={Pattern.Centering} /></Route>
+                <Route exact={true} path='/docked-at-corner'><DetailsLoader pattern={Pattern.DockedAtCorner} /></Route>
+                <Route exact={true} path='/dot-navigation'><DetailsLoader pattern={Pattern.DotNavigation} /></Route>
+                <Route exact={true} path='/feature-list'><DetailsLoader pattern={Pattern.FeatureList} /></Route>
+                <Route exact={true} path='/fixed-at-corner'><DetailsLoader pattern={Pattern.FixedAtCorner} /></Route>
+                <Route exact={true} path='/holy-grail'><DetailsLoader pattern={Pattern.HolyGrail} /></Route>
+                <Route exact={true} path='/input-add-on'><DetailsLoader pattern={Pattern.InputAddOn} /></Route>
+                <Route exact={true} path='/media-object'><DetailsLoader pattern={Pattern.MediaObject} /></Route>
+                <Route exact={true} path='/menu'><DetailsLoader pattern={Pattern.Menu} /></Route>
+                <Route exact={true} path='/modal'><DetailsLoader pattern={Pattern.Modal} /></Route>
+                <Route exact={true} path='/notification'><DetailsLoader pattern={Pattern.Notification} /></Route>
+                <Route exact={true} path='/pagination'><DetailsLoader pattern={Pattern.Pagination} /></Route>
                 <Route exact={true} path='/previous-next-buttons'>
-                    <DetailsLoader pattern="Previous next buttons" />
+                    <DetailsLoader pattern={Pattern.PreviousNextButtons} />
                 </Route>
-                <Route exact={true} path='/pricing-table'><DetailsLoader pattern="Pricing table" /></Route>
-                <Route exact={true} path='/property-list'><DetailsLoader pattern="Property list" /></Route>
-                <Route exact={true} path='/progress-bar'><DetailsLoader pattern="Progress bar" /></Route>
+                <Route exact={true} path='/pricing-table'><DetailsLoader pattern={Pattern.PricingTable} /></Route>
+                <Route exact={true} path='/property-list'><DetailsLoader pattern={Pattern.PropertyList} /></Route>
+                <Route exact={true} path='/progress-bar'><DetailsLoader pattern={Pattern.PropertyList} /></Route>
                 <Route exact={true} path='/questions-and-answers'>
-                    <DetailsLoader pattern="Questions and answers" />
+                    <DetailsLoader pattern={Pattern.QuestionsAndAnswers} />
                 </Route>
-                <Route exact={true} path='/radio-switch'><DetailsLoader pattern="Radio switch" /></Route>
-                <Route exact={true} path='/same-height-columns'><DetailsLoader pattern="Same height columns" /></Route>
-                <Route exact={true} path='/search-box'><DetailsLoader pattern="Search box" /></Route>
-                <Route exact={true} path='/separator'><DetailsLoader pattern="Separator" /></Route>
-                <Route exact={true} path='/sidebar'><DetailsLoader pattern="Sidebar" /></Route>
-                <Route exact={true} path='/simple-grid'><DetailsLoader pattern="Simple grid" /></Route>
-                <Route exact={true} path='/slider'><DetailsLoader pattern="Slider" /></Route>
-                <Route exact={true} path='/split-navigation'><DetailsLoader pattern="Split navigation" /></Route>
-                <Route exact={true} path='/split-screen'><DetailsLoader pattern="Split screen" /></Route>
-                <Route exact={true} path='/stepper-input'><DetailsLoader pattern="Stepper input" /></Route>
-                <Route exact={true} path='/sticky-footer'><DetailsLoader pattern="Sticky footer" /></Route>
-                <Route exact={true} path='/sticky-header'><DetailsLoader pattern="Sticky header" /></Route>
-                <Route exact={true} path='/switch'><DetailsLoader pattern="Switch" /></Route>
-                <Route exact={true} path='/tab'><DetailsLoader pattern="Tab" /></Route>
-                <Route exact={true} path='/toggle-password-visibility'><DetailsLoader pattern="Toggle password visibility" /></Route>
-                <Route exact={true} path='/wizard'><DetailsLoader pattern="Wizard" /></Route>
+                <Route exact={true} path='/radio-switch'>
+                    <DetailsLoader pattern={Pattern.RadioSwitch} />
+                </Route>
+                <Route exact={true} path='/same-height-columns'>
+                    <DetailsLoader pattern={Pattern.SameHeightColumns} />
+                </Route>
+                <Route exact={true} path='/search-box'><DetailsLoader pattern={Pattern.SearchBox} /></Route>
+                <Route exact={true} path='/separator'><DetailsLoader pattern={Pattern.Separator} /></Route>
+                <Route exact={true} path='/sidebar'><DetailsLoader pattern={Pattern.Sidebar} /></Route>
+                <Route exact={true} path='/simple-grid'><DetailsLoader pattern={Pattern.SimpleGrid} /></Route>
+                <Route exact={true} path='/slider'><DetailsLoader pattern={Pattern.Slider} /></Route>
+                <Route exact={true} path='/split-navigation'><DetailsLoader pattern={Pattern.SplitNavigation} /></Route>
+                <Route exact={true} path='/split-screen'><DetailsLoader pattern={Pattern.SplitScreen} /></Route>
+                <Route exact={true} path='/stepper-input'><DetailsLoader pattern={Pattern.StepperInput} /></Route>
+                <Route exact={true} path='/sticky-footer'><DetailsLoader pattern={Pattern.StickyFooter} /></Route>
+                <Route exact={true} path='/sticky-header'><DetailsLoader pattern={Pattern.StickyHeader} /></Route>
+                <Route exact={true} path='/switch'><DetailsLoader pattern={Pattern.Switch} /></Route>
+                <Route exact={true} path='/tab'><DetailsLoader pattern={Pattern.Tab} /></Route>
+                <Route exact={true} path='/toggle-password-visibility'>
+                    <DetailsLoader pattern={Pattern.TogglePasswordVisibility} />
+                </Route>
+                <Route exact={true} path='/wizard'><DetailsLoader pattern={Pattern.Wizard} /></Route>
             </RouteSwitch>
         </Router>
     );
diff --git a/client/loaders/DetailsLoader.tsx b/client/loaders/DetailsLoader.tsx
index 751fb90..2815774 100644
--- a/client/loaders/DetailsLoader.tsx
+++ b/client/loaders/DetailsLoader.tsx
@@ -1,10 +1,11 @@
 import loadable, { LoadableComponent } from '@loadable/component';
 import React from 'react';
 
+import Pattern from '../constants/Pattern';
 import './spinner.css';
 
 interface DetailsLoaderProps {
-    pattern: string;
+    pattern: Pattern;
 }
 
 const slug = (item: string) => item.toLowerCase().split(' ').join('-');
diff --git a/client/patterns/property-list/Details.tsx b/client/patterns/property-list/Details.tsx
index 23ecf7a..a347fe1 100644
--- a/client/patterns/property-list/Details.tsx
+++ b/client/patterns/property-list/Details.tsx
@@ -53,6 +53,7 @@ const Details: React.FC<{}> = () => {
                         </div>
                     )}
                     source={`
+<!-- A property item -->
 <dl style="
     /* Content is center horizontally */
     align-items: center;