Merge pull request #6 from knhrvs/master

Master

src/Component/Javascript/fbConnector.astro

@@ -0,0 +1,70 @@
+---
+
+---
+<script>
+
+ function statusChangeCallback(response) { 
+ console.log('statusChangeCallback');
+ console.log(response); 
+ if (response.status === 'connected') { 
+ apiCall();
+ console.log("connected");
+ } else { 
+ console.log("Not Connected")
+ }
+ }
+
+ window.checkLoginState = function() {
+ FB.getLoginStatus(function(response) {
+ statusChangeCallback(response);
+ console.log("checkLoginState: "+response);
+ });
+ };
+
+ window.fbAsyncInit = function() {
+ FB.init({
+ appId : '1619509128422385',
+ cookie : true,
+ xfbml : true,
+ version : 'v13.0'
+ });
+
+ FB.AppEvents.logPageView(); 
+
+ 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 apiCall(){ 
+ FB.api(
+ '/me',
+ 'GET',
+ {"fields":"id,name,first_name,middle_name,last_name,short_name,birthday,age_range,gender"},
+ function(response) {
+
+ var age_range = (Object.values(response.age_range));
+ var age = parseInt(age_range) + 1;
+
+ document.getElementById('Name').innerHTML = "Name: " + response.name;
+ document.getElementById('nickName').innerHTML = "Nickname: " + response.short_name;
+ document.getElementById('Birthday').innerHTML = "Birthday: " + response.birthday;
+ document.getElementById('Age').innerHTML = "Age: " + age;
+ document.getElementById('Gender').innerHTML = "Gender: " + response.gender;
+
+ }
+ );
+ }
+
+
+
+</script>

src/Component/content.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import '../Component/Javascript/fbConnector.astro';
+
+export default function Content() {
+
+ return (
+
+
+ <div className='flex place-content-center py-16'>
+ <div className="box-border h-64 w-64 p-7 border-4 rounded-lg mt-5">
+ <div>
+ <h1>Fetched Information</h1>
+
+ <div className='my-5'>
+ <div id="Name"></div>
+ <div id="nickName"></div>
+ <div id="Birthday"></div>
+ <div id="Age"></div>
+ <div id="Gender"></div>
+ </div>
+ </div>
+
+
+ </div>
+ </div>
+ );
+}

src/pages/index.astro

@@ -2,69 +2,25 @@
 import Layout from '../Layout/MainLayout.astro';
 import '../Styles/global.css';
 import Header from '../Component/header.jsx';
+import '../Component/Javascript/fbConnector.astro';
+import Content from '../Component/content.jsx';
 ---
 
 <style>
 
 </style>
 
-<script>
-
- function statusChangeCallback(response) { 
- console.log('statusChangeCallback');
- console.log(response); 
- if (response.status === 'connected') { 
- // testAPI(); 
- console.log("connected");
- } else { 
- console.log("Not Connected")
- }
- }
-
- window.checkLoginState = function() {
- FB.getLoginStatus(function(response) {
- statusChangeCallback(response);
- console.log("checkLoginState: "+response);
- });
- };
-
- window.fbAsyncInit = function() {
- FB.init({
- appId : '1619509128422385',
- cookie : true,
- xfbml : true,
- version : 'v13.0'
- });
-
- FB.AppEvents.logPageView(); 
-
- 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'));
-
-
-
-</script>
-
-
 <Layout title="Dashboard">
 
  <Header title="META API Sandbox/PlayGround"/>
+ <div class="flex justify-center mt-24">
+ <fb:login-button 
+ class="fb-login-button" data-width="" data-size="large" data-button-type="login_with" data-layout="rounded" data-auto-logout-link="true" data-use-continue-as="false"
+ scope="public_profile,email"
+ onlogin="checkLoginState();">
+ </fb:login-button>
+ </div>
 
- <fb:login-button 
- scope="public_profile,email"
- onlogin="checkLoginState();">
- </fb:login-button>
-
-
+ <Content/>
+ <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
 </Layout>