Fixed initial profile loading

Ultreon · Apr 2, 2024 · 297c44f · 297c44f
1 parent 416edea
commit 297c44f
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 37 deletions.
diff --git a/.run/Tauri Build.run.xml b/.run/Tauri Build.run.xml
@@ -1,6 +1,6 @@
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="Tauri Build" type="CargoCommandRunConfiguration" factoryName="Cargo Command">
-    <option name="command" value="tauri build --target x86_64-pc-windows-msvc" />
+    <option name="command" value="tauri build" />
     <option name="workingDirectory" value="file://$PROJECT_DIR$/src-tauri" />
     <envs />
     <option name="emulateTerminal" value="true" />

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ultreon-appcenter",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "type": "module",
   "scripts": {

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "Ultreon App Center",
-    "version": "0.1.0"
+    "version": "0.1.1"
   },
   "tauri": {
     "allowlist": {
@@ -109,6 +109,7 @@
         "resizable": true,
         "title": "Ultreon AppCenter",
         "width": 1024,
+        "visible": true,
         "transparent": true,
         "decorations": false,
         "acceptFirstMouse": true,

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
@@ -6,7 +6,7 @@ import './SideBar.css';
 export default function SideBar() {
     return (
         <div id="SideBar">
-            <a href="#"><MdHome/></a>
+            <a href="#home"><MdHome/></a>
             <a href="#apps"><MdApps/></a>
         </div>
     )

diff --git a/src/main.css b/src/main.css
@@ -276,3 +276,7 @@ a:hover {
     bottom: 35px;
     color: black;
 }
+
+.RefreshButton {
+    margin: 8px;
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -13,7 +13,7 @@ import {window as appWindow} from "@tauri-apps/api";
 
 const router = createHashRouter([
     {
-        path: "/",
+        path: "home",
         element: <HomePage/>,
         errorElement: <h1>Error 404</h1>,
     },
@@ -22,10 +22,10 @@ const router = createHashRouter([
         element: <AppsPage/>,
         errorElement: <h1>Error 404</h1>
     },
-    // {
-    //     path: "instances",
-    //     element: <InstancesPage/>
-    // },
+    {
+        path: "/",
+        element: <>{window.location.href = "#home"}</>
+    },
     {
         path: "project",
         element: <ProjectPage/>

diff --git a/src/routes/home/HomePage.tsx b/src/routes/home/HomePage.tsx
@@ -1,11 +1,17 @@
-import {MouseEvent, ReactElement, useEffect, useState} from 'react';
+import {
+    MouseEvent,
+    ReactElement,
+    useEffect,
+    useState
+} from 'react';
 import './HomePage.css';
 import {invoke} from '@tauri-apps/api'
 import {listen} from '@tauri-apps/api/event'
-import {load, Profile, PROFILES} from '../../util/Profiles.tsx';
+import {load, Profile, getProfiles} from '../../util/Profiles.tsx';
 import {toast} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import ToastComponent from "../../components/CustomToast.tsx";
+import {MdRefresh} from "react-icons/md";
 
 let selectedProfile: Profile | null = null;
 
@@ -82,8 +88,7 @@ function ProfileEntry(element: Profile, selected: boolean, onClick: (profile: Pr
         if (event.currentTarget.classList.contains('Disabled')) return;
 
         const elem = event.currentTarget
-        if (PROFILES.length === 0) await load();
-        const app = PROFILES.find(value => value.app == elem.ariaLabel)
+        const app = (getProfiles()).find(value => value.app == elem.ariaLabel)
         selectedProfile = app === undefined ? null : app;
 
         if (selectedProfile === null) {
@@ -97,7 +102,8 @@ function ProfileEntry(element: Profile, selected: boolean, onClick: (profile: Pr
     }
 
     return (
-        <button className={selected ? "ProfileEntry Selected" : "ProfileEntry"} aria-label={element.app} key={element.app} type="button"
+        <button className={selected ? "ProfileEntry Selected" : "ProfileEntry"} aria-label={element.app}
+                key={element.app} type="button"
                 onClick={SelectProfile}>
             {element.name}
         </button>
@@ -141,42 +147,46 @@ export class DownloadInfo {
     }
 }
 
+let loaded = false
+
 export default function HomePage() {
-    const [items, setItems] = useState<Profile[]>(PROFILES);
+    const [items, setItems] = useState<Profile[]>(getProfiles());
     const [newItem, setNewItem] = useState<Profile | null>(null);
     const [progress, setProgress] = useState<DownloadInfo>(new DownloadInfo());
     const [selectedProfile, setSelectedProfile] = useState<Profile | null>(null);
 
-    useEffect(() => {
-        const loadProfiles = async () => {
-            try {
-                if (PROFILES.length === 0) await load();
-
-                setItems(PROFILES);
-            } catch (error) {
-                console.error('Error loading profiles:', error);
-            }
-        };
-
-        loadProfiles().then(() => {
-        });
-    }, []);
-
     useEffect(() => {
         if (newItem !== null) {
             setItems((prevItems) => {
                 return [...prevItems, newItem];
             });
             setNewItem(null);
         }
+
+        setItems(getProfiles())
     }, [newItem]);
 
     const LIST = (
         <div id="SidePanel">
-            {items.filter((item, pos, self) => self.findIndex(it => item.name == it.name) == pos).map((profile) => ProfileEntry(profile, selectedProfile === profile, setSelectedProfile))}
+            {
+                items.length > 0
+                    ? <div>
+                        {items.filter((item, pos, self) => self.findIndex(it => item.name == it.name) == pos).map((profile) => {
+                            if (profile === null) return <></>;
+                            return ProfileEntry(profile, selectedProfile === profile, setSelectedProfile)
+                        })
+                        }
+                    </div> : <>
+                        <p>No profiles</p>
+                        <button id="RefreshButtonHome" type="button" className="RefreshButton" onClick={async () => {
+                            setItems([])
+                            await load();
+                            setItems(getProfiles());
+                        }}><MdRefresh/></button>
+                    </>
+            }
         </div>
     )
-
     async function importProfile(name: string) {
         try {
             console.log("Attempting to import profile:" + name);
@@ -187,9 +197,8 @@ export default function HomePage() {
             }
 
             console.log("Imported profile: %s", profile.name);
-            if (PROFILES.length === 0) await load();
-            PROFILES.push(profile);
-            console.log(PROFILES);
+            (getProfiles()).push(profile);
+            console.log(getProfiles());
 
             setNewItem(profile)
             hideModal();
@@ -225,6 +234,17 @@ export default function HomePage() {
         </div>
     )
 
+    useEffect(() => {
+        (async () => {
+            if (loaded) return
+            setItems([])
+            await load().then(profiles => {
+                setItems(profiles)
+                loaded = true
+            });
+        })();
+    });
+
     return (
         <>
             {Content(LIST, MODAL, PROGRESS)}

diff --git a/src/util/Profiles.tsx b/src/util/Profiles.tsx
@@ -7,16 +7,22 @@ export class Profile {
 }
 
 // eslint-disable-next-line react-refresh/only-export-components
-export let PROFILES: Array<Profile> = [];
+const PROFILES: Array<Profile> = [];
 
 export async function load() {
   try {
-    PROFILES = []
+    PROFILES.length = 0
     PROFILES.push(...(await invoke("load_profiles") as Array<Profile>));
     console.log(PROFILES)
+    return PROFILES
   } catch(error) {
     console.error(error)
+    return []
   }
 }
 
+export function getProfiles() {
+  return PROFILES
+}
+
 console.log(PROFILES)