[Update/TMP] Save plugin status that if enabled or not(on store.js, yet).

Handle download.

src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_download_button/_DownloadButton.module.scss

@@ -13,6 +13,7 @@
     background-color: var(--dark_800_color);
     padding: 0.8rem;
     flex-shrink: 0;
+    border-radius: 0.2rem;
     &:hover {
         background-color: var(--dark_750_color);
     }

src-ui/app/config_page/setting_section/setting_box/_components/download_plugins/DownloadPlugins.jsx

@@ -2,30 +2,32 @@ import {
     SwitchBox,
 } from "../index";
 import { _DownloadButton } from "../_atoms/_download_button/_DownloadButton";
+import styles from "./DownloadPlugins.module.scss";
 
-export const DownloadPlugins = ({plugin_info, ...props}) => {
+export const DownloadPlugins = ({plugin_info, plugin_status, ...props}) => {
-
     const option = {
+        id: plugin_info.plugin_id,
         is_pending: plugin_info.is_pending,
         is_downloaded: plugin_info.is_downloaded,
-    }
+        progress: null,
-    console.log(plugin_info);
+    };
 
 
     return (
-        <div>
+        <div className={styles.container}>
-            {/* <SwitchBox
+            {plugin_info.is_downloaded && plugin_info.is_plugin_supported &&
-                variable={currentEnableAutoMicSelect}
+                <SwitchBox
-                toggleFunction={toggleEnableAutoMicSelect}
+                    variable={plugin_status}
-            /> */}
+                    toggleFunction={plugin_status.toggleFunction}
+                />}
             {plugin_info.is_plugin_supported ?
                 <_DownloadButton
                     option={option}
                     downloadStartFunction={props.downloadStartFunction}
                 />
             :
-                <div>
+                <div className={styles.unavailable_text}>
-                    Unavailable
+                    Downloaded but outdated.
                 </div>
             }
         </div>

src-ui/app/config_page/setting_section/setting_box/_components/download_plugins/DownloadPlugins.module.scss

@@ -0,0 +1,7 @@
+.container {
+}
+
+.unavailable_text {
+    padding: 1rem;
+    font-size: 1.2rem;
+}

src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.jsx

@@ -16,31 +16,41 @@ const PluginDownloadContainer = () => {
         downloadAndExtractPlugin,
         currentPluginsInfoList,
         updatePluginsInfoList,
+        currentSavedPluginsStatus,
+        updateSavedPluginsStatus,
+        currentLoadedPluginsList,
+        // updateLoadedPluginsList,
     } = usePlugins();
 
-    const downloadStartFunction = async (plugin) => {
+    const downloadStartFunction = async (target_plugin_id) => {
         updatePluginsInfoList((old_value) => {
             const new_value = old_value.data.map(d => {
-                if (d.plugin_id === plugin.plugin_id) {
+                if (d.plugin_id === target_plugin_id) {
                     d.is_pending = true;
                 }
                 return d;
             });
             return new_value;
         });
-        await downloadAndExtractPlugin(plugin);
+        const target_plugin_info = currentPluginsInfoList.data.find(d => d.plugin_id === target_plugin_id);
+        downloadAndExtractPlugin(target_plugin_info).then(() => {
             updatePluginsInfoList((old_value) => {
                 const new_value = old_value.data.map(d => {
-                if (d.plugin_id === plugin.plugin_id) {
+                    if (d.plugin_id === target_plugin_id) {
                         d.is_pending = false;
+                        d.is_downloaded = true;
                     }
                     return d;
                 });
                 return new_value;
             });
+        })
     };
+    // console.log(currentPluginsInfoList.data);
 
-    const plugin_list = currentPluginsInfoList.data;
+
+    // const plugin_list = currentPluginsInfoList.data;
+    const plugin_list = [...currentPluginsInfoList.data, ...currentLoadedPluginsList.data];
     // const plugin_list = [
     //     {
     //         title: "VRCT Example Plugins 1",
@@ -64,6 +74,26 @@ const PluginDownloadContainer = () => {
     //     },
     // ];
 
+    const getTargetPluginStatus = (target_plugin_id) => {
+        let plugin_status = currentSavedPluginsStatus.data.find(d => d.plugin_id === target_plugin_id) ?? {};
+        const is_downloaded = currentLoadedPluginsList.data.find(d => d.plugin_id === target_plugin_id) ? true : false;
+
+        plugin_status.toggleFunction = () => {
+            updateSavedPluginsStatus((old_value) => {
+                const new_value = old_value.data.map(d => {
+                    if (d.plugin_id === target_plugin_id) {
+                        d.data = !d.data;
+                        d.state = "ok";
+                    }
+                    return d;
+                });
+                return new_value;
+            });
+        }
+        plugin_status.is_downloaded = is_downloaded;
+        plugin_status.is_pending = false;
+        return plugin_status;
+    };
 
 
 
@@ -85,6 +115,7 @@ const PluginDownloadContainer = () => {
                             </div>
                             <DownloadPlugins
                                 plugin_info={plugin}
+                                plugin_status={getTargetPluginStatus(plugin.plugin_id)}
                                 downloadStartFunction={downloadStartFunction}
                             />
                         </div>

src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.module.scss

@@ -20,6 +20,13 @@
     }
 }
 
+.plugin_info_wrapper {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+}
+
 .title {
     font-size: 1.6rem;
 }

src-ui/app/main_page/main_section/PluginHost.jsx

@@ -3,7 +3,7 @@ import { usePlugins } from "@logics_configs";
 
 export const PluginHost = () => {
     const { currentLoadedPluginsList } = usePlugins();
-    console.log(currentLoadedPluginsList.data);
+    // console.log(currentLoadedPluginsList.data);
 
     return (
         <div>

src-ui/logics/common/useFetch.js

@@ -2,7 +2,7 @@ import { fetch as tauriFetch, ResponseType } from "@tauri-apps/api/http";
 
 export const useFetch = () => {
     const asyncTauriFetchGithub = async (url) => {
-        console.log("tauriFetch");
+        console.log("tauriFetch", url);
 
         const release_response = await tauriFetch(url, {
             method: "GET",

src-ui/logics/configs/plugins/usePlugins.js

@@ -4,6 +4,7 @@ import { invoke } from "@tauri-apps/api/tauri";
 import {
     createAtomWithHook,
     useStore_LoadedPluginsList,
+    useStore_SavedPluginsStatus,
     useStore_PluginsInfoList,
 } from "@store";
 
@@ -21,6 +22,7 @@ const PLUGIN_LIST_URL = "https://raw.githubusercontent.com/ShiinaSakamoto/vrct_p
 
 export const usePlugins = () => {
     const { currentLoadedPluginsList, updateLoadedPluginsList } = useStore_LoadedPluginsList();
+    const { currentSavedPluginsStatus, updateSavedPluginsStatus } = useStore_SavedPluginsStatus();
     const { currentPluginsInfoList, updatePluginsInfoList, pendingPluginsInfoList } = useStore_PluginsInfoList();
     const { currentSoftwareVersion } = useSoftwareVersion();
 
@@ -245,6 +247,9 @@ export const usePlugins = () => {
         currentLoadedPluginsList,
         updateLoadedPluginsList,
 
+        currentSavedPluginsStatus,
+        updateSavedPluginsStatus,
+
         currentPluginsInfoList,
         updatePluginsInfoList,
     };

src-ui/store.js

@@ -276,6 +276,10 @@ export const { atomInstance: Atom_Hotkeys, useHook: useStore_Hotkeys } = createA
 
 // Plugins
 export const { atomInstance: Atom_LoadedPluginsList, useHook: useStore_LoadedPluginsList } = createAtomWithHook([], "LoadedPluginsList");
+export const { atomInstance: Atom_SavedPluginsStatus, useHook: useStore_SavedPluginsStatus } = createAtomWithHook([
+    { plugin_id: "vrct_plugin_example_1", is_enabled: true },
+    { plugin_id: "vrct_plugin_example_2", is_enabled: false }
+], "SavedPluginsStatus");
 export const { atomInstance: Atom_PluginsInfoList, useHook: useStore_PluginsInfoList } = createAtomWithHook([], "PluginsInfoList");
 
 // Advanced Settings