ページごとにモジュール化

src/assets/js/GitHub.elm

@@ -1,4 +1,4 @@
-module GitHub exposing (Issue, Repo, getIssues, getRepos)
+module GitHub exposing (Issue, Repo, getIssues, getRepos, issueUrl)
 
 import Http
 import Json.Decode as D exposing (Decoder)
@@ -12,7 +12,7 @@ import Url.Builder
 
 type alias Repo =
     { name : String
-    , description : String
+    , description : Maybe String
     , language : Maybe String
     , owner : String
     , fork : Int
@@ -37,7 +37,7 @@ repoDecoder : Decoder Repo
 repoDecoder =
     D.map7 Repo
         (D.field "name" D.string)
-        (D.field "description" D.string)
+        (D.maybe (D.field "description" D.string))
         (D.maybe (D.field "language" D.string))
         (D.at [ "owner", "login" ] D.string)
         (D.field "forks" D.int)
@@ -61,15 +61,34 @@ issueDecoder =
 getRepos : (Result Http.Error (List Repo) -> msg) -> String -> Cmd msg
 getRepos toMsg userName =
     Http.get
-        { url =
-            Url.Builder.crossOrigin "https://api.github.com" [ "users", userName, "repos" ] []
+        { url = repoUrl userName
         , expect = Http.expectJson toMsg reposDecoder
         }
 
 
 getIssues : (Result Http.Error (List Issue) -> msg) -> String -> String -> Cmd msg
 getIssues toMsg userName projectName =
     Http.get
-        { url = Url.Builder.crossOrigin "https://api.github.com" [ "repos", userName, projectName, "issues" ] []
+        { url = issuesUrl userName projectName
         , expect = Http.expectJson toMsg issuesDecoder
         }
+
+
+domain : String
+domain =
+    "https://api.github.com"
+
+
+repoUrl : String -> String
+repoUrl userName =
+    Url.Builder.crossOrigin domain [ "users", userName, "repos" ] []
+
+
+issuesUrl : String -> String -> String
+issuesUrl userName projectName =
+    Url.Builder.crossOrigin domain [ "repos", userName, projectName, "issues" ] []
+
+
+issueUrl : String -> String -> Int -> String
+issueUrl userName projectName number =
+    Url.Builder.crossOrigin domain [ "repos", userName, projectName, "issues", String.fromInt number ] []

src/assets/js/Main.elm

@@ -6,6 +6,7 @@ import GitHub exposing (Issue, Repo)
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Http
+import Page.Repo exposing (..)
 import Route exposing (..)
 import Url
 import Url.Builder
@@ -42,7 +43,7 @@ type Page
     | ErrorPage Http.Error
     | TopPage
     | UserPage (List Repo)
-    | RepoPage (List Issue)
+    | RepoPage Page.Repo.Model
 
 
 init : () -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
@@ -61,6 +62,7 @@ type Msg
     = UrlRequested Browser.UrlRequest
     | UrlChanged Url.Url
     | Loaded (Result Http.Error Page)
+    | RepoMsg Page.Repo.Msg
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
@@ -92,6 +94,22 @@ update msg model =
             , Cmd.none
             )
 
+        -- Repoページのメッセージが来たとき
+        RepoMsg repoMsg ->
+            -- 現在表示中のページが
+            case model.page of
+                -- RepoPageであれば、
+                RepoPage repoModel ->
+                    -- Repoページのupdate処理を行う
+                    let
+                        ( newRepoModel, topCmd ) =
+                            Page.Repo.update repoMsg repoModel
+                    in
+                    ( { model | page = RepoPage newRepoModel }, Cmd.map RepoMsg topCmd )
+
+                _ ->
+                    ( model, Cmd.none )
+
 
 
 {- パスに応じて各ページを初期化する -}
@@ -117,11 +135,13 @@ goTo maybeRoute model =
             )
 
         Just (Route.Repo userName projectName) ->
-            -- RepoPageを取得
-            ( model
-            , GitHub.getIssues (Result.map RepoPage >> Loaded)
-                userName
-                projectName
+            -- Repo ページの初期化
+            let
+                ( repoModel, repoCmd ) =
+                    Page.Repo.init userName projectName
+            in
+            ( { model | page = RepoPage repoModel }
+            , Cmd.map RepoMsg repoCmd
             )
 
 
@@ -156,8 +176,10 @@ view model =
             UserPage repos ->
                 viewUserPage repos
 
-            RepoPage issues ->
-                viewRepoPage issues
+            RepoPage repoPageModel ->
+                -- Repoページのview関数を呼ぶ
+                Page.Repo.view repoPageModel
+                    |> Html.map RepoMsg
         ]
     }
 
@@ -185,7 +207,7 @@ viewTopPage : Html Msg
 viewTopPage =
     ul []
         [ viewLink (Url.Builder.absolute [ "elm" ] [])
-        , viewLink (Url.Builder.absolute [ "evancz" ] [])
+        , viewLink (Url.Builder.absolute [ "hibohiboo" ] [])
         ]
 
 
@@ -198,20 +220,6 @@ viewUserPage repos =
         )
 
 
-viewRepoPage : List Issue -> Html msg
-viewRepoPage issues =
-    ul [] (List.map viewIssue issues)
-
-
-viewIssue : Issue -> Html msg
-viewIssue issue =
-    li []
-        [ span [] [ text ("[" ++ issue.state ++ "]") ]
-        , span [] [ text ("#" ++ String.fromInt issue.number) ]
-        , span [] [ text issue.title ]
-        ]
-
-
 viewLink : String -> Html msg
 viewLink path =
     li [] [ a [ href path ] [ text path ] ]

src/assets/js/Page/Repo.elm

@@ -0,0 +1,67 @@
+module Page.Repo exposing (Model, Msg, init, update, view)
+
+import GitHub exposing (Issue, Repo)
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Http
+
+
+type alias Model =
+    { userName : String
+    , projectName : String
+    , state : State
+    }
+
+
+type State
+    = Init
+    | Loaded (List Issue)
+    | Error Http.Error
+
+
+init : String -> String -> ( Model, Cmd Msg )
+init userName projectName =
+    -- ページの初期化
+    -- 最初のModelを作ると同時に、ページの表示に必要なデータをHttpで取得
+    ( Model userName projectName Init
+    , GitHub.getIssues GotIssues userName projectName
+    )
+
+
+type Msg
+    = GotIssues (Result Http.Error (List Issue))
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    --- init での Http リクエストの結果が得られたら Model を変更する
+    case msg of
+        GotIssues (Ok issues) ->
+            ( { model | state = Loaded issues }, Cmd.none )
+
+        GotIssues (Err err) ->
+            ( { model | state = Error err }, Cmd.none )
+
+
+view : Model -> Html Msg
+view model =
+    case model.state of
+        Init ->
+            text "Loading ..."
+
+        Loaded issues ->
+            ul [] (List.map (viewIssue model.userName model.projectName) issues)
+
+        Error e ->
+            text (Debug.toString e)
+
+
+viewIssue : String -> String -> Issue -> Html Msg
+viewIssue userName projectName issue =
+    li []
+        [ span [] [ text ("[" ++ issue.state ++ "]") ]
+        , a [ href (GitHub.issueUrl userName projectName issue.number), target "_blank" ]
+            [ text ("#" ++ String.fromInt issue.number)
+            , text issue.title
+            ]
+        ]

src/assets/js/index.ts

@@ -16,11 +16,11 @@ const app = Elm.Main.init({ node: mountNode, flags });
 
 // app.ports.initialize.subscribe(() => {
 // });
-app.ports.toJs.subscribe((data: string) => {
-  // localStorage[STORAGE_KEY] = data;
+// app.ports.toJs.subscribe((data: string) => {
+//   // localStorage[STORAGE_KEY] = data;
 
-  // // 本文がなければ、ストレージから削除してしまう
-  // if(data.trim().length == 0){
-  //   localStorage.removeItem(STORAGE_KEY);  
-  // }
-});
+//   // // 本文がなければ、ストレージから削除してしまう
+//   // if(data.trim().length == 0){
+//   //   localStorage.removeItem(STORAGE_KEY);  
+//   // }
+// });