Kaedah JavaScript untuk mencipta acara kalendar dalam React JS menggunakan fetch

Question

Dalam aplikasi React JS, saya ingin membuat acara Kalendar Google. Saya benar-benar baru menggunakan Google API dan saya cuba belajar/mencari cara untuk melakukannya.

Di bawah ialah komponen ujian tindak balas yang memaparkan skrin kosong dengan butang "Log Masuk Google" dan butang "Tambah ke Kalendar".

Saya mencipta pemalar TEST_EVENT untuk contoh ini.

Pengguna mesti log masuk dahulu dan kemudian klik butang "Tambah ke Kalendar". Saya mendapat token akses - langkah seterusnya ialah mencipta acara. Soalan saya ialah, jika saya mempunyai access_token, bagaimana saya boleh membuat acara kalendar menggunakan API pengambilan?

import React, { useEffect, useState } from 'react'
import jwt_decode from "jwt-decode";

const CLIENT_ID = '25262567698-tsaoo718sc35n3k25os074b17jklc5rm.apps.googleusercontent.com';
const SCOPES = 'https://www.googleapis.com/auth/calendar';

const TEST_EVENT = {
    'summary': 'Example Event',
    'location': 'New York, NY',
    'description': 'a description for this',
    'start': {
        'dateTime': '2023-03-26T10:00:00-04:00',
        'timeZone': 'America/New_York',
    },
    'end': {
        'dateTime': '2023-03-26T11:00:00-04:00',
        'timeZone': 'America/New_York',
    },
};

const TestGIS = (props) => {


    const [user, setUser] = useState({});
    const [tokenClient, setTokenClient] = useState({});

    function handleCallbackResponse(response) {
        console.log('encoded JWT ID token:' + response.credential);
        var userObject = jwt_decode(response.credential);
        console.log(userObject)
        setUser(userObject);
        document.getElementById('signInDiv').hidden = true;
    }

    function handleSignOut(event) {
        setUser({});
        document.getElementById('signInDiv').hidden = false;
    }



    useEffect(() => {

        /* global google */
        const google = window.google;
        google.accounts.id.initialize({
            client_id: CLIENT_ID,
            callback: handleCallbackResponse
        })
        google.accounts.id.renderButton(
            document.getElementById('signInDiv'),
            { theme: 'outline', size: 'large' }
        );

        // google.accounts.id.prompt(); // this is added to popup the login dialog when page is first loaded - didn't work

        // Get Access Token
        // create something called a tokenClient
        setTokenClient(
            google.accounts.oauth2.initTokenClient({
                client_id: CLIENT_ID,
                scope: SCOPES,
                callback: (tokenResponse) => {
                    console.log('tokenResponse=', tokenResponse);
                    // we now have access to a live token to use for ANY google API
                    if (tokenResponse && tokenResponse.access_token) {
                        // create the calendar event here

                    }
                }
            })
        );



    }, []);


    function createCalendarEvent() {
        tokenClient.requestAccessToken();
    }




    
    //-----------------------------------------------------------------
    return (

        <div className='main-cover' style={{ backgroundColor: 'lightblue', width: '100%', height: '100%', zIndex: '10000' }}   >

            <div id="signInDiv"></div>
            {Object.keys(user).length != 0 &&
                <button onClick={(e) => handleSignOut(e)}>Sign Out</button>
            }

            {user &&
                <div>
                    <img src={user['picture']}></img>
                    <h3>{user.name}</h3>
                    <button onClick={() => createCalendarEvent()}>Create calendar event</button>
                </div>
            }

        </div>


    )
}
export default TestGIS

Answer 1

Terima kasih kepada 3 video yang saya tonton di youtube yang dibuat oleh Coopercodes, saya mempunyai contoh yang berfungsi di bawah. Contoh ini menggunakan aliran tersirat untuk membuat acara pada Kalendar Google. Saya mengambil masa beberapa hari untuk mendapatkannya ke tempat kerja. Saya harap ini membantu orang lain:

import React, { useEffect, useState } from 'react'
import jwt_decode from "jwt-decode";

const CLIENT_ID = '25262567698-tsaoo718sc35n3k25os074b17jklc5rm.apps.googleusercontent.com';
const SCOPES = 'https://www.googleapis.com/auth/calendar';

const TEST_EVENT = {
    'summary': 'Example Event',
    'location': 'New York, NY',
    'description': 'a description for this',
    'start': {
        'dateTime': '2023-03-26T10:00:00-04:00',
        'timeZone': 'America/New_York',
    },
    'end': {
        'dateTime': '2023-03-26T11:00:00-04:00',
        'timeZone': 'America/New_York',
    },
};

const TestGIS = (props) => {


    const [user, setUser] = useState({});
    const [tokenClient, setTokenClient] = useState({});

    function handleCallbackResponse(response) {
        console.log('encoded JWT ID token:' + response.credential);
        var userObject = jwt_decode(response.credential);
        console.log(userObject)
        setUser(userObject);
        document.getElementById('signInDiv').hidden = true;
    }

    function handleSignOut(event) {
        setUser({});
        document.getElementById('signInDiv').hidden = false;
    }

    useEffect(() => {

        /* global google */
        const google = window.google;
        google.accounts.id.initialize({
            client_id: CLIENT_ID,
            callback: handleCallbackResponse
        })
        google.accounts.id.renderButton(
            document.getElementById('signInDiv'),
            { theme: 'outline', size: 'large' }
        );


        // Get Access Token
        // create something called a tokenClient
        setTokenClient(
            google.accounts.oauth2.initTokenClient({
                client_id: CLIENT_ID,
                scope: SCOPES,
                callback: (tokenResponse) => {
                    console.log('tokenResponse=', tokenResponse);
                    // we now have access to a live token to use for ANY google API
                    if (tokenResponse && tokenResponse.access_token) {
                        // create the calendar event here

                        fetch ('https://www.googleapis.com/calendar/v3/calendars/primary/events',{
                            method: 'POST',
                            headers: {
                                'Authorization':'Bearer '+tokenResponse.access_token
                            },
                            body:JSON.stringify(TEST_EVENT)
                        }).then((data) => {
                            return data.json();
                        }).then((data) => {
                            console.log(data);
                            alert('event created check google calendar')
                        })  

                    }
                }
            })
        );



    }, []);


    function createCalendarEvent() {
        tokenClient.requestAccessToken();
    }




    //---------------------------------------------------------

   
    return (

        


            

            {Object.keys(user).length != 0 &&
                 handleSignOut(e)}>Sign Out
            }

            {user &&
                

                    
                    
{user.name}
                     createCalendarEvent()}>Create calendar event
                
            }

        


    )
}
export default TestGIS