Basic.purs

module Example.Basic where

import Prelude
import Data.Array ((!!), drop, mapWithIndex, take)
import Data.Foldable (traverse_)
import Data.Int as Int
import Data.Maybe (fromMaybe, maybe, Maybe(..))
import Effect (Effect)
import Effect.Class.Console as Console
import Effect.Exception (throw)
import React.Basic.DOM (render)
import React.Basic.DOM as R
import React.Basic.DOM.Events (targetChecked)
import React.Basic.Events as Events
import React.Basic.Hooks (Component, component, fragment, mkReducer, useReducer, (/\))
import React.Basic.Hooks as React
import React.Basic.ReactDND (dndProvider, mergeTargets, useDrag, useDrop)
import React.Basic.ReactDND.Backends.HTML5Backend (html5Backend)
import Web.DOM.NonElementParentNode (getElementById)
import Web.HTML (window)
import Web.HTML.HTMLDocument (toNonElementParentNode)
import Web.HTML.Window (document)

data Action
 = Move { from :: Int, to :: Int }
 | SetDone String Boolean

type Todo = { id :: String, text :: String, done :: Boolean }

mkTodoExample :: Component Unit
mkTodoExample = do
 todo <- mkTodo
 reducer <- mkReducer update
 React.component "TodoExample" \_ -> React.do
 state /\ dispatch <- useReducer initialState reducer
 pure
 $ dndProvider html5Backend
 $ fragment
 [ R.h1_ [ R.text "Todos" ]
 , R.p_ [ R.text "Drag to reorder the list:" ]
 , R.section_
 $ state.todos
 # mapWithIndex \index t -> todo { index, todo: t, dispatch }
 ]
 where
 initialState =
 { todos:
 [ { id: "a", text: "PureScript", done: true }
 , { id: "b", text: "React Basic", done: true }
 , { id: "c", text: "React Basic DND", done: false }
 ]
 }

 update state = case _ of
 Move { from, to } ->
 state
 { todos = moveItem from to state.todos
 }
 SetDone id done ->
 state
 { todos =
 state.todos
 <#> \t ->
 if t.id == id then
 t { done = done }
 else
 t
 }

mkTodo
 :: Component
 { index :: Int
 , todo :: Todo
 , dispatch :: Action -> Effect Unit
 }
mkTodo = do
 let
 todoDND = "todo-dnd"
 component "Todo" \{ index, todo, dispatch } -> React.do
 { isDragging, connectDrag } <- useDrag { type: todoDND, id: show index }
 { id: maybeDragItem, isOver, connectDrop } <-
 useDrop
 { accept: todoDND
 , onDrop: Int.fromString >>> traverse_ \id -> dispatch $ Move { from: id, to: index }
 }
 pure
 $ R.label
 { ref: mergeTargets connectDrag connectDrop
 , style:
 R.css
 { display: "block"
 , padding: "0.3rem 0.8rem"
 , alignItems: "center"
 , borderTop:
 if isOver && maybe false ((_ > show index)) maybeDragItem then
 "0.2rem solid #0044e4"
 else
 "0.2rem solid transparent"
 , borderBottom:
 if isOver && maybe false ((_ < show index)) maybeDragItem then
 "0.2rem solid #0044e4"
 else
 "0.2rem solid transparent"
 , opacity: if isDragging then 0.1 else 1.0
 }
 , children:
 [ R.input
 { type: "checkbox"
 , checked: todo.done
 , onChange:
 Events.handler targetChecked \checked -> do
 dispatch $ SetDone todo.id $ fromMaybe false checked
 }
 , R.text todo.text
 ]
 }

moveItem :: forall a. Int -> Int -> Array a -> Array a
moveItem fromIndex toIndex items =
 let
 item = items !! fromIndex

 items' = take fromIndex items <> drop (fromIndex + 1) items
 in
 take toIndex items'
 <> maybe [] pure item
 <> drop toIndex items'

main :: Effect Unit
main = do
 maybeContainer <- window
 >>= document
 >>= toNonElementParentNode
 >>> getElementById "container"
 case maybeContainer of
 Nothing -> throw "Container element not found."
 Just container -> do
 todoExample <- mkTodoExample
 render (todoExample unit) container