ProfessionalUwU/stickerpicker
1
0
Fork 1
mirror of https://github.com/maunium/stickerpicker.git synced 2024-11-10 05:37:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Only reload packs instead of whole page

Browse Source
This commit is contained in:
Tulir Asokan 2020-09-10 15:41:09 +03:00
parent 3045faaed8
commit 05a6e046c2
1 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/index.js
View File

@ -41,6 +41,7 @@ class App extends Component {
this.navRef = null this.navRef = null
this.sendSticker = this.sendSticker.bind(this) this.sendSticker = this.sendSticker.bind(this)
this.navScroll = this.navScroll.bind(this) this.navScroll = this.navScroll.bind(this)
this.reloadPacks = this.reloadPacks.bind(this)
} }
_getStickersByID(ids) { _getStickersByID(ids) {
@ -60,8 +61,16 @@ class App extends Component {
localStorage.mauFrequentlyUsedStickerCache = JSON.stringify(stickers.map(sticker => [sticker.id, sticker])) localStorage.mauFrequentlyUsedStickerCache = JSON.stringify(stickers.map(sticker => [sticker.id, sticker]))
} }
componentDidMount() { reloadPacks() {
fetch(`${PACKS_BASE_URL}/index.json`).then(async indexRes => { this.imageObserver.disconnect()
this.sectionObserver.disconnect()
this.setState({ packs: [] })
this._loadPacks(true)
}
_loadPacks(disableCache = false) {
const cache = disableCache ? "no-cache" : undefined
fetch(`${PACKS_BASE_URL}/index.json`, { cache }).then(async indexRes => {
if (indexRes.status >= 400) { if (indexRes.status >= 400) {
this.setState({ this.setState({
loading: false, loading: false,
@ -73,7 +82,7 @@ class App extends Component {
HOMESERVER_URL = indexData.homeserver_url || HOMESERVER_URL HOMESERVER_URL = indexData.homeserver_url || HOMESERVER_URL
// TODO only load pack metadata when scrolled into view? // TODO only load pack metadata when scrolled into view?
for (const packFile of indexData.packs) { for (const packFile of indexData.packs) {
const packRes = await fetch(`${PACKS_BASE_URL}/${packFile}`) const packRes = await fetch(`${PACKS_BASE_URL}/${packFile}`, { cache })
const packData = await packRes.json() const packData = await packRes.json()
for (const sticker of packData.stickers) { for (const sticker of packData.stickers) {
this.stickersByID.set(sticker.id, sticker) this.stickersByID.set(sticker.id, sticker)
@ -85,7 +94,10 @@ class App extends Component {
} }
this.updateFrequentlyUsed() this.updateFrequentlyUsed()
}, error => this.setState({ loading: false, error })) }, error => this.setState({ loading: false, error }))
}
componentDidMount() {
this._loadPacks()
this.imageObserver = new IntersectionObserver(this.observeImageIntersections, { this.imageObserver = new IntersectionObserver(this.observeImageIntersections, {
rootMargin: "100px", rootMargin: "100px",
}) })
@ -118,6 +130,9 @@ class App extends Component {
} }
componentDidUpdate() { componentDidUpdate() {
if (this.packListRef === null) {
return
}
for (const elem of this.packListRef.getElementsByClassName("sticker")) { for (const elem of this.packListRef.getElementsByClassName("sticker")) {
this.imageObserver.observe(elem) this.imageObserver.observe(elem)
} }
@ -163,19 +178,17 @@ class App extends Component {
<div class="pack-list ${isMobileSafari ? "ios-safari-hack" : ""}" ref=${elem => this.packListRef = elem}> <div class="pack-list ${isMobileSafari ? "ios-safari-hack" : ""}" ref=${elem => this.packListRef = elem}>
<${Pack} pack=${this.state.frequentlyUsed} send=${this.sendSticker} /> <${Pack} pack=${this.state.frequentlyUsed} send=${this.sendSticker} />
${this.state.packs.map(pack => html`<${Pack} id=${pack.id} pack=${pack} send=${this.sendSticker} />`)} ${this.state.packs.map(pack => html`<${Pack} id=${pack.id} pack=${pack} send=${this.sendSticker} />`)}
<${Settings} /> <${Settings} app=${this}/>
</div> </div>
</main>` </main>`
} }
} }
const reload = () => isMobileSafari ? (window.location.href = window.location.href) : window.location.reload() const Settings = ({ app }) => html`
const Settings = () => html`
<section class="stickerpack settings" id="pack-settings" data-pack-id="settings"> <section class="stickerpack settings" id="pack-settings" data-pack-id="settings">
<h1>Settings</h1> <h1>Settings</h1>
<div class="settings-list"> <div class="settings-list">
<button onClick=${reload}>Reload</button> <button onClick=${app.reloadPacks}>Reload</button>
</div> </div>
</section> </section>
` `