Added storage feature

docs/features/applications/README.md

@@ -6,11 +6,11 @@ Applications (sometimes shortened to apps) are processes that open a window when
 
 ## Table of Contents
 
-- [<img src="../../../public/media/applications/icons/terminal.svg" width=20 height=20 style="vertical-align: middle; background: none;"/> Terminal](terminal/README.md)
-- [<img src="../../../public/media/applications/icons/file-explorer.svg" width=20 height=20 style="vertical-align: middle; background: none;"/> File Explorer](file-explorer/README.md)
-- [<img src="../../../public/media/applications/icons/media-viewer.svg" width=20 height=20 style="vertical-align: middle; background: none;"/> Media Viewer](media-viewer/README.md)
-- [<img src="../../../public/media/applications/icons/text-editor.svg" width=20 height=20 style="vertical-align: middle; background: none;"/> Text Editor](text-editor/README.md)
-- [<img src="../../../public/media/applications/icons/settings.svg" width=20 height=20 style="vertical-align: middle; background: none;"/> Settings](settings/README.md)
+- [<img src="../../../public/media/applications/icons/terminal.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> Terminal](terminal/README.md)
+- [<img src="../../../public/media/applications/icons/file-explorer.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> File Explorer](file-explorer/README.md)
+- [<img src="../../../public/media/applications/icons/media-viewer.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> Media Viewer](media-viewer/README.md)
+- [<img src="../../../public/media/applications/icons/text-editor.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> Text Editor](text-editor/README.md)
+- [<img src="../../../public/media/applications/icons/settings.svg" width=20 height=20 style="vertical-align: text-bottom; background: none;"/> Settings](settings/README.md)
 
 ## Common components
 

src/components/applications/file-explorer/FileExplorer.jsx

@@ -35,11 +35,14 @@ function FilePreview({ file }) {
 export function FileExplorer({ startPath }) {
 	const virtualRoot = useVirtualRoot();
 	const [currentDirectory, setCurrentDirectory] = useState(virtualRoot.navigate(startPath ?? "~"));
-	const [path, setPath] = useState(currentDirectory.path);
+	const [path, setPath] = useState(currentDirectory?.path ?? "");
 	const windowsManager = useWindowsManager();
 	const [showHidden] = useState(true);
 
 	const changeDirectory = (path, absolute = false) => {
+		if (currentDirectory == null)
+			absolute = true;
+
 		const directory = absolute ? virtualRoot.navigate(path) : currentDirectory.navigate(path);
 
 		console.log(directory);
@@ -108,7 +111,7 @@ export function FileExplorer({ startPath }) {
 					</button>
 				</div>
 				<div className={styles.Main}>
-					{currentDirectory.getFiles(showHidden).map((file, index) => 
+					{currentDirectory?.getFiles(showHidden)?.map((file, index) => 
 						<button key={index} title={file.id} className={styles["File-button"]} onClick={(event) => {
 							event.preventDefault();
 							windowsManager.openFile(file);
@@ -117,7 +120,7 @@ export function FileExplorer({ startPath }) {
 							<p>{file.id}</p>
 						</button>
 					)}
-					{currentDirectory.getSubFolders(showHidden).map(({ name }, index) => 
+					{currentDirectory?.getSubFolders(showHidden)?.map(({ name }, index) => 
 						<button key={index} title={name} className={styles["Folder-button"]} onClick={() => {
 							changeDirectory(name);
 						}}>

src/components/applications/settings/Settings.jsx

@@ -30,7 +30,7 @@ function AppearanceTab({ virtualRoot, settingsManager }) {
 		<div className={styles["Option"]}>
 			<p>Wallpaper</p>
 			<div className={styles["Input"]}>
-				{virtualRoot.navigate("~/Images").getFiles().map(({ name, id, source }) =>
+				{virtualRoot.navigate("~/Images")?.getFiles()?.map(({ name, id, source }) =>
 					<label className={styles["Image-select"]} key={id}>
 						<input type="radio" value={source} checked={source === wallpaper ? "checked" : ""} onChange={onChange}/>
 						<img src={source} alt={id}/>

src/features/storage/storage.js

@@ -0,0 +1,13 @@
+export class StorageManager {
+	static store(key, value) {
+		localStorage.setItem(key, value);
+	}
+
+	static load(key) {
+		return localStorage.getItem(key);
+	}
+
+	static clear() {
+		localStorage.clear();
+	}
+}

src/features/virtual-drive/virtual-base.js

@@ -21,6 +21,7 @@ export class VirtualBase extends EventEmitter {
 	 */
 	setName(name) {
 		this.name = name;
+		this.getRoot().saveData();
 		return this;
 	}
 
@@ -31,6 +32,7 @@ export class VirtualBase extends EventEmitter {
 	setAlias(alias) {
 		this.alias = alias;
 		this.getRoot().addShortcut(alias, this);
+		this.getRoot().saveData();
 		return this;
 	}
 
@@ -40,11 +42,14 @@ export class VirtualBase extends EventEmitter {
 	 */
 	setParent(parent) {
 		this.parent = parent;
+		this.getRoot().saveData();
 		return this;
 	}
 
 	delete() {
-		this.parent.remove?.(this);
+		const parent = this.parent;
+		parent.remove?.(this);
+		parent.getRoot().saveData();
 	}
 
 	open() {
@@ -71,4 +76,12 @@ export class VirtualBase extends EventEmitter {
 
 		return root;
 	}
+
+	toJSON() {
+		const object = {
+			nam: this.name
+		};
+
+		return object;
+	}
 }

src/features/virtual-drive/virtual-file.js

@@ -37,7 +37,10 @@ export class VirtualFile extends VirtualBase {
 	setSource(source) {
 		this.source = source;
 		this.content = null;
+
 		this.emit(VirtualFile.EVENT_NAMES.CONTENT_CHANGE, this);
+		this.getRoot().saveData();
+		
 		return this;
 	}
 
@@ -49,7 +52,10 @@ export class VirtualFile extends VirtualBase {
 	setContent(content) {
 		this.content = content;
 		this.source = null;
+
 		this.emit(VirtualFile.EVENT_NAMES.CONTENT_CHANGE, this);
+		this.getRoot().saveData();
+
 		return this;
 	}
 
@@ -80,4 +86,20 @@ export class VirtualFile extends VirtualBase {
 			return null;
 		});
 	}
+
+	toJSON() {
+		const object = super.toJSON();
+		
+		if (this.extension != null) {
+			object.ext = this.extension;
+		}
+
+		if (this.content != null) {
+			object.cnt = this.content;
+		} else if (this.source != null) {
+			object.src = this.source;
+		}
+
+		return object;
+	}
 }

src/features/virtual-drive/virtual-folder.js

@@ -101,6 +101,7 @@ export class VirtualFolder extends VirtualBase {
 		this.files.push(newFile);
 		newFile.parent = this;
 		callback?.(newFile);
+		this.getRoot().saveData();
 		return this;
 	}
 
@@ -115,6 +116,7 @@ export class VirtualFolder extends VirtualBase {
 		files.forEach(({name, extension}) => {
 			this.createFile(name, extension);
 		});
+		this.getRoot().saveData();
 		return this;
 	}
 
@@ -134,6 +136,7 @@ export class VirtualFolder extends VirtualBase {
 		this.subFolders.push(newFolder);
 		newFolder.parent = this;
 		callback?.(newFolder);
+		this.getRoot().saveData();
 		return this;
 	}
 
@@ -146,6 +149,7 @@ export class VirtualFolder extends VirtualBase {
 		folders.forEach((name) => {
 			this.createFolder(name);
 		});
+		this.getRoot().saveData();
 		return this;
 	}
 
@@ -171,6 +175,8 @@ export class VirtualFolder extends VirtualBase {
 		const parent = folders[folders.length - 1];
 		parent.files.push(file);
 		file.parent = parent;
+
+		this.getRoot().saveData();
 	}
 
 	/**
@@ -189,7 +195,9 @@ export class VirtualFolder extends VirtualBase {
 			if (!currentFolder.hasFolder(folderName)) {
 				currentFolder.createFolder(folderName);
 			}
-		})
+		});
+
+		this.getRoot().saveData();
 	}
 
 	/**
@@ -204,6 +212,8 @@ export class VirtualFolder extends VirtualBase {
 		} else if (child instanceof VirtualFolder) {
 			removeFromArray(child, this.subFolders);
 		}
+
+		this.getRoot().saveData();
 	}
 
 	/**
@@ -267,6 +277,8 @@ export class VirtualFolder extends VirtualBase {
 		this.files.concat(this.subFolders).forEach((item) => {
 			item.delete();
 		});
+
+		this.getRoot().saveData();
 	}
 
 	/**
@@ -294,4 +306,17 @@ export class VirtualFolder extends VirtualBase {
 			!name.startsWith(".")
 		);
 	}
+
+	toJSON() {
+		const object = super.toJSON();
+
+		if (this.files.length > 0) {
+			object.fls = this.files.map((file) => file.toJSON());
+		}
+		if (this.subFolders.length > 0) {
+			object.fds = this.subFolders.map((folder) => folder.toJSON());
+		}
+
+		return object;
+	}
 }

src/features/virtual-drive/virtual-root.js

@@ -1,3 +1,4 @@
+import { StorageManager } from "../storage/storage.js";
 // eslint-disable-next-line no-unused-vars
 import { VirtualFile } from "./virtual-file.js";
 import { VirtualFolder } from "./virtual-folder.js";
@@ -6,12 +7,167 @@ import { VirtualFolder } from "./virtual-folder.js";
  * A virtual folder that serves as the root folder
  */
 export class VirtualRoot extends VirtualFolder {
+	initiated = false;
+
 	constructor() {
 		super("root");
 		this.root = this;
 		this.shortcuts = {};
 	}
 
+	loadDefaultData() {
+		this.createFolder("bin", (folder) => {
+			folder.createFiles([
+				{ name: "echo" },
+				{ name: "cd" },
+				{ name: "ls" },
+				{ name: "clear" },
+			]);
+		});
+
+		this.createFolder("dev", (folder) => {
+			folder.createFiles([
+				{ name: "null" },
+				{ name: "zero" },
+				{ name: "random" },
+			]);
+		});
+
+		this.createFolder("etc");
+
+		this.createFolder("usr", (folder) => {
+			folder.createFolders(["bin", "sbin", "lib", "share"]);
+		});
+			
+
+		this.createFolder("home", (folder) => {
+			folder.createFolder("prozilla-os", (folder) => {
+				folder.setAlias("~")
+					.createFolder(".config", (folder) => {
+						folder.createFile("desktop", "xml", (file) => {
+							file.setSource("/config/desktop.xml");
+						});
+					})
+					.createFolder("Images", (folder) => {
+						folder.createFile("Wallpaper1", "png", (file) => {
+							file.setSource("/media/wallpapers/Wallpaper1.png")
+						}).createFile("Wallpaper2", "png", (file) => {
+							file.setSource("/media/wallpapers/Wallpaper2.png")
+						}).createFile("Wallpaper3", "png", (file) => {
+							file.setSource("/media/wallpapers/Wallpaper3.png")
+						}).createFile("Wallpaper4", "png", (file) => {
+							file.setSource("/media/wallpapers/Wallpaper4.png")
+						});
+					})
+					.createFolder("Documents", (folder) => {
+						folder.createFile("text", "txt", (file) => {
+							file.setContent("Hello world!");
+						}).createFile("info", "md", (file) => {
+							file.setSource("/documents/info.md");
+						});
+					})
+					.createFolder("Desktop");
+			});
+		});
+
+		this.createFolder("lib");
+		this.createFolder("sbin");
+		this.createFolder("tmp");
+		this.createFolder("var");
+		this.createFolder("boot");
+
+		this.createFolder("proc", (folder) => {
+			folder.createFiles([
+				{ name: "cpuinfo" },
+				{ name: "meminfo" },
+			]);
+		});
+
+		this.createFolder("var");
+		this.createFolder("opt");
+		this.createFolder("media");
+		this.createFolder("mnt");
+		this.createFolder("srv");
+	}
+
+	loadData() {
+		let data = StorageManager.load("data");
+		if (data == null)
+			return this.loadDefaultData();
+
+		let object;
+		try {
+			object = JSON.parse(data);
+		} catch (error) {
+			console.error(error);
+		}
+		if (object == null)
+			return this.loadDefaultData();
+
+		const shortcuts = {...object.scs};
+
+		const addFile = ({ nam: name, ext: extension, src: source, cnt: content }, parent = this) => {
+			parent.createFile(name, extension, (file) => {
+				if (source != null) {
+					file.setSource(source);
+				} else if (content != null) {
+					file.setContent(content);
+				}
+			})
+		};
+
+		const addFolder = ({ nam: name, fds: folders, fls: files }, parent = this) => {
+			parent.createFolder(name, (folder) => {
+				if (Object.values(shortcuts).includes(folder.absolutePath)) {
+					let alias;
+					for (const [key, value] of Object.entries(shortcuts)) {
+						if (value === folder.absolutePath)
+							alias = key;
+					}
+					folder.setAlias(alias);
+				}
+				if (folders != null) {
+					folders.forEach((subFolder) => {
+						addFolder(subFolder, folder);
+					});
+				}
+				if (files != null) {
+					files.forEach((file) => {
+						addFile(file, folder);
+					});
+				}
+			});
+		};
+
+		if (object.fds != null) {
+			object.fds.forEach((subFolder) => {
+				addFolder(subFolder);
+			});
+		}
+		if (object.fls != null) {
+			object.fls.forEach((file) => {
+				addFile(file);
+			});
+		}
+
+		console.log(this);
+	}
+
+	saveData() {
+		if (!this.initiated)
+			return;
+
+		StorageManager.store("data", this.toString());
+	}
+
+	init() {
+		this.initiated = false;
+		this.setAlias("/");
+		this.loadData();
+		this.initiated = true;
+		return this;
+	}
+
 	/**
 	 * Adds a shortcut to a file or folder
 	 * @param {String} name 
@@ -38,4 +194,27 @@ export class VirtualRoot extends VirtualFolder {
 	get path() {
 		return "";
 	}
+
+	get absolutePath() {
+		return "/";
+	}
+
+	toJSON() {
+		const object = super.toJSON();
+
+		if (Object.entries(this.shortcuts).length > 0) {
+			object.scs = {};
+
+			for (const [key, value] of Object.entries(this.shortcuts)) {
+				object.scs[key] = value.absolutePath;
+			}
+		}
+
+		return object;
+	}
+
+	toString() {
+		const json = this.toJSON();
+		return JSON.stringify(json);
+	}
 }

src/hooks/virtual-drive/VirtualRootContext.js

@@ -3,94 +3,11 @@ import { VirtualRoot } from "../../features/virtual-drive/virtual-root.js";
 
 const VirtualRootContext = createContext();
 
-/**
- * Initializes the virtual root with folders and files
- * @param {VirtualRoot} virtualRoot 
- */
-function initVirtualRoot(virtualRoot) {
-	virtualRoot.setAlias("/");
-
-	virtualRoot.createFolder("bin", (folder) => {
-		folder.createFiles([
-			{ name: "echo" },
-			{ name: "cd" },
-			{ name: "ls" },
-			{ name: "clear" },
-		]);
-	});
-
-	virtualRoot.createFolder("dev", (folder) => {
-		folder.createFiles([
-			{ name: "null" },
-			{ name: "zero" },
-			{ name: "random" },
-		]);
-	});
-
-	virtualRoot.createFolder("etc");
-
-	virtualRoot.createFolder("usr", (folder) => {
-		folder.createFolders(["bin", "sbin", "lib", "share"]);
-	});
-		
-
-	virtualRoot.createFolder("home", (folder) => {
-		folder.createFolder("prozilla-os", (folder) => {
-			folder.setAlias("~")
-				.createFolder(".config", (folder) => {
-					folder.createFile("desktop", "xml", (file) => {
-						file.setSource("/config/desktop.xml");
-					});
-				})
-				.createFolder("Images", (folder) => {
-					folder.createFile("Wallpaper1", "png", (file) => {
-						file.setSource("/media/wallpapers/Wallpaper1.png")
-					}).createFile("Wallpaper2", "png", (file) => {
-						file.setSource("/media/wallpapers/Wallpaper2.png")
-					}).createFile("Wallpaper3", "png", (file) => {
-						file.setSource("/media/wallpapers/Wallpaper3.png")
-					}).createFile("Wallpaper4", "png", (file) => {
-						file.setSource("/media/wallpapers/Wallpaper4.png")
-					});
-				})
-				.createFolder("Documents", (folder) => {
-					folder.createFile("text", "txt", (file) => {
-						file.setContent("Hello world!");
-					}).createFile("info", "md", (file) => {
-						file.setSource("/documents/info.md");
-					});
-				})
-				.createFolder("Desktop");
-		});
-	});
-
-	virtualRoot.createFolder("lib");
-	virtualRoot.createFolder("sbin");
-	virtualRoot.createFolder("tmp");
-	virtualRoot.createFolder("var");
-	virtualRoot.createFolder("boot");
-
-	virtualRoot.createFolder("proc", (folder) => {
-		folder.createFiles([
-			{ name: "cpuinfo" },
-			{ name: "meminfo" },
-		]);
-	});
-
-	virtualRoot.createFolder("var");
-	virtualRoot.createFolder("opt");
-	virtualRoot.createFolder("media");
-	virtualRoot.createFolder("mnt");
-	virtualRoot.createFolder("srv");
-}
-
 /**
  * @returns {React.Provider<VirtualRoot>}
  */
 export function VirtualRootProvider({ children }) {
-	const virtualRoot = new VirtualRoot();
-
-	initVirtualRoot(virtualRoot);
+	const virtualRoot = new VirtualRoot().init();
 
 	return (
 		<VirtualRootContext.Provider value={virtualRoot}>