platinum-fox-2017 · ErvanAdetya · Mar 7, 2018 · Mar 8, 2018 · Mar 10, 2018 · Mar 12, 2018
diff --git a/client/backup.js b/client/backup.js
@@ -0,0 +1,14 @@
+let template =`
+                                <tr>
+                                    <div>
+                                        <div>
+                                            <p>${tweet.id}  ${tweet.created_at}</p>
+                                        </div>tweet.text}</tr>
+                                        </table>
+                                        <div>
+                                            <p>${tweet.text}</p>
+                                        </div>
+                                    </div>
+                                </tr>
+                                `;
+                            $('#searchTable').append(template);
diff --git a/client/facebook.js b/client/facebook.js
@@ -0,0 +1,68 @@
+function statusChangeCallback(response) {
+  console.log('statusChangeCallback');
+  console.log(response);
+  let path = window.location.pathname;  
+  if (response.status === 'connected') {
+    localStorage.setItem('fbToken', response.authResponse.accessToken)
+    console.log(window.location.pathname)
+    if(path == '/login.html') {
+      window.location.href='./index.html'      
+    }
+    // console.log(window.location.url)
+
+    // testAPI();
+  } else {
+    // $('#statusLogin').empty()
+    if(path !== '/login.html') {      
+      window.location.href='./login.html'
+    }
+  }
+}
+
+function checkLoginState() {
+  FB.getLoginStatus(function(response) {
+    statusChangeCallback(response);
+  });
+}
+
+window.fbAsyncInit = function() {
+  FB.init({
+    appId      : '420535945053857',
+    cookie     : true,
+    xfbml      : true,
+    version    : 'v2.8'
+  });
+
+  FB.getLoginStatus(function(response) {
+    statusChangeCallback(response);
+  });
+};
+
+(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s); js.id = id;
+  js.src = "https://connect.facebook.net/en_US/sdk.js";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));
+
+function testAPI() {
+  console.log('Welcome!  Fetching your information.... ');
+  FB.api('/me', function(response) {
+    console.log('Successful login for: ' + response.name);
+    // window.location.href='./index.html'
+    // let template =`
+    //               <th>Thanks for logging in, ${response.name}!</th>
+    //               <th><button onclick="logout()">Logout</button></th>   
+    //               `
+    // $('#statusLogin').append(template);
+    // $('#statusLogout').empty()
+  });
+}
+
+function logout() {
+  FB.logout(function (response) {
+    console.log('logout')
+    window.location.href='login.html'
+  })
+}
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link href="./style.css" type="text/css" rel="stylesheet">
+    <title>Socmed Aggregator</title>
+  </head>
+  <body>
+    <div>
+      <table id="status">
+        <tr id="statusLogout">
+          <!-- <th>
+            <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
+            </fb:login-button>
+          </th>
+          <th><p>Please login into this app</p></th>  -->
+        </tr>
+        <tr id="statusLogin">
+          <th>Thanks for logging in!</th>
+          <th><button onclick="logout()">Logout</button></th>  
+        </tr>
+      </table>
+    </div>
+    <div id="headerBar">
+      <table>
+        <tr>
+          <th><button onclick="getTimeline()">My Timeline</button></th>
+
+            <form action="#">
+              <th><input id="tweetBar" type="text" name="tweet" value="post"></th>
+                <th><button id="postTweet">post !</button></th>
+            </form>
+
+            <form action="#">
+              <th><input id="searchBar" text="text" name"keyword"></th>
+              <th><button id="searchButton">Search</button></th>
+            </form>
+          </tr>
+        </table>
+      </div>
+
+      <div id='tweetDiv'>
+      </div>
+
+    <script
+      src="https://code.jquery.com/jquery-3.3.1.min.js"
+      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+      crossorigin="anonymous">
+    </script>
+    <script src="./script.js"></script>
+    <script src="./facebook.js"></script>
+    <script>
+      getTimeline();
+    </script>
+  </body>
+</html>
diff --git a/client/jquery.js b/client/jquery.js
diff --git a/client/login.html b/client/login.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link href="./style.css" type="text/css" rel="stylesheet">
+    <title>Socmed Aggregator</title>
+  </head>
+  <body>
+    <div>
+      <table id="status">
+        <tr id="statusLogout">
+          <th>
+            <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
+            </fb:login-button>
+          </th>
+          <th><p>Please login into this app</p></th> 
+        </tr>
+      </table>
+    <script
+      src="https://code.jquery.com/jquery-3.3.1.min.js"
+      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+      crossorigin="anonymous">
+    </script>
+    <script src="./script.js"></script>
+    <script src="./facebook.js"></script>
+  </body>
+</html>
diff --git a/client/script.js b/client/script.js
@@ -0,0 +1,46 @@
+'use stirct'
+
+function rePopulateTimeline(tweets) {
+    $('.tweet').remove();
+    tweets.forEach((tweet) => {
+        let template =  `
+            <div class="tweet">
+                <p style="font-size:20px;"><b style="font-size:12px; color:#7b7c77;">@${tweet.user.name}</b><br>${tweet.text}</p>
+            </div>
+                        `;
+        $('#tweetDiv').append(template);
+    })
+}
+
+function getTimeline() {
+    $.ajax({
+        url: 'http://localhost:3000/twitter',
+        method: 'GET',
+        success: function(tweets) {
+            tweets = JSON.parse(tweets);
+            rePopulateTimeline(tweets);
+        }
+    });
+};
+
+$('#postTweet').click(() => {
+    $.ajax({
+        url: 'http://localhost:3000/twitter',
+        method: 'POST',
+        data: {tweet : $('#tweetBar').val()},
+        success: function(tweets) {
+            getTimeline()
+        }
+    })
+});
+
+$('#searchButton').click(() => {
+    $.ajax({
+        url: `http://localhost:3000/twitter/search/${$('#searchBar').val()}`,
+        method: 'GET',
+        success: function(searchRes) {
+            searchRes = JSON.parse(searchRes)
+            rePopulateTimeline(searchRes.statuses);
+        }
+    })
+});
diff --git a/client/style.css b/client/style.css
@@ -0,0 +1,13 @@
+.tweet {
+    background-color: #c0deed;
+    margin: 3px;
+    transition: 1s;
+}
+
+.tweet:hover { 
+    background-color: #80c1ff;
+}
+
+p {
+    margin: auto;
+}
diff --git a/server/.gitignore b/server/.gitignore
@@ -0,0 +1,59 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
diff --git a/server/README.md b/server/README.md
@@ -0,0 +1,2 @@
+# twatt
+oauth twitter
diff --git a/server/app.js b/server/app.js
@@ -0,0 +1,21 @@
+'use strict'
+
+const express = require('express');
+const bodyParser = require('body-parser');
+const cors = require('cors')
+require('dotenv').config()
+
+const twitter = require('./routes/twitter');;
+// console.log(process.env.USER_SECRET)
+const app = express();
+const PORT = 3000;
+
+app.use(bodyParser.urlencoded({extended: false}));
+app.use(bodyParser.json());
+app.use(cors());
+
+app.use('/twitter', twitter);
+
+app.listen(PORT, () => {
+    console.log(`Listening to port ${PORT}`)
+})
diff --git a/server/controllers/twitter.controller.js b/server/controllers/twitter.controller.js
@@ -0,0 +1,55 @@
+'use strict'
+const oauth = require('oauth');
+const myOauth = new oauth.OAuth(
+    'https://api.twitter.com/oauth/request_token',
+    'https://api.twitter.com/oauth/access_token',
+    process.env.CONSUMER_KEY,
+    process.env.CONSUMER_SECRET,
+    '1.0A',
+    null,
+    'HMAC-SHA1'
+)
+
+
+
+module.exports = {
+    recentTweet: (req, res) => {
+        myOauth.get(
+            'https://api.twitter.com/1.1/statuses/home_timeline.json',
+            process.env.USER_TOKEN, //test user token 
+            process.env.USER_SECRET, //test user secret
+            function(err, data) {
+                if(err) res.status(500).send(err);
+                else res.status(200).send(data);
+            }
+        );
+    },
+
+    seacrhTweet: (req, res) => {
+        myOauth.get(
+            'https://api.twitter.com/1.1/search/tweets.json?q=' + req.params.keyword,
+            process.env.USER_TOKEN, //test user token 
+            process.env.USER_SECRET, //test user secret
+            // {q: req.body.keyword},
+            function(err, data) {
+                if(err) res.status(500).send(err);
+                else res.status(200).send(data);
+            }
+        );
+    },
+
+    postTweet: (req, res) => {
+        myOauth.post(
+            `https://api.twitter.com/1.1/statuses/update.json?status=${req.body.tweet}`,
+            process.env.USER_TOKEN, //test user token 
+            process.env.USER_SECRET, //test user secret
+            // {status: req.body.status},
+            req.body.tweet,
+            'tweet',            
+            function(err, data) {
+                if(err) res.status(500).send(err);
+                else res.status(200).send(data);
+            }
+        );
+    },
+}