Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

request show timeline success! #7

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

request show timeline success! #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c05df53
request show timeline success!
FTeddy Mar 7, 2018
cf4a9d2
release 2 twitter timeline, post and search implemented
FTeddy Mar 8, 2018
806fcc8
added facebook login
FTeddy Mar 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style/style_twatt.css">
<title>Twatter</title>
</head>
<body>
<div id="fb-root"></div>

<div class="header">
<h1>Welcome to Twatter</h1>
</div>
<div class="navigation">
<a href="./index.html">
<button type="button" name="button">home</button>
</a>
<a href="./search.html">
<button type="button" name="button">search</button>
</a>
<a href="./post.html">
<button type="button" name="button">post</button>
</a>
</div>
<div class="timeline" id="twitter">
<p>My Tweets</p>
</div>
<div class="timeline" id="facebook">
<p id="login-text">facebook log in</p>
<fb:login-button class="fb-login-button" scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<div class="fb-logout-button">
<button type="button" name="button" onclick="logout()">
Log Out
</button>
</div>
</body>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>

<script src="./lib/twatter.js" charset="utf-8"></script>
<script src="./lib/fbLogIn.js" charset="utf-8"></script>
</html>
121 changes: 121 additions & 0 deletions client/lib/fbLogIn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
console.log('=======');
console.log(response.authResponse.accessToken);
// testAPI();

// $.post('http://localhost:3000/api/facebook/request-token',{token: token },(data,status) => {
// if (status == 'success') {
// $('#text-login-as').text(`Welcome, ${data.name}`);
// $('#fb-btn-login').hide();
// }
// })
// hide login button

const token = response.authResponse.accessToken;
$.post('http://localhost:3000/api/fb/token',{token : token},
function(data,status) {
console.log('================================');
console.log(status);
console.log('Welcome! Fetching your information.... ');
if (status == 'success') {
// console.log('Successful login for: ' + data.fbData.name);
console.log(data);
localStorage.setItem('token', data.token)
// console.log(localStorage.token);
$('.fb-login-button').hide()
$('.fb-logout-button').show()
$('#login-text').text(`Welcome, ${data.fbData.name}`)
} else {
console.log(status);
// $('.fb-login-button').show()
// $('.fb-logout-button').hide()
}

})



} else {
// The person is not logged into your app or we are unable to tell.

// show login Button
// document.getElementById('status').innerHTML = 'Please log ' +
// 'into this app.';
console.log(response);
$('.fb-login-button').show()
$('.fb-logout-button').hide()
}
}

// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}

window.fbAsyncInit = function() {
FB.init({
appId : '557741944594385',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.8' // use graph api version 2.8
});

// Now that we've initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.

FB.getLoginStatus(function(response) {
// console.log(response);
statusChangeCallback(response);
});

};

// Load the SDK asynchronously
(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'));

// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
// function testAPI() {
// console.log('Welcome! Fetching your information.... ');
// FB.api('/me', function(response) {
// console.log('Successful login for: ' + response.name);
// document.getElementById('status').innerHTML =
// 'Thanks for logging in, ' + response.name + '!';
// });
// }

function logout(){
FB.logout((response)=>{
location.reload()
localstorage.removeitem('token')
})
}
9 changes: 9 additions & 0 deletions client/lib/post.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@

$('#submit_tweet').click( function() {
let data = $('#tweet_form').serialize()
$.ajax({
type: 'POST',
url: 'http://localhost:3000/oauth/post',
data: data
})
})
26 changes: 26 additions & 0 deletions client/lib/search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
$('#search_tweet').click( function() {
let data = $('#tweet_form').serialize()
$.ajax({
type: 'GET',
url: 'http://localhost:3000/oauth/search',
data: data,
success: function(resp) {
console.log(resp);
resp.statuses.map((result) => {
$('#twitter').append(
`<div class="tweets">
<article class="tweet">
<p>
${result.text}
</p>
</article>
</div>`
)
})

},
error: function(error) {
console.log(error);
}
})
})
21 changes: 21 additions & 0 deletions client/lib/twatter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
$.ajax({
type: 'GET',
url: 'http://localhost:3000/oauth/timeline',
success: function(resp) {
resp.map((result) => {
$('#twitter').append(
`<div class="tweets">
<article class="tweet">
<p>
${result.text}
</p>
</article>
</div>`
)
})

},
error: function(error) {
console.log(error);
}
});
41 changes: 41 additions & 0 deletions client/post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style/style_twatt.css">
<title>Posting</title>
</head>
<body>
<div class="header">
<h1>Posting</h1>
</div>
<div class="navigation">
<a href="./index.html">
<button type="button" name="button">home</button>
</a>
<a href="./search.html">
<button type="button" name="button">search</button>
</a>
<a href="./post.html">
<button type="button" name="button">post</button>
</a>
</div>

<div class="post" id="twitter">
<p>Share your status here!</p>
<form id="tweet_form" action="index.html" method="post">
<input type="text" name="status" value="">
<button type="button" name="submit_button" id="submit_tweet">TWEET</button>
</form>
</div>

<div class="post" id="facebook">

</div>
</body>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="./lib/post.js" charset="utf-8"></script>
</html>
42 changes: 42 additions & 0 deletions client/search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style/style_twatt.css">
<title>Twatter</title>
</head>
<body>
<div class="header">
<h1>Welcome to Twatter</h1>
</div>
<div class="navigation">
<a href="./index.html">
<button type="button" name="button">home</button>
</a>
<a href="./search.html">
<button type="button" name="button">search</button>
</a>
<a href="./post.html">
<button type="button" name="button">post</button>
</a>
</div>
<div class="search" id="twitter">
<p>Search tweets</p>
<form id="tweet_form" action="index.html" method="post">
<input type="text" name="q" value="">
<button type="button" name="submit_button" id="search_tweet">Search</button>
</form>
</div>
<div class="timeline" id="twitter">
<p>found tweets</p>
</div>
<div class="timeline" id="facebook">

</div>
</body>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="./lib/search.js" charset="utf-8"></script>
</html>
53 changes: 53 additions & 0 deletions client/style/style_twatt.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
*{
margin: 0px;
padding: 0px;
}

.header {
height: 80px;
background-color: rgb(222, 222, 244);
padding: 10px 30px;;
display: flex;
align-items: center;
justify-content: center;
}

.navigation {
margin: 10px;
display: flex;
justify-content: center;
}
.navigation a {
margin: 0px 5px;
}

.timeline {
height: auto;
padding: 30px 30px 30px 30px;
display: flex;
flex-direction: column;
align-items: center;
}

.post {
height: 500px;
padding: 30px 30px 30px 30px;
display: flex;
flex-direction: column;
align-items: center;
}

.search {
height: 500px;
padding: 30px 30px 30px 30px;
display: flex;
flex-direction: column;
align-items: center;
}

article {
background-color: rgb(222, 222, 222);
width: 300px;
padding: 20px;
margin: 10px;
}
2 changes: 2 additions & 0 deletions server/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# twatt
oauth twitter
Loading