Render file tree and refactoring

src/components/project/NewProject/NewProject.tsx

@@ -1,7 +1,6 @@
 import { Tooltip } from '@/components/ui';
 import AppIcon, { AppIconType } from '@/components/ui/icon';
-import { useProjectActions } from '@/hooks/project.hooks';
-import { useWorkspaceActions } from '@/hooks/workspace.hooks';
+import { useProjects } from '@/hooks/projectV2.hooks';
 import {
   ContractLanguage,
   ProjectTemplate,
@@ -42,8 +41,7 @@ const NewProject: FC<Props> = ({
   name,
 }) => {
   const [isActive, setIsActive] = useState(active);
-  const { projects, setActiveProject } = useWorkspaceActions();
-  const { createProject } = useProjectActions();
+  const { createProject } = useProjects();
   const [isLoading, setIsLoading] = useState(false);
 
   const router = useRouter();
@@ -71,14 +69,11 @@ const NewProject: FC<Props> = ({
 
   const onFormFinish = async (values: FormValues) => {
     const { githubUrl, language } = values;
-    let { name: projectName } = values;
+    const { name: projectName } = values;
     const files: Tree[] = defaultFiles;
 
     try {
       setIsLoading(true);
-      if (projects().findIndex((p) => p.name == projectName) >= 0) {
-        projectName += '-' + projects().length + 1;
-      }
 
       if (projectType === 'git') {
         throw new Error(
@@ -88,7 +83,7 @@ const NewProject: FC<Props> = ({
         // files = await downloadRepo(githubUrl as string);
       }
 
-      const projectPath = await createProject(
+      await createProject(
         projectName,
         language,
         values.template ?? 'import',
@@ -104,9 +99,6 @@ const NewProject: FC<Props> = ({
         sourceType: projectType,
         template: values.template,
       });
-
-      // Remove leading slash from project path and set it as active project
-      setActiveProject(projectPath.slice(1));
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       message.success(`Project '${projectName}' created`);
     } catch (error) {

src/components/workspace/WorkSpace/WorkSpace.tsx

@@ -3,6 +3,7 @@
 import { ProjectTemplate } from '@/components/template';
 import { AppConfig } from '@/config/AppConfig';
 import { useLogActivity } from '@/hooks/logActivity.hooks';
+import { useProjects } from '@/hooks/projectV2.hooks';
 import { useWorkspaceActions } from '@/hooks/workspace.hooks';
 import { Project, Tree } from '@/interfaces/workspace.interface';
 import { Analytics } from '@/utility/analytics';
@@ -12,7 +13,7 @@ import * as TonCrypto from '@ton/crypto';
 import { Blockchain } from '@ton/sandbox';
 import { Buffer } from 'buffer';
 import { useRouter } from 'next/router';
-import { FC, useEffect, useMemo, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import Split from 'react-split';
 import { useEffectOnce } from 'react-use';
 import BottomPanel from '../BottomPanel/BottomPanel';
@@ -25,6 +26,7 @@ import WorkspaceSidebar from '../WorkspaceSidebar';
 import { WorkSpaceMenu } from '../WorkspaceSidebar/WorkspaceSidebar';
 import { globalWorkspace } from '../globalWorkspace';
 import { ManageProject } from '../project';
+import FileTree from '../tree/FileTree';
 import ItemAction from '../tree/FileTree/ItemActions';
 import s from './WorkSpace.module.scss';
 
@@ -39,13 +41,9 @@ const WorkSpace: FC = () => {
   const [contract, setContract] = useState<any>('');
 
   const { tab } = router.query;
-  const projectName = workspaceAction.getActiveProject();
+  const { activeProject } = useProjects();
 
-  const activeFile = workspaceAction.activeFile(projectName as string);
-
-  const activeProject = useMemo(() => {
-    return workspaceAction.project(projectName as string);
-  }, [projectName]);
+  const activeFile = workspaceAction.activeFile(activeProject as string);
 
   const commitItemCreation = (type: string, name: string) => {
     console.log('commitItemCreation', type, name);
@@ -123,7 +121,7 @@ const WorkSpace: FC = () => {
       <div className={`${s.sidebar} onboarding-workspace-sidebar`}>
         <WorkspaceSidebar
           activeMenu={activeMenu}
-          projectName={projectName}
+          projectName={activeProject}
           onMenuClicked={(name) => {
             setActiveMenu(name);
             router
@@ -145,7 +143,7 @@ const WorkSpace: FC = () => {
       >
         <div className={s.tree}>
           {activeMenu === 'setting' && (
-            <ProjectSetting projectId={projectName as Project['id']} />
+            <ProjectSetting projectId={activeProject as Project['id']} />
           )}
           {isLoaded && activeMenu === 'code' && (
             <div className="onboarding-file-explorer">
@@ -167,12 +165,12 @@ const WorkSpace: FC = () => {
                 </div>
               )}
 
-              {/* <FileTree projectId={projectName as string} /> */}
+              <FileTree projectId={activeProject as string} />
             </div>
           )}
           {activeMenu === 'build' && globalWorkspace.sandboxBlockchain && (
             <BuildProject
-              projectId={projectName as string}
+              projectId={activeProject as string}
               onCodeCompile={(_codeBOC) => {}}
               contract={contract}
               updateContract={(contractInstance) => {
@@ -182,7 +180,7 @@ const WorkSpace: FC = () => {
           )}
           {activeMenu === 'test-cases' && (
             <div className={s.testCaseArea}>
-              <TestCases projectId={projectName as string} />
+              <TestCases projectId={activeProject as string} />
             </div>
           )}
         </div>
@@ -201,15 +199,15 @@ const WorkSpace: FC = () => {
               >
                 <div>
                   <div className={s.tabsWrapper}>
-                    <Tabs projectId={projectName as string} />
+                    <Tabs projectId={activeProject as string} />
                   </div>
 
                   <div style={{ height: 'calc(100% - 43px)' }}>
-                    {!projectName && !activeFile && <ProjectTemplate />}
+                    {!activeProject && !activeFile && <ProjectTemplate />}
                     {activeFile && (
                       <Editor
                         file={activeFile as Tree}
-                        projectId={projectName as string}
+                        projectId={activeProject as string}
                       />
                     )}
                   </div>

src/components/workspace/project/ManageProject/ManageProject.tsx

@@ -1,26 +1,17 @@
 import { NewProject } from '@/components/project';
 import { Tooltip } from '@/components/ui';
 import AppIcon from '@/components/ui/icon';
-import { useWorkspaceActions } from '@/hooks/workspace.hooks';
+import { useProjects } from '@/hooks/projectV2.hooks';
 import { Project } from '@/interfaces/workspace.interface';
 import { Button, Modal, Select, message } from 'antd';
 import { FC, useEffect, useState } from 'react';
 import s from './ManageProject.module.scss';
 
 const ManageProject: FC = () => {
-  const { deleteProject, setActiveProject, getActiveProject } =
-    useWorkspaceActions();
-  const [currentProject, setCurrentProject] = useState<string | null>(null);
   const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
-  const [projects, setProjects] = useState<string[]>([]);
 
-  const activeProject = getActiveProject();
-
-  const getProjects = async () => {
-    const fileSystem = (await import('@/lib/fs')).default;
-    const _projects = await fileSystem.readdir('/', { onlyDir: true });
-    setProjects(_projects);
-  };
+  const { projects, setActiveProject, deleteProject, activeProject } =
+    useProjects();
 
   const projectHeader = () => (
     <>
@@ -38,11 +29,9 @@ const ManageProject: FC = () => {
 
         <Tooltip title="Delete Project" placement="bottom">
           <div
-            className={`${s.deleteProject} ${
-              !currentProject ? s.disabled : ''
-            }`}
+            className={`${s.deleteProject} ${!activeProject ? s.disabled : ''}`}
             onClick={() => {
-              if (!currentProject) return;
+              if (!activeProject) return;
               setIsDeleteConfirmOpen(true);
             }}
           >
@@ -59,7 +48,7 @@ const ManageProject: FC = () => {
         placeholder="Select a project"
         showSearch
         className="w-100 select-search-input-dark"
-        value={currentProject}
+        value={activeProject}
         onChange={(_project) => {
           openProject(_project).catch(() => {});
         }}
@@ -89,9 +78,7 @@ const ManageProject: FC = () => {
     try {
       await deleteProject(`/${id}`);
       setActiveProject(null);
-      setCurrentProject(null);
       setIsDeleteConfirmOpen(false);
-      await getProjects();
     } catch (error) {
       console.log('Failed to delete project', error);
       await message.error('Failed to delete project');
@@ -105,16 +92,12 @@ const ManageProject: FC = () => {
       await message.error('Project not found');
       return;
     }
-    setCurrentProject(selectedProject);
     setActiveProject(selectedProject);
   };
 
   useEffect(() => {
     if (!activeProject) return;
     openProject(activeProject as string).catch(() => {});
-    getProjects().catch((error) => {
-      console.log('Failed to get projects', error);
-    });
   }, [activeProject]);
 
   return (
@@ -131,7 +114,7 @@ const ManageProject: FC = () => {
         footer={null}
       >
         <span className={s.modalTitle}>
-          <AppIcon name="Info" /> Delete my <b>`{currentProject}`</b> Project?
+          <AppIcon name="Info" /> Delete my <b>`{activeProject}`</b> Project?
         </span>
         <div className={s.modalDescription}>
           <p>
@@ -158,8 +141,8 @@ const ManageProject: FC = () => {
             type="primary"
             danger
             onClick={() => {
-              if (currentProject) {
-                deleteSelectedProject(currentProject).catch(() => {});
+              if (activeProject) {
+                deleteSelectedProject(activeProject).catch(() => {});
               }
             }}
           >

src/components/workspace/tree/FileTree/FileTree.tsx

@@ -1,4 +1,4 @@
-import { useWorkspaceActions } from '@/hooks/workspace.hooks';
+import { useProjects } from '@/hooks/projectV2.hooks';
 import {
   DropOptions,
   getBackendOptions,
@@ -16,31 +16,32 @@ interface Props {
 }
 
 const FileTree: FC<Props> = ({ projectId }) => {
-  const workspaceAction = useWorkspaceActions();
+  const { projectFiles } = useProjects();
 
-  const projectFiles = (): NodeModel[] => {
-    return workspaceAction.projectFiles(projectId).map((item) => {
+  const getProjectFiles = (): NodeModel[] => {
+    return [...projectFiles].map((item) => {
       return {
-        id: item.id,
+        id: item.path,
         parent: item.parent ?? 0,
         droppable: item.type === 'directory',
         text: item.name,
       };
     });
   };
-  const handleDrop = (_: unknown, options: DropOptions) => {
-    workspaceAction.moveFile(
-      options.dragSourceId as string,
-      options.dropTargetId as string,
-      projectId,
-    );
+
+  const handleDrop = (_: unknown, _options: DropOptions) => {
+    // workspaceAction.moveFile(
+    //   options.dragSourceId as string,
+    //   options.dropTargetId as string,
+    //   projectId,
+    // );
   };
 
   return (
     <div className={s.root}>
       <DndProvider backend={MultiBackend} options={getBackendOptions()}>
         <Tree
-          tree={projectFiles()}
+          tree={getProjectFiles()}
           rootId={0}
           onDrop={handleDrop}
           render={(node, { depth, isOpen, onToggle }) => (