Skip to content

Commit 69a334b

Browse files
thomscoderthomscoder
authored
Merge pull request #11 from thomscoder/directorySupport
Directory support (initial)
2 parents 17ba21e + 7835149 commit 69a334b

File tree

13 files changed

+184
-20
lines changed

13 files changed

+184
-20
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Quickly upload, create, open, read, modify and download files, on the fly.
44

55
Harmony also keep tracks of your changes or "workspaces" through git branches and git commits, all in-memory in your browser.
66

7-
<img src="https://i.ibb.co/brDw78C/Schermata-2022-10-08-alle-14-56-53.png" width=80% />
7+
<img src="https://i.ibb.co/pRbfJwT/Schermata-2022-10-09-alle-14-51-59-min.png" width=80% />
88

99
> Just me experimenting with WebAssembly.
1010
<br/>

‎client/public/helpers/wasm/main.wasm‎

7.32 KB
Binary file not shown.

‎client/src/App.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,15 @@
2020
transition: all 0.3s ease;
2121
}
2222

23+
.virtual-file-wrapper svg path {
24+
stroke: #000;
25+
stroke-width: 5;
26+
}
27+
28+
.virtual-file-wrapper.dir svg path {
29+
fill: #ffca8e;
30+
}
31+
2332
.virtual-file-wrapper:hover {
2433
background-color: rgba(68, 214, 255, 0.3);
2534
border: 0.01em solid white;
@@ -83,8 +92,46 @@ input[type='file'] {
8392
overflow-y: auto;
8493
}
8594

95+
.files-area.dir-open {
96+
position: relative;
97+
background-color: rgba(30, 30, 30, 0.9);
98+
width: 70%;
99+
height: 70vh;
100+
position: absolute;
101+
top: 50%;
102+
left: 50%;
103+
transform: translate(-50%, -50%);
104+
}
105+
106+
.files-area.dir-open .dir-menu {
107+
border: solid #f4f4ff;
108+
background-color: #1e1e1e;
109+
position: absolute;
110+
top: 0;
111+
width: 100%;
112+
text-align: center;
113+
z-index: 1;
114+
}
115+
116+
.files-area.dir-open .dir-menu svg {
117+
position: absolute;
118+
left: 2em;
119+
height: 100%;
120+
cursor: pointer;
121+
}
122+
123+
.file {
124+
text-align: center;
125+
background-color: #1e1e1e;
126+
padding: 0.2em 0.5em;
127+
}
128+
86129
@media screen and (max-width: 768px) {
87130
.file-selectors p + div form {
88131
text-align: center;
89132
}
133+
.files-area.dir-open {
134+
background-color: #1e1e1e;
135+
width: 100%;
136+
}
90137
}

‎client/src/App.tsx‎

Lines changed: 51 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import Draggable from 'react-draggable';
33
import { isMobile } from 'react-device-detect';
44

55
import { IoMdDocument as DocumentIcon } from '@react-icons/all-files/io/IoMdDocument';
6+
import { IoIosFolderOpen as FolderIcon } from '@react-icons/all-files/io/IoIosFolderOpen';
7+
import { AiOutlineArrowLeft as BackArrowIcon } from '@react-icons/all-files/ai/AiOutlineArrowLeft';
68

7-
import { useRecoilValue, useSetRecoilState } from 'recoil';
9+
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
810
import { actionState, freeModeDisabledState, virtualFilesState } from './atoms/atoms';
9-
import { openVirtualFilesWrapper, saveVirtualFilesWrapper } from './utils/goFunctions';
11+
import { exploreDirectoryWrapper, isDirectoryWrapper, openVirtualFilesWrapper, saveVirtualFilesWrapper } from './utils/goFunctions';
1012
import Actions from './components/Actions/Actions';
1113

1214
import Files from './components/Files/Files';
@@ -19,21 +21,37 @@ import { keyChecker } from './utils/utilityFunctions';
1921
import './App.css';
2022

2123
function App() {
22-
const virtualFiles = useRecoilValue(virtualFilesState);
24+
const [virtualFiles, setVirtualFiles] = useRecoilState(virtualFilesState);
2325
const setAction = useSetRecoilState(actionState);
2426
const freeModeDisabled = useRecoilValue(freeModeDisabledState);
2527

2628
const [editorContent, setEditorContent] = useState<string>('');
2729
const [openFile, setOpenFile] = useState<string>('');
2830
const [prevOpenedFiles, setPrevOpenedFiles] = useState<Array<string>>([]);
31+
const [openDir, setOpenDir] = useState<string>('');
32+
const [oldVirtualFiles, setOldVirtualFiles] = useState<Array<never>>([]);
2933

30-
const clickOnFileHandler = (virtualFile: never) => {
31-
// Get the file content from Go functions
32-
// Open the file
33-
// DEPRECATED: keep track of prev opened files (put that to color them differently or for future usages)
34-
setEditorContent(openVirtualFilesWrapper(virtualFile));
35-
setOpenFile(virtualFile);
36-
setPrevOpenedFiles((prev: Array<string>) => [...prev, virtualFile]);
34+
const goBackInDirectories = () => {
35+
if (oldVirtualFiles.length > 0) {
36+
setVirtualFiles([...oldVirtualFiles]);
37+
return setOldVirtualFiles([]);
38+
}
39+
};
40+
41+
const clickOnFileHandler = (virtualFile: never, isDirectory: boolean = false) => {
42+
if (!isDirectory) {
43+
// Get the file content from Go functions
44+
// Open the file
45+
setEditorContent(openVirtualFilesWrapper(virtualFile));
46+
setPrevOpenedFiles((prev: Array<string>) => [...prev, virtualFile]);
47+
setOpenFile(virtualFile);
48+
} else {
49+
// Keep track of the directory you open to go back
50+
setOldVirtualFiles(virtualFiles);
51+
// Explore direcory
52+
setVirtualFiles(exploreDirectoryWrapper(virtualFile) as never[]);
53+
setOpenDir(virtualFile);
54+
}
3755
};
3856

3957
const saveChanges = (content: string) => {
@@ -55,10 +73,13 @@ function App() {
5573

5674
useEffect(() => {
5775
window.addEventListener('keydown', keyboardShortcut);
76+
if (localStorage.getItem('harmony-tutorial')) {
77+
localStorage.removeItem('harmony-tutorial');
78+
}
5879
// Show the tutorial
59-
if (!localStorage.getItem('harmony-tutorial')) {
80+
if (!localStorage.getItem('new-harmony-tutorial')) {
6081
setAction(HELP);
61-
localStorage.setItem('harmony-tutorial', 'true');
82+
localStorage.setItem('new-harmony-tutorial', 'true');
6283
}
6384

6485
return () => {
@@ -72,20 +93,32 @@ function App() {
7293
<Actions />
7394
<Files />
7495
<div className="App">
75-
<div className="files-area" style={filesAreaStyle}>
96+
<div className={`files-area ${oldVirtualFiles.length > 0 ? 'dir-open' : ''}`} style={filesAreaStyle}>
97+
{oldVirtualFiles.length > 0 && (
98+
<div className="dir-menu">
99+
{openDir}
100+
<BackArrowIcon onClick={goBackInDirectories} />
101+
</div>
102+
)}
76103
{virtualFiles.map((virtualFile, index) => {
104+
// Check if directory
105+
const isDirectory = isDirectoryWrapper(virtualFile);
106+
// Check if file was prev opened
107+
const prevOpened = !!prevOpenedFiles.find((f) => f === virtualFile) ? 'modified' : '';
108+
// Regex on name
109+
const virtualFileName = (virtualFile as string).split('/').at(-1);
77110
// Double click on files to open (on mobile should disable the drag - from the menu)
78111
return (
79112
<Draggable key={index} bounds="parent" disabled={freeModeDisabled}>
80113
<div
81114
onDoubleClick={() => {
82-
clickOnFileHandler(virtualFile);
115+
clickOnFileHandler(virtualFile, isDirectory);
83116
}}
84-
className={`virtual-file-wrapper ${!!prevOpenedFiles.find((f) => f === virtualFile) ? 'modified' : ''}`}
117+
className={`virtual-file-wrapper ${prevOpened} ${isDirectory ? 'dir' : ''}`}
85118
>
86-
<DocumentIcon size={60} />
87-
<div key={index} className="file">
88-
{virtualFile}
119+
{isDirectory ? <FolderIcon size={60} /> : <DocumentIcon size={60} />}
120+
<div key={index} className={`file`}>
121+
{virtualFileName}
89122
</div>
90123
</div>
91124
</Draggable>

‎client/src/components/Git/GitGraph.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,11 @@ const GitGraph = () => {
4848
});
4949

5050
gitFootPrints.forEach((footPrint: gitFootPrintType, index: number) => {
51+
const branchName: string = footPrint.branch;
52+
5153
gitgraph.branch(footPrint.branch).commit({
5254
hash: footPrint.commit?.hash ?? '',
53-
subject: footPrint.commit?.message ?? index === 0 ? '' : `Checkout to ${footPrint.branch}`,
55+
subject: index === 0 ? branchName : footPrint.commit?.message ?? `Checkout to ${footPrint.branch}`,
5456
onClick: () => clickOnCommitHandler(footPrint.commit.hash),
5557
onMessageClick: () => clickOnCommitHandler(footPrint.commit.hash),
5658
style: {

‎client/src/components/Menu/Help.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,16 @@ const Help = () => {
8585
<br />
8686
Harmony keeps track of the branches and commits you create allowing you to go back to a specific commit.
8787
<video width="100%" src="https://user-images.githubusercontent.com/78874117/194714002-f6ec20c5-c7cc-4144-85e1-0bdb65097b7d.mov" controls autoPlay></video>
88+
<br />
89+
Click on the commits with the Hash (not the Checkout commits) to visit that particular commit.
90+
<br />
91+
<br />
92+
<br />
93+
<strong>Harmony also has a basic support for Folders</strong> (does not support nested folders yet)
94+
<video width="100%" src="https://user-images.githubusercontent.com/78874117/194757713-771d1df7-3272-497b-9973-2e253da13e20.mp4" controls autoPlay></video>
95+
<br />
96+
Create one by simply creating a new file with this format: <strong>"DIRECTORY_NAME/FILE_NAME"</strong>.
97+
<br />
8898
{(action === HELP || open) && (
8999
<Button
90100
sx={{

‎client/src/img/desktop.jpg‎

-775 KB
Loading

‎client/src/img/desktopp.jpg‎

2.62 MB
Loading

‎client/src/utils/goFunctions.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,12 @@ export const virtualCommitWrapper = (commitMsg: string) => {
4545

4646
// @ts-ignore
4747
export const goToCommitWrapper = (hash: string) => goToCommit(hash);
48+
49+
export const exploreDirectoryWrapper = (filename: string) => {
50+
// @ts-ignore
51+
const filepath = `./${filename}/` + exploreDirectory(filename);
52+
return filepath.split(' ');
53+
};
54+
55+
// @ts-ignore
56+
export const isDirectoryWrapper = (filename: string) => isDirectory(filename);

‎nova/main.go‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,7 @@ func main() {
1515
js.Global().Set("getVirtualFiles", mapping.GetVirtualFiles())
1616
js.Global().Set("goToBranch", mapping.GoToBranch())
1717
js.Global().Set("goToCommit", mapping.GoToCommit())
18+
js.Global().Set("exploreDirectory", mapping.ExploreDirectory())
19+
js.Global().Set("isDirectory", mapping.IsDirectory())
1820
<-ch
1921
}

0 commit comments

Comments
 (0)