feat: directories support (beta)

thomscoder · thomscoder · commit 9e48c77589be · 2022-10-09T13:17:25.000+02:00
diff --git a/client/public/helpers/wasm/main.wasm b/client/public/helpers/wasm/main.wasm
diff --git a/client/src/App.css b/client/src/App.css
@@ -83,8 +83,40 @@ input[type='file'] {
   overflow-y: auto;
 }
 
+.files-area.dir-open {
+    position: relative;
+    background-color: #1e1e1e;
+    width: 70%;
+    height: 70vh;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.files-area.dir-open .dir-menu {
+  border: solid #f4f4ff;
+  background-color: #1e1e1e;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  text-align: center;
+    z-index: 1;
+}
+
+.files-area.dir-open .dir-menu svg {
+  position: absolute;
+  left: 2em;
+  height: 100%;
+  cursor: pointer;
+}
+
 @media screen and (max-width: 768px) {
   .file-selectors p + div form {
     text-align: center;
   }
+  .files-area.dir-open {
+    background-color: #1e1e1e;
+    width: 100%;
+}
 }
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -3,10 +3,12 @@ import Draggable from 'react-draggable';
 import { isMobile } from 'react-device-detect';
 
 import { IoMdDocument as DocumentIcon } from '@react-icons/all-files/io/IoMdDocument';
+import { IoIosFolderOpen as FolderIcon } from '@react-icons/all-files/io/IoIosFolderOpen';
+import { AiOutlineArrowLeft as BackArrowIcon } from '@react-icons/all-files/ai/AiOutlineArrowLeft';
 
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { actionState, freeModeDisabledState, virtualFilesState } from './atoms/atoms';
-import { openVirtualFilesWrapper, saveVirtualFilesWrapper } from './utils/goFunctions';
+import { exploreDirectoryWrapper, isDirectoryWrapper, openVirtualFilesWrapper, saveVirtualFilesWrapper } from './utils/goFunctions';
 import Actions from './components/Actions/Actions';
 
 import Files from './components/Files/Files';
@@ -19,21 +21,37 @@ import { keyChecker } from './utils/utilityFunctions';
 import './App.css';
 
 function App() {
-  const virtualFiles = useRecoilValue(virtualFilesState);
+  const [virtualFiles, setVirtualFiles] = useRecoilState(virtualFilesState);
   const setAction = useSetRecoilState(actionState);
   const freeModeDisabled = useRecoilValue(freeModeDisabledState);
 
   const [editorContent, setEditorContent] = useState<string>('');
   const [openFile, setOpenFile] = useState<string>('');
   const [prevOpenedFiles, setPrevOpenedFiles] = useState<Array<string>>([]);
+  const [openDir, setOpenDir] = useState<string>('');
+  const [oldVirtualFiles, setOldVirtualFiles] = useState<Array<never>>([]);
+  
+  const goBackInDirectories = () => {
+    if (oldVirtualFiles.length > 0) {
+      setVirtualFiles([...oldVirtualFiles]);
+      return setOldVirtualFiles([])
+    }
+  }
 
-  const clickOnFileHandler = (virtualFile: never) => {
-    // Get the file content from Go functions
-    // Open the file
-    // DEPRECATED: keep track of prev opened files (put that to color them differently or for future usages)
-    setEditorContent(openVirtualFilesWrapper(virtualFile));
-    setOpenFile(virtualFile);
-    setPrevOpenedFiles((prev: Array<string>) => [...prev, virtualFile]);
+  const clickOnFileHandler = (virtualFile: never, isDirectory: boolean = false) => {
+    if (!isDirectory) {
+      // Get the file content from Go functions
+      // Open the file
+      setEditorContent(openVirtualFilesWrapper(virtualFile));
+      setPrevOpenedFiles((prev: Array<string>) => [...prev, virtualFile]);
+      setOpenFile(virtualFile);
+    } else {
+      // Keep track of the directory you open to go back
+      setOldVirtualFiles(virtualFiles);
+      // Explore direcory
+      setVirtualFiles(exploreDirectoryWrapper(virtualFile) as never[]);
+      setOpenDir(virtualFile);
+    }
   };
 
   const saveChanges = (content: string) => {
@@ -72,20 +90,30 @@ function App() {
       <Actions />
       <Files />
       <div className="App">
-        <div className="files-area" style={filesAreaStyle}>
+        <div className={`files-area ${oldVirtualFiles.length > 0 ? 'dir-open' : ''}`} style={filesAreaStyle}>
+          {oldVirtualFiles.length > 0 && <div className="dir-menu">
+            {openDir}
+            <BackArrowIcon onClick={goBackInDirectories}/>
+            </div>}
           {virtualFiles.map((virtualFile, index) => {
+            // Check if directory
+            const isDirectory = isDirectoryWrapper(virtualFile);
+            // Check if file was prev opened
+            const prevOpened = !!prevOpenedFiles.find((f) => f === virtualFile) ? 'modified' : '';
+            // Regex on name
+            const virtualFileName = (virtualFile as string).split('/').at(-1);
             // Double click on files to open (on mobile should disable the drag - from the menu)
             return (
               <Draggable key={index} bounds="parent" disabled={freeModeDisabled}>
                 <div
                   onDoubleClick={() => {
-                    clickOnFileHandler(virtualFile);
+                    clickOnFileHandler(virtualFile, isDirectory);
                   }}
-                  className={`virtual-file-wrapper ${!!prevOpenedFiles.find((f) => f === virtualFile) ? 'modified' : ''}`}
+                  className={`virtual-file-wrapper ${prevOpened}`}
                 >
-                  <DocumentIcon size={60} />
+                  {isDirectory ?  <FolderIcon size={60} /> : <DocumentIcon size={60} />}
                   <div key={index} className="file">
-                    {virtualFile}
+                    {virtualFileName}
                   </div>
                 </div>
               </Draggable>
diff --git a/client/src/utils/goFunctions.ts b/client/src/utils/goFunctions.ts
@@ -45,3 +45,12 @@ export const virtualCommitWrapper = (commitMsg: string) => {
 
 // @ts-ignore
 export const goToCommitWrapper = (hash: string) => goToCommit(hash);
+
+export const exploreDirectoryWrapper = (filename: string) => {
+  // @ts-ignore
+  const filepath = `./${filename}/`+ exploreDirectory(filename);
+  return filepath.split(' ');
+};
+
+// @ts-ignore
+export const isDirectoryWrapper = (filename: string) => isDirectory(filename);
diff --git a/nova/main.go b/nova/main.go
@@ -15,5 +15,7 @@ func main() {
 	js.Global().Set("getVirtualFiles", mapping.GetVirtualFiles())
 	js.Global().Set("goToBranch", mapping.GoToBranch())
 	js.Global().Set("goToCommit", mapping.GoToCommit())
+	js.Global().Set("exploreDirectory", mapping.ExploreDirectory())
+	js.Global().Set("isDirectory", mapping.IsDirectory())
 	<-ch
 }
diff --git a/nova/mapping/mapping.go b/nova/mapping/mapping.go
@@ -145,3 +145,18 @@ func GoToCommit() js.Func {
 		return commitHash
 	})
 }
+
+func ExploreDirectory() js.Func {
+	return js.FuncOf(func(this js.Value, args []js.Value) interface{} {
+		filename := args[0].String()
+		filenames := novaStore.ExploreDirectory(store, texts.CurrentDirectory, filename)
+		return strings.Join(filenames, " ")
+	})
+}
+
+func IsDirectory() js.Func {
+	return js.FuncOf(func(this js.Value, args []js.Value) interface{} {
+		filename := args[0].String()
+		return novaStore.IsDirectory(store, texts.CurrentDirectory, filename)
+	})
+}
diff --git a/nova/virtual/functions.go b/nova/virtual/functions.go
@@ -46,6 +46,42 @@ func listFiles(store billy.Filesystem, dir string) []string {
 	return fileInfos
 }
 
+func isDirectory(store billy.Filesystem, dir string, filename string) bool {
+	files, err := store.ReadDir(dir)
+
+	if err != nil {
+		log.Println(err)
+		return false
+	}
+
+	for _, file := range files {
+		if file.Name() == filename {
+			if file.IsDir() {
+				return true
+			}
+		}
+	}
+
+	return false
+}
+
+func getDirectoryFiles(store billy.Filesystem, dir string, filename string) []string {
+	files, err := store.ReadDir(dir)
+
+	if err != nil {
+		log.Println(err)
+		return nil
+	}
+	for _, file := range files {
+		if file.Name() == filename {
+			if file.IsDir() {
+				return listFiles(store, file.Name())
+			}
+		}
+	}
+	return nil
+}
+
 func openFile(store billy.Filesystem, fileName string) (billy.Filesystem, billy.File) {
 	newFile, err := store.OpenFile(fileName, os.O_RDWR|os.O_CREATE, 0644)
 	if err != nil {
diff --git a/nova/virtual/virtualSystem.go b/nova/virtual/virtualSystem.go
@@ -44,6 +44,14 @@ func (ns *NovaStore) GetFiles(store billy.Filesystem, dir string) []string {
 	return listFiles(store, dir)
 }
 
+func (ns *NovaStore) ExploreDirectory(store billy.Filesystem, dir string, filename string) []string {
+	return getDirectoryFiles(store, dir, filename)
+}
+
+func (ns *NovaStore) IsDirectory(store billy.Filesystem, dir string, filename string) bool {
+	return isDirectory(store, dir, filename)
+}
+
 func (ns *NovaStore) OpenFile(store billy.Filesystem, fileName string) billy.File {
 	fileGotCreated, file := openFile(store, fileName)
 	if fileGotCreated != nil {

Original file line number	Diff line number	Diff line change
`@@ -15,5 +15,7 @@ func main() {`
`15`	`15`	`js.Global().Set("getVirtualFiles", mapping.GetVirtualFiles())`
`16`	`16`	`js.Global().Set("goToBranch", mapping.GoToBranch())`
`17`	`17`	`js.Global().Set("goToCommit", mapping.GoToCommit())`
	`18`	`+ js.Global().Set("exploreDirectory", mapping.ExploreDirectory())`
	`19`	`+ js.Global().Set("isDirectory", mapping.IsDirectory())`
`18`	`20`	`<-ch`
`19`	`21`	`}`