Fix changing photo path behaviour closes #8

src-tauri/src/frontend_calls/change_final_path.rs

···
 use std::fs;
 
-#[tauri::command]
-pub fn change_final_path(new_path: &str) {
-  let config_path = dirs::config_dir()
-    .unwrap()
-    .join("PhazeDev/VRChatPhotoManager/.photos_path");
+use tauri::{Emitter, State, Window};
 
-  fs::write(&config_path, new_path.as_bytes()).unwrap();
+use crate::util::cache::Cache;
 
+#[tauri::command]
+pub fn change_final_path(new_path: &str, window: Window, cache: State<Cache>) -> bool {
   match fs::metadata(&new_path) {
-    Ok(_) => {}
+    Ok(_) => {
+      let config_path = dirs::config_dir()
+        .unwrap()
+        .join("PhazeDev/VRChatPhotoManager/.photos_path");
+
+      fs::write(&config_path, new_path.as_bytes()).unwrap();
+      cache.insert("photo-path".into(), new_path.to_owned());
+
+      true
+    }
     Err(_) => {
-      fs::create_dir(&new_path).unwrap();
+      window.emit("vrcpm-error", "Error Changing Path: Path does not exist.").unwrap();
+      false
     }
-  };
+  }
 }

src-tauri/src/main.rs

···
 
   println!("Loading App...");
   let photos_path = util::get_photo_path::get_photo_path();
+  println!("Loading photos from: {:#?}", &photos_path);
 
   cache.insert("photo-path".into(), photos_path.to_str().unwrap().to_owned());
 

src-tauri/src/util/get_photo_path.rs

···
 
   match fs::read_to_string(config_path) {
     Ok(path) => {
-      path::PathBuf::from(path)
+      let p = path::PathBuf::from(path);
+
+      if fs::exists(&p).unwrap(){
+        p
+      } else{
+        dirs::picture_dir().unwrap().join("VRChat")
+      }
     },
     Err(_) => {
       let p = dirs::picture_dir().unwrap().join("VRChat");

src/Components/App.tsx

···
-import { onMount } from "solid-js";
+import { createSignal, onMount } from "solid-js";
 
 import PhotoList from "./PhotoList";
 import PhotoViewer from "./PhotoViewer";
 import SettingsMenu from "./SettingsMenu";
-import { utils } from "animejs";
+import { animate, utils } from "animejs";
+import { listen } from "@tauri-apps/api/event";
 
 let App = () => {
+  let [ errorText, setErrorText ] = createSignal('');
+
   onMount(() => {
     utils.set('.settings',
     {
···
       opacity: 0,
       translateX: '500px'
     })
+
+    listen<string>('vrcpm-error', ( ev ) => {
+      setErrorText(ev.payload);
+
+      utils.set('.error-notif', { translateX: '-50%', translateY: '-100px' });
+      animate('.error-notif', {
+        ease: 'outElastic',
+        opacity: 1,
+        translateY: '0px'
+      });
+
+      setTimeout(() => {
+        animate('.error-notif', {
+          ease: 'outElastic',
+          opacity: 0,
+          translateY: '-100px'
+        });
+      }, 2000);
+    });
   })
 
   return (
···
       <SettingsMenu />
 
       <div class="copy-notif">Image Copied!</div>
+      <div class="error-notif">{ errorText() }</div>
     </div>
   );
 }

src/Components/SettingsMenu.tsx

···
             </span>
             <span style={{ display: 'none' }} ref={( el ) => finalPathConfirm = el}>
               <span class="path" style={{ color: 'green' }} onClick={async () => {
-                finalPathPreviousData = finalPathData;
-                finalPathConfirm.style.display = 'none';
+                let changed = await invoke('change_final_path', { newPath: finalPathData });
 
-                await invoke('change_final_path', { newPath: finalPathData });
-                window.location.reload();
+                if(changed){
+                  finalPathPreviousData = finalPathData;
+                  finalPathConfirm.style.display = 'none';
 
-                animate('.settings', {
-                  opacity: 0,
-                  translateX: '500px',
-                  easing: 'easeInOutQuad',
-                  duration: 250,
-                  onComplete: () => {
-                    utils.set('.settings', { display: 'none' });
-                  }
-                })
+                  window.location.reload();
+
+                  animate('.settings', {
+                    opacity: 0,
+                    translateX: '500px',
+                    easing: 'easeInOutQuad',
+                    duration: 250,
+                    onComplete: () => {
+                      utils.set('.settings', { display: 'none' });
+                    }
+                  })
 
-                window.location.reload();
+                  window.location.reload();
+                }
               }}>
                 Save
               </span>

src/styles.css

···
 img{
   max-width: 100%;
   max-height: 100%;
+}
+
+.error-notif{
+  position: fixed;
+  top: 40px;
+  left: 50%;
+  color: white;
+  transform: translateX(-50%) translateY(-100px);
+  background: rgba(43, 43, 43, 0.76);
+  padding: 10px 40px;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-radius: 50px;
+  box-shadow: #000 0 0 10px;
+  z-index: 12;
+  opacity: 0;
+  pointer-events: none;
 }