putsreq 0.0.3 → 0.0.4

data/app/javascript/components/request/Header.jsx

@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+
+export default class Header extends Component {
+  render() {
+    return (
+      <div className="panel panel-default">
+        <span className="pull-right label label-info" title={this.props.created_at}>{this.props.time_ago_in_words}</span>
+        <div className="panel-heading" role="tab" id="headingOne">
+          <h4 className="panel-title">
+            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+              Headers
+            </a>
+          </h4>
+        </div>
+        <div id="collapseOne" className="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
+          <div className="panel-body">
+            <pre>{this.props.headers_as_string}</pre>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+Header.propTypes = {
+  created_at: PropTypes.string.isRequired,
+  time_ago_in_words: PropTypes.string.isRequired,
+  headers_as_string: PropTypes.string.isRequired
+}

data/app/javascript/components/request/Response.jsx

@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+
+export default class Response extends Component {
+  render() {
+    return (
+      <div className="panel panel-default">
+        <div className="panel-heading" role="tab" id="headingThree">
+          <h4 className="panel-title">
+            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
+              Response
+            </a>
+          </h4>
+        </div>
+        <div id="collapseThree" className="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree">
+          <div className="panel-body">
+            <pre>{this.props.response_body_as_string}</pre>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+Response.propTypes = {
+  response_body_as_string: PropTypes.string.isRequired
+}

data/app/javascript/components/request/index.jsx

@@ -0,0 +1,47 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import Header from './Header'
+import Response from './Response'
+import PropTypes from 'prop-types'
+
+export default class Request extends Component {
+  render() {
+    if(!this.props.id) {
+      return (
+        <p>No requests found</p>
+      )
+    }
+
+    return (
+      <div className="panel-group request-show" id="accordion" role="tablist" aria-multiselectable="true">
+        <Header headers_as_string={this.props.headers_as_string} time_ago_in_words={this.props.time_ago_in_words} created_at={this.props.created_at} />
+        <div className="panel panel-default">
+          <div className="panel-heading" role="tab" id="headingTwo">
+            <h4 className="panel-title">
+              <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+                {this.props.request_method} {this.props.path}
+              </a>
+            </h4>
+          </div>
+          <div id="collapseTwo" className="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
+            <div className="panel-body">
+              <pre>{this.props.request_body_as_string}</pre>
+            </div>
+          </div>
+        </div>
+        <Response response_body_as_string={this.props.response_body_as_string} />
+      </div>
+    )
+  }
+}
+
+Response.propTypes = {
+  request_method: PropTypes.string,
+  path: PropTypes.string,
+  request_body_as_string: PropTypes.string,
+  response_body_as_string: PropTypes.string,
+  created_at: PropTypes.string,
+  id: PropTypes.string,
+  time_ago_in_words: PropTypes.string,
+  headers_as_string: PropTypes.string
+}

data/app/javascript/packs/application.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Provider } from 'react-redux'
+import store from '../store'
+import Bucket from '../components/Bucket'
+import RequestCount from '../components/RequestCount'
+import startRequestPoller from '../request_poller'
+
+document.addEventListener('DOMContentLoaded', () => {
+  ReactDOM.render(
+    <Provider store={store}>
+      <Bucket />
+    </Provider>,
+    document.getElementById('react-root')
+  )
+
+  ReactDOM.render(
+    <Provider store={store}>
+      <RequestCount />
+    </Provider>,
+    document.getElementById('request-count-react-root')
+  )
+})
+
+$(() => startRequestPoller(store))

data/app/javascript/packs/hello_react.jsx

@@ -0,0 +1,26 @@
+// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
+// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
+// of the page.
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+
+const Hello = props => (
+  <div>Hello {props.name}!</div>
+)
+
+Hello.defaultProps = {
+  name: 'David'
+}
+
+Hello.propTypes = {
+  name: PropTypes.string
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  ReactDOM.render(
+    <Hello name="React" />,
+    document.body.appendChild(document.createElement('div')),
+  )
+})

data/app/javascript/reducers/index.js

@@ -0,0 +1,23 @@
+import { combineReducers } from 'redux'
+import { bucketsActions } from '../actionTypes'
+
+const bucket = (state = {}, action) => {
+  switch (action.type) {
+    case bucketsActions.populate:
+      return { ...action.bucket, loading: false, page: action.page }
+    case bucketsActions.loading:
+      return { ...state, loading: true }
+    case bucketsActions.updateRequestsCount:
+      return {
+        ...state,
+        requests_count: action.requests_count,
+        page: action.page
+      }
+    default:
+      return state
+  }
+}
+
+const rootReducer = combineReducers({ bucket })
+
+export default rootReducer

data/app/javascript/request_poller.js

@@ -0,0 +1,19 @@
+import { updateRequestsCount } from './actions'
+
+export default function startRequestPoller(store) {
+  const bucket = $('#putsreq-url-input').data('bucket-token')
+
+  const url = `/${bucket}/requests_count`
+  const poll = (previousRequestsCount = 0) => {
+    $.getJSON(url)
+    .done((data) => {
+      updateRequestsCount(data.requests_count)(store.dispatch, store.getState)
+      // use setTimeout instead of setInterval to ensure a new request will be made
+      // only when the previous one was completed
+      const timeout = previousRequestsCount == data.requests_count ? 5000 : 2500
+      setTimeout(() => { poll(data.requests_count) }, timeout)
+    })
+  }
+
+  poll()
+}

data/app/javascript/store.js

@@ -0,0 +1,9 @@
+import { createStore, applyMiddleware } from 'redux'
+import thunk from 'redux-thunk'
+import { composeWithDevTools } from 'redux-devtools-extension'
+import rootReducers from './reducers'
+
+export default createStore(
+  rootReducers,
+  composeWithDevTools(applyMiddleware(thunk))
+)

data/app/models/bucket.rb

@@ -4,8 +4,8 @@ class Bucket
 
   has_many :forks, class_name: 'Bucket'
 
-  belongs_to :fork, class_name: 'Bucket'
-  belongs_to :user
+  belongs_to :fork, class_name: 'Bucket', optional: true
+  belongs_to :user, optional: true
 
   field :token
   field :name
@@ -13,6 +13,9 @@ class Bucket
   field :response_builder, default: -> { default_response_builder }
   field :history_start_at, type: Time
 
+  # temporally hack
+  attr_accessor :request
+
   index token: 1
   index owner_token: 1
   index fork_id: 1
@@ -33,6 +36,7 @@ class Bucket
     # I couldn't make has_many + conditions work with Mongoid
     # responses must be filtered by created_at
     # see clear_history
+
     Response.where(bucket_id: id).gte(created_at: history_start_at || created_at).order(:created_at.desc)
   end
 
@@ -41,11 +45,11 @@ class Bucket
     # so we filter these objects by the history_start_at to "clear"
     # db.runCommand({ "convertToCapped": "requests",  size: 25000000 });
     # db.runCommand({ "convertToCapped": "responses", size: 25000000 });
-    update_attribute :history_start_at, Time.now
+    update_attribute :history_start_at, Time.zone.now
   end
 
   def name
-    if (name = read_attribute(:name)).blank?
+    if (name = self[:name]).blank?
       token
     else
       name
@@ -61,21 +65,23 @@ class Bucket
   end
 
   def last_request_at
-    last_request.try(:created_at)
+    last_request&.created_at
   end
 
-  def first_request_at
-    requests.order(:created_at.asc).first.try(:created_at)
+  def first_request
+    requests.order(:created_at.asc).first
   end
 
-  def requests_count
-    requests.count
+  def first_request_at
+    first_request&.created_at
   end
 
+  delegate :count, to: :requests, prefix: true
+
   private
 
   def generate_token
-    self.token = loop do
+    self.token ||= loop do
       random_token = SecureRandom.urlsafe_base64(15).tr('_-', '0a')
       break random_token unless Bucket.where(token: random_token).exists?
     end

data/app/models/request.rb

@@ -12,7 +12,6 @@ class Request
   field :request_method
   field :ip
   field :url
-  field :params, type: Hash
 
   index bucket_id: 1, created_at: -1
 
@@ -25,12 +24,12 @@ class Request
 
     u = URI(url)
 
-    url.gsub(/.*#{Regexp.escape(u.host)}(\:#{Regexp.escape(u.port.to_s)})?/, '')
+    url.gsub(/.*#{::Regexp.escape(u.host)}(\:#{::Regexp.escape(u.port.to_s)})?/, '')
   end
 
   private
 
   def bump_requests_recorded
-    REDIS.incr 'requests_recorded'
+    Rails.cache.increment 'requests_recorded'
   end
 end

data/app/models/user.rb

@@ -6,8 +6,8 @@ class User
          :recoverable, :rememberable, :trackable, :validatable
 
   ## Database authenticatable
-  field :email,              type: String, default: ""
-  field :encrypted_password, type: String, default: ""
+  field :email,              type: String, default: ''
+  field :encrypted_password, type: String, default: ''
 
   ## Recoverable
   field :reset_password_token,   type: String

data/app/serializers/bucket_serializer.rb

@@ -0,0 +1,11 @@
+class BucketSerializer < ActiveModel::Serializer
+  attributes :requests_count, :path
+
+  belongs_to :request
+  belongs_to :first_request
+  belongs_to :last_request
+
+  def path
+    Rails.application.routes.url_helpers.bucket_path(token: object.token)
+  end
+end

data/app/serializers/request_serializer.rb

@@ -0,0 +1,69 @@
+class RequestSerializer < ActiveModel::Serializer
+  attributes(
+    :id,
+    :headers,
+    :time_ago_in_words,
+    :created_at,
+    :request_method,
+    :request_body_as_string,
+    :response_body_as_string,
+    :headers_as_string,
+    :path
+  )
+
+  def id
+    object.id.to_s
+  end
+
+  def time_ago_in_words
+    "#{ApplicationController.helpers.time_ago_in_words(object.created_at)} ago"
+  end
+
+  def headers_as_string
+    JSON.pretty_generate(object.headers.to_h)
+  end
+
+  def request_body_as_string
+    body_as_string(object)
+  end
+
+  def response_body_as_string
+    body_as_string(object.response)
+  end
+
+  private
+
+  def body_as_string(req_or_res)
+    body = req_or_res.body
+
+    if body_json?(req_or_res) && body.is_a?(String)
+      # See https://github.com/phstc/putsreq/issues/31#issuecomment-271681249
+      return JSON.pretty_generate(JSON.parse(body))
+    end
+
+    if body.is_a?(Hash)
+      # For responses body can be a hash
+      # body.to_h because body can be a BSON::Document
+      # which for some reason does format well with
+      # pretty_generate
+      return JSON.pretty_generate(body.to_h)
+    end
+
+    if body.is_a?(Array)
+      # see https://github.com/phstc/putsreq/issues/33
+      return JSON.pretty_generate(body.to_a)
+    end
+
+    body.to_s
+  rescue
+    body.to_s
+  end
+
+  def body_json?(req_or_res)
+    req_or_res.headers.to_h.each do |key, value|
+      return !!(value =~ /application\/json/i) if key =~ /^content-type$/i
+    end
+
+    false
+  end
+end

data/app/views/buckets/_buttons.html.erb

@@ -1,4 +1,4 @@
 <button class="btn btn-primary tm10">Update</button>
-<%= link_to 'Fork', bucket_fork_path(@bucket.token), class: 'btn btn-default tm10 lm5', method: :post %>
-<%= link_to 'Clear History', bucket_clear_path(@bucket.token), class: 'btn btn-default tm10 lm5', method: :delete, data: { confirm: 'Are you sure?' } %>
-<%= link_to 'Destroy', bucket_destroy_path(@bucket.token), class: 'btn btn-default tm10 lm5', method: :delete, data: { confirm: 'Are you sure?' } %>
+<%= link_to 'Fork', bucket_fork_path(bucket.token), class: 'btn btn-default tm10 lm5', method: :post %>
+<%= link_to 'Clear History', bucket_clear_path(bucket.token), class: 'btn btn-default tm10 lm5', method: :delete, data: { confirm: 'Are you sure?' } %>
+<%= link_to 'Destroy', bucket_destroy_path(bucket.token), class: 'btn btn-default tm10 lm5', method: :delete, data: { confirm: 'Are you sure?' } %>

data/app/views/buckets/_form.html.erb

@@ -1,6 +1,6 @@
-<%= form_for @bucket, url: update_bucket_path(@bucket.token), method: :put do |f| %>
+<%= form_for bucket, url: update_bucket_path(bucket.token), method: :put do |f| %>
   <%= f.hidden_field :response_builder %>
-  <script id="response-builder-container"  type='application/vns.putsreq-response_builder'><%== @bucket.response_builder %></script>
+  <script id="response-builder-container"  type='application/vns.putsreq-response_builder'><%== bucket.response_builder %></script>
   <div class="row">
     <div class="col-md-6">
       <h4>Bucket name
@@ -8,8 +8,8 @@
       </h4>
       <div class="input-group putsreq-name bm30">
         <%= f.text_field :name %>
-        <% if @bucket.fork %>
-          <p><small>forked from <%= link_to @bucket.fork.name, bucket_path(@bucket.fork.token) %></small></p>
+        <% if bucket.fork %>
+          <p><small>forked from <%= link_to bucket.fork.name, bucket_path(bucket.fork.token) %></small></p>
         <% end %>
       </div>
     </div>
@@ -17,14 +17,14 @@
       <h4>Requests
         <small><em>The number of requests made to this bucket.</em></small>
       </h4>
-      <h3 id="bucket-request-count"><%= @bucket.requests_count %></h3>
+      <div id="request-count-react-root"></div>
     </div>
   </div>
   <h4>Response Builder&nbsp;<a href="https://github.com/phstc/putsreq#response-builder" target="_blank"><span class="glyphicon glyphicon-info-sign"></span></a></h4>
   <div id="editor" name="editor" style="width: 100%; height: 150px"></div>
   <textarea id="response_builder" name="response_builder" style="display:none;"></textarea>
   <p>
-    <% if owner?(@bucket) %>
+    <% if owner?(bucket) %>
       <%= render 'buttons' %>
     <% else %>
       <%= render 'readonly_buttons' %>