upload working with snack message

Alex Patterson · Alex Patterson · commit 102f46d6c43f · 2021-01-17T14:18:30.000-05:00
diff --git a/frontend/admin/src/components/YouTube/YouTubeUpload.tsx b/frontend/admin/src/components/YouTube/YouTubeUpload.tsx
@@ -10,7 +10,7 @@ import {
 import { red, grey } from '@material-ui/core/colors';
 
 import YouTubeIcon from '@material-ui/icons/YouTube';
-import { userYouTubeApiToken } from '@/services/api';
+import { uploadVideo, userYouTubeApiToken } from '@/services/api';
 import { UserInfoExtended } from '@/models/user.model';
 import { useUser } from '@/utils/auth/useUser';
 import React, { useEffect, useMemo, useState } from 'react';
@@ -22,6 +22,9 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogActions from '@material-ui/core/DialogActions';
+import Snackbar from '@material-ui/core/Snackbar';
+
+import firebase from 'firebase/app';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -71,7 +74,6 @@ export default function YouTubeUpload(): JSX.Element {
     refresh_token: string;
   }> | null>(null);
   const [open, setOpen] = useState(false);
-
   useEffect(() => {
     if (user && user.uid) {
       setUserToken$(userYouTubeApiToken(user));
@@ -102,6 +104,38 @@ export default function YouTubeUpload(): JSX.Element {
     setOpen(false);
   };
 
+  const [snackOpen, setSnackOpen] = useState(false);
+  const [uploadPercentage, setUploadPercentage] = useState(0);
+  const handleSnackOpen = () => {
+    setSnackOpen(true);
+  };
+  const handleSnackClose = () => {
+    setSnackOpen(true);
+  };
+
+  const [upload$, setUpload$] = useState<Observable<{
+    progress: number;
+    snapshot: firebase.storage.UploadTaskSnapshot;
+  }> | null>(null);
+  useEffect(() => {
+    if (!upload$) {
+      return;
+    }
+    const sub = upload$?.subscribe((u) => {
+      handleClose();
+      handleSnackOpen();
+      setUploadPercentage(u.progress);
+      console.log('Snapshot', u.snapshot);
+    });
+    return () => {
+      if (sub) sub.unsubscribe();
+    };
+  }, [upload$]);
+
+  const onUploadVideo = () => {
+    acceptedFiles.map((file: any) => setUpload$(uploadVideo('/alex', file)));
+  };
+
   const {
     getRootProps,
     getInputProps,
@@ -202,11 +236,17 @@ export default function YouTubeUpload(): JSX.Element {
               <Button color="secondary" onClick={handleClose}>
                 Cancel
               </Button>
-              <Button variant="contained" onClick={handleClose}>
-                Subscribe
+              <Button variant="contained" onClick={onUploadVideo}>
+                Upload
               </Button>
             </DialogActions>
           </Dialog>
+          <Snackbar
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+            open={snackOpen}
+            onClose={handleSnackClose}
+            message={`Uploading ${uploadPercentage}`}
+          />
         </>
       )}
     </>
diff --git a/frontend/admin/src/models/post.model.ts b/frontend/admin/src/models/post.model.ts
@@ -40,6 +40,7 @@ export interface CoverMedia {
 export enum MediaSource {
   video = 'video',
   cloudinary = 'cloudinary',
+  youtube = 'youtube',
 }
 
 export enum PostStatus {
diff --git a/frontend/admin/src/services/api.ts b/frontend/admin/src/services/api.ts
@@ -8,12 +8,13 @@ import {
 } from './../models/post.model';
 import firebase from 'firebase/app';
 import initFirebase from '@/utils/initFirebase';
-import { docData, collectionData, doc } from 'rxfire/firestore';
+import { docData, collectionData } from 'rxfire/firestore';
 import { httpsCallable } from 'rxfire/functions';
-import { filter, map, switchMap, take } from 'rxjs/operators';
+import { getDownloadURL, getMetadata, percentage, put } from 'rxfire/storage';
+import { filter, map, switchMap } from 'rxjs/operators';
 import { Post, MediaType } from '@/models/post.model';
 import { v4 as uuid } from 'uuid';
-import { from } from 'rxjs';
+import { from, Observable } from 'rxjs';
 import { Course, Section } from '@/models/course.model.ts';
 import { Cloudinary } from '@/models/cloudinary.model';
 import { Video } from '@/models/video.model';
@@ -30,6 +31,12 @@ const functions$ = from(initFirebase()).pipe(
   map((app) => app.functions() as firebase.functions.Functions)
 );
 
+const storage$ = from(initFirebase()).pipe(
+  filter((app) => app !== undefined),
+  map((app) => app as firebase.app.App),
+  map((app) => app.storage() as firebase.storage.Storage)
+);
+
 /* POST */
 export const postDataObservable = (path: string) => {
   return firestore$.pipe(
@@ -436,3 +443,18 @@ export const deleteUserYouTubeApiToken = (user: UserInfoExtended) => {
     })
   );
 };
+
+export const uploadVideo = (
+  storagePath: string,
+  blob: any
+): Observable<{
+  progress: number;
+  snapshot: firebase.storage.UploadTaskSnapshot;
+}> => {
+  return storage$.pipe(
+    switchMap((storage) => {
+      const dataRef = storage.ref(storagePath);
+      return percentage(dataRef.put(blob));
+    })
+  );
+};
diff --git a/frontend/admin/src/utils/initFirebase.ts b/frontend/admin/src/utils/initFirebase.ts
@@ -13,6 +13,7 @@ export default async function initFirebase() {
     await import('firebase/remote-config');
     await import('firebase/messaging');
     await import('firebase/functions');
+    await import('firebase/storage');
     if (!firebase.default.apps.length) {
       firebase.default.initializeApp(config);
       if (process.env.NEXT_PUBLIC_CCD_EMULATED) {
@@ -29,6 +30,7 @@ export default async function initFirebase() {
       firebase.default.analytics();
       firebase.default.remoteConfig();
       firebase.default.messaging();
+      firebase.default.storage();
     }
     return firebase.default.app();
   } catch (err) {

Original file line number	Diff line number	Diff line change
`@@ -40,6 +40,7 @@ export interface CoverMedia {`
`40`	`40`	`export enum MediaSource {`
`41`	`41`	`video = 'video',`
`42`	`42`	`cloudinary = 'cloudinary',`
	`43`	`+ youtube = 'youtube',`
`43`	`44`	`}`
`44`	`45`
`45`	`46`	`export enum PostStatus {`