Refactor for displaying logos and changed README.md

Author: TOPOFGR

.env.example

@@ -8,3 +8,4 @@ REACT_APP_FIRE_BASE_APP_ID = ''
 REACT_APP_FIRE_BASE_MEASURMENT_ID = ''
 REACT_APP_CLOUD_FUNCTIONS_REST_API = '<FIREBASE_CLOUD_FUNCTIONS_URL>/requestsApp'
 REACT_APP_LOGIN_PAGE_URL = 'http://localhost:3000/login'
+REACT_APP_FIRE_BASE_STORAGE_API = 'https://firebasestorage.googleapis.com/v0/b/${REACT_APP_FIRE_BASE_STORAGE_BUCKET}'

.firebaserc

@@ -1,6 +1,7 @@
 {
   "projects": {
     "production": "react-firebase-admin-eeac2",
-    "staging": "react-firebase-admin-eeac2"
+    "staging": "react-firebase-admin-eeac2",
+    "default": "react-firebase-admin-eeac2"
   }
 }

README.md

@@ -57,6 +57,10 @@ Boilerplate with React ⚛️ and Firebase 🔥designed to quickly spin up a ful
   - [How to translate a Text with a variable](#how-to-translate-a-text-with-a-variable)
   - [How to internationalize a Date](#how-to-internationalize-a-date)
   - [How to add your language on DatePicker](#how-to-add-your-language-on-datepicker)
+- [File Uploading](#file-uploading)
+  - [Image Resize](#image-resize)
+  - [Storage Rules](#storage-rules)
+  - [Setting up your storage](#setting-up-your-storage)
 - [Contributors](#contributors)
 - [License](#license)
 
@@ -147,6 +151,7 @@ React Firebase Admin is our in-house admin dashboard boilerplate, used in many o
 - [Sharp](https://github.com/lovell/sharp) (★ 15.8k) high performance Node.js image processing.
 - [Glob](https://github.com/isaacs/node-glob) (★ 6.2k) glob functionality for Node.js.
 - [Fs-extra](https://github.com/jprichardson/node-fs-extra) (★ 6.6k) Node.js: extra methods for the fs object like copy(), remove(), mkdirs().
+- [Resize Image](https://github.com/firebase/extensions/tree/master/storage-resize-images) (★ 372) Firebase Extension to create resized versions of images uploaded to Cloud Storage.
 
 ## Prerequisites
 
@@ -569,6 +574,24 @@ const date = Date.now();
 - Add another **registerLocale** with your language as the first parameter and the import from `date-fns` as second parameter.
 - Place your language with its date format on **dateFormat**.
 
+## File Uploading
+
+### Image Resize
+
+For resizing images uploaded to our storage, we decided to add [Resize Image](https://github.com/firebase/extensions/tree/master/storage-resize-images), it is a Plugin made by Firebase for image resize, this plugin allows you to set sizes for resized images, deletion of the original upload, and two optional settings, Cloud Storage path for resized images and Cache-Control header for resized images.
+
+### Storage Rules
+
+To make images reachable, we needed to set our storage rules to allow users to `write` on the storage made for the user logo, only if they are authenticated, but they can always `read`, this was set for saving the user´s logo path on the database.
+
+### Setting up your storage
+
+Paste `'https://firebasestorage.googleapis.com/v0/b/${REACT_APP_FIRE_BASE_STORAGE_BUCKET}'` into the `REACT_APP_FIRE_BASE_STORAGE_API` environment variable in your `.env` file.
+
+**Should look like this**
+
+`REACT_APP_FIRE_BASE_STORAGE_API = 'https://firebasestorage.googleapis.com/v0/b/${REACT_APP_FIRE_BASE_STORAGE_BUCKET}'`
+
 ## Contributors
 
 We'd like to thank these awesome people who made this whole thing happen:

firebase.json

@@ -15,5 +15,8 @@
         "destination": "/index.html"
       }
     ]
+  },
+  "storage": {
+    "rules": "storage.rules"
   }
 }

package-lock.json

@@ -70,13 +70,19 @@ export const fetchUsers = () => {
     );
   };
 };
+
 const deleteLogo = async id => {
-  const userRef = firebase.database().ref(`users/${id}`);
+  const basePath = 'users/';
+  const userRef = firebase.database().ref(`${basePath}${id}`);
   const oldLogo = (await userRef.child('logoUrl').once('value')).val();
   if (oldLogo) {
+    const fileExtension = oldLogo
+      .split('.')
+      .pop()
+      .split('?')[0];
     await firebase
       .storage()
-      .ref(oldLogo)
+      .ref(`${basePath}${id}_200x200.${fileExtension}`)
       .delete();
   }
 };
@@ -88,7 +94,7 @@ export const deleteUser = id => {
     try {
       await deleteLogo(id);
     } catch (error) {
-      const errorMessage = firebaseError(error.response.data.error.code);
+      const errorMessage = firebaseError(error.code);
       toastr.error('', errorMessage);
       return dispatch(
         USERS_DELETE_USER_FAIL({
@@ -118,11 +124,11 @@ const uploadLogo = async (uid, file) => {
 
   const fileName = `${uid}.${fileExtension}`;
 
-  const basePath = 'users/';
+  await storageRef.child(`users/${fileName}`).put(file);
 
-  await storageRef.child(`${basePath}${fileName}`).put(file);
+  const bucketUrl = `${process.env.REACT_APP_FIRE_BASE_STORAGE_API}`;
 
-  return `${basePath}${uid}_200x200.${fileExtension}`;
+  return `${bucketUrl}/o/users%2F${uid}_200x200.${fileExtension}?alt=media`;
 };
 
 export const createUser = ({

src/state/actions/users.js

@@ -0,0 +1,8 @@
+service firebase.storage {
+  match /b/{bucket}/o {
+    match /users/{imageId} {
+      allow write: if request.auth!=null;
+      allow read: if true;
+    }
+  }
+}