Gyro ZEPPELI

en If that’s how it is … I’m okay with it … my real name … you promised, right …? Don’t tell anybody. See ya … take care.

src-tauri/src/data/json.rs

@@ -2,14 +2,15 @@ use serde::Serialize;
 use serde_json::{Map, Number, Value};
 use once_cell::sync::Lazy;
 
-
 pub static mut USER_DATA: Lazy<Map<String, Value>> = Lazy::new(|| Map::new());
 
 pub fn init_user_data() {
     unsafe {USER_DATA = Lazy::new(|| {
         let mut map = Map::new();
         map.insert(String::from("user"), Value::Object(Map::new()));
-        map.insert(String::from("system"), Value::Object(Map::new()));
+        let mut system_data = Map::new();
+        system_data.insert(String::from("types"), Value::Object(Map::new()));
+        map.insert(String::from("system"), Value::Object(system_data));
 
         return map;
     })}
@@ -68,6 +69,21 @@ pub fn user_make(key: String, data: Value) {user_mut().insert(key, data);}
 #[tauri::command]
 pub fn system_make(key: String, val: Value) {system_mut().insert(key, val);}
 
+#[tauri::command]
+pub fn gather_type(file: &str) -> &str {
+    let file_extension = file.split(".").last();
+    if file_extension.is_none(){return "Unknown";}
+    match file_extension.unwrap(){
+        "png" => {return "Image"}
+        "txt" => {return "Text"}
+        "html" => {return "HTML"}
+        "mp4" => {return "Video"}
+        "mov" => {return "Video"}
+        "mp3" => {return "Audio"}
+        _ => {return "Unknown"}
+    }
+}
+
 #[derive(Serialize)]
 struct SerializeUserData{
     user: Map<String, Value>,
@@ -88,4 +104,11 @@ fn test_user_data(){
     let data = create_value(String::from("string"), String::from(data));
     user_make(String::from("test"), data.clone());
     assert_eq!(&data, user_get(String::from("test")));
+}
+
+#[test]
+fn test_file_extention(){
+    init_user_data();
+    assert_eq!(gather_type("file.png"), String::from("Image"));
+    assert_eq!(gather_type("new_file.cool.mov"), String::from("Video"))
 }

src-tauri/src/fs/commands.rs

@@ -99,6 +99,7 @@ impl Home{
 
 #[tauri::command]
 pub fn mkdir(name: String) {unsafe{FS.current_dir.files.push(DirectoryItems::Directory(Directory::new(name)))};}
+#[allow(non_snake_case)]
 #[tauri::command]
 pub fn mk(name: &str, password: &str, fileName: String) -> Result<(), String> {
     let new_file = File::new(name, password, fileName);
@@ -191,7 +192,7 @@ impl File{
         return Ok(());
     }
     pub fn delete(&self) -> Result<(), std::io::Error>{
-        let result = fs::remove_file(self.location.as_path());
+        let _result = fs::remove_file(self.location.as_path());
         return Ok(())
     }
     pub fn open(&self) -> Option<Vec<u8>> {

src-tauri/src/main.rs

@@ -11,6 +11,6 @@ mod data;
 fn main() {
    tauri::Builder::default().invoke_handler(tauri::generate_handler![
     first_init, console, user_get, authenticate_user, save_user, user_exists, load_user, ls, pwd, cd, create_user,
-    create_value, mkdir, system_get, system_make, user_make, close_app, mk, upload_file, cd_back, rm, file_exists
+    create_value, mkdir, system_get, system_make, user_make, close_app, mk, upload_file, cd_back, rm, file_exists, gather_type
 ]).run(tauri::generate_context!()).expect("failed to run the code");
    }

src/pages/main_page/internal_apps/apps/file_system/file_system.tsx

@@ -5,17 +5,19 @@ import { useState, useEffect, Dispatch } from 'react';
 import { open } from '@tauri-apps/api/dialog';
 import folder from '../../../assets/folder.png';
 import alpha from '../../../assets/image-solid.svg';
+
 import arrowleft from '../../../assets/arrowleft.png'
 import './file_system.css';
 
-async function upload_file(update_fs: () => Promise<void>, set_files: React.Dispatch<React.SetStateAction<React.JSX.Element[]>>){
+async function upload_file(update_fs: () => Promise<void>, set_files: React.Dispatch<React.SetStateAction<React.JSX.Element[]>>
+, open_file: (file: string) => Promise<void>){
     let name: string = await invoke('system_get', {key: 'name'});
     let password: string = await invoke('system_get', {key: 'password'});
     let file_selected = await open({});
     if (Array.isArray(file_selected)){
         for (let i = 0; i < file_selected.length;i++){
             //@ts-expect-error
-            set_files(files => [...files, <File name={file_selected[i]} key={files.length + 1}/>])
+            set_files(files => [...files, <File name={file_selected[i]} key={files.length + 1} open_file={open_file}/>])
         }
         await update_fs();
     }
@@ -28,21 +30,36 @@ async function upload_file(update_fs: () => Promise<void>, set_files: React.Disp
 
 function File(props: {name: string, type: FileType, update_fs: () => Promise<void>, 
     is_selected: Dispatch<string>, open_file: (file: string) => Promise<void>}){
-    async function cd(){
-        await invoke('cd', {new: props.name});
-        await props.update_fs();
+    async function open(){
+        if (props.type == FileType.Directory){
+            await invoke('cd', {new: props.name});
+            await props.update_fs();
+        }
+        else{
+            props.open_file(props.name);
+        }
     }
+    const [file_extension, setFileExtension] = useState('');
+
+    useEffect(() => {
+        const fetchFileExtension = async () => {
+            const extension: string = await invoke('gather_type', {file: props.name});
+            setFileExtension(FileExtension(extension));
+        };
+
+        fetchFileExtension();
+    }, [props.name]);
     if (props.name.length > 10){
-        return <div className='file' onDoubleClick={() => props.open_file(props.name)}
+        return <div className='file' onDoubleClick={open}
         onContextMenu={() => props.is_selected(props.name)}>
-        <img src={props.type == FileType.File ? alpha: folder} className='file_img'/><br />
+        <img src={props.type == FileType.File ? file_extension: folder} className='file_img'/><br />
         <p className='file_name'>{props.name.slice(0, 7) + '...'}</p>
         </div>;
     }
     else{
-    return <div className='file' onDoubleClick={cd} 
+    return <div className='file' onDoubleClick={open} 
     onContextMenu={() => props.is_selected(props.name)}>
-    <img src={props.type == FileType.File ? alpha: folder} className='file_img'/><br />
+    <img src={props.type == FileType.File ? file_extension: folder} className='file_img'/><br />
     <p className='file_name'>{props.name}</p>
     </div>;
     }
@@ -58,6 +75,18 @@ async function make_file(name: string, password: string, file: string, type: Fil
     }
 }
 
+export const FileExtension = (val: string) => {
+    switch (val){
+        case "Video": return ""
+        case "Image": return alpha
+        case "Text": return ""
+        case "HTML": return ""
+        case "Unknown": return ""
+        case "Audio": return ""
+        default: return ""
+    }
+}
+
 function file_system(open_file: (file: string) => Promise<void>) : AppInterface{
     const [location, set_location] = useState("Home");
     const [selected, set_selected] = useState('');
@@ -90,7 +119,7 @@ function file_system(open_file: (file: string) => Promise<void>) : AppInterface{
         const NewFile = () =>{
             const [editing, set_editing] = useState('inherit');
             const [text, set_text] = useState('');
-            let icon = file_type == FileType.Directory ? folder : alpha;
+            let [icon, set_icon] = useState(file_type == FileType.Directory ? folder : alpha);
             const done_editing = async (e: any) => {
                 e.preventDefault();
                 set_editing('none');
@@ -105,11 +134,16 @@ function file_system(open_file: (file: string) => Promise<void>) : AppInterface{
                 await make_file(name, password, text, file_type);
                 await update();
             }
-
+            const set_new_icon = async (text: string) => {
+                if (file_type == FileType.Directory) {return;}
+                let new_icon: string = await invoke('gather_type', {file: text});
+                set_icon(FileExtension(new_icon));
+            }
             return <div className='file' style={{display: editing}}>
             <img src={icon} className='file_img2'/><br />
-            <input className='editing' onChange={e => set_text(e.target.value)}
-            onBlur={done_editing} onKeyDownCapture={e => {if (e.key == 'Enter'){set_editing('none');}}} autoFocus></input>
+            <input className='editing' onBlur={done_editing} 
+            onChange={async e => {set_text(e.target.value);set_new_icon(e.target.value);}}
+            onKeyDownCapture={e => {if (e.key == 'Enter'){set_editing('none');}}} autoFocus></input>
         </div>
         }
         set_files([...files, <NewFile key={files.length + 1}/>]);
@@ -124,7 +158,7 @@ function file_system(open_file: (file: string) => Promise<void>) : AppInterface{
 
     <button className='buttoncontextmenu' onClick={() => make_files(FileType.Directory)}>Create Folder</button>
     <button className='buttoncontextmenu' onClick={() => make_files(FileType.File)}>create file</button>
-    <button className='buttoncontextmenu' onClick={async () => await upload_file(update, set_files)}>Upload File</button>
+    <button className='buttoncontextmenu' onClick={async () => await upload_file(update, set_files, open_file)}>Upload File</button>
     {selected != '' ?
         <div>
         {/*<button className='buttoncontextmenu' >Rename</button>*/}

src/pages/main_page/internal_apps/apps/text_viewer/text_viewer.css

@@ -0,0 +1,9 @@
+.outer{
+    height: inherit;
+    width: inherit;
+}
+
+.inner{
+    height: inherit;
+    width: inherit;
+}

src/pages/main_page/internal_apps/apps/text_editor/text_editor.tsx → src/pages/main_page/internal_apps/apps/text_viewer/text_viewer.tsx

@@ -1,7 +1,8 @@
 import { AppInterface } from "../../App";
 import App from "../../App";
+import './text_viewer.css';
 
-export default function text_editor(file_selected: string | null) : AppInterface{
+export default function text_viewer(file_selected: string | null) : AppInterface{
     let update = async () => {
 
     }
@@ -11,8 +12,10 @@ export default function text_editor(file_selected: string | null) : AppInterface
     let context_menu = <div>
 
     </div>
-    let html = <div>
-        <textarea>
+    let html = <div className="outer">
+        {/*for now, this is readonly, cause it would take a while to remake this as a text editor*/}
+        <textarea className="inner" readOnly={true}>
+            {file_selected}
         </textarea>
     </div>
     let [screen, set_display, fullscreen] = App(html, 'text editor');

src/pages/main_page/main_page.tsx

@@ -4,7 +4,7 @@ import Grid from './Grid';
 import folder from './assets/folder.png';
 import settings from './assets/setting-icon.svg';
 import menu_icon from './assets/computer-laptop-color-icon.webp';
-import file_system from './internal_apps/apps/file_system/file_system';
+import file_system, {FileExtension} from './internal_apps/apps/file_system/file_system';
 import ibetonhakari from './assets/TOCA2.mp4';
 import { desktop_app } from './Grid';
 import leaveicon from './assets/leave.png';
@@ -13,7 +13,7 @@ import exit from './assets/exit.png';
 import { invoke } from '@tauri-apps/api';
 import Settings from './internal_apps/apps/settings/settings';
 import sudo from './internal_apps/apps/sudo/sudo';
-import text_editor from './internal_apps/apps/text_editor/text_editor';
+import text_viewer from './internal_apps/apps/text_viewer/text_viewer';
 import text_icon from './assets/pencil-square-icon.svg';
 
 function BinIcon(props: {display: () => Promise<void>, name: string, img: string}){
@@ -57,11 +57,21 @@ export default function MainPage() {
     const [file_selected, set_file_selected] = useState<string | null>(null);
     const sudo_props = sudo('you have been logged out, please log in');
     useEffect(()=>{sudo_props.set_display('none')}, []);
-    const text_editor_props = text_editor(file_selected);
+    const text_viewer_props = text_viewer(file_selected);
     const settings_props = Settings();
     const settings_app = desktop_app("settings", settings, settings_props);
-    const text_app = desktop_app("text editor", text_icon, text_editor_props);
+    const text_app = desktop_app("text editor", text_icon, text_viewer_props);
     let open_file = async (file: string) => {
+        console.log('test');
+        let file_extension: string = await invoke('gather_type', {file});
+        switch (file_extension){
+            case "Text": {
+                set_file_selected(file);
+                text_viewer_props.set_display('inherit');
+                return;
+            }
+            default: {return;}
+        }
         set_file_selected(file);
     }
     const fs_props = file_system(open_file);