params now are camelcased plus misc fixes

Author: catmando

ruby/examples/misc/stock-tickers/app/assets/javascripts/application.js

@@ -12,7 +12,6 @@
 
 // Opal.Hyperstack.$const_get('Loader').$listen() // optional (port, false, poll_seconds) i.e. (8081, false, 1)
 
-//
 //= require rails-ujs
 //= require activestorage
 //= require turbolinks

ruby/examples/misc/stock-tickers/app/hyperstack/components/app.rb

@@ -1,19 +1,27 @@
 class App < HyperComponent
   before_mount { @symbols = Set.new }
-  render(DIV) do
-    UL do
+
+  def add_symbol
+    mutate @symbols << @SymbolInput.value.upcase
+    @SymbolInput.value = ''
+  end
+
+  render do
+    BS::Container(style: { margin: 20 }) do
       @symbols.sort.each do |symbol|
-        LI(key: symbol) do
-          DisplayTicker(symbol: symbol)
-          .on(:cancel) { mutate @symbols.delete(symbol) }
+        DisplayTicker(symbol: symbol, key: symbol)
+        .on(:cancel) { mutate @symbols.delete(symbol) }
+      end
+      BS::Row(style: { marginTop: 20 }) do
+        BS::Col(sm: 4) do
+          BS::InputGroup(class: 'mb-3') do
+            BS::FormControl(ref: assign_to(:SymbolInput), placeholder: 'New Stock Market Symbol')
+            .on(:enter) { add_symbol }
+            BS::InputGroup::Append() { BS::Button() { 'Add' } }
+            .on(:click) { add_symbol }
+          end
         end
       end
     end
-    INPUT(placeholder: 'enter a new stock symbol')
-    .on(:key_down) do |evt|
-      next unless evt.key_code == 13
-      mutate @symbols << evt.target.value.upcase
-      evt.target.value = ''
-    end
   end
 end

ruby/examples/misc/stock-tickers/app/hyperstack/components/bs.rb

@@ -0,0 +1,3 @@
+class BS < Hyperstack::Component::NativeLibrary
+  imports 'ReactBootstrap'
+end

ruby/examples/misc/stock-tickers/app/hyperstack/components/display_ticker.rb

@@ -1,21 +1,29 @@
 class DisplayTicker < HyperComponent
   param :symbol
-  param :on_cancel, type: Proc
-  before_mount { @ticker = StockTicker.new(params.symbol, 10.seconds) }
+  raises :cancel
+  before_mount { @ticker = StockTicker.new(@Symbol, 10.seconds) }
 
   def status
     case @ticker.status
     when :loading
-      'loading...'
+      BS::Col(sm: 10) { 'loading...' }
     when :success
-      "current price: #{@ticker.price}"
+      BS::Col(class: 'text-right', sm: 3) { 'price' }
+      BS::Col(class: 'text-right', sm: 3) { '%.2f' % @ticker.price }
+      BS::Col(sm: 4) { "at #{@ticker.time.strftime('%I:%M:%S')}" }
     when :failed
-      "failed to get quote: #{@ticker.reason}"
+      BS::Col(sm: 10) { "failed to get quote: #{@ticker.reason}" }
     end
   end
 
-  render(DIV) do
-    SPAN { "#{params.symbol.upcase} #{status}" }
-    BUTTON { 'cancel' }.on(:click) { params.on_cancel } unless @ticker.status == :loading
+  render do
+    BS::Row() do
+      BS::Col(sm: 1) { @Symbol.upcase }
+      status
+      BS::Col(sm: 1) do
+        BS::Button(class: :close) { "\u00D7" }
+        .on(:click) { cancel! } unless @ticker.status == :loading
+      end
+    end
   end
 end

ruby/examples/misc/stock-tickers/app/hyperstack/stores/stock_ticker.rb

@@ -3,22 +3,22 @@ class StockTicker
 
   attr_reader  :symbol
   state_reader :price
+  state_reader :time
   state_reader :status
   state_reader :reason
 
   def initialize(symbol, update_interval = 5.seconds)
-    puts "creating ticker for #{symbol}"
     @symbol = symbol
     @status = :loading
     @update_interval = update_interval
     fetch
   end
 
   def fetch
-    puts "fetching #{@symbol}"
     HTTP.get("https://api.iextrading.com/1.0/stock/#{@symbol}/delayed-quote")
         .then do |resp|
-          mutate @status = :success, @price = resp.json[:delayedPrice]
+          mutate @status = :success, @price = resp.json[:delayedPrice],
+                 @time = Time.at(resp.json[:delayedPriceTime] / 1000)
           after(@update_interval) { fetch }
         end
         .fail do |resp|

ruby/examples/misc/stock-tickers/app/views/layouts/application.html.erb

@@ -7,9 +7,50 @@
 
     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <link
+  rel="stylesheet"
+  href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"
+  crossorigin="anonymous"
+>
+    <%# <script src="https://unpkg.com/@material-ui/[email protected]/umd/material-ui.development.js" crossorigin="anonymous"></script>
+    <!-- <script src="https://unpkg.com/@material-ui/core/umd/material-ui.production.min.js" crossorigin="anonymous"></script> -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+    <script>
+      window.MUI = window['material-ui']
+      const theme = MUI.createMuiTheme({
+        palette: {
+          primary: {
+            light: MUI.colors.purple[300],
+            main: MUI.colors.purple[500],
+            dark: MUI.colors.purple[700],
+          },
+          secondary: {
+            light: MUI.colors.green[300],
+            main: MUI.colors.green[500],
+            dark: MUI.colors.green[700],
+          },
+        },
+        typography: {
+          useNextVariants: true,
+        },
+      });
+      const styles = theme => ({
+        root: {
+          textAlign: 'center',
+          paddingTop: theme.spacing.unit * 20,
+        },
+        icon: {
+          marginRight: theme.spacing.unit,
+        },
+      });
+  </script> %>
+
   </head>
 
   <body>
     <%= yield %>
+    <script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.js" crossorigin></script>
+
+
   </body>
 </html>

ruby/examples/misc/stock-tickers/config/initializers/hyperstack.rb

@@ -1,5 +1,5 @@
 Hyperstack.configuration do |config|
-  config.prerendering = :on
+  config.prerendering = :off
   config.import 'jquery', client_only: true
   config.import 'hyperstack/component/jquery', client_only: true
   config.import 'browser/interval'

ruby/examples/misc/stock-tickers/package.json

@@ -1,5 +1,7 @@
 {
   "name": "smoke-test",
   "private": true,
-  "dependencies": {}
+  "dependencies": {
+    "@material-ui/core": "^3.4.0"
+  }
 }