Fable React Toastify

01 - Toastify.fs

// npm install react-toastify

module Toastify

open Fable.Core
open Fable.Core.JsInterop
open Fable.React

type ToastContainerProps =
    | AutoClose of int

let inline toastContainer (props : ToastContainerProps list) : ReactElement =
    ofImport "ToastContainer" "react-toastify" (keyValueList CaseRules.LowerFirst props) []

let info: url: string -> unit = import "toast.info" "react-toastify"
let success: url: string -> unit = import "toast.success" "react-toastify"
let error: url: string -> unit = import "toast.error" "react-toastify"
let warn: url: string -> unit = import "toast.warn" "react-toastify"

02 - Main.fs

module Main

open Fable.Core.JsInterop

// Import Toastify css
importAll "../node_modules/react-toastify/dist/ReactToastify.min.css"

open Feliz
open Fable.React
open Browser.Dom

// App
ReactDOM.render(App.app, document.getElementById "root")

03 - App.fs

module App

open Feliz
open Fable.React
open Fable.React.Props
open Toastify

let app = React.functionComponent(fun () ->    

    div [] [
        // Page Layout...
                
        // Configure
        Toastify.toastContainer [AutoClose 2000]
    ]
)

04 - Projects.fs

module Projects

open Feliz
open Fable.React
open Entities.Project
open Thoth.Fetch

let page = React.functionComponent(fun () -> 
    let ctx = React.useContext(Contexts.appContext)
    let projects, setProjects = React.useState<ProjectHeader[]>([||])
    
    React.useEffectOnce(fun () ->
        Fetch.tryGet<ProjectHeader[]>("/api/Projects", HttpService.withToken ctx.Token)
        |> Promise.iter (function
            | Ok data -> 
                setProjects data
                Toastify.success "Projects loaded!"
            | Error err ->
                Toastify.error "Unable to load data."
        )
    )

    div [] [
        for p in projects do
            div [] [str p.Name]    
    ]
)