Merge pull request #1178 from ae-utbm/cache-photos

Cache user photos

sas/static/bundled/sas/user/pictures-index.ts

@@ -7,6 +7,7 @@ import {
 
 interface PagePictureConfig {
   userId: number;
+  nbPictures?: number;
 }
 
 interface Album {
@@ -20,11 +21,27 @@ document.addEventListener("alpine:init", () => {
     loading: true,
     albums: [] as Album[],
 
-    async init() {
+    async fetchPictures(): Promise<PictureSchema[]> {
+      const localStorageKey = `user${config.userId}Pictures`;
+      const localStorageInvalidationKey = `user${config.userId}PicturesNumber`;
+      const lastCachedNumber = localStorage.getItem(localStorageInvalidationKey);
+      if (
+        lastCachedNumber !== null &&
+        Number.parseInt(lastCachedNumber) === config.nbPictures
+      ) {
+        return JSON.parse(localStorage.getItem(localStorageKey));
+      }
       const pictures = await paginated(picturesFetchPictures, {
         // biome-ignore lint/style/useNamingConvention: from python api
         query: { users_identified: [config.userId] },
       } as PicturesFetchPicturesData);
+      localStorage.setItem(localStorageInvalidationKey, config.nbPictures.toString());
+      localStorage.setItem(localStorageKey, JSON.stringify(pictures));
+      return pictures;
+    },
+
+    async init() {
+      const pictures = await this.fetchPictures();
       const groupedAlbums = Object.groupBy(pictures, (i: PictureSchema) => i.album.id);
       this.albums = Object.values(groupedAlbums).map((pictures: PictureSchema[]) => {
         return {

sas/templates/sas/user_pictures.jinja

@@ -15,7 +15,7 @@
 {% endblock %}
 
 {% block content %}
-  <main x-data="user_pictures({ userId: {{ object.id }} })">
+  <main x-data="user_pictures({ userId: {{ object.id }}, nbPictures: {{ object.nb_pictures }} })">
     {% if user.id == object.id %}
       {{ download_button(_("Download all my pictures")) }}
     {% endif %}

sas/views.py

@@ -16,6 +16,7 @@ from typing import Any
 
 from django.conf import settings
 from django.core.exceptions import PermissionDenied
+from django.db.models import Count, OuterRef, Subquery
 from django.http import Http404, HttpResponseRedirect
 from django.shortcuts import get_object_or_404
 from django.urls import reverse
@@ -36,7 +37,7 @@ from sas.forms import (
     PictureModerationRequestForm,
     PictureUploadForm,
 )
-from sas.models import Album, Picture
+from sas.models import Album, PeoplePictureRelation, Picture
 
 
 class AlbumCreateFragment(FragmentMixin, CreateView):
@@ -178,6 +179,13 @@ class UserPicturesView(UserTabsMixin, CanViewMixin, DetailView):
     context_object_name = "profile"
     template_name = "sas/user_pictures.jinja"
     current_tab = "pictures"
+    queryset = User.objects.annotate(
+        nb_pictures=Subquery(
+            PeoplePictureRelation.objects.filter(user=OuterRef("id"))
+            .values("user_id")
+            .values(count=Count("*"))
+        )
+    ).all()
 
 
 # Admin views