a rendered timeline

main/app/twit/app.js

@@ -50,30 +50,44 @@ $(function() {
     })
   })
   
-  render = function(timeline) {
+  renderTimeline = function(timeline) {
+    $time.html("")
     for(i in timeline) {
       tweets = timeline[i]
       d = new Date(tweets.created_at)
       datestr = d.getMonth()+1 + "-" + d.getDate() + "-" + d.getFullYear() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()
-      $tweets = $("<div class='tweet'></div>")
-      $tweets.append("<div class='author'>@urbit_test</div>")
-      $tweets.append("<div class='date'>"+datestr+"</div>")
-      $tweets.append("<div class='text'>"+tweets.text+"</div>")
-      $time.append($tweets)
+      $tweet = $("<div class='tweet'></div>")
+      $tweet.append("<div class='author'>@urbit_test</div>")
+      $tweet.append("<div class='date'>"+datestr+"</div>")
+      $tweet.append("<div class='text'>"+tweets.text+"</div>")
+      $time.append($tweet)
     }
   }
   
+  renderError = function(error) {
+    $time.html("<div class='error'>Sorry! There was an error fetching from Twitter: "+error+"</div>")
+  }
+  
   window.urb.subscribe({
     appl:"twit",
     path:"/line"
   }, function(err,res) {
     console.log('subscr')
     console.log(arguments)
+    console.log((res.data && res.data[0]))
+    if(err) 
+      return
+    if(res.data) {
+      if(res.data[0]) {
+        window.tweets = res.data
+        console.log('render')
+        console.log(res.data)
+        renderTimeline(res.data)
+      }
+      if(res.errors) {
+        renderError(res.errors[0])
+      }
+    }
   })
   
-  try {
-    timeline = JSON.parse($('#jime')[0].innerHTML)
-    render(timeline)
-  } catch (e) {
-  }
 })

main/app/twit/front/hymn.hook

@@ -30,7 +30,7 @@
           ;input#submit(type "button", value "Send");
           ;input#length(type "button", value "0/140");
         ==
-        ;div#time;
+        ;div#time: Fetching...
       ==
     ==
     ;+  urbit

main/app/twit/style.css

@@ -115,3 +115,8 @@ textarea:focus {
 .author {
   color: #888;
 }
+
+.error {
+  color: #FF5F5F;
+  letter-spacing: .06rem;
+}