Skip to content

Instantly share code, notes, and snippets.

@broerjuang
Created September 15, 2019 19:15
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save broerjuang/26fb0106a8a9164daca9834daa12bae0 to your computer and use it in GitHub Desktop.
Save broerjuang/26fb0106a8a9164daca9834daa12bae0 to your computer and use it in GitHub Desktop.
An experiment using state machine using ReasonML
open ReactUpdate;
type context = {
rate: int,
comment: string,
};
type action =
| Open
| Close
| Submit
| Comment(string)
| Rate(int);
type state =
| Opened(context)
| Closed
| Success;
let reducer = (action, state) => {
switch (state, action) {
| (_, Close) => Update(Closed)
| (Opened({comment}), Rate(rate)) => Update(Opened({rate, comment}))
| (Opened({rate}), Comment(message)) =>
Update(Opened({rate, comment: message}))
| (Opened(_context), Submit) => Update(Success)
| (Closed, Open) => Update(Opened({rate: 1, comment: ""}))
| _ => Update(state)
};
};
[@react.component]
let make = () => {
let (state, send) = useReducer(Closed, reducer);
switch (state) {
| Opened({rate, comment}) =>
<FeedbackForm
onSubmit={() => send(Submit)}
rate
comment
onChangeComment={value => send(Comment(value))}
onChangeRate={rate => send(Rate(rate))}
/>
| Closed => <FeedbackButton onOpen={() => send(Open)} />
| Success => <FeedbackSucceed onDismiss={() => send(Close)} />
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment