re_example_4

re_example_4.re

module Styles = {
  open Css;

  let app =
    style([
      display(`flex),
      justifyContent(`center),
      alignItems(`center),
      flexDirection(`column),
      minHeight(`vh(100.0)),
    ]);

  let premiumMessage = style([color(red)]);
  let whaleMessage = style([color(blue)]);
  let freeMessage = style([color(black)]);
};

[@react.component]
let make = () => {
  let query = Query.use(~variables=(), ());
  <div className=Styles.app>
    {Belt.Array.map(query.messages, message => {
       switch (message.author) {
       | `User({name, role: `PREMIUM}) =>
         <div className=Styles.premiumMessage>
           {React.string(name ++ ": " ++ message.text)}
         </div>
       | `User({name, role: `WHALE}) =>
         <div className=Styles.whaleMessage>
           {React.string(name ++ ": " ++ message.text)}
         </div>
       | `User({name, role: `FREE | `FUTURE_ADDED_VALUE__}) =>
         <div className=Styles.freeMessage>
           {React.string(name ++ ": " ++ message.text)}
         </div>
       | `Guest(guest) =>
         <div>
           {React.string(guest.placeholder ++ ": " ++ message.text)}
         </div>
       | `UnmappedUnionMember => React.null
       }
     })
     ->React.array}
  </div>;
};