Feat/relation file count

src-tauri/src/cmds.rs

@@ -1,8 +1,11 @@
+use crate::_include_file;
 use crate::prisma_main_client::{directory, file};
 use crate::utils::app::AppState;
 use prisma_client_rust::and;
 use prisma_client_rust::operator::or;
 use prisma_client_rust::prisma_errors::query_engine::UniqueKeyViolation;
+use prisma_client_rust::query_core::schema_builder::constants::output_fields::AFFECTED_COUNT;
+use tauri::Manager;
 use walkdir::WalkDir;
 
 #[tauri::command]
@@ -97,8 +100,15 @@ pub async fn get_directory_files(
   };
 }
 
+#[derive(Clone, serde::Serialize)]
+struct Payload {
+  files_count: i32,
+  directory_path: String,
+}
+
 #[tauri::command]
 pub async fn scan_directory(
+  app_handle: tauri::AppHandle,
   path_dir: String,
   state: tauri::State<'_, AppState>,
 ) -> Result<Vec<file::Data>, String> {
@@ -112,6 +122,7 @@ pub async fn scan_directory(
     _ => return Err(format!("No file found in directory: {}", path_dir)),
   };
   let mut result = Vec::with_capacity(walk_dir.len());
+  let mut files_counter = 0;
   for path_file in walk_dir {
     if let Some(ext) = path_file.path().extension() {
       if ext == "wav" || ext == "mp3" {
@@ -133,7 +144,20 @@ pub async fn scan_directory(
           .exec()
           .await
         {
-          Ok(file) => result.push(file),
+          Ok(file) => {
+            files_counter += 1;
+            app_handle
+              .emit_all(
+                "event-walk-directory",
+                Payload {
+                  directory_path: path_dir_string.clone(),
+                  files_count: files_counter,
+                },
+              )
+              .unwrap();
+
+            result.push(file)
+          }
           Err(error) if error.is_prisma_error::<UniqueKeyViolation>() => {
             return Err(format!("File already exists: {}", last_part))
           }

src/App.tsx

@@ -8,11 +8,11 @@ import WavePlayer from "@/components/WavePlayer";
 const App: Component = () => {
   return (
     <SearchProvider>
-      <Navbar />
-      <Sidebar />
+      <Navbar/>
+      <Sidebar/>
       <div class="relative">
-        <ViewFiles />
-        <WavePlayer />
+        <ViewFiles/>
+        <WavePlayer/>
       </div>
     </SearchProvider>
   );

src/components/Tree/index.tsx

@@ -43,16 +43,19 @@ const Tree: Component<{
 
               <span class="overflow-hidden overflow-ellipsis whitespace-nowrap">
                 {item.name}
+                <Show when={props.isRoot}>
+                  {" "}({item.filesCount})
+                </Show>
               </span>
               <Show when={props.isRoot}>
                 <div class="flex items-center ml-auto">
-                  <ActionsDirectory directory={item} />
+                  <ActionsDirectory directory={item}/>
                 </div>
               </Show>
             </button>
             <Show when={item.isCollapsed}>
               <ul class="ml-4">
-                <Tree items={item.children} />
+                <Tree items={item.children}/>
               </ul>
             </Show>
           </li>

src/providers/TreeProvider/index.tsx

@@ -6,11 +6,12 @@ import {
   createResource,
   createSignal,
   mapArray,
-  type Component,
+  type Component, createMemo, onCleanup,
 } from "solid-js";
 import { produce } from "solid-js/store";
 import { Dynamic } from "solid-js/web";
 import { useSearch } from "../SearchProvider";
+import { listen } from "@tauri-apps/api/event";
 
 export interface MappedDirectory extends Directory {
   readonly isCollapsed: boolean;
@@ -23,13 +24,22 @@ const TreeProvider: Component<{
     mapped: () => MappedDirectory[];
   }>;
 }> = (props) => {
-  const [store, { setCollapse }] = useSearch();
+  const [store, {setCollapse}] = useSearch();
+
+  const [eventWalkDir, setEventWalkDir] = createSignal({})
+
+  const unlisten = (async () => {
+    await listen('event-walk-directory', (event) => {
+      setEventWalkDir(event?.payload)
+    })
+  })();
+
 
   createEffect(() => {
     setCollapse((prevCollapsed) => {
       return directories.map((dir) => {
         const dirPath = dir.path;
-        const currentCollapsed = prevCollapsed.find(({ rootDirectory }) =>
+        const currentCollapsed = prevCollapsed.find(({rootDirectory}) =>
           startsWith(dirPath, rootDirectory)
         );
         return {
@@ -42,7 +52,7 @@ const TreeProvider: Component<{
 
   const toggleCollapseItem = (itemPath: string, isCollapsed: boolean): void => {
     const itemPathSlash = itemPath + "/";
-    const index = store.collapsed.findIndex(({ rootDirectory }) =>
+    const index = store.collapsed.findIndex(({rootDirectory}) =>
       startsWith(itemPathSlash, rootDirectory)
     );
     switch (isCollapsed) {
@@ -81,7 +91,7 @@ const TreeProvider: Component<{
     return (
       Boolean(
         store.collapsed
-          .find(({ rootDirectory }) => startsWith(itemPath, rootDirectory))
+          .find(({rootDirectory}) => startsWith(itemPath, rootDirectory))
           ?.collapsed.some((path) => path === itemPath + "/") ?? false // TODO: I think `?? false` is not utilized
       ) || false
     );
@@ -100,8 +110,8 @@ const TreeProvider: Component<{
         ): Promise<FileEntry[] | never[]> =>
           collapsed
             ? await readDir(model.path, {
-                recursive: false,
-              })
+              recursive: false,
+            })
             : [];
 
         const [children] = createResource(getCollapsed, fetchDir);
@@ -113,6 +123,14 @@ const TreeProvider: Component<{
         return {
           path: model.path,
           name: model.name,
+
+          get filesCount() {
+            if (model.path === eventWalkDir()?.directory_path) {
+              return eventWalkDir()?.files_count
+            } else {
+              return 0
+            }
+          },
 
           get isCollapsed() {
             return getCollapsed();
@@ -129,7 +147,7 @@ const TreeProvider: Component<{
       }
     );
 
-  return <Dynamic component={props.children} mapped={mapped(directories)} />;
+  return <Dynamic component={props.children} mapped={mapped(directories)}/>;
 };
 
 export default TreeProvider;