infrastructure/matrix-stickers
infrastructure/matrix-stickers
2
0
Fork 0
forked from mirrors/stickerpicker
Code Issues Pull requests 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.sendSticker = this.sendSticker.bind(this)
this.navScroll = this.navScroll.bind(this)
this.reloadPacks = this.reloadPacks.bind(this)
}
_getStickersByID(ids) {
@ -60,8 +61,16 @@ class App extends Component {
localStorage.mauFrequentlyUsedStickerCache = JSON.stringify(stickers.map(sticker => [sticker.id, sticker]))
}
componentDidMount() {
fetch(`${PACKS_BASE_URL}/index.json`).then(async indexRes => {
reloadPacks() {
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) {
this.setState({
loading: false,
@ -73,7 +82,7 @@ class App extends Component {
HOMESERVER_URL = indexData.homeserver_url || HOMESERVER_URL
// TODO only load pack metadata when scrolled into view?
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()
for (const sticker of packData.stickers) {
this.stickersByID.set(sticker.id, sticker)
@ -85,7 +94,10 @@ class App extends Component {
}
this.updateFrequentlyUsed()
}, error => this.setState({ loading: false, error }))
}
componentDidMount() {
this._loadPacks()
this.imageObserver = new IntersectionObserver(this.observeImageIntersections, {
rootMargin: "100px",
})
@ -118,6 +130,9 @@ class App extends Component {
}
componentDidUpdate() {
if (this.packListRef === null) {
return
}
for (const elem of this.packListRef.getElementsByClassName("sticker")) {
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}>
<${Pack} pack=${this.state.frequentlyUsed} send=${this.sendSticker} />
${this.state.packs.map(pack => html`<${Pack} id=${pack.id} pack=${pack} send=${this.sendSticker} />`)}
<${Settings} />
<${Settings} app=${this}/>
</div>
</main>`
}
}
const reload = () => isMobileSafari ? (window.location.href = window.location.href) : window.location.reload()
const Settings = () => html`
const Settings = ({ app }) => html`
<section class="stickerpack settings" id="pack-settings" data-pack-id="settings">
<h1>Settings</h1>
<div class="settings-list">
<button onClick=${reload}>Reload</button>
<button onClick=${app.reloadPacks}>Reload</button>
</div>
</section>
`