1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
{-# LANGUAGE CPP #-}
{-# LANGUAGE DataKinds #-}
{-# LANGUAGE DisambiguateRecordFields #-}
{-# LANGUAGE ImportQualifiedPost #-}
{-# LANGUAGE LambdaCase #-}
{-# LANGUAGE NamedFieldPuns #-}
{-# LANGUAGE OverloadedRecordDot #-}
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE QualifiedDo #-}
{-# LANGUAGE RankNTypes #-}
{-# LANGUAGE TypeOperators #-}
{-# LANGUAGE NoImplicitPrelude #-}
{-# OPTIONS_GHC -Wno-name-shadowing #-}
module Main where
import Clay qualified as C
import DOM.HTML.Indexed qualified as I
import Data.Functor.Coyoneda
import Data.NT
import Data.Row
import Halogen as H
import Halogen.Component.Debounced
import Halogen.HTML as HH
import Halogen.HTML.Events as HE
import Halogen.HTML.Layout as L
import Halogen.HTML.Layout.BoxLayout
import Halogen.HTML.Layout.GridBagLayout
import Halogen.HTML.Properties as HP
import Halogen.Subscription qualified as HS
import Halogen.VDom.DOM.Monad
import JavaScript.Web.XMLHttpRequest
import Protolude hiding (log)
import UnliftIO (MonadUnliftIO)
#if defined(javascript_HOST_ARCH)
import Halogen.IO.Util as HA
import Halogen.VDom.Driver (runUI)
#endif
attachComponent :: IO (HalogenSocket VoidF () IO)
logStr :: Text -> IO ()
#if defined(javascript_HOST_ARCH)
attachComponent =
HA.awaitBody >>= runUI chats testChats
logStr = log
#else
attachComponent = panic "This module can only be run on JavaScript"
logStr = putStrLn
#endif
main :: IO ()
main = do
HalogenSocket {messages} <- attachComponent
void $ HS.subscribe messages $ \st ->
logStr $ "State changed: " <> show st
data Chat = Chat
{ chatMessages :: [ChatMessage],
draft :: Text
}
deriving (Show)
data ChatMessage = ChatMessage Text
deriving (Show)
testChats :: [Chat]
testChats =
[ Chat
[ ChatMessage "Hello",
ChatMessage "Hi",
ChatMessage "Hey"
]
""
]
type Slots = ("chat" .== H.Slot VoidF () ())
chats :: (MonadDOM m, MonadUnliftIO m) => H.Component query [Chat] () m
chats =
H.mkComponent $
H.ComponentSpec
{ initialState,
render,
eval
}
where
initialState = pure
render ::
(MonadDOM m, MonadUnliftIO m) =>
[Chat] -> H.ComponentHTML action Slots m
render chats =
HH.div_ $
fmap
( \(index, input) ->
HH.slot_ "chat" () chat input
)
(zip [1 ..] chats)
eval = H.mkEval H.defaultEval
data Action
= DraftChanged Text
| DraftSubmitted
chat :: (MonadDOM m, MonadUnliftIO m) => H.Component query Chat () m
chat =
H.mkComponent $
H.ComponentSpec
{ initialState,
render,
eval =
H.mkEval $
H.defaultEval
{ handleAction,
initialize = Nothing
}
}
where
initialState = pure
render (Chat chatMessages draft) =
HH.div_
[ HH.div_ $
fmap
(\(ChatMessage message) -> HH.text message)
chatMessages,
HH.input
[ HP.value draft,
HE.onInputValueChange $ Just . DraftChanged,
HE.onClick $ const DraftSubmitted
]
]
handleAction = \case
DraftChanged draft -> do
modify $ \chat -> chat {draft = draft}
DraftSubmitted -> do
modify $ \chat ->
chat
{ chatMessages = chat.chatMessages ++ [ChatMessage chat.draft],
draft = ""
}
|
