reworked api example page

.vscode/settings.json

@@ -10,6 +10,8 @@
     "tslint.autoFixOnSave": true,
     "tslint.exclude": "**/node_modules/**/*",
     "cSpell.words": [
-        "definitelytyped"
+        "definitelytyped",
+        "reddit",
+        "subreddit"
     ]
 }

.vscode/tasks.json

@@ -10,6 +10,11 @@
                 "kind": "build",
                 "isDefault": true
             }
+        },
+        {
+            "type": "npm",
+            "script": "start",
+            "problemMatcher": []
         }
     ]
 }

package.json

@@ -46,7 +46,8 @@
     "passport": "^0.4.0",
     "passport-local": "^1.0.0",
     "pug": "^2.0.0-rc.4",
-    "request": "^2.83.0"
+    "request": "^2.83.0",
+    "request-promise": "^4.2.2"
   },
   "devDependencies": {
     "@types/async": "^2.0.45",
@@ -70,6 +71,7 @@
     "@types/passport": "^0.3.3",
     "@types/passport-facebook": "^2.1.3",
     "@types/request": "^2.0.9",
+    "@types/request-promise": "^4.1.39",
     "@types/supertest": "^2.0.4",
     "@types/shelljs": "^0.7.7",
     "chai": "^4.1.2",

src/controllers/api.ts

@@ -1,17 +1,63 @@
 "use strict";
 
 import * as async from "async";
-import * as request from "request";
 import { Response, Request, NextFunction } from "express";
-
+import * as request from "request-promise";
 
 /**
  * GET /api
  * List of API examples.
  */
-export let getApi = (req: Request, res: Response) => {
+export let getApi = async (req: Request, res: Response) => {
+  const urls: string[] | void = await getRedditImageUrls("aww");
+  const urlData = [];
+
+  if (urls) {
+    for (const url of urls) {
+      let urlType: string;
+      const split = url.split(".");
+      const extension = split[split.length - 1];
+      let finalUrl = url;
+      if (extension === "gifv") {
+        urlType = "gif";
+        finalUrl = url.replace("gifv", "mp4");
+      } else if (extension === "jpg" || extension === "jpeg" || extension === "png") {
+        urlType = "image";
+      }
+      urlData.push({
+        url: finalUrl,
+        format: urlType
+      });
+    }
+  }
+
   res.render("api/index", {
-    title: "API Examples"
+    title: "API Examples",
+    urls: urlData
   });
 };
 
+async function getRedditImageUrls(subreddit: string) {
+  const options = {
+    uri: `http://www.reddit.com/r/${subreddit}.json?limit=30`,
+    headers: {
+      "User-Agent": "Request-Promise"
+    },
+    json: true // Automatically parses the JSON string in the response
+  };
+  const imageUrls: string[] = [];
+
+  return request(options)
+    .then(function (redditData) {
+      redditData.data.children.forEach(function (child: any) {
+        if (child.data.domain == "i.imgur.com") {
+          console.log(child.data.url);
+          imageUrls.push(child.data.url);
+        }
+      });
+      return imageUrls;
+    })
+    .catch(function (err) {
+      console.log(err);
+    });
+}

views/api/index.pug

@@ -1,12 +1,13 @@
 extends ../layout
 
 block content
-  h2 API Examples
+  h2 JSON API Example - Reddit Feed
   hr
 
-  .row
-    .col-sm-4
-      a(href='/api/', style='color: #fff')
-        .panel.panel-default(style='background-color: #3b5998')
-          .panel-body
-            |  twitter (TODO)
+  for url in urls
+    if url.format == 'gif'
+      video(preload="auto", autoplay="autoplay", loop="loop", height="300px")
+        source(src=url.url, type="video/mp4")
+    else if url.format == 'image'
+      img(src=url.url, height="300px")
+    hr