Update useFolder.js

digital-course-file/src/hooks/useFolder.js

 import { useState,useReducer, useEffect } from "react";
 import { database } from '../fire.js'
 import firebase from 'firebase'
-import Loader from "react-loader-spinner";
-
 
 export const ROOT_FOLDER = {name: 'Root', id : null , path : [] };
 
@@ -14,6 +12,7 @@ export function useFolder( folderId = null, folder= null) {
         SELECT_FOLDER : 'select-folder',
         UPDATE_FOLDER : 'update-folder',
         SET_CHILD_FOLDERS : 'set_child_folders',
+        SET_CHILD_FILES: "set-child-files",
     }
 
     function reducer( state, { type,payload } ){
@@ -38,6 +37,11 @@ export function useFolder( folderId = null, folder= null) {
                     ...state,
                     childFolders : payload.childFolders,
                 };
+            case ACTIONS.SET_CHILD_FILES:
+                return {
+                    ...state,
+                    childFiles: payload.childFiles,
+                }; 
 
             default:
                 return state;
@@ -85,15 +89,6 @@ export function useFolder( folderId = null, folder= null) {
 
     
     useEffect( () => {
-        if (!firebase.auth().currentUser) {
-        return <><div className='centered'><Loader
-        type="Puff"
-        color="#00BFFF"
-        height={100}
-        width={100}
-        timeout={3000} //3 secs
-      /></div></>
-    }
         return database.folders
             .where("parentId", "==" ,folderId)
             .where("userId","==", firebase.auth().currentUser.uid)
@@ -105,6 +100,18 @@ export function useFolder( folderId = null, folder= null) {
                 })
             })
     },[folderId])
-
+    useEffect(() => {
+        return (
+          database.files
+            .where("folderId", "==", folderId)
+            .where("userId", "==", firebase.auth().currentUser.uid)
+            .onSnapshot(snapshot => {
+              dispatch({
+                type: ACTIONS.SET_CHILD_FILES,
+                payload: { childFiles: snapshot.docs.map(database.formatDoc) },
+              })
+            })
+        )
+      }, [folderId])
     return state;
 }