tidying up frontend

src/Components/Managers/ConfirmationBoxManager.tsx

···
     this._setConfirmationBoxText = setConfirmationBoxText;
   
     let confirmationBox: HTMLElement;
-  
+
+    document.body.appendChild(<div class="confirmation-box" ref={( el ) => confirmationBox = el}>
+      <div class="confirmation-box-container">
+        { confirmationBoxText() }<br /><br />
+
+        <div class="button-danger" onClick={() => { this._confirmationBoxCallback(); setConfirmationBoxText('') }}>Confirm</div>
+        <div class="button" onClick={() => setConfirmationBoxText('') }>Deny</div>
+      </div>
+    </div> as HTMLElement);
+
     createEffect(() => {
       if(confirmationBoxText() !== ''){
         confirmationBox.style.display = 'block';
-  
+
         setTimeout(() => {
           confirmationBox.style.opacity = '1';
         }, 1);
       } else{
         confirmationBox.style.opacity = '0';
-  
+
         setTimeout(() => {
           confirmationBox.style.display = 'none';
         }, 250);
       }
     })
-
-    document.body.appendChild(<div class="confirmation-box" ref={( el ) => confirmationBox = el}>
-      <div class="confirmation-box-container">
-        { confirmationBoxText() }<br /><br />
-
-        <div class="button-danger" onClick={() => { this._confirmationBoxCallback(); setConfirmationBoxText('') }}>Confirm</div>
-        <div class="button" onClick={() => setConfirmationBoxText('') }>Deny</div>
-      </div>
-    </div> as HTMLElement);
   }
 
   public SetConfirmationBox( text: string, cb: () => void ){

src/Components/Managers/PhotoViewerManager.tsx

···
 import { Photo } from "../Structs/Photo";
 
 export class PhotoViewerManager{
-  private _currentPhoto: Accessor<Photo | null>;
-
+  public CurrentPhoto: Accessor<Photo | null>;
   private _setCurrentPhoto: Setter<Photo | null>;
 
   constructor(){
-    [ this._currentPhoto, this._setCurrentPhoto ] = createSignal<Photo | null>(null);
+    [ this.CurrentPhoto, this._setCurrentPhoto ] = createSignal<Photo | null>(null);
   }
 
   public Close(){

src/Components/Managers/WorldCacheManager.tsx

···
+import { invoke } from "@tauri-apps/api/core";
+import { WorldCache } from "../Structs/WorldCache";
+import { listen } from "@tauri-apps/api/event";
+
+export class WorldCacheManager{
+  private _worldCache: WorldCache[] = [];
+  private _resolveWorld: ( world: WorldCache | null ) => void = () => {};
+
+  constructor(){
+    invoke('get_config_value_string', { key: 'worldcache' })
+      .then((data: any) => {
+        if(data)this._worldCache = JSON.parse(data);
+      })
+
+    listen('world_data', ( event: any ) => {
+      let worldData = {
+        expiresOn: Date.now() + 1.2096E+09,
+        worldData: {
+          id: event.payload.id,
+          name: event.payload.name.split('\\').join('').slice(1, -1),
+          author: event.payload.author.split('\\').join('').slice(1, -1),
+          authorId: event.payload.authorId.split('\\').join('').slice(1, -1),
+          desc: event.payload.desc.split('\\').join('').slice(1, -1),
+          img: event.payload.img.split('\\').join('').slice(1, -1),
+          maxUsers: event.payload.maxUsers,
+          visits: event.payload.visits,
+          favourites: event.payload.favourites,
+          tags: event.payload.tags,
+          from: event.payload.from,
+          fromSite: event.payload.fromSite,
+          found: event.payload.found
+        }
+      }
+  
+      this._worldCache.push(worldData);
+      invoke('set_config_value_string', { key: 'worldcache', value: JSON.stringify(this._worldCache) });
+  
+      this._resolveWorld(worldData);
+    })
+  }
+
+  getWorldById( id: string ): Promise<WorldCache | null>{
+    let promise = new Promise<WorldCache | null>(( res ) => { this._resolveWorld = res });
+    let worldData = this._worldCache.find(x => x.worldData.id === id);
+
+    if(!worldData){
+      console.log('Fetching new world data');
+
+      invoke('find_world_by_id', { worldId: id });
+    } else if(worldData.expiresOn < Date.now()){
+      console.log('Fetching new world data since cache has expired');
+      
+      this._worldCache = this._worldCache.filter(x => x.worldData.id !== id);
+      invoke('find_world_by_id', { worldId: id });
+    } else{
+      this._resolveWorld(worldData);
+    }
+
+    return promise;
+  }
+}

src/Components/PhotoList.tsx

···
 let months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
 
 class PhotoListProps{
-  setCurrentPhotoView!: ( view: any ) => any;
-  currentPhotoView!: () => any;
   photoNavChoice!: () => string;
   setPhotoNavChoice!: ( view: any ) => any;
   isPhotosSyncing!: () => boolean;
···
     switch(action){
       case 'prev':
         if(!window.PhotoLoadingManager.FilteredPhotos[currentPhotoIndex - 1])break;
-        props.setCurrentPhotoView(window.PhotoLoadingManager.FilteredPhotos[currentPhotoIndex - 1]);
+        window.PhotoViewerManager.OpenPhoto(window.PhotoLoadingManager.FilteredPhotos[currentPhotoIndex - 1]);
 
         currentPhotoIndex--;
         break;
       case 'next':
         if(!window.PhotoLoadingManager.FilteredPhotos[currentPhotoIndex + 1])break;
-        props.setCurrentPhotoView(window.PhotoLoadingManager.FilteredPhotos[currentPhotoIndex + 1]);
+        window.PhotoViewerManager.OpenPhoto(window.PhotoLoadingManager.FilteredPhotos[currentPhotoIndex + 1]);
 
         currentPhotoIndex++;
         break;
···
       );
 
       if(photo){
-        props.setCurrentPhotoView(photo);
+        window.PhotoViewerManager.OpenPhoto(photo);
         currentPhotoIndex = window.PhotoLoadingManager.FilteredPhotos.indexOf(photo);
       } else
         currentPhotoIndex = -1;

src/Components/PhotoViewer.tsx

···
 import { For, Show, createEffect, onCleanup, onMount } from "solid-js";
 import { invoke } from '@tauri-apps/api/core';
-import { listen } from '@tauri-apps/api/event';
 import anime from 'animejs';
+import { WorldCache } from "./Structs/WorldCache";
 
 class PhotoViewerProps{
-  currentPhotoView!: () => any;
-  setCurrentPhotoView!: ( view: any ) => any;
   setPhotoNavChoice!: ( view: any ) => any;
 }
 
-class WorldCache{
-  expiresOn!: number;
-  worldData!: {
-    id: string,
-    name: string,
-    author: string,
-    authorId: string,
-    desc: string,
-    img: string,
-    maxUsers: number,
-    visits: number,
-    favourites: number,
-    tags: any,
-    from: string,
-    fromSite: string,
-    found: boolean
-  }
-}
-
-let worldCache: WorldCache[] = [];
-
-invoke('get_config_value_string', { key: 'worldcache' })
-  .then((data: any) => {
-    if(data)worldCache = JSON.parse(data);
-  })
-
 let PhotoViewer = ( props: PhotoViewerProps ) => {
   let viewer: HTMLElement;
   let imageViewer: HTMLImageElement;
···
   let photoTrayCloseBtn: HTMLElement;
 
   let worldInfoContainer: HTMLElement;
-  let photoPath: string;
 
   let viewerContextMenu: HTMLElement;
   let viewerContextMenuButtons: HTMLElement[] = [];
···
   let switchPhotoWithKey = ( e: KeyboardEvent ) => {
     switch(e.key){
       case 'Escape':
-        props.setCurrentPhotoView(null);
+        window.PhotoViewerManager.Close();
 
         break;
       case 'ArrowUp':
···
     })
   }
 
+  let copyImage = () => {
+    let canvas = document.createElement('canvas');
+    let ctx = canvas.getContext('2d')!;
+
+    canvas.width = window.PhotoViewerManager.CurrentPhoto()?.width || 0;
+    canvas.height = window.PhotoViewerManager.CurrentPhoto()?.height || 0;
+
+    ctx.drawImage(imageViewer, 0, 0);
+
+    canvas.toBlob(( blob ) => {
+      navigator.clipboard.write([
+        new ClipboardItem({
+          'image/png': blob!
+        })
+      ]);
+
+      canvas.remove();
+
+      anime.set('.copy-notif', { translateX: '-50%', translateY: '-100px' });
+      anime({
+        targets: '.copy-notif',
+        opacity: 1,
+        translateY: '0px'
+      });
+
+      setTimeout(() => {
+        anime({
+          targets: '.copy-notif',
+          opacity: 0,
+          translateY: '-100px'
+        });
+      }, 2000);
+    });
+  }
+
   let closeTray = () => {
     if(!trayOpen || trayInAnimation)return;
     trayInAnimation = true;
···
       window.CloseAllPopups.forEach(p => p());
       // Context Menu -> Open file location
 
-      let path = await invoke('get_user_photos_path') + '\\' + props.currentPhotoView().path;
+      let path = await invoke('get_user_photos_path') + '\\' + window.PhotoViewerManager.CurrentPhoto()?.path;
       invoke('open_folder', { url: path });
     }
 
     viewerContextMenuButtons[1].onclick = () => {
       window.CloseAllPopups.forEach(p => p());
       // Context Menu -> Copy image
-
-      let canvas = document.createElement('canvas');
-      let ctx = canvas.getContext('2d')!;
-
-      canvas.width = props.currentPhotoView().width;
-      canvas.height = props.currentPhotoView().height;
-
-      ctx.drawImage(imageViewer, 0, 0);
-
-      canvas.toBlob(( blob ) => {
-        navigator.clipboard.write([
-          new ClipboardItem({
-            'image/png': blob!
-          })
-        ]);
-  
-        canvas.remove();
-
-        anime.set('.copy-notif', { translateX: '-50%', translateY: '-100px' });
-        anime({
-          targets: '.copy-notif',
-          opacity: 1,
-          translateY: '0px'
-        });
-
-        setTimeout(() => {
-          anime({
-            targets: '.copy-notif',
-            opacity: 0,
-            translateY: '-100px'
-          });
-        }, 2000);
-      });
+      copyImage();
     }
 
     imageViewer.oncontextmenu = ( e ) => {
···
     }
 
     createEffect(() => {
-      let photo = props.currentPhotoView();
+      let photo = window.PhotoViewerManager.CurrentPhoto();
       allowedToOpenTray = false;
 
       imageViewer.style.opacity = '0';
 
       if(photo){
-        (async () => {
-          if(!photoPath)
-            photoPath = await invoke('get_user_photos_path') + '/';
-
-          imageViewer.src = (window.OS === "windows" ? "http://photo.localhost/" : 'photo://localhost') + (photoPath + props.currentPhotoView().path).split('\\').join('/') + "?full";
-          imageViewer.crossOrigin = 'anonymous';
-        })();
+        imageViewer.src = (window.OS === "windows" ? "http://photo.localhost/" : 'photo://localhost') + window.PhotoViewerManager.CurrentPhoto()?.path.split('\\').join('/') + "?full";
+        imageViewer.crossOrigin = 'anonymous';
 
         anime({
           targets: imageViewer,
···
             photo.onMetaLoaded = () => {}
 
             let meta = JSON.parse(photo.metadata);
-            let worldData = worldCache.find(x => x.worldData.id === meta.world.id);
 
             allowedToOpenTray = true;
             trayButton.style.display = 'flex';
···
               </div> as Node
             );
 
-            if(!worldData){
-              console.log('Fetching new world data');
-  
-              invoke('find_world_by_id', { worldId: meta.world.id });
-            } else if(worldData.expiresOn < Date.now()){
-              console.log('Fetching new world data since cache has expired');
-  
-              worldCache = worldCache.filter(x => x.worldData.id !== meta.world.id)
-              invoke('find_world_by_id', { worldId: meta.world.id });
-            } else
-              loadWorldData(worldData);
+            window.WorldCacheManager.getWorldById(meta.world.id)
+              .then(worldData => {
+                if(worldData)
+                  loadWorldData(worldData);
+              });
           } else{
             trayButton.style.display = 'none';
             closeTray();
           }
         }
 
-        photo.onMetaLoaded = () => handleMetaDataLoaded();
         handleMetaDataLoaded();
-
-        photo.loadImage();
       }
 
       if(photo && !isOpen){
···
   })
 
   let loadWorldData = ( data: WorldCache ) => {
-    let meta = props.currentPhotoView().metadata;
+    let meta = window.PhotoViewerManager.CurrentPhoto()?.metadata;
     if(!meta)return;
 
     worldInfoContainer.innerHTML = '';
···
     )
   }
 
-  listen('world_data', ( event: any ) => {
-    let worldData = {
-      expiresOn: Date.now() + 1.2096E+09,
-      worldData: {
-        id: event.payload.id,
-        name: event.payload.name.split('\\').join('').slice(1, -1),
-        author: event.payload.author.split('\\').join('').slice(1, -1),
-        authorId: event.payload.authorId.split('\\').join('').slice(1, -1),
-        desc: event.payload.desc.split('\\').join('').slice(1, -1),
-        img: event.payload.img.split('\\').join('').slice(1, -1),
-        maxUsers: event.payload.maxUsers,
-        visits: event.payload.visits,
-        favourites: event.payload.favourites,
-        tags: event.payload.tags,
-        from: event.payload.from,
-        fromSite: event.payload.fromSite,
-        found: event.payload.found
-      }
-    }
-
-    worldCache.push(worldData);
-    invoke('set_config_value_string', { key: 'worldcache', value: JSON.stringify(worldCache) });
-
-    loadWorldData(worldData);
-  })
-
   return (
     <div class="photo-viewer" ref={( el ) => viewer = el}>
       <div class="photo-context-menu" ref={( el ) => viewerContextMenu = el}>
···
         <div ref={( el ) => viewerContextMenuButtons.push(el)}>Copy image</div>
       </div>
 
-      <div class="viewer-close viewer-button" onClick={() => props.setCurrentPhotoView(null)}>
+      <div class="viewer-close viewer-button" onClick={() => window.PhotoViewerManager.Close()}>
         <div class="icon" style={{ width: '10px', margin: '0' }}>
           <img draggable="false" src="/icon/x-solid.svg"></img>
         </div>
···
         <div class="viewer-button"
           onMouseOver={( el ) => anime({ targets: el.currentTarget, width: '40px', height: '40px', 'margin-left': '15px', 'margin-right': '15px', 'margin-top': '-10px' })}
           onMouseLeave={( el ) => anime({ targets: el.currentTarget, width: '30px', height: '30px', 'margin-left': '20px', 'margin-right': '20px', 'margin-top': '0px' })}
-          onClick={() => {
-            let canvas = document.createElement('canvas');
-            let ctx = canvas.getContext('2d')!;
-
-            canvas.width = props.currentPhotoView().width;
-            canvas.height = props.currentPhotoView().height;
-
-            ctx.drawImage(imageViewer, 0, 0);
-
-            canvas.toBlob(( blob ) => {
-              navigator.clipboard.write([
-                new ClipboardItem({
-                  'image/png': blob!
-                })
-              ]);
-        
-              canvas.remove();
-
-              anime.set('.copy-notif', { translateX: '-50%', translateY: '-100px' });
-              anime({
-                targets: '.copy-notif',
-                opacity: 1,
-                translateY: '0px'
-              });
-
-              setTimeout(() => {
-                anime({
-                  targets: '.copy-notif',
-                  opacity: 0,
-                  translateY: '-100px'
-                });
-              }, 2000);
-            });
-          }}
-        >
+          onClick={() => { copyImage(); }}>
           <div class="icon" style={{ width: '12px', margin: '0' }}>
             <img draggable="false" src="/icon/copy-solid.svg"></img>
           </div>
···
           onMouseOver={( el ) => anime({ targets: el.currentTarget, width: '40px', height: '40px', 'margin-left': '15px', 'margin-right': '15px', 'margin-top': '-10px' })}
           onMouseLeave={( el ) => anime({ targets: el.currentTarget, width: '30px', height: '30px', 'margin-left': '20px', 'margin-right': '20px', 'margin-top': '0px' })}
           onClick={() => window.ConfirmationBoxManager.SetConfirmationBox("Are you sure you want to delete this photo?", async () => { invoke("delete_photo", {
-            path: props.currentPhotoView().path,
+            path: window.PhotoViewerManager.CurrentPhoto()?.path,
             token: (await invoke('get_config_value_string', { key: 'token' })) || "none",
             isSyncing: window.AccountManager.hasAccount() ? window.AccountManager.Storage()?.isSyncing : false
           });

src/Components/SettingsMenu.tsx

···
-import { createSignal, onCleanup, onMount, Show } from "solid-js";
+import { onCleanup, onMount, Show } from "solid-js";
 import { bytesToFormatted } from "../utils";
 import { invoke } from '@tauri-apps/api/core';
 import anime from "animejs";
···
   let finalPathInput: HTMLElement;
   let finalPathData: string;
   let finalPathPreviousData: string;
-
-  let [ deletingPhotos, setDeletingPhotos ] = createSignal(false);
 
   let closeWithKey = ( e: KeyboardEvent ) => {
     if(e.key === 'Escape'){
···
             <div class="account-notice">To enable cloud storage or get more storage please contact "_phaz" on discord</div>
 
             <div class="account-notice" style={{ display: 'flex' }}>
-              <Show when={!deletingPhotos()} fallback={ "We are deleting your photos, please leave this window open while we delete them." }>
+              <Show when={false} fallback={ "We are deleting your photos, please leave this window open while we delete them." }>
                 <div class="button-danger" onClick={() => window.ConfirmationBoxManager.SetConfirmationBox("You are about to delete all your photos from the cloud, and disable syncing. This will NOT delete any local files.", async () => {
                   // TODO: Rework all of this
 

src/Components/Structs/WorldCache.ts

···
+export class WorldCache{
+  expiresOn!: number;
+  worldData!: {
+    id: string,
+    name: string,
+    author: string,
+    authorId: string,
+    desc: string,
+    img: string,
+    maxUsers: number,
+    visits: number,
+    favourites: number,
+    tags: any,
+    from: string,
+    fromSite: string,
+    found: boolean
+  }
+}

src/index.tsx

···
     LoadingManager: LoadingManager;
     PhotoLoadingManager: PhotoLoadingManager;
     ConfirmationBoxManager: ConfirmationBoxManager;
-    PhotoViewerManager: PhotoViewerManager; 
+    PhotoViewerManager: PhotoViewerManager;
+    WorldCacheManager: WorldCacheManager;
 
     CloseAllPopups: (() => void)[];
     OS: string;
···
 import { PhotoLoadingManager } from "./Components/Managers/PhotoLoadingManager";
 import { ConfirmationBoxManager } from "./Components/Managers/ConfirmationBoxManager";
 import { PhotoViewerManager } from "./Components/Managers/PhotoViewerManager";
+import { WorldCacheManager } from "./Components/Managers/WorldCacheManager";
 
 window.AccountManager = new AccountManager();
 window.LoadingManager = new LoadingManager();
 window.PhotoLoadingManager = new PhotoLoadingManager();
 window.ConfirmationBoxManager = new ConfirmationBoxManager();
 window.PhotoViewerManager = new PhotoViewerManager();
+window.WorldCacheManager = new WorldCacheManager();
 
 (async () => {
   window.OS = await invoke('get_os');