[GD-11] Implement the category status banner

front/src/components/Category.js

@@ -3,9 +3,38 @@
 import React, { Component } from 'react';
 import * as T from '../types';
 import { fetchData, extractUid, mkLink } from '../utils/index';
-import { If } from 'jsx-control-statements';
+import { If, Choose, When } from 'jsx-control-statements';
 import { Item } from './Item';
 
+
+const CategoryStatusBanner = (props : T.Cat) => {
+  const stub = "This category is a stub, contributions are welcome!";
+  const wip  = "This category is a work in progress";
+  function banner(text: string) {
+    return (
+      <div className="category-status-banner">
+        <strong>{text}</strong>
+        <style jsx>{`
+          .category-status-banner {
+            text-align: center;
+            padding: 0.5em;
+            margin: 0px 10%;
+            background-color: #FFF694;
+            border: 2px solid #202020;
+          }
+        `}</style>
+      </div>
+    )
+  }
+  return (
+    <Choose>
+      <When condition={ props.status === "Stub"     }>{ banner(stub) }</When>
+      <When condition={ props.status === "WIP"      }>{ banner(wip)  }</When>
+      <When condition={ props.status === "Finished" }>     <div/>     </When>
+    </Choose>
+  )
+}
+
 class Category extends Component {
   state: {
     cat : T.Cat
@@ -36,6 +65,7 @@ class Category extends Component {
               <span className="text-button"><a href="#">edit</a></span>
               <span className="text-button"><a href="#">delete</a></span>
             </h2>
+            <CategoryStatusBanner {...this.state.cat}/>
           </div>
           <div id={"category-notes-"+this.state.cat.uid} className="category-notes">
           <div className="noscript-shown shown normal section">
@@ -59,7 +89,6 @@ class Category extends Component {
             box-sizing: border-box;
             line-height: 19.2px;
             width: 762px;
-            height: 24px;
           }
 
           .category-info span {

front/src/types.js

@@ -49,10 +49,13 @@ export type Item = {
   cons : Array<Trait>
 };
 
+export type CatStatus = "Stub" | "WIP" | "Finished";
+
 export type Cat = {
   uid: string,
-  title : string,
+  title: string,
   group: string,
-  description : Description,
+  status: CatStatus,
-  items : Array<Item>
+  description: Description,
+  items: Array<Item>
 };

src/Guide/Handlers.hs

@@ -92,6 +92,7 @@ apiMethods = Spock.subcomponent "api" $ do
           , "group" A..= (cat^.group_)
           , "description" A..= (cat^.notes)
           , "items" A..= (cat^.items)
+          , "status" A..= (cat^.status)
           ]
     json jsonCat
 

src/Guide/Types/Core.hs

@@ -199,7 +199,10 @@ data CategoryStatus
 deriveSafeCopySimple 2 'extension ''CategoryStatus
 
 instance A.ToJSON CategoryStatus where
-  toJSON = A.genericToJSON A.defaultOptions
+  toJSON = \case
+    CategoryStub     -> A.toJSON ("Stub" :: Text)
+    CategoryWIP      -> A.toJSON ("WIP" :: Text)
+    CategoryFinished -> A.toJSON ("Finished" :: Text)
 
 data CategoryStatus_v1
   = CategoryStub_v1

static/markup.css

@@ -43,12 +43,3 @@ a:link    {color: #008ACE; text-decoration: none;}
 a:visited {color: #B40EB4; text-decoration: none;}
 a:hover   {text-decoration: underline;}
 a:active  {text-decoration: underline;}
-
-.category-status-banner {
-  background-color: #FFF694;
-  text-align: center;
-  border: 2px solid #202020;
-  padding: 0.5em;
-  margin-left: 10%;
-  margin-right: 10%;
-}