Image gallery has been resolved

.gitignore

@@ -3,4 +3,6 @@ public/bundle.js
 config/
 .vscode/
 src/data/awsClient
-src/components/AWS.tsx
+src/components/AWS.tsx
+.firebaserc
+firebase.json

src/actions/imageGalleryActions.ts

@@ -1,3 +1,4 @@
+import { IStorageService } from 'core/services/files'
 // - Import react componetns
 import moment from 'moment'
 
@@ -16,9 +17,11 @@ import FileAPI from 'api/FileAPI'
 
 import { IServiceProvider, ServiceProvide } from 'core/factories'
 import { IImageGalleryService } from 'core/services/imageGallery'
+import { FileResult } from 'models/files/fileResult'
 
 const serviceProvider: IServiceProvider = new ServiceProvide()
 const imageGalleryService: IImageGalleryService = serviceProvider.createImageGalleryService()
+const storageService: IStorageService = serviceProvider.createStorageService()
 
 /* _____________ UI Actions _____________ */
 
@@ -101,16 +104,16 @@ export const dbDeleteImage = (id: string) => {
  * @param {file} file
  * @param {string} fileName
  */
-export const dbUploadImage = (file: any, fileName: string) => {
+export const dbUploadImage = (image: any, imageName: string) => {
   return (dispatch: any, getState: Function) => {
 
     return imageGalleryService
-    .uploadImage(file,fileName, (percentage: number) => {
+    .uploadImage(image,imageName, (percentage: number) => {
       dispatch(globalActions.progressChange(percentage, true))
     })
-    .then(() => {
+    .then((result: FileResult) => {
       dispatch(globalActions.progressChange(100, false))
-      dispatch(dbSaveImage(fileName,''))
+      dispatch(dbSaveImage(result.fileURL,result.fileFullPath))
       dispatch(globalActions.hideTopLoading())
     })
     .catch((error: SocialError) => {

src/api/StringAPI.ts

@@ -1,6 +1,3 @@
-// - Import react component
-import { storageRef } from 'data/firebaseClient'
-
 // - Import actions
 
 const isValidEmail = (email: string) => {

src/components/imageGallery/IImageGalleryComponentProps.ts

@@ -8,7 +8,7 @@ export interface IImageGalleryComponentProps {
    * @type {(URL: string,fullPath: string)}
    * @memberof IImageGalleryComponentProps
    */
-  set?: (URL: string,fullPath: string) => void
+  set: (URL: string,fullPath: string) => void
 
   /**
    * Delete an image
@@ -18,25 +18,18 @@ export interface IImageGalleryComponentProps {
   deleteImage?: (imageId: string) => void
 
   /**
-   * Save image in image gallery
+   * Upload image to the server
    *
    * @memberof IImageGalleryComponentProps
    */
-  saveImageGallery?: (URL: string,fullPath: string) => void
-
-  /**
-   * Change progress state
-   *
-   * @memberof IImageGalleryComponentProps
-   */
-  progressChange?: (percentage: number, status: boolean) => void
+  uploadImage?: (image: any, imageName: string) => any
 
   /**
    * Close image gallery
    *
    * @memberof IImageGalleryComponentProps
    */
-  close?: () => void
+  close: () => void
 
   /**
    * List of image in image gallery

src/components/imageGallery/ImageGalleryComponent.tsx

@@ -124,16 +124,8 @@ export class ImageGalleryComponent extends Component<IImageGalleryComponentProps
   handleSendResizedImage = (event: any) => {
 
     const { resizedImage, fileName } = event.detail
-    const {saveImageGallery, progressChange} = this.props
-
-    FileAPI.uploadImage(resizedImage, fileName, (percent: number, status: boolean) => {
-      progressChange!(percent,status)
-    }).then((result) => {
-
-      /* Add image to image gallery */
-      saveImageGallery!(result.downloadURL,result.metadata.fullPath)
-
-    })
+    const {uploadImage} = this.props
+    uploadImage(resizedImage,fileName)
   }
 
   /**
@@ -231,7 +223,7 @@ export class ImageGalleryComponent extends Component<IImageGalleryComponentProps
  */
 const mapDispatchToProps = (dispatch: any, ownProps: IImageGalleryComponentProps) => {
   return {
-    saveImageGallery: (imageURL: string,imageFullPath: string) => dispatch(imageGalleryActions.dbSaveImage(imageURL,imageFullPath)),
+    uploadImage: (image: any, imageName: string) => dispatch(imageGalleryActions.dbUploadImage(image,imageName)),
     deleteImage: (id: string) => dispatch(imageGalleryActions.dbDeleteImage(id)),
     progressChange : (percent: number,status: boolean) => dispatch(globalActions.progressChange(percent, status))
 

src/components/master/MasterComponent.tsx

@@ -3,7 +3,6 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { Route, Switch, NavLink, withRouter, Redirect } from 'react-router-dom'
-import { firebaseAuth, firebaseRef } from 'data/firebaseClient'
 import { push } from 'react-router-redux'
 import Snackbar from 'material-ui/Snackbar'
 import LinearProgress from 'material-ui/LinearProgress'
@@ -16,6 +15,8 @@ import Setting from 'components/setting'
 import MasterLoading from 'components/masterLoading'
 import { IMasterComponentProps } from './IMasterComponentProps'
 import { IMasterComponentState } from './IMasterComponentState'
+import { ServiceProvide, IServiceProvider } from 'core/factories'
+import { IAuthorizeService } from 'core/services/authorize'
 
 // - Import actions
 import {
@@ -36,9 +37,15 @@ import {
 export class MasterComponent extends Component<IMasterComponentProps, IMasterComponentState> {
 
   static isPrivate = true
+
+  private readonly _serviceProvider: IServiceProvider
+  private readonly _authourizeService: IAuthorizeService
   // Constructor
   constructor (props: IMasterComponentProps) {
     super(props)
+
+    this._serviceProvider = new ServiceProvide()
+    this._authourizeService = this._serviceProvider.createAuthorizeService()
     this.state = {
       loading: true,
       authed: false,
@@ -73,7 +80,7 @@ export class MasterComponent extends Component<IMasterComponentProps, IMasterCom
 
   componentWillMount () {
 
-    firebaseAuth().onAuthStateChanged((user: any) => {
+    this._authourizeService.onAuthStateChanged((user: any) => {
 
       if (user) {
         this.props.login(user)

src/components/post/PostComponent.tsx

@@ -27,6 +27,7 @@ import Dialog from 'material-ui/Dialog'
 import IconButton from 'material-ui/IconButton'
 import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert'
 import IconMenu from 'material-ui/IconMenu'
+
 import reactStringReplace from 'react-string-replace'
 
 // - Import app components

src/core/factories/IServiceProvider.ts

@@ -1,12 +1,15 @@
-import { IAuthorizeService } from 'services/authorize/IAuthorizeService'
-import { ICircleService } from 'services/circles'
-import { ICommentService } from 'core/services/comments'
-import { ICommonService } from 'services/common'
-import { IImageGalleryService } from 'services/imageGallery'
-import { INotificationService } from 'services/notifications'
-import { IPostService } from 'services/posts'
-import { IUserService } from 'services/users'
-import { IVoteService } from 'services/votes'
+import {
+  IAuthorizeService,
+  ICircleService,
+  ICommentService,
+  ICommonService,
+  IImageGalleryService,
+  INotificationService,
+  IPostService,
+  IUserService,
+  IVoteService,
+  IStorageService
+} from 'core/services'
 
 export interface IServiceProvider {
 
@@ -73,4 +76,11 @@ export interface IServiceProvider {
    */
   createVoteService: () => IVoteService
 
+  /**
+   * Create instant for Vote Service
+   *
+   * @memberof ServiceProvide
+   */
+  createStorageService: () => IStorageService
+
 }

src/core/factories/serviceProvide.ts

@@ -10,7 +10,8 @@ import {
   INotificationService,
   IPostService,
   IUserService,
-  IVoteService
+  IVoteService,
+  IStorageService
 } from 'core/services'
 
 //#endregion
@@ -27,7 +28,8 @@ import {
   NotificationService,
   PostService,
   UserService,
-  VoteService
+  VoteService,
+  StorageService
 } from 'data/firebaseClient/services'
 
 //#endregion
@@ -115,4 +117,13 @@ export class ServiceProvide implements IServiceProvider {
     return new VoteService()
   }
 
+  /**
+   * Create instant for Vote Service
+   *
+   * @memberof ServiceProvide
+   */
+  createStorageService: () => IStorageService = () => {
+    return new StorageService()
+  }
+
 }

src/core/services/authorize/IAuthorizeService.ts

@@ -35,4 +35,10 @@ export interface IAuthorizeService {
      */
   registerUser: (user: User) => Promise<RegisterUserResult>
 
-}
+  /**
+   * On user authorization changed event
+   *
+   * @memberof IAuthorizeService
+   */
+  onAuthStateChanged: (callBack: (user: User) => void)
+}

src/core/services/files/IStorageService.ts

@@ -0,0 +1,11 @@
+import { FileResult } from 'models/files/fileResult'
+
+export interface IStorageService {
+
+  /**
+   * Storage file service
+   *
+   * @memberof IStorageService
+   */
+  uploadFile: (file: any, fileName: string, progress: (percentage: number, status: boolean) => void) => Promise<FileResult>
+}

src/core/services/files/index.ts

@@ -0,0 +1,5 @@
+import { IStorageService } from './IStorageService'
+
+export {
+    IStorageService
+}

src/core/services/imageGallery/IImageGalleryService.ts

@@ -1,3 +1,4 @@
+import { FileResult } from 'models/files/fileResult'
 import { User } from 'core/domain/users'
 import { Image } from 'core/domain/imageGallery'
 
@@ -11,6 +12,6 @@ export interface IImageGalleryService {
   getImageGallery: (userId: string) => Promise<Image[]>
   saveImage: (userId: string, image: Image) => Promise<string>
   deleteImage: (userId: string, imageId: string) => Promise<void>
-  uploadImage: (file: any, fileName: string, progressCallback: Function) => Promise<void>
+  uploadImage: (file: any, fileName: string, progressCallback: (percentage: number, status: boolean) => void) => Promise<FileResult>
   downloadImage: (fileName: string) => Promise<string>
 }

src/core/services/index.ts

@@ -7,6 +7,7 @@ import { INotificationService } from './notifications'
 import { IPostService } from './posts'
 import { IUserService } from './users'
 import { IVoteService } from './votes'
+import { IStorageService } from './files'
 
 export {
     IAuthorizeService,
@@ -17,5 +18,6 @@ export {
     INotificationService,
     IPostService,
     IUserService,
-    IVoteService
+    IVoteService,
+    IStorageService
 }

src/data/firebaseClient/services/authorize/AuthorizeService.ts

@@ -103,4 +103,13 @@ export class AuthorizeService implements IAuthorizeService {
     })
   }
 
+  /**
+   * On user authorization changed event
+   *
+   * @memberof IAuthorizeService
+   */
+  onAuthStateChanged: (callBack: (user: User) => void) => any = (callBack) => {
+    firebaseAuth().onAuthStateChanged(callBack)
+  }
+
 }

src/data/firebaseClient/services/files/StorageService.ts

@@ -0,0 +1,41 @@
+import { storageRef } from 'data/firebaseClient'
+import { IStorageService } from 'core/services/files'
+import { FileResult } from 'models/files/fileResult'
+
+export class StorageService implements IStorageService {
+
+    /**
+     * Upload image on the server
+     * @param {file} file
+     * @param {string} fileName
+     */
+  public uploadFile = (file: any, fileName: string, progress: (percentage: number, status: boolean) => void) => {
+
+    return new Promise<FileResult>((resolve, reject) => {
+                    // Create a storage refrence
+      let storegeFile = storageRef.child(`images/${fileName}`)
+
+            // Upload file
+      let task = storegeFile.put(file)
+      task.then((result) => {
+        resolve(new FileResult(result.downloadURL!,result.metadata.fullPath))
+      }).catch((error) => {
+        reject(error)
+      })
+
+                    // Upload storage bar
+      task.on('state_changed', (snapshot: any) => {
+        let percentage: number = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
+        progress(percentage, true)
+      }, (error) => {
+        console.log('========== Upload Image ============')
+        console.log(error)
+        console.log('====================================')
+
+      }, () => {
+        progress(100, false)
+      })
+    })
+
+  }
+}

src/data/firebaseClient/services/files/index.ts

@@ -0,0 +1,5 @@
+import { StorageService } from './StorageService'
+
+export {
+    StorageService
+}