Example sub-component (Catalog Grid)

chandlr.cabal

@@ -1,4 +1,3 @@
--- cabal-version:      2.4
 cabal-version:       >=1.10
 -- The cabal-version field refers to the version of the .cabal specification,
 -- and can be different from the cabal-install (the tool) version and the
@@ -47,7 +46,7 @@ category:           Web
 build-type:         Simple
 
 -- Extra doc files to be distributed with the package, such as a CHANGELOG or a README.
-extra-doc-files:    CHANGELOG.md
+-- extra-doc-files:    CHANGELOG.md
 
 -- Extra source files to be distributed with the package, such as examples, or a tutorial module.
 -- extra-source-files:
@@ -63,7 +62,7 @@ executable chandlr
     ghcjs-options:    -dedupe
 
     -- Modules included in this executable, other than Main.
-    -- other-modules:
+    other-modules:    Component.CatalogGrid
 
     -- LANGUAGE extensions used by modules in this package.
     -- other-extensions:

default.nix

@@ -1,15 +1,17 @@
-{ nixpkgs ? import <nixpkgs> {}, }:
+{ new_pkgs ? import <nixpkgs> {}, }:
+
+with (import (builtins.fetchTarball {
+  url = "https://github.com/dmjio/miso/archive/refs/tags/1.8.tar.gz";
+}) {});
 
 let
-  pkgs = import ./nixpkgs.nix { nixpkgs = nixpkgs; } ;
 
-  inherit (pkgs.haskell.packages) ghcjs;
+  drv = pkgs.haskell.packages.ghcjs.callCabal2nix "chandlr" ./. {};
-  drv = ghcjs.callCabal2nix "chandlr" ./. {};
 
   env = drv.env.overrideAttrs (oldAttrs: {
     buildInputs = oldAttrs.buildInputs ++ [
-      pkgs.haskell.packages.ghc.cabal-install
+      pkgs.haskellPackages.cabal-install
-      nixpkgs.haskellPackages.miso-from-html
+      new_pkgs.haskellPackages.miso-from-html
     ];
   });
 

html/example.html

@@ -0,0 +1,8 @@
+<nav class="navbar" role="navigation">
+  <div class="navbar-brand">
+    <a class="navbar-item" href="https://bulma.io">
+      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
+      <a>ok<p>hey</p></a>
+    </a>
+  </div>
+</nav>

html/grid.html

@@ -0,0 +1,3 @@
+<div class="threads">
+  <div id="Grid"></div>
+</div>

html/grid_item.html

@@ -0,0 +1,16 @@
+<div class="mix">
+  <div class="thread grid-li grid-size-small">
+    <a href="/a/res/1.html">
+      <img class="thread-image" src="/a/thumb/1111111111111.png" alt="Opening post image" title="Dec 18 23:12">
+    </a>
+    <div class="replies">
+      <strong>R: 517 / I: 204</strong>
+      <p class="intro">
+        <span class="subject">This is the thread subject, usually a brief description.</span>
+      </p>
+      Hello World
+      <br>
+      Hello World2
+    </div>
+  </div>
+</div>

nixpkgs.nix

@@ -1,37 +0,0 @@
-{ nixpkgs }:
-let
-  nixpkgs-src = nixpkgs.fetchFromGitHub {
-    owner = "NixOS";
-    repo  = "nixpkgs";
-    rev = "3fd87ad0073fd1ef71a8fcd1a1d1a89392c33d0a";
-    sha256 = "0n4ffwwfdybphx1iyqz1p7npk8w4n78f8jr5nq8ldnx2amrkfwhl";
-  };
-
-  config = {
-    packageOverrides = pkgs: rec {
-      haskell = pkgs.haskell // {
-        packages = pkgs.haskell.packages // {
-          ghc = pkgs.haskell.packages.ghc844;
-        } // {
-
-          # Many packages don't build on ghcjs because of a dependency on doctest
-          # (which doesn't build), or because of a runtime error during the test run.
-          # See: https://github.com/ghcjs/ghcjs/issues/711
-          ghcjs = pkgs.haskell.packages.ghcjs84.override {
-            overrides = self: super: with pkgs.haskell.lib; {
-              tasty-quickcheck = dontCheck super.tasty-quickcheck;
-              http-types       = dontCheck super.http-types;
-              comonad          = dontCheck super.comonad;
-              semigroupoids    = dontCheck super.semigroupoids;
-              lens             = dontCheck super.lens;
-              servant          = dontCheck super.servant;
-            };
-          };
-        };
-
-      };
-    };
-  };
-
-in
-  import nixpkgs-src { inherit config; }

src/Component/CatalogGrid.hs

@@ -0,0 +1,77 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Component.CatalogGrid
+( Model
+, initialModel
+, Action
+, Interface (..)
+, view
+) where
+
+import Miso
+    ( View
+    , div_
+    , class_
+    , img_
+    , href_
+    , a_
+    , src_
+    , alt_
+    , title_
+    , strong_
+    , span_
+    , p_
+    , br_
+    , id_
+    )
+
+type Model = ()
+
+initialModel :: Model
+initialModel = ()
+
+type Action = ()
+
+data Interface a = Interface
+    { passAction   :: Action -> a
+    , selectThread :: ()
+    }
+
+view :: Interface a -> Model -> View a
+view iface model =
+    div_
+        [ class_ "threads" ]
+        [ div_
+            [ id_ "Grid" ]
+            [ gridItem | _ <- [0..10] ]
+        ]
+
+gridItem :: View a
+gridItem =
+    div_
+        [ class_ "mix" ]
+        [ div_
+            [ class_ "thread grid-li grid-size-small" ]
+            [ a_
+                [ href_ "/a/res/1.html" ]
+                [ img_
+                    [ class_ "thread-image"
+                    , src_ "/a/thumb/1111111111111.png"
+                    , alt_ "Opening post image"
+                    , title_ "Dec 18 23:12"
+                    ]
+                ]
+            , div_
+                [ class_ "replies" ]
+                [ strong_ [][ "R: 517 / I: 204" ]
+                , p_
+                    [ class_ "intro" ]
+                    [ span_
+                        [ class_ "subject" ][ "This is the thread subject, usually a brief description." ]
+                    ]
+                , "Hello World"
+                , br_ []
+                , "Hello World2"
+                ]
+            ]
+        ]

src/Main.hs

@@ -7,53 +7,61 @@ import Miso
     , startApp
     , App (..)
     , h1_
+    , div_
     , text
     , Effect
     --, (#>)
     , noEff
     , defaultEvents
+    , LogLevel (Off)
     )
 
-data Unit = Unit
+import qualified Component.CatalogGrid as Grid
-    deriving Eq
 
-type Model = Unit
+data Model = Model
+    { gridModel :: Grid.Model
+    } deriving Eq
 
-type Action = Unit
+data Action
+    = GridAction Grid.Action
+    | NoAction
+
+initialModel :: Model
+initialModel = Model
+    { gridModel = Grid.initialModel
+    }
 
 main :: IO ()
 main = startApp App
-    { model         = Unit
+    { model         = initialModel
     , update        = mainUpdate
     , view          = mainView
     , subs          = []
     , events        = defaultEvents
-    , initialAction = Unit
+    , initialAction = NoAction
     , mountPoint    = Nothing
+    , logLevel      = Off
     }
 
 mainView :: Model -> View Action
-mainView = const $ h1_ [] [ text "Hello World" ]
+mainView model =
+    div_ []
+        [ h1_ [] [ text "Hello World" ]
+        , Grid.view iGrid (gridModel model)
+        ]
 
 mainUpdate :: Action -> Model -> Effect Action Model
--- mainUpdate = const $ (#>) (pure Unit) -- this is an infinite loop!
 mainUpdate = const noEff
 
+iGrid :: Grid.Interface Action
+iGrid = Grid.Interface
+    { Grid.passAction = GridAction
+    , Grid.selectThread = ()
+    }
+
 {-
  - TODO:
  -  - Create Hello World page render ✓
- -  - Create CatalogGrid component (static at first)
+ -  - Create CatalogGrid component (static at first) ✓
- -}
+ -  - Get postgrest url from page header and perform an initial xhr request
-
-{-
- -
- - TODO:
- - - Initial page just needs to display the search bar, fetch catalog and
- -   display it
- -  Make Model
- -      - single value representing that we need to go fetch the initial page
- -  
- -  maybe immediately create the CatalogGrid component with its own model? That
- -  would allow us to swap it out with a thread / overboard component later, and
- -  tell it what to render
  -}