feat: add onGetFolderAndFileCounts for folder and file coutns

Author: programmer-rahul

client/components/home-screen/create-project.tsx

@@ -69,15 +69,11 @@ export default function CreateProjectBtn() {
   }
 
   function checkProjectNameAvailability(value: string) {
-    console.log("value", value);
-
     const isAlreadyExits = userCreatedProjectsList.some(
       (project) =>
         project.projectName.trim().toLowerCase() === value.trim().toLowerCase()
     );
 
-    console.log("result", isAlreadyExits);
-
     return isAlreadyExits;
   }
 

client/components/home-screen/login-socket.tsx

@@ -1,14 +1,46 @@
 "use client";
 
 import useSocket from "@/hooks/useSocket";
+import { SOCKET_ENUMS } from "@/lib/constants";
+import { FileFolderCounts } from "@/types/project";
 import { useEffect } from "react";
+import { useStore } from "../store/useStore";
 
 export default function LoginSocket() {
   // initialize socket connection to server
   const socket = useSocket();
+  const { userCreatedProjectsList, updateCreatingProjectItem } = useStore(
+    (state) => state
+  );
+
+  const onGetFolderAndFileCounts = ({
+    folderFileCounts,
+  }: {
+    folderFileCounts: { projectId: string; counts: FileFolderCounts }[];
+  }) => {
+    console.log("got ", folderFileCounts);
+  };
 
   useEffect(() => {
     if (!socket) return;
+
+    if (socket) {
+      socket.emit(SOCKET_ENUMS.GET_FOLDER_AND_FILE_COUNTS, {
+        projectIds: userCreatedProjectsList.map((project) => project.projectId),
+      });
+
+      socket.on(
+        SOCKET_ENUMS.GET_FOLDER_AND_FILE_COUNTS,
+        onGetFolderAndFileCounts
+      );
+    }
+
+    return () => {
+      socket?.off(
+        SOCKET_ENUMS.GET_FOLDER_AND_FILE_COUNTS,
+        onGetFolderAndFileCounts
+      );
+    };
   }, [socket]);
 
   return null;

client/lib/constants.ts

@@ -12,6 +12,7 @@ export const SOCKET_ENUMS = {
 
   // file
   FILE_CONTENT_CHANGED: "file-content-changed",
+  GET_FOLDER_AND_FILE_COUNTS: "get-folder-file-counts",
 
   // project
   CREATE_PROJECT: "create-project",

server/socket/listeners/files-listener.ts

@@ -1,9 +1,13 @@
 import { SocketType } from "../../types/socket";
 import { SOCKET_ENUMS } from "../../utils/constants";
-import { updateFileContentToProject } from "../../utils/project-structure-utils";
+import {
+  getFoldersAndFilesCount,
+  updateFileContentToProject,
+} from "../../utils/project-structure-utils";
 import { userProjects, userSockets } from "../socket";
 
 const { FILE_CONTENT_CHANGED } = SOCKET_ENUMS;
+const { GET_FOLDER_AND_FILE_COUNTS } = SOCKET_ENUMS;
 
 const onFileContentChanged = ({
   socket,
@@ -41,4 +45,35 @@ const onFileContentChanged = ({
   });
 };
 
-export { onFileContentChanged };
+const onGetFolderAndFileCounts = ({
+  socket,
+  projectIds,
+}: {
+  socket: SocketType;
+  projectIds: string[];
+}) => {
+  if (!projectIds) return;
+
+  let folderFileCounts: {}[] = [];
+  projectIds.forEach((projectId) => {
+    // check if the project with this projectIds exits or not
+    if (!userProjects[projectId]) return;
+
+    // now calculate counts of folders and files
+    const { status, count } = getFoldersAndFilesCount(
+      userProjects[projectId].structure
+    );
+
+    if (!status) return;
+
+    // add them into array
+    folderFileCounts.push({ projectId: projectId, count: count });
+  });
+
+  // console.log("folderFileCounts", folderFileCounts);
+
+  // give back the counts to user
+  socket.emit(GET_FOLDER_AND_FILE_COUNTS, { folderFileCounts });
+};
+
+export { onFileContentChanged, onGetFolderAndFileCounts };

server/socket/socket.ts

@@ -3,7 +3,10 @@ import { IoType, SocketType, UserSockets } from "../types/socket";
 import { UserProjects } from "../types/project";
 import { onDisconnect, onLogin } from "./listeners/users-listener";
 import { onNewMessageSend } from "./listeners/chat-listener";
-import { onFileContentChanged } from "./listeners/files-listener";
+import {
+  onFileContentChanged,
+  onGetFolderAndFileCounts,
+} from "./listeners/files-listener";
 import {
   onProjectItemCreated,
   onProjectItemDeleted,
@@ -21,6 +24,7 @@ const {
   LOGIN,
   DISCONNECT,
   FILE_CONTENT_CHANGED,
+  GET_FOLDER_AND_FILE_COUNTS,
   CREATE_PROJECT,
   DELETE_PROJECT,
   JOIN_PROJECT,
@@ -33,7 +37,51 @@ const {
 } = SOCKET_ENUMS;
 
 let userSockets: UserSockets = {};
-let userProjects: UserProjects = {};
+let userProjects: UserProjects = {
+  project1: {
+    owner: "",
+    projectId: "project1",
+    projectName: "project1",
+    joinedUsers: [],
+    structure: {
+      id: ":root",
+      name: "root",
+      type: "folder",
+      files: [
+        {
+          id: "file1",
+          name: "file2",
+          type: "file",
+        },
+      ],
+      subFolders: [],
+    },
+  },
+  project2: {
+    owner: "",
+    projectId: "project2",
+    projectName: "project2",
+    joinedUsers: [],
+    structure: {
+      id: ":root",
+      name: "root",
+      type: "folder",
+      files: [
+        {
+          id: "file1",
+          name: "file1",
+          type: "file",
+        },
+        {
+          id: "file2",
+          name: "file2",
+          type: "file",
+        },
+      ],
+      subFolders: [],
+    },
+  },
+};
 
 const ioListener = (socket: SocketType, io: IoType) => {
   const createSocketHandler = (eventName: string, handler: Function) => {
@@ -80,6 +128,9 @@ const ioListener = (socket: SocketType, io: IoType) => {
   // on file content changes in project
   createSocketHandler(FILE_CONTENT_CHANGED, onFileContentChanged);
 
+  // to give folder and files counts of projects
+  createSocketHandler(GET_FOLDER_AND_FILE_COUNTS, onGetFolderAndFileCounts);
+
   // chat
   createSocketHandler(SEND_MESSAGE, onNewMessageSend);
 };

server/utils/constants.ts

@@ -12,6 +12,7 @@ export const SOCKET_ENUMS = {
 
   // file
   FILE_CONTENT_CHANGED: "file-content-changed",
+  GET_FOLDER_AND_FILE_COUNTS: "get-folder-file-counts",
 
   // project
   CREATE_PROJECT: "create-project",
@@ -31,6 +32,12 @@ export const DEFAULT_PROJECT_STRUCTURE: ProjectStructure = {
   id: ":root",
   name: "root",
   type: "folder",
-  files: [],
+  files: [
+    {
+      id: "index.ts",
+      name: "index.ts",
+      type: "file",
+    },
+  ],
   subFolders: [],
 };

server/utils/project-structure-utils.ts

@@ -206,19 +206,21 @@ const getFoldersAndFilesCount = (project: ProjectStructure) => {
   let foldersCount = 0;
 
   const countFolderAndFiles = (folder: FolderInterface): boolean => {
-    if (folder.id !== ":root") foldersCount++;
+    console.log("folder", folder.id);
+    if (folder?.id !== ":root") foldersCount++;
 
-    if (folder.files) {
+    if (folder?.files) {
       filesCount += folder.files.length;
     }
 
-    if (!folder.subFolders) return false;
+    if (!folder?.subFolders) return false;
     for (const subFolder of folder.subFolders) {
       if (countFolderAndFiles(subFolder)) {
         return true;
       }
     }
-    return false;
+
+    return true;
   };
 
   const success = countFolderAndFiles(project);