Merge pull request #28 from FuBoTeam/upgrade

package.json

@@ -5,7 +5,7 @@
   "homepage": "https://weddi.app/",
   "dependencies": {
     "blueimp-load-image": "^2.24.0",
-    "firebase": "^7.2.3",
+    "firebase": "^9.6.2",
     "node-sass": "^4.13.0",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",

src/Board/Background.tsx

@@ -28,7 +28,7 @@ export const Background = () => {
 
   useEffect(() => {
     if (isLoading) {
-      listAllImages(storage)().then(imgUrls => {
+      listAllImages(storage).then(imgUrls => {
         Promise.all(
           imgUrls.map(preloadImageAsync)
         ).then(() => setIsLoading(false));

src/Board/subscribePost.ts

@@ -1,4 +1,4 @@
-import firebase from 'firebase';
+import { Database } from 'firebase/database';
 import { listPosts, onNewPost } from '../api';
 import { newHeap } from '../utils/priorityQueue';
 
@@ -39,18 +39,18 @@ const heap = newHeap<HeapNode>((node1, node2) => {
 type PostListener = (post: WeddiApp.Post.Data) => any;
 type UnsubscribeFn = () => void;
 
-export const subscribePost = (database: firebase.database.Database) => (listener: PostListener): UnsubscribeFn => {
+export const subscribePost = (database: Database) => (listener: PostListener): UnsubscribeFn => {
   const postsPool: {[timestampId: string]: WeddiApp.Post.Data} = {};
   let feeds: HeapNode[] = [];
-  listPosts(database)().then(posts => {
+  listPosts(database).then(posts => {
     if (posts === null) {
       return;
     }
     Object.keys(posts).forEach(id => {
       postsPool[id] = posts[id];
     });
   }).then(() => {
-    onNewPost(database)((post: WeddiApp.Post.Data) => {
+    onNewPost(database, (post: WeddiApp.Post.Data) => {
       if (!postsPool[post.id]) {
         postsPool[post.id] = post;
         heap.push(feeds, newHeapNode(0, post.id));

src/Greeting/GreetingForm.tsx

@@ -31,7 +31,7 @@ export const GreetingForm: React.FC<Props> = ({ onSubmit }) => {
   const storage = useStorage();
 
   useEffect(() => {
-    listAllImages(storage)().then(imageUrls => {
+    listAllImages(storage).then(imageUrls => {
       const imgCandidates = combinationList(imageUrls, configService.config.img.fmImgsShouldBePicked);
       setImgUrls(imgCandidates);
       setPickedImg(imgCandidates[0]);
@@ -56,8 +56,7 @@ export const GreetingForm: React.FC<Props> = ({ onSubmit }) => {
         let imgUrl = pickedImg;
         if (isUploadPage && uploadImg) {
           const imgName = uuid.v4();
-          const uploadProc = await uploadImage(storage)(imgName, uploadImg);
-          imgUrl = await uploadProc.ref.getDownloadURL();
+          imgUrl = await uploadImage(storage, imgName, uploadImg);
         }
 
         const input: WeddiApp.Post.UserInput = {
@@ -67,7 +66,7 @@ export const GreetingForm: React.FC<Props> = ({ onSubmit }) => {
           imgUrl,
         };
 
-        await writePost(database)(input);
+        await writePost(database, input);
 
         setPickedImg(imgUrl);
         setIsProcessing(false);

src/Lottery/Lottery.tsx

@@ -25,7 +25,7 @@ export const Lottery: React.FC<RouteComponentProps> = (props) => {
   const [stage, setStage] = useState<Stage>(Stage.Init);
 
   useEffect(() => {
-    listPosts(database)(true).then(postsDictionary => {
+    listPosts(database, { joinedGame: true }).then(postsDictionary => {
       if (postsDictionary === null) {
         // TODO: enable retry
         setStage(Stage.Error);

src/Provider/FirebaseApp/context.ts

@@ -1,10 +1,12 @@
 import { createContext } from 'react';
-import firebase from 'firebase';
+import { FirebaseApp } from 'firebase/app';
+import { FirebaseStorage } from 'firebase/storage';
+import { Database } from 'firebase/database';
 
 export interface FirebaseContextType {
-  app: firebase.app.App;
-  database: firebase.database.Database;
-  storage: firebase.storage.Storage;
+  app: FirebaseApp;
+  database: Database;
+  storage: FirebaseStorage;
 }
 
 export const FirebaseContext = createContext<FirebaseContextType>({} as FirebaseContextType);

src/Provider/FirebaseApp/provider.tsx

@@ -1,6 +1,6 @@
-import firebase from 'firebase/app';
-import 'firebase/storage';
-import 'firebase/database';
+import { getApps, initializeApp } from 'firebase/app';
+import { getStorage } from 'firebase/storage';
+import { getDatabase } from 'firebase/database';
 import React, { useMemo } from 'react';
 import { FirebaseContext } from './context';
 export interface Props {
@@ -19,18 +19,18 @@ export const FirebaseAppProvider = (props: Props & { [key: string]: unknown }) =
     if (!firebaseConfig) {
       throw new Error('No config provided');
     }
-    const existingApp = firebase.apps.find(app => app.name === (appName || DEFAULT_APP_NAME));
+    const existingApp = getApps().find(app => app.name === (appName || DEFAULT_APP_NAME));
     if (existingApp && shallowEqual(existingApp.options, firebaseConfig)) {
       return {
         app: existingApp,
-        storage: firebase.storage(existingApp),
-        database: firebase.database(existingApp),
+        storage: getStorage(existingApp),
+        database: getDatabase(existingApp),
       };
     }
 
-    const app = firebase.initializeApp(firebaseConfig, appName);
-    const storage = firebase.storage();
-    const database = firebase.database();
+    const app = initializeApp(firebaseConfig, appName);
+    const storage = getStorage(app);
+    const database = getDatabase(app);
     return {
       app,
       storage,

src/api/index.ts

@@ -1,19 +1,45 @@
-import firebase from 'firebase/app';
+import {
+  Database, Query,
+  ref as databaseRef,
+  set,
+  push,
+  query,
+  orderByChild,
+  equalTo,
+  onValue,
+  onChildAdded,
+} from 'firebase/database';
+import {
+  FirebaseStorage,
+  ref as storageRef,
+  uploadBytes,
+  listAll,
+  getDownloadURL,
+} from 'firebase/storage';
 
 import configService from '../services/configService';
 
-export const listPosts = (database: firebase.database.Database) => (joinedGame = false): Promise<{[id: string]: WeddiApp.Post.Data} | null> => {
-  let postRef: firebase.database.Query = database.ref(`${configService.config.post.namespace}/posts`);
+interface ListPostsOptions {
+  readonly joinedGame?: boolean;
+}
+
+export const listPosts = (
+  database: Database,
+  options: ListPostsOptions = { joinedGame: false },
+): Promise<{[id: string]: WeddiApp.Post.Data} | null> => {
+  let postRef: Query = databaseRef(database, `${configService.config.post.namespace}/posts`);
+  const joinedGame = options.joinedGame ?? false;
   if (joinedGame) {
-    postRef = postRef.orderByChild('joinedGame').equalTo(true);
+    postRef = query(postRef, orderByChild('joinedGame'), equalTo(true));
   }
-  return postRef
-    .once('value')
-    .then(snapshot => snapshot.val());
+  return new Promise(resolve =>
+    onValue(postRef, (snapshot => {
+      resolve(snapshot.val());
+    }), { onlyOnce: true }));
 };
 
-export const writePost = (database: firebase.database.Database) => (postData: WeddiApp.Post.UserInput): Promise<WeddiApp.Post.Data> => {
-  const postId = database.ref(`${configService.config.post.namespace}/posts`).push().key;
+export const writePost = (database: Database, postData: WeddiApp.Post.UserInput): Promise<void> => {
+  const postId = push(databaseRef(database, `${configService.config.post.namespace}/posts`)).key;
   if (!postId) {
     throw new Error('post id is empty');
   }
@@ -23,28 +49,27 @@ export const writePost = (database: firebase.database.Database) => (postData: We
     userAgent: navigator.userAgent,
     id: postId
   };
-  return database
-    .ref(`${configService.config.post.namespace}/posts`)
-    .child(postId)
-    .set(wrappedPostData);
+  return set(databaseRef(database, `${configService.config.post.namespace}/posts/${postId}}`), wrappedPostData);
 };
 
-export const onNewPost = (database: firebase.database.Database) => (callback: (post: WeddiApp.Post.Data) => any): void => {
-  const postRef = database.ref(`${configService.config.post.namespace}/posts`);
-  postRef.on('child_added', (data: firebase.database.DataSnapshot) => {
-    callback(data.val());
-  });
+export const onNewPost = (database: Database, callback: (post: WeddiApp.Post.Data) => any): void => {
+  const postRef = databaseRef(database, `${configService.config.post.namespace}/posts`);
+  onChildAdded(postRef, (snapshot => {
+    callback(snapshot.val());
+  }));
 };
 
-export const listAllImages = (storage: firebase.storage.Storage) => (size: 'small' | 'regular' = 'small') => {
-  return storage.ref(configService.config.img.namespace).child(size).listAll()
-    .then(listResult => Promise.all(listResult.items.map(item => item.getDownloadURL())));
+interface ListImagesOptions {
+  readonly size?: 'small' | 'regular';
+}
+
+export const listAllImages = (storage: FirebaseStorage, options: ListImagesOptions = { size: 'small' }): Promise<string[]> => {
+  const size = options.size ?? 'small';
+  return listAll(storageRef(storage, `${configService.config.img.namespace}/${size}`))
+    .then(listResult => Promise.all(listResult.items.map(getDownloadURL)));
 };
 
-export const uploadImage = (storage: firebase.storage.Storage) => (imgName: string, image: Blob): firebase.storage.UploadTask => {
-  return storage
-    .ref(configService.config.img.namespace)
-    .child('public_upload')
-    .child(imgName)
-    .put(image);
+export const uploadImage = (storage: FirebaseStorage, imgName: string, image: Blob): Promise<string> => {
+  return uploadBytes(storageRef(storage, `${configService.config.img.namespace}/public_upload/${imgName}`), image)
+    .then(result => getDownloadURL(result.ref));
 };