Adding React.js, Redux, revamping dashboard

app/assets/stylesheets/application.scss

@@ -67,6 +67,23 @@ body {
   font-weight: 400;
   color: #fff;
   padding-bottom: 140px;
+  text-rendering: optimizelegibility;
+  font-feature-settings: "kern";
+
+  &.app-body {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+  }
+}
+
+.app-holder {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
 }
 
 .container {

app/controllers/application_controller.rb

@@ -12,6 +12,8 @@ class ApplicationController < ActionController::Base
     end
   end
 
+  helper_method :current_account
+
   protected
 
   def current_account

app/controllers/home_controller.rb

 class HomeController < ApplicationController
-  layout 'dashboard'
-
   before_action :authenticate_user!
 
   def index
-    @timeline = Feed.new(:home, current_user.account).get(10, params[:max_id])
+    @body_classes = 'app-body'
+    @home         = Feed.new(:home, current_user.account).get(20)
+    @mentions     = Feed.new(:mentions, current_user.account).get(20)
   end
 end

app/controllers/settings_controller.rb

 class SettingsController < ApplicationController
-  layout 'dashboard'
-
   before_action :authenticate_user!
   before_action :set_account
 

app/controllers/statuses_controller.rb

 class StatusesController < ApplicationController
-  layout 'dashboard'
-
   before_action :authenticate_user!
 
   def create

app/models/feed.rb

@@ -4,7 +4,7 @@ class Feed
     @account = account
   end
 
-  def get(limit, max_id)
+  def get(limit, max_id = nil)
     max_id     = '+inf' if max_id.nil?
     unhydrated = redis.zrevrangebyscore(key, "(#{max_id}", '-inf', limit: [0, limit])
     status_map = Hash.new

app/services/fan_out_on_write_service.rb

@@ -31,7 +31,7 @@ class FanOutOnWriteService < BaseService
   def push(type, receiver, status)
     redis.zadd(FeedManager.key(type, receiver.id), status.id, status.id)
     trim(type, receiver)
-    ActionCable.server.broadcast("timeline:#{receiver.id}", message: inline_render(receiver, status))
+    ActionCable.server.broadcast("timeline:#{receiver.id}", timeline: type, message: inline_render(receiver, status))
   end
 
   def trim(type, receiver)

app/views/home/index.html.haml

-= simple_form_for Status.new, url: statuses_path, method: :post do |f|
-  = f.input :text, required: true, autofocus: true, label: false, placeholder: 'What are you up to?'
-
-  .form-actions
-    = f.button :submit, 'Post update'
-
-- content_for :raw_content do
-  .activity-stream.activity-stream-embedded
-    - @timeline.each do |status|
-      = render partial: 'stream_entries/status', locals: { status: status }
+= react_component 'Root', { timelines: { home: render(file: 'api/statuses/home', locals: { statuses: @home }, formats: :json), mentions: render(file: 'api/statuses/mentions', locals: { statuses: @mentions }, formats: :json) }}, class: 'app-holder', prerender: false

app/views/layouts/application.html.haml

@@ -9,5 +9,5 @@
     = javascript_include_tag 'application'
     = csrf_meta_tags
     = yield :header_tags
-  %body
+  %body{ class: @body_classes }
     = content_for?(:content) ? yield(:content) : yield

app/views/layouts/dashboard.html.haml

-- content_for :content do
-  .dashboard-wrapper
-    .dashboard__sidebar
-      .dashboard__top-bar.alternate
-         
-      .dashboard__current-user
-        = link_to account_path(current_user.account) do
-          = image_tag current_user.account.avatar.url(:medium), class: 'dashboard__current-user__avatar'
-          %strong.dashboard__current-user__display-name= display_name(current_user.account)
-          %span.dashboard__current-user__username= "@#{current_user.account.username}"
-      %ul
-        %li{ class: active_nav_class(root_path) }
-          = link_to root_path do
-            = fa_icon 'home'
-            Home
-        %li{ class: active_nav_class(oauth_authorized_applications_path) }
-          = link_to oauth_authorized_applications_path do
-            = fa_icon 'shield'
-            Authorized apps
-        %li{ class: active_nav_class(settings_path) }
-          = link_to settings_path do
-            = fa_icon 'user'
-            Edit profile
-
-    .dashboard__content
-      .dashboard__top-bar
-        = content_for?(:page_title) ? yield(:page_title) : 'Mastodon'
-        %ul
-          %li= link_to fa_icon('gear'), edit_registration_path(current_user), title: 'Change password'
-          %li= link_to fa_icon('sign-out'), destroy_user_session_path, method: :delete, title: 'Sign out'
-
-      .dashboard__content__content= yield
-
-      = yield(:raw_content)
-
-  .footer
-    .domain= Rails.configuration.x.local_domain
-
-= render template: "layouts/application"

config/application.rb

@@ -28,12 +28,14 @@ module Mastodon
     config.active_job.queue_adapter = :sidekiq
 
     config.to_prepare do
-      Doorkeeper::ApplicationsController.layout           'dashboard'
-      Doorkeeper::AuthorizedApplicationsController.layout 'dashboard'
+      # Doorkeeper::ApplicationsController.layout           'dashboard'
+      # Doorkeeper::AuthorizedApplicationsController.layout 'dashboard'
       Doorkeeper::AuthorizationsController.layout         'auth'
     end
 
     config.middleware.use Rack::Attack
     config.middleware.use Rack::Deflater
+
+    config.browserify_rails.commandline_options = "--transform [ babelify --presets [ es2015 react ] ] --extension=\".jsx\""
   end
 end

config/environments/development.rb

@@ -63,6 +63,8 @@ Rails.application.configure do
     Bullet.bullet_logger = true
     Bullet.rails_logger = true
   end
+
+  config.react.variant = :development
 end
 
 require 'sidekiq/testing'

config/environments/production.rb

@@ -80,4 +80,6 @@ Rails.application.configure do
   }
 
   config.action_mailer.delivery_method = :smtp
+
+  config.react.variant = :production
 end

package.json

+{
+  "name": "mastodon",
+  "devDependencies": {
+    "babel-preset-es2015": "^6.13.2",
+    "babel-preset-react": "^6.11.1",
+    "babelify": "^7.3.0",
+    "browserify": "^13.1.0",
+    "browserify-incremental": "^3.1.1",
+    "react": "^15.3.0",
+    "react-dom": "^15.3.0",
+    "redux-devtools": "^3.3.1"
+  },
+  "dependencies": {
+    "immutable": "^3.8.1",
+    "react-immutable-proptypes": "^2.1.0",
+    "react-redux": "^4.4.5",
+    "redux": "^3.5.2",
+    "redux-immutable": "^3.0.8"
+  }
+}