Merge pull request #31 from FuBoTeam/bugfix/images-url-performance

FuBoTeam · Jan 11, 2022 · 40a31bf · 40a31bf
2 parents e6f4dbd + cf94a36
commit 40a31bf
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 24 deletions.
diff --git a/src/Board/Background.tsx b/src/Board/Background.tsx
@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from 'react';
+import loadingIcon from '../images/loading.gif';
+import './board.scss';
+
 import { useStorage } from '../Provider/FirebaseApp';
 import configService from '../services/configService';
-import { listAllImages } from '../api';
-import { combinationList, permutationList } from '../utils/random';
+import { listRandomKImages } from '../api';
+import { permutationList } from '../utils/random';
 import { preloadImageAsync } from '../images/preloadImage';
 
-import loadingIcon from '../images/loading.gif';
-import './board.scss';
-
 const TIME_FADE_OUT = 1000;
 const TIME_FADE_IN = 1000;
 const TIME_HIDDEN = 1500;
@@ -28,15 +28,9 @@ export const Background = () => {
 
   useEffect(() => {
     if (isLoading) {
-      listAllImages(storage).then(imgUrls => {
-        Promise.all(
-          imgUrls.map(preloadImageAsync)
-        ).then(() => setIsLoading(false));
-        setPermutation(
-          permutationList(
-            combinationList(imgUrls, configService.config.img.bgImgsShouldBePicked)
-          )
-        );
+      listRandomKImages(storage, configService.config.img.bgImgsShouldBePicked).then(imgUrls => {
+        Promise.all(imgUrls.map(preloadImageAsync)).then(() => setIsLoading(false));
+        setPermutation(permutationList(imgUrls));
       });
     }
   }, [storage, isLoading]);

diff --git a/src/Greeting/GreetingForm.tsx b/src/Greeting/GreetingForm.tsx
@@ -1,12 +1,11 @@
 import React, { useState, ChangeEventHandler, FormEventHandler, useEffect } from 'react';
 import uuid from 'uuid';
+import loadingIcon from '../images/uploadLoading.svg';
 import './greeting.scss';
 
-import configService from '../services/configService';
-import { combinationList } from '../utils/random';
-import loadingIcon from '../images/uploadLoading.svg';
-import { listAllImages, uploadImage, writePost } from '../api';
 import { useDatabase, useStorage } from '../Provider/FirebaseApp';
+import { listRandomKImages, uploadImage, writePost } from '../api';
+import configService from '../services/configService';
 import { ImagePicker } from './ImagePicker';
 import { ImageUploader } from './ImageUploader';
 
@@ -31,10 +30,9 @@ export const GreetingForm: React.FC<Props> = ({ onSubmit }) => {
   const storage = useStorage();
 
   useEffect(() => {
-    listAllImages(storage).then(imageUrls => {
-      const imgCandidates = combinationList(imageUrls, configService.config.img.fmImgsShouldBePicked);
-      setImgUrls(imgCandidates);
-      setPickedImg(imgCandidates[0]);
+    listRandomKImages(storage, configService.config.img.fmImgsShouldBePicked).then(imgUrls => {
+      setImgUrls(imgUrls);
+      setPickedImg(imgUrls[0]);
     });
   }, [storage]);
 

diff --git a/src/api/index.ts b/src/api/index.ts
@@ -15,9 +15,11 @@ import {
   uploadBytes,
   listAll,
   getDownloadURL,
+  StorageReference,
 } from 'firebase/storage';
 
 import configService from '../services/configService';
+import { combinationList } from '../utils/random';
 
 interface ListPostsOptions {
   readonly joinedGame?: boolean;
@@ -63,10 +65,16 @@ interface ListImagesOptions {
   readonly size?: 'small' | 'regular';
 }
 
-export const listAllImages = (storage: FirebaseStorage, options: ListImagesOptions = { size: 'small' }): Promise<string[]> => {
+export const listImageRefs = (storage: FirebaseStorage, options: ListImagesOptions = { size: 'small' }): Promise<StorageReference[]> => {
   const size = options.size ?? 'small';
   return listAll(storageRef(storage, `${configService.config.img.namespace}/${size}`))
-    .then(listResult => Promise.all(listResult.items.map(getDownloadURL)));
+    .then(listResult => listResult.items);
+};
+
+export const listRandomKImages = async (storage: FirebaseStorage, k: number, options?: ListImagesOptions): Promise<string[]> => {
+  const imageRefs = await listImageRefs(storage, options);
+  const kImageRefs = combinationList(imageRefs, k);
+  return Promise.all(kImageRefs.map(getDownloadURL));
 };
 
 export const uploadImage = (storage: FirebaseStorage, imgName: string, image: Blob): Promise<string> => {