Example: Google Sheets NPM

Hello,

I have followed all the steps from the all the previous comments, and I have a problem I have not read. My button works, it is blue, but when I click on it, nothing happens. All the code has been copied, the database created exactly. I would appreciate any help.

code for commo-googleSheets:

import wixData from 'wix-data';
const { google } = require("googleapis");
let options = {
"suppressAuth": true // suppress db auth to allow secure db permissions
};
export async function getSheetId() {
const response = await wixData.query("config").eq('title', 'sheet id').find(options);
if (response.items.length === 0) return null;
return response.items[0].value;
}
export async function getTokens() {
const response = await wixData.query("config").eq('title', 'refresh token').find(options);
if (response.items.length === 0) return null;
return JSON.parse(response.items[0].value);
}
export async function getClientConfig() {
const response = await wixData.query("config").eq('title', 'client config').find(options);
if (response.items.length === 0) return null;
return response.items[0].value;
}
export async function createClient() {
let val = await getClientConfig();
let credentials = JSON.parse(val);
const { client_secret, client_id, redirect_uris } = credentials.installed;
return new google.auth.OAuth2(client_id, client_secret, redirect_uris[0]);
}

code for config.jsw

// Filename: backend/config.jsw (web modules need to have a .jsw extension)
import wixData from 'wix-data';
const { google } = require("googleapis");
import { createClient, getSheetId, getTokens } from 'backend/common-googleSheet'
const SCOPES = ['https://www.googleapis.com/auth/spreadsheets'];
let options = {
"suppressAuth": true // suppress db auth to allow secure db permissions
};
export async function clearConfig() {
let response = await wixData.query("config").eq('title', 'client config').find(options);
await wixData.remove("config", response.items[0]._id, options);
response = await wixData.query("config").eq('title', 'sheet id').find(options);
await wixData.remove("config", response.items[0]._id, options);
response = await wixData.query("config").eq('title', 'refresh token').find(options);
await wixData.remove("config", response.items[0]._id, options);
}
export async function isConfig() {
let response = await wixData.query("config").eq('title', 'client config').find(options);
if (response.items.length === 0) return false;
let cc = (response.items[0].value) ? true : false;
response = await wixData.query("config").eq('title', 'sheet id').find(options);
if (response.items.length === 0) return false;
let id = (response.items[0].value) ? true : false;
response = await wixData.query("config").eq('title', 'refresh token').find(options);
if (response.items.length === 0) return false;
let tk = (response.items[0].value) ? true : false;
return (cc && id && tk);
}
export async function client(config) {
let response = await wixData.query("config").eq('title', 'client config').find(options);
if (response.items.length === 0) {
const toInsert = {
"title": "client config",
"value": config
};
response = await wixData.insert("config", toInsert, options);
return;
}
let items = response.items;
let item = items[0];
const toUpdate = {
"_id": item._id,
"title": "client config",
"value": config
};
return await wixData.update("config", toUpdate, options);
}
export async function sheeetId(url) {
var regex = new RegExp('/spreadsheets/d/([a-zA-Z0-9-_]+)');
let result = url.match(regex);
let response = await wixData.query("config").eq('title', 'sheet id').find(options);
if (response.items.length === 0) {
const toInsert = {
"title": "sheet id",
"value": result[1]
};
response = await wixData.insert("config", toInsert, options);
return;
}
let items = response.items;
let item = items[0];
const toUpdate = {
"_id": item._id,
"title": "sheet id",
"value": result[1]
};
return await wixData.update("config", toUpdate, options);
}
export async function getAuthUrl() {
const oAuth2Client = await createClient();
const res = oAuth2Client.generateAuthUrl({
access_type: 'offline',
scope: SCOPES,
})
return Promise.resolve(res);
}
export async function generateTokens(offlineCode) {
const authClient = await createClient();
return authClient.getToken(offlineCode, async (err, tokenJson) => {
if (err) {
console.log(err);
} else {
let response = await wixData.query("config").eq('title', 'refresh token').find(options);
if (response.items.length === 0) {
const toInsert = {
"title": "refresh token",
"value": JSON.stringify(tokenJson)
};
response = await wixData.insert("config", toInsert, options);
return;
}
let items = response.items;
let item = items[0];
const toUpdate = {
"_id": item._id,
"title": "refresh token",
"value": JSON.stringify(tokenJson)
};
const ret = await wixData.update("config", toUpdate, options);
}
})
}

code for googleSheets

import wixData from 'wix-data';
const { google } = require("googleapis");
import { createClient, getSheetId, getTokens } from 'backend/common-googleSheet'
let options = {
"suppressAuth": true // suppress db auth to allow secure db permissions
};
async function createAuthorizedClient() {
try {
const oAuth2Client = await createClient();
let tokens = await getTokens();
oAuth2Client.setCredentials(tokens);
// const accessToken = await oAuth2Client.refreshAccessToken(tokens); // deprecated
const accessToken = oAuth2Client.getAccessToken(); // replaces deprecated API call
oAuth2Client.getTokenInfo(accessToken); // checks validity of tokens
return oAuth2Client;
} catch (err) {
console.log("failed to refreh token" + err);
}
}
export async function saveFormData(values) {
const authorizedAuthClient = await createAuthorizedClient();
const sheetId = await getSheetId();
return insertRow(values, authorizedAuthClient, sheetId);
}
function insertRow(values, authClient, ssID) {
var sheets = google.sheets('v4');
const request = {
spreadsheetId: ssID,  // The ID of the spreadsheet to update.
valueInputOption: 'RAW',  // How the input data should be interpreted.
insertDataOption: 'INSERT_ROWS',  // How the input data should be inserted.
range: 'A1:A2', // The A1 notation of a range to search
// for a logical table of data. Values will be
// appended after the last row of the table.
resource: {
"values": [
values
]
},
auth: authClient,
};
try {
return sheets.spreadsheets.values.append(request, function (err, response) {
if (err) {
console.log("error in append:" + err);
return;
}
return "ok";
});
} catch (err) {
console.log("error in append values" + err);
}
}

code for the Home page

import { saveFormData } from 'backend/googleSheet'
import { isConfig } from 'backend/config'
$w.onReady(async function () {
let config = await isConfig();
if (config) {
$w('#btnSaveForm').enable();
$w('#promptConfig').hide();
} else {
$w('#btnSaveForm').disable();
$w('#promptConfig').show();
}
});
export function btnSaveForm_click(event, $w) {
if ($w('#firstNameTxt').validity.valid === false)
return;
if ($w('#lastNameTxt').validity.valid === false)
return;
saveFormData([$w("#firstNameTxt").value, $w("#lastNameTxt").value]).then(() => {
$w('#firstNameTxt').value = "";
$w('#lastNameTxt').value = "";
$w('#savedMessage').show();
$w('#firstNameTxt').resetValidityIndication();
$w('#lastNameTxt').resetValidityIndication();
})
.catch(error => {
console.log(error);
});
}
export function firstNameTxt_keyPress(event) {
$w('#savedMessage').hide();
}
export function lastNameTxt_keyPress(event) {
$w('#savedMessage').hide();
}

the config database content has been correctly copy pasted, even downloaded as a csv and then imported.


blue button, but nothing happens when clicked.

Firefox console after button is clicked.

Network activity after button is pressed, as you can see, there is no request happening.

Any help will be greatly appreciated.