hook up the twitter reply box!

app/Events/NewTweetEvent.php

@@ -36,13 +36,13 @@ class NewTweetEvent implements ShouldBroadcast
     {
         $this->tweet_id = $tweet->id;
         $this->tweet_date = strtotime($tweet->tweet_date);
-        $this->team_name = $tweet->team->name;
-        $this->team_color = $tweet->team->color;
-        $this->player_username = $tweet->player->twitter;
-        $this->player_photo = $tweet->player->photo;
+        $this->team_name = ($tweet->team ? $tweet->team->name : null);
+        $this->team_color = ($tweet->team ? $tweet->team->color : null);
+        $this->player_username = ($tweet->player ? $tweet->player->twitter : null);
+        $this->player_photo = ($tweet->player ? $tweet->player->photo : null);
         $this->text = $tweet->text;
         $this->photos = json_decode($tweet->photo);
-        $this->mission = $tweet->mission->hashtag;
+        $this->mission = ($tweet->mission ? $tweet->mission->hashtag : null);
         $this->mission_id = $tweet->mission_id;
     }
 

app/Http/Controllers/DashboardController.php

@@ -117,4 +117,22 @@ class DashboardController extends Controller
             'transit_lines' => $transit_lines
         ]);
     }
+
+    public function reply_to_tweet(Request $request) {
+        $tweet = Tweet::where('id', $request->input('tweet_id'))->first();
+        if($tweet) {
+
+            $params = [
+                'auto_populate_reply_metadata' => true,
+                'in_reply_to_status_id' => $tweet->tweet_id,
+                'status' => $request->input('text')
+            ];
+            $response = Twitter::postTweet($params);
+            if($response && $response->id_str) {
+                return response()->json(['result'=>'ok']);
+            }
+
+        }
+        return response()->json(['result'=>'error']);
+    }
 }

app/Http/Controllers/TwitterController.php

@@ -59,7 +59,9 @@ class TwitterController extends BaseController
     $tweet->tweet_date = date('Y-m-d H:i:s', strtotime($data['created_at']));
     $tweet->save();
 
-    event(new NewTweetEvent($tweet));
+    if($tweet->mission_id) {
+      event(new NewTweetEvent($tweet));
+    }
 
     return $data['id_str'];
   }

package.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "featherlight": "^1.7.6",
     "laravel-echo": "^1.3.0",
-    "pusher-js": "^4.1.0"
+    "pusher-js": "^4.1.0",
+    "twitter-text": "^1.14.7"
   }
 }

public/css/app.css

@@ -8629,12 +8629,27 @@ button.close {
   background-color: #f5f8fa;
 }
 
-.scorecard .tweet-reply button {
-  float: right;
+.scorecard .tweet-reply .bottom {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 
-.scorecard .tweet-reply .clear {
-  clear: both;
+.scorecard .tweet-reply .bottom .fill {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+
+.scorecard .tweet-reply .bottom img {
+  margin-right: 4px;
+}
+
+.scorecard .tweet-reply .bottom .remaining-chars {
+  margin-right: 10px;
 }
 
 .scorecard .tweet-actions {

resources/assets/js/bootstrap.js

@@ -56,3 +56,5 @@ window.Echo = new Echo({
     cluster: 'us2',
     encrypted: true
 });
+
+window.twitter = require('twitter-text')

resources/assets/js/components/Scorecard.vue

@@ -31,10 +31,16 @@
             </div>
           </div>
 
-          <div class="tweet-reply">
-            <textarea class="form-control" rows="2" v-model="replyText" style="margin-bottom: 4px;"></textarea>
-            <button type="submit" class="btn btn-primary" :disabled="isTweetReplyDisabled">Reply</button>
-            <div class="clear"></div>
+          <div class="tweet-reply" v-if="showReplyBox">
+            <div class="top">
+              <textarea class="form-control" rows="2" v-model="replyText" style="margin-bottom: 4px;" :disabled="replyInProgress"></textarea>
+            </div>
+            <div class="bottom">
+              <div class="fill"></div>
+              <img src="/twitter.ico" width="16">
+              <div class="remaining-chars">{{ replyTextCharsRemaining }}</div>
+              <button class="btn btn-primary" :disabled="isTweetReplyDisabled" v-on:click="sendReply">Reply</button>
+            </div>
           </div>
 
           <div class="tweet-actions">
@@ -151,9 +157,6 @@
             </div>
           </template>
 
-
-
-
         </div>
       </div>
 
@@ -169,6 +172,9 @@ module.exports = {
       centers: [],
       lines: [],
       replyText: '',
+      replyTextCharsRemaining: 140,
+      replyInProgress: false,
+      showReplyBox: true,
       selectedDocument: null,
       selectedTransitCenter: null,
       selectedTransitLine: null,
@@ -203,7 +209,7 @@ module.exports = {
       }
     },
     isTweetReplyDisabled() {
-      return this.replyText == '';
+      return this.replyText == '' || this.replyInProgress || this.replyTextCharsRemaining < 0;
     }
   },
   methods: {
@@ -216,6 +222,7 @@ module.exports = {
       this.selectedM5Singing = false;
       this.selectedM5Tipping = false;
       this.replyText = '';
+      this.showReplyBox = true;
     },
     dismiss() {
       this.clearState();
@@ -268,6 +275,21 @@ module.exports = {
         this.clearState();
         this.$emit('complete');
       }.bind(this));
+    },
+    sendReply() {
+      this.replyInProgress = true;
+
+      $.post("/dashboard/reply", {
+        tweet_id: this.tweet.tweet_id,
+        text: this.replyText
+      }, function(response){
+        if(response.result == "ok") {
+          this.replyText = '';
+        }
+        this.replyInProgress = false;
+      }.bind(this));
+
+      // setTimeout(function(){ this.replyInProgress = false; this.showReplyBox = false; }.bind(this), 1000);
     }
   },
   watch: {
@@ -279,6 +301,9 @@ module.exports = {
           $(".multi-photo .photo").featherlight();
         }.bind(this));
       }
+    },
+    replyText: function(val) {
+      this.replyTextCharsRemaining = 140 - twitter.getTweetLength(val);
     }
   },
   created() {

resources/assets/sass/app.scss

@@ -147,12 +147,21 @@
     padding: 8px;
     background-color: $body-bg;
 
-    button {
-      float: right;
-    }
+    .bottom {
+      display: flex;
+      align-items: center;
+
+      .fill {
+        flex: 1;
+      }
+
+      img {
+        margin-right: 4px;
+      }
 
-    .clear {
-      clear: both;
+      .remaining-chars {
+        margin-right: 10px;
+      }
     }
   }
 

routes/web.php

@@ -24,6 +24,7 @@ Route::get('/dashboard/dropdowns', 'DashboardController@load_dropdowns');
 Route::post('/dashboard/claim-tweet', 'DashboardController@claim_tweet');
 Route::post('/dashboard/reject-tweet', 'DashboardController@reject_tweet');
 Route::post('/dashboard/score-tweet', 'DashboardController@score_tweet');
+Route::post('/dashboard/reply', 'DashboardController@reply_to_tweet');
 
 Route::get('/slideshow', 'SlideshowController@slideshow')->name('slideshow');