archivalo-oss/replayweb.page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix missed rename, and improve types (#276)

Browse Source 
Fixes a missed rename, in `src/item-index.ts`: I'd renamed `coll` to
`item` but missed updating it in the `update` method's
`changedProperties` map.

This PR fixes that, and adds better typing to all of the instances of
`changedProperties` by using
[`PropertyValues<this>`](https://lit.dev/docs/components/lifecycle/#typescript-types-for-changedproperties),
and implementing class properties for missing Lit properties.
This commit is contained in:
Emma Segal-Grossman
2024-01-05 18:32:22 -08:00
committed by GitHub
parent 3bee02bd89
commit a40471128f
15 changed files with 229 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gdrive.ts
+37 -64
View File
@@ -1,19 +1,20 @@
import { LitElement, html, css } from "lit";
import { LitElement, html, css, type PropertyValues } from "lit";
import { wrapCss } from "./misc";
import fabGoogleDrive from "@fortawesome/fontawesome-free/svgs/brands/google-drive.svg";
// ===========================================================================
class GDrive extends LitElement {
state: string;
sourceUrl: string;
scriptLoaded: boolean;
error: boolean;
reauth?: boolean;
constructor() {
super();
// @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
this.state = "trypublic";
// @ts-expect-error - TS2339 - Property 'sourceUrl' does not exist on type 'GDrive'.
this.sourceUrl = "";
// @ts-expect-error - TS2339 - Property 'scriptLoaded' does not exist on type 'GDrive'.
this.scriptLoaded = false;
// @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'.
this.error = false;
}
@@ -26,15 +27,12 @@ class GDrive extends LitElement {
};
}
updated(changedProperties) {
updated(changedProperties: PropertyValues<this>) {
if (changedProperties.has("sourceUrl")) {
// @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'.
this.error = false;
// @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
this.state = "trypublic";
this.tryPublicAccess().then((result) => {
if (!result) {
// @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
this.state = "tryauto";
this.requestUpdate();
}
@@ -44,19 +42,16 @@ class GDrive extends LitElement {
async tryPublicAccess() {
try {
// @ts-expect-error - TS2339 - Property 'sourceUrl' does not exist on type 'GDrive'.
const sourceUrl = this.sourceUrl;
const fileId = sourceUrl.slice("googledrive://".length);
const publicCheckUrl = `${__HELPER_PROXY__}/g/${fileId}`;
let resp = null;
let resp: Response | null = null;
try {
// @ts-expect-error - TS2322 - Type 'Response' is not assignable to type 'null'.
resp = await fetch(publicCheckUrl);
} catch (e) {
return false;
}
// @ts-expect-error - TS2531 - Object is possibly 'null'.
const json = await resp.json();
if (!json.url || !json.name || !json.size) {
return false;
@@ -72,10 +67,8 @@ class GDrive extends LitElement {
try {
const abort = new AbortController();
const signal = abort.signal;
// @ts-expect-error - TS2322 - Type 'Response' is not assignable to type 'null'.
resp = await fetch(publicUrl, { signal });
abort.abort();
// @ts-expect-error - TS2531 - Object is possibly 'null'.
if (resp.status != 200) {
return false;
}
@@ -99,13 +92,10 @@ class GDrive extends LitElement {
}
onLoad() {
// @ts-expect-error - TS2339 - Property 'scriptLoaded' does not exist on type 'GDrive'.
this.scriptLoaded = true;
this.gauth("none", (response) => {
if (response.error) {
// @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
if (this.state !== "implicitonly") {
// @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
this.state = "trymanual";
}
} else {
@@ -123,7 +113,6 @@ class GDrive extends LitElement {
}
async authed(response) {
// @ts-expect-error - TS2339 - Property 'sourceUrl' does not exist on type 'GDrive'.
const sourceUrl = this.sourceUrl;
const fileId = sourceUrl.slice("googledrive://".length);
const metadataUrl = `https://www.googleapis.com/drive/v3/files/${fileId}`;
@@ -136,17 +125,13 @@ class GDrive extends LitElement {
);
if (resp.status === 404 || resp.status == 403) {
// @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
if (this.state !== "implicitonly") {
// @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
this.state = "trymanual";
}
// @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'.
this.error = true;
return;
}
// @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'.
this.error = false;
const metadata = await resp.json();
@@ -166,48 +151,38 @@ class GDrive extends LitElement {
render() {
return html` ${this.script()}
${
// @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'.
this.state !== "trymanual"
? html` <p>Connecting to Google Drive...</p> `
: html`
${
// @ts-expect-error - TS2339 - Property 'error' does not exist on type 'GDrive'.
this.error
? html`
<div class="error has-text-danger">
<p>
${
// @ts-expect-error - TS2339 - Property 'reauth' does not exist on type 'GDrive'.
this.reauth
? "Some resources are loaded on demand from Google Drive, which requires reauthorization."
: "Could not access this file with the current Google Drive account."
}
</p>
<p>
If you have multiple Google Drive accounts, be sure to
select the correct one.
</p>
</div>
<br />
`
: ""
}
<button
class="button is-warning is-rounded"
@click="${this.onClickAuth}"
>
<span class="icon"
><fa-icon .svg="${fabGoogleDrive}"></fa-icon
></span>
<span>Authorize Google Drive</span>
</button>
`
}`;
${this.state !== "trymanual"
? html` <p>Connecting to Google Drive...</p> `
: html`
${this.error
? html`
<div class="error has-text-danger">
<p>
${this.reauth
? "Some resources are loaded on demand from Google Drive, which requires reauthorization."
: "Could not access this file with the current Google Drive account."}
</p>
<p>
If you have multiple Google Drive accounts, be sure to
select the correct one.
</p>
</div>
<br />
`
: ""}
<button
class="button is-warning is-rounded"
@click="${this.onClickAuth}"
>
<span class="icon"
><fa-icon .svg="${fabGoogleDrive}"></fa-icon
></span>
<span>Authorize Google Drive</span>
</button>
`}`;
}
script() {
// @ts-expect-error - TS2339 - Property 'state' does not exist on type 'GDrive'. | TS2339 - Property 'scriptLoaded' does not exist on type 'GDrive'.
if (this.state === "trypublic" || this.scriptLoaded) {
return html``;
}
@@ -218,9 +193,7 @@ class GDrive extends LitElement {
}
gauth(prompt, callback) {
// @ts-expect-error - TS2339 - Property 'gapi' does not exist on type 'Window & typeof globalThis'.
self.gapi.load("auth2", () => {
// @ts-expect-error - TS2339 - Property 'gapi' does not exist on type 'Window & typeof globalThis'.
self.gapi.auth2.authorize(
{
client_id: __GDRIVE_CLIENT_ID__,