Skip to content
Extraits de code Groupes Projets
Valider 05a6e046 rédigé par Tulir Asokan's avatar Tulir Asokan
Parcourir les fichiers

Only reload packs instead of whole page

parent 3045faae
Branches
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
......@@ -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>
`
......
0% Chargement en cours ou .
You are about to add 0 people to the discussion. Proceed with caution.
Veuillez vous inscrire ou vous pour commenter