Skip to content

Commit

Permalink
Updated data provider to data type api (#13)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tjcouch-sil
tjcouch-sil authored Jun 18, 2023
2 parents f50db2b + 9fc0646 commit 0028491
Show file tree
Hide file tree
Showing 6 changed files with 343 additions and 128 deletions.
193 changes: 122 additions & 71 deletions lib/extension-template-html.web-view.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,9 @@
<body>
<div class="title">Extension Template HTML</div>
<div>
<input id="greetings-input" value="Bill" /><button
id="greetings-button"
type="button"
>
Greet
</button>
<input id="name-input" value="Bill" />
<button id="greetings-button" type="button">Greet</button>
<button id="delete-button" type="button">Delete</button>
</div>
<div id="greetings-button-output"></div>
<div>
Expand All @@ -24,120 +21,174 @@
value="Hey, my name is Bill. I got set by the webview!"
/><button id="set-greetings-button" type="button">Set Greeting</button>
</div>
<div id="all-greetings"></div>
<div id="any-greetings-update-count">Any Greetings Updates: 0</div>
<div id="bill-any-greetings-update-count">
Any Greetings Updates (via Bill): 0
<div>
<input id="set-age-input" type="number" value="43" /><button
id="set-age-button"
type="button"
>
Set Age
</button>
</div>
<div id="people-data"></div>
<div id="people-update-count">People Updates: 0</div>
<div id="bill-any-greetings-update-count">Any Greetings Updates (via Bill): 0</div>
<div id="bill-greetings-update-count">Bill Greetings Updates: 0</div>
<div id="bill-any-age-update-count">Any Age Updates (via Bill): 0</div>
<div id="bill-age-update-count">Bill Age Updates: 0</div>
<script>
function print(input) {
papi.logger.info(input);
}
const dataProviderPromise = papi.dataProvider.get(
"hello-someone.greetings"
);
const dataProviderPromise = papi.dataProvider.get('hello-someone\.people');
async function setupWebView() {
const greetingsDataProvider =
await dataProviderPromise;
const peopleDataProvider = await dataProviderPromise;
// Attach handler for greetings-button
const greetingsButton = document.getElementById("greetings-button");
greetingsButton.addEventListener("click", async () => {
const greetingsInput = document.getElementById("greetings-input");
const greeting = await greetingsDataProvider.get(
greetingsInput.value.toLowerCase()
);
const helloSomeoneOutput = document.getElementById(
"greetings-button-output"
);
helloSomeoneOutput.innerHTML = greeting;
const greetingsButton = document.getElementById('greetings-button');
greetingsButton.addEventListener('click', async () => {
const nameInput = document.getElementById('name-input');
const greeting = await peopleDataProvider.getGreeting(nameInput.value.toLowerCase());
const helloSomeoneOutput = document.getElementById('greetings-button-output');
helloSomeoneOutput.textContent = papi.util.htmlEncode(greeting || '');
print(greeting);
});
greetingsButton.addEventListener("contextmenu", async (e) => {
greetingsButton.addEventListener('contextmenu', async (e) => {
e.preventDefault();
const greetingsInput = document.getElementById("greetings-input");
const name = greetingsInput.value.toLowerCase();
const nameInput = document.getElementById('name-input');
const name = nameInput.value.toLowerCase();
const promises = new Array(10000);
for (let i = 0; i < 10000; i += 1)
promises[i] = greetingsDataProvider.get(name);
for (let i = 0; i < 10000; i += 1) promises[i] = peopleDataProvider.getGreeting(name);
await Promise.all(promises);
print("Done");
print('Done');
});
// Attach handler for delete-button
const deleteButton = document.getElementById('delete-button');
deleteButton.addEventListener('click', async () => {
const nameInput = document.getElementById('name-input');
const success = await peopleDataProvider.deletePerson(nameInput.value.toLowerCase());
const helloSomeoneOutput = document.getElementById('greetings-button-output');
helloSomeoneOutput.textContent = papi.util.htmlEncode(
`${success ? 'Successfully' : 'Unsuccessfully'} deleted ${nameInput.value}.${
success ? ' RIP ⚰️' : ''
}`.replace(/'/g, '`'),
);
});
// Attach handler for set-greetings-button
const setGreetingsButton = document.getElementById(
"set-greetings-button"
);
setGreetingsButton.addEventListener("click", async () => {
const greetingsInput = document.getElementById("greetings-input");
const name = greetingsInput.value;
const setGreetingsInput = document.getElementById(
"set-greetings-input"
const setGreetingsButton = document.getElementById('set-greetings-button');
setGreetingsButton.addEventListener('click', async () => {
const nameInput = document.getElementById('name-input');
const name = nameInput.value;
const setGreetingsInput = document.getElementById('set-greetings-input');
const success = await peopleDataProvider.setGreeting(
name.toLowerCase(),
setGreetingsInput.value,
);
const success = await greetingsDataProvider.set(
const helloSomeoneOutput = document.getElementById('greetings-button-output');
helloSomeoneOutput.textContent = papi.util.htmlEncode(
`${success ? 'Successfully' : 'Unsuccessfully'} set ${name}'s greeting!`.replace(
/'/g,
'`',
),
);
});
// Attach handler for set-age-button
const setAgeButton = document.getElementById('set-age-button');
setAgeButton.addEventListener('click', async () => {
const nameInput = document.getElementById('name-input');
const name = nameInput.value;
const setAgeInput = document.getElementById('set-age-input');
const success = await peopleDataProvider.setAge(
name.toLowerCase(),
setGreetingsInput.value
parseInt(setAgeInput.value),
);
const helloSomeoneOutput = document.getElementById(
"greetings-button-output"
const helloSomeoneOutput = document.getElementById('greetings-button-output');
helloSomeoneOutput.textContent = papi.util.htmlEncode(
`${success ? 'Successfully' : 'Unsuccessfully'} set ${name}'s age!`.replace(/'/g, '`'),
);
helloSomeoneOutput.innerHTML = `${
success ? "Successfully" : "Unsuccessfully"
} set ${name}'s greeting!`;
});
// Update the 'all greetings' display on load and on greetings updates
greetingsDataProvider.subscribe("*", (greetings) => {
const allGreetings = document.getElementById("all-greetings");
const greetingsString = JSON.stringify(greetings, null, 2);
allGreetings.innerHTML = greetingsString;
print(greetingsString);
// Update the 'people' display on load and on updates
peopleDataProvider.subscribePeople(undefined, (people) => {
const peopleData = document.getElementById('people-data');
const peopleString = JSON.stringify(people, null, 2);
peopleData.textContent = papi.util.htmlEncode(peopleString.replace(/"/g, '`'));
print(peopleString);
});
// Update the greetings count on any greeting update
let anyGreetingsUpdateCount = 0;
greetingsDataProvider.subscribe(
"*",
// Update the people update count on any people update
let peopleUpdateCount = 0;
peopleDataProvider.subscribePeople(
undefined,
() => {
anyGreetingsUpdateCount += 1;
const anyGreetingsUpdateCountDiv = document.getElementById(
"any-greetings-update-count"
peopleUpdateCount += 1;
const peopleUpdateCountDiv = document.getElementById('people-update-count');
peopleUpdateCountDiv.textContent = papi.util.htmlEncode(
`People Updates: ${peopleUpdateCount}`,
);
anyGreetingsUpdateCountDiv.innerHTML = `Any Greetings Updates: ${anyGreetingsUpdateCount}`;
},
{ retrieveDataImmediately: false }
{ retrieveDataImmediately: false },
);
// Update the greetings count on greetings updates
let billAnyGreetingsUpdateCount = 0;
greetingsDataProvider.subscribe(
"BiLl",
peopleDataProvider.subscribeGreeting(
'BiLl',
() => {
billAnyGreetingsUpdateCount += 1;
const billAnyGreetingsUpdateCountDiv = document.getElementById(
"bill-any-greetings-update-count"
'bill-any-greetings-update-count',
);
billAnyGreetingsUpdateCountDiv.textContent = papi.util.htmlEncode(
`Any Greetings Updates (via Bill): ${billAnyGreetingsUpdateCount}`,
);
billAnyGreetingsUpdateCountDiv.innerHTML = `Any Greetings Updates (via Bill): ${billAnyGreetingsUpdateCount}`;
},
{ retrieveDataImmediately: false, whichUpdates: "all" }
{ retrieveDataImmediately: false, whichUpdates: '*' },
);
// Update the greetings count on greetings updates
let billGreetingsUpdateCount = -1;
greetingsDataProvider.subscribe("bIlL", () => {
peopleDataProvider.subscribeGreeting('bIlL', () => {
billGreetingsUpdateCount += 1;
const billGreetingsUpdateCountDiv = document.getElementById(
"bill-greetings-update-count"
'bill-greetings-update-count',
);
billGreetingsUpdateCountDiv.textContent = papi.util.htmlEncode(
`Bill Greetings Updates: ${billGreetingsUpdateCount}`,
);
});
// Update the age count on age updates
let billAnyAgeUpdateCount = 0;
peopleDataProvider.subscribeAge(
'BiLl',
() => {
billAnyAgeUpdateCount += 1;
const billAnyAgeUpdateCountDiv = document.getElementById('bill-any-age-update-count');
billAnyAgeUpdateCountDiv.textContent = papi.util.htmlEncode(
`Any Age Updates (via Bill): ${billAnyAgeUpdateCount}`,
);
},
{ retrieveDataImmediately: false, whichUpdates: '*' },
);
// Update the age count on age updates
let billAgeUpdateCount = -1;
peopleDataProvider.subscribeAge('bIlL', () => {
billAgeUpdateCount += 1;
const billAgeUpdateCountDiv = document.getElementById('bill-age-update-count');
billAgeUpdateCountDiv.textContent = papi.util.htmlEncode(
`Bill Age Updates: ${billAgeUpdateCount}`,
);
billGreetingsUpdateCountDiv.innerHTML = `Bill Greetings Updates: ${billGreetingsUpdateCount}`;
});
}
if (document.readyState === "loading")
document.addEventListener("DOMContentLoaded", setupWebView);
if (document.readyState === 'loading')
document.addEventListener('DOMContentLoaded', setupWebView);
else setupWebView();
//# sourceURL=extension-template-html.web-view.js
Expand Down
4 changes: 2 additions & 2 deletions lib/extension-template.web-view.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import papi from "papi";
import { useState } from "react";
import { QuickVerseDataProvider } from "extension-types";
import { QuickVerseDataProvider, QuickVerseDataTypes } from "extension-types";
import { Button } from "papi-components";

const {
Expand All @@ -17,7 +17,7 @@ globalThis.webViewComponent = function() {
"paranext-extension-template.quick-verse"
);

const [latestVerseText] = useData(
const [latestVerseText] = useData.Verse<QuickVerseDataTypes, 'Verse'>(
quickVerseDataProvider,
"latest",
"Loading latest Scripture text..."
Expand Down
Loading

0 comments on commit 0028491

Please sign in to comment.