Group categories (#173)

front-ps/common/Guide/CategoryOverview/View/CategoryOverview.purs

@@ -6,20 +6,29 @@ import Bulma.Columns.Columns (column, columns, isMultiline) as B
 import Bulma.Columns.Size (PercentSize(..), isPercentSize, isPercentSizeResponsive) as B
 import Bulma.Common (Is(..), Breakpoint(..), runClassNames, runClassName) as B
 import Bulma.Elements.Title (title, isSize) as B
-import Data.Foldable (for_)
-import Guide.Api.Types (CategoryInfo(..))
+import Data.Array (filter, head, null, snoc)
+import Data.Foldable (foldl, for_)
+import Data.Generic (gEq)
+import Data.Lens.Getter ((^.))
+import Data.Lens.Record (prop)
+import Data.Maybe (Maybe(..), maybe)
+import Data.StrMap (StrMap, empty, insert, member, update)
+import Data.Symbol (SProxy(..))
+import Guide.Api.Types (CategoryInfo(..), _CategoryInfo)
 import Guide.CategoryOverview.Events (Event)
 import Guide.CategoryOverview.State (State(..))
-import Guide.Common.CSS.Global (catColumn, catLink, catHeadline, catSubheadline, catsWip, catsFinished, catsStub) as CSS
+import Guide.Common.CSS.Global (catColumn, catLink, catLinkWrapper, catHeadline, catSubheadline, catsWip, catsFinished, catsStub) as CSS
 import Guide.Common.Routes (categoryDetailUrl)
 import Guide.Common.Types (CCategories, unwrapUid)
+import Guide.Types.Core (CategoryStatus(..))
 import Network.RemoteData (RemoteData(..))
 import Pux.DOM.HTML (HTML) as P
 import Pux.DOM.HTML.Attributes (key) as P
-import Text.Smolder.HTML (a, div, h2, p) as S
+import Text.Smolder.HTML (a, div, h2, li, p, ul) as S
 import Text.Smolder.HTML.Attributes (href, className) as S
 import Text.Smolder.Markup ((!))
 import Text.Smolder.Markup (text) as S
+import Type.Data.Boolean (kind Boolean)
 
 view :: State -> P.HTML Event
 view st@(State state) =
@@ -37,10 +46,20 @@ catsView st@(State state) cats =
                     [ B.columns
                     , B.isMultiline
                     ])
-    $ for_ cats (catView st)
+    $ for_ (groupCats cats) (catGroupView st)
+    where
+      groupCats :: CCategories -> StrMap CCategories
+      groupCats =
+        foldl (\sm cat ->
+                  if member (groupName cat) sm
+                  then update (\cats' -> Just $ snoc cats' cat) (groupName cat) sm
+                  else insert (groupName cat) [cat] sm
+              ) empty
+        where
+          groupName cat = cat ^. (_CategoryInfo <<< prop (SProxy :: SProxy "categoryInfoGroup_"))
 
-catView :: State -> CategoryInfo -> P.HTML Event
-catView (State state) (CategoryInfo cat) =
+catGroupView :: State -> Array CategoryInfo -> P.HTML Event
+catGroupView st groupedCats =
   S.div
     ! S.className (B.runClassNames
                     [ B.column
@@ -48,7 +67,9 @@ catView (State state) (CategoryInfo cat) =
                     , B.isPercentSizeResponsive B.OneThird B.Desktop
                     , CSS.catColumn
                     ])
-    ! P.key (unwrapUid cat.categoryInfoUid) $ do
+    ! P.key (groupKey groupedCats)
+    $ do
+      -- headline of category
       S.h2
         ! S.className (B.runClassNames
                         [ B.title
@@ -56,35 +77,66 @@ catView (State state) (CategoryInfo cat) =
                         , CSS.catHeadline
                         ]
                       )
-        $ S.text "Headline"
-      S.div
-        ! S.className (B.runClassName CSS.catsFinished)
-        $ do
-          S.a
-            ! S.className (B.runClassName CSS.catLink)
-            ! S.href (categoryDetailUrl state.categoryName cat.categoryInfoUid)
-            $ S.text cat.categoryInfoTitle
-          S.div
-            ! S.className (B.runClassName CSS.catsWip)
-            $ do
-              S.p
-                ! S.className (B.runClassNames
-                                [ CSS.catSubheadline
-                                ]
-                              )
-                $ S.text "In progress"
-              S.p
-                ! S.className (B.runClassName CSS.catLink)
-                $ S.text "lorem ipsum"
-          S.div
-            ! S.className (B.runClassName CSS.catsStub)
-            $ do
-              S.p
-                ! S.className (B.runClassNames
-                                [ CSS.catSubheadline
-                                ]
-                              )
-                $ S.text "To be written"
-              S.p
-                ! S.className (B.runClassName CSS.catLink)
-                $ S.text "lorem ipsum"
+        $ S.text (maybe "" getTitle firstCat)
+      -- finished categories
+      unless (null catsFinished) $
+        S.ul
+          ! S.className (B.runClassName CSS.catsFinished)
+          $ for_ catsFinished (catLinkView st)
+      -- wip categories
+      unless (null catsWip) $
+        S.div
+          ! S.className (B.runClassName CSS.catsWip)
+          $ do
+            S.p
+              ! S.className (B.runClassName CSS.catSubheadline)
+              $ S.text "In progress"
+            S.ul
+              $ for_ catsWip (catLinkView st)
+      -- stub categories
+      unless (null catsStub) $
+        S.div
+          ! S.className (B.runClassName CSS.catsStub)
+          $ do
+            S.p
+              ! S.className (B.runClassName CSS.catSubheadline)
+              $ S.text "To be written"
+            S.ul
+              $ for_ catsStub (catLinkView st)
+      where
+        firstCat :: Maybe CategoryInfo
+        firstCat = head groupedCats
+
+        getTitle :: CategoryInfo -> String
+        getTitle cat =
+          cat ^. (_CategoryInfo <<< prop (SProxy :: SProxy "categoryInfoGroup_"))
+
+        -- Fold all UId's of a group to get a unique key (`String`)
+        -- which is needed by React/Preact
+        groupKey :: Array CategoryInfo -> String
+        groupKey =
+          foldl (\s (CategoryInfo cat) -> (unwrapUid cat.categoryInfoUid) <> s) ""
+
+        filterCatsByStatus :: Array CategoryInfo -> CategoryStatus -> CCategories
+        filterCatsByStatus cats status =
+          filter (compareStatus status) cats
+          where
+            compareStatus :: CategoryStatus -> CategoryInfo -> Boolean
+            compareStatus status' (CategoryInfo cat) =
+              gEq status' (_.categoryInfoStatus cat)
+              -- ^ We don't have an `Eq` instance of generated `CategoryStatus`
+              -- However, `CategoryStatus` is derived by `Generic`
+              -- so we can compare generically those by using `gEq`
+
+        catsFinished = filterCatsByStatus groupedCats CategoryFinished
+        catsWip = filterCatsByStatus groupedCats CategoryWIP
+        catsStub = filterCatsByStatus groupedCats CategoryStub
+
+catLinkView :: State -> CategoryInfo -> P.HTML Event
+catLinkView (State state) (CategoryInfo cat) =
+  S.li
+    ! S.className (B.runClassName CSS.catLinkWrapper)
+    $ S.a
+      ! S.className (B.runClassName CSS.catLink)
+      ! S.href (categoryDetailUrl state.categoryName cat.categoryInfoUid)
+      $ S.text cat.categoryInfoTitle

front-ps/common/Guide/Common/CSS/Global.purs

@@ -26,6 +26,9 @@ catColumn = catClass $ ClassPart "column"
 catLink :: ClassName
 catLink = catClass $ ClassPart "link"
 
+catLinkWrapper :: ClassName
+catLinkWrapper = catClass $ ClassPart "link-wrapper"
+
 catHeadline :: ClassName
 catHeadline = catClass $ ClassPart "headline"
 

front-ps/common/Guide/Common/CSS/Global.scss

@@ -32,21 +32,27 @@
 
   &-categories {
       &-finished {
-        padding-left: 2em;
+        margin-left: 2em;
         .guide-category-link {
           font-size: 1.8rem;
         }
       }
       &-wip {
+        margin-left: 2em;
         .guide-category-link {
           font-size: 1rem;
-          padding-left: 1.5em;
+          &-wrapper {
+            padding-left: 1.5em;
+          }
         }
       }
       &-stub {
+        margin-left: 2em;
         .guide-category-link {
           font-size: 1rem;
-          padding-left: 1.5em;
+          &-wrapper {
+            padding-left: 1.5em;
+          }
         }
       }
   }