From 51ec4166ed94fdbea86e3431bcc949601111243e Mon Sep 17 00:00:00 2001 From: shm Date: Sun, 3 Nov 2024 18:20:27 +0900 Subject: [PATCH 1/9] =?UTF-8?q?Fix:=20=E3=83=87=E3=82=A3=E3=83=AC=E3=82=AF?= =?UTF-8?q?=E3=83=88=E3=83=AA=E3=81=8C=E4=BD=9C=E6=88=90=E3=81=95=E3=82=8C?= =?UTF-8?q?=E3=81=AA=E3=81=84=E5=95=8F=E9=A1=8C=E3=81=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src-tauri/src/commands/background_image.rs | 27 ++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/src-tauri/src/commands/background_image.rs b/src-tauri/src/commands/background_image.rs index 9af7f48..786d92c 100644 --- a/src-tauri/src/commands/background_image.rs +++ b/src-tauri/src/commands/background_image.rs @@ -19,6 +19,13 @@ const BG_IMG_DIR_NAME: &str = "BgImages"; #[command] pub fn get_background_image(file_id: String) -> Result { let dir_path = get_app_data_dir(BG_IMG_DIR_NAME); + + // App/BgImages ディレクトリが存在しない場合新規作成 + if !dir_path.exists() { + fs::create_dir_all(&dir_path) + .map_err(|e| format!("Failed to create directory: {}", e))?; + } + let file_name = FILE_NAME_FORMAT.replace("{}", &file_id); let file_path = dir_path.join(file_name); @@ -47,6 +54,21 @@ pub struct BackgroundImage { pub fn get_background_images() -> Result, String> { let dir_path = get_app_data_dir(BG_IMG_DIR_NAME); + // App/BgImages ディレクトリが存在しない場合新規作成 + if !dir_path.exists() { + fs::create_dir_all(&dir_path) + .map_err(|e| format!("Failed to create directory: {}", e))?; + } + + let file_count: usize = match fs::read_dir(&dir_path) { + Ok(entries) => entries.count(), // 現在のファイル数をインデックスとして利用 + Err(_) => 0, // 読み込み失敗の場合は最初のファイルとして 0 + }; + + if file_count == 0 { + return Ok(vec![]); + } + // ディレクトリ内のファイル一覧を取得 match fs::read_dir(&dir_path) { Ok(entries) => { @@ -82,8 +104,9 @@ pub fn save_background_image(image_data: String) -> Result { let dir_path = get_app_data_dir(BG_IMG_DIR_NAME); // App/BgImages ディレクトリが存在しない場合新規作成 - if !dir_path.parent().unwrap().exists() { - fs::create_dir_all(dir_path.parent().unwrap()).unwrap(); + if !dir_path.exists() { + fs::create_dir_all(&dir_path) + .map_err(|e| format!("Failed to create directory: {}", e))?; } // Base64データのプレフィックスを除去 From 6c171f7fa693e1d134ff27c76de21d64bea03bc0 Mon Sep 17 00:00:00 2001 From: shm Date: Sun, 3 Nov 2024 18:30:52 +0900 Subject: [PATCH 2/9] =?UTF-8?q?=E4=BA=8C=E9=87=8D=E3=82=AF=E3=83=AA?= =?UTF-8?q?=E3=83=83=E3=82=AF=E5=AF=BE=E7=AD=96=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/forms/UploadImage/useUploadImageForm.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/forms/UploadImage/useUploadImageForm.ts b/src/components/forms/UploadImage/useUploadImageForm.ts index 6102832..ba1a621 100644 --- a/src/components/forms/UploadImage/useUploadImageForm.ts +++ b/src/components/forms/UploadImage/useUploadImageForm.ts @@ -16,6 +16,7 @@ const formSchema = z.object({ export const useUploadImage = () => { const [displayUrl, setDisplayUrl] = useState(null); const [fileName, setFilename] = useState(""); + const [isSubmitting, setIsSubmitting] = useState(false); const { saveBackgroundImage } = useBackgroundImage(); const form = useForm>({ @@ -26,12 +27,17 @@ export const useUploadImage = () => { }); const onSubmit = async (values: z.infer) => { + if (isSubmitting) return; + setIsSubmitting(true); + try { await saveBackgroundImage(values.picture); form.reset(); } catch (error) { console.error("Error saveBackgroundImage:", error); } + + setIsSubmitting(false); }; const picture = form.watch("picture"); From 439b90c2f4cddabeeac021d82ee199514114f504 Mon Sep 17 00:00:00 2001 From: shm Date: Sun, 3 Nov 2024 18:47:37 +0900 Subject: [PATCH 3/9] =?UTF-8?q?FIx:=20=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB?= =?UTF-8?q?ID=E3=81=AE=E7=94=9F=E6=88=90=E6=96=B9=E6=B3=95=E3=82=92?= =?UTF-8?q?=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src-tauri/Cargo.lock | 18 ++++++++++++++++-- src-tauri/Cargo.toml | 8 ++++++++ src-tauri/src/commands/background_image.rs | 17 ++++++----------- 3 files changed, 30 insertions(+), 13 deletions(-) diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock index 12084db..6b0bc90 100644 --- a/src-tauri/Cargo.lock +++ b/src-tauri/Cargo.lock @@ -1686,6 +1686,7 @@ dependencies = [ "tokio", "tracing", "tracing-subscriber", + "uuid", "windows 0.58.0", "wmi", ] @@ -4925,12 +4926,25 @@ checksum = "09cc8ee72d2a9becf2f2febe0205bbed8fc6615b7cb429ad062dc7b7ddd036a9" [[package]] name = "uuid" -version = "1.10.0" +version = "1.11.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "81dfa00651efa65069b0b6b651f4aaa31ba9e3c3ce0137aaad053604ee7e0314" +checksum = "f8c5f0a0af699448548ad1a2fbf920fb4bee257eae39953ba95cb84891a0446a" dependencies = [ "getrandom 0.2.15", + "rand 0.8.5", "serde", + "uuid-macro-internal", +] + +[[package]] +name = "uuid-macro-internal" +version = "1.11.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "6b91f57fe13a38d0ce9e28a03463d8d3c2468ed03d75375110ec71d93b449a08" +dependencies = [ + "proc-macro2", + "quote", + "syn 2.0.85", ] [[package]] diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 3f44524..5328e15 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -43,6 +43,14 @@ tauri-plugin-store = "2.1.0" base64 = "0.22" image = "0.25.4" +[dependencies.uuid] +version = "1.11.0" +features = [ + "v4", # Lets you generate random UUIDs + "fast-rng", # Use a faster (but still sufficiently random) RNG + "macro-diagnostics", # Enable better diagnostics for compile-time UUIDs +] + [features] # this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled. # If you use cargo directly instead of tauri's cli you can use this feature flag to switch between tauri's `dev` and `build` modes. diff --git a/src-tauri/src/commands/background_image.rs b/src-tauri/src/commands/background_image.rs index 786d92c..c46d481 100644 --- a/src-tauri/src/commands/background_image.rs +++ b/src-tauri/src/commands/background_image.rs @@ -5,6 +5,7 @@ use serde::{Deserialize, Serialize}; use std::fs; use std::fs::File; use tauri::command; +use uuid::Uuid; use crate::utils::file::get_app_data_dir; @@ -14,7 +15,7 @@ const BG_IMG_DIR_NAME: &str = "BgImages"; /// /// 背景画像を取得 /// -/// - `file_id`: 画像ファイルのインデックス +/// - `file_id`: 画像ファイルID /// #[command] pub fn get_background_image(file_id: String) -> Result { @@ -61,8 +62,8 @@ pub fn get_background_images() -> Result, String> { } let file_count: usize = match fs::read_dir(&dir_path) { - Ok(entries) => entries.count(), // 現在のファイル数をインデックスとして利用 - Err(_) => 0, // 読み込み失敗の場合は最初のファイルとして 0 + Ok(entries) => entries.count(), + Err(_) => 0, // 読み込み失敗の場合は最初のファイルとして 0 }; if file_count == 0 { @@ -119,13 +120,7 @@ pub fn save_background_image(image_data: String) -> Result { // 改行や余分な空白を除去 let cleaned_data = image_data.replace("\n", "").replace("\r", ""); - // ディレクトリ内のファイル数を取得し、それをインデックスとして利用 - let file_id: String = match fs::read_dir(&dir_path) { - Ok(entries) => entries.count(), // 現在のファイル数をインデックスとして利用 - Err(_) => 0, // 読み込み失敗の場合は最初のファイルとして 0 - } - .to_string(); - + let file_id = Uuid::new_v4().to_string(); let file_name = FILE_NAME_FORMAT.replace("{}", &file_id); let file_path = dir_path.join(file_name); @@ -151,7 +146,7 @@ pub fn save_background_image(image_data: String) -> Result { /// /// 背景画像を削除 -/// - `file_id`: 画像ファイルのインデックス +/// - `file_id`: 画像ファイルID /// #[tauri::command] pub fn delete_background_image(file_id: String) -> Result<(), String> { From f94abb515325000fd1263722f95ea5b7919648bc Mon Sep 17 00:00:00 2001 From: shm Date: Sun, 3 Nov 2024 18:51:46 +0900 Subject: [PATCH 4/9] =?UTF-8?q?Fix:=20Base64=E3=82=A8=E3=83=B3=E3=82=B3?= =?UTF-8?q?=E3=83=BC=E3=83=89=E3=81=AE=E6=96=B9=E6=B3=95=E3=82=92=E6=A8=99?= =?UTF-8?q?=E6=BA=96=E3=82=A8=E3=83=B3=E3=82=B8=E3=83=B3=E3=81=AB=E5=A4=89?= =?UTF-8?q?=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src-tauri/src/commands/background_image.rs | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src-tauri/src/commands/background_image.rs b/src-tauri/src/commands/background_image.rs index c46d481..b8a6ef8 100644 --- a/src-tauri/src/commands/background_image.rs +++ b/src-tauri/src/commands/background_image.rs @@ -1,4 +1,5 @@ -use base64::encode; +use base64::engine::general_purpose::STANDARD; +use base64::Engine; use image::load_from_memory; use image::ImageFormat; use serde::{Deserialize, Serialize}; @@ -32,7 +33,7 @@ pub fn get_background_image(file_id: String) -> Result { // 画像を読み込んでBase64にエンコード match fs::read(&file_path) { - Ok(image_data) => Ok(encode(image_data)), + Ok(image_data) => Ok(STANDARD.encode(image_data)), Err(e) => Err(format!("Failed to load image: {}", e)), } } @@ -81,7 +82,9 @@ pub fn get_background_images() -> Result, String> { .strip_prefix("bg-img-") .and_then(|s| s.strip_suffix(".png"))?; let file_path = entry.path(); - let image_data = fs::read(&file_path).ok().map(|data| encode(data))?; + let image_data = fs::read(&file_path) + .ok() + .map(|data| STANDARD.encode(data))?; Some(BackgroundImage { file_id: file_id.to_string(), image_data, @@ -125,7 +128,7 @@ pub fn save_background_image(image_data: String) -> Result { let file_path = dir_path.join(file_name); // Base64データをデコード - match base64::decode(&cleaned_data) { + match STANDARD.decode(&cleaned_data) { Ok(decoded_data) => { // 画像データをPNGとして保存 match load_from_memory(&decoded_data) { From b3c91c6381d904d1cea3d7241d0c00b36479fa6c Mon Sep 17 00:00:00 2001 From: shm Date: Sun, 3 Nov 2024 18:55:11 +0900 Subject: [PATCH 5/9] =?UTF-8?q?Fix:=20=E4=B8=8D=E8=A6=81=E3=81=AA=E3=83=95?= =?UTF-8?q?=E3=82=A1=E3=82=A4=E3=83=AB=E3=82=AB=E3=82=A6=E3=83=B3=E3=83=88?= =?UTF-8?q?=E3=81=AE=E5=8F=96=E5=BE=97=E5=87=A6=E7=90=86=E3=82=92=E5=89=8A?= =?UTF-8?q?=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src-tauri/src/commands/background_image.rs | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src-tauri/src/commands/background_image.rs b/src-tauri/src/commands/background_image.rs index b8a6ef8..0c8dede 100644 --- a/src-tauri/src/commands/background_image.rs +++ b/src-tauri/src/commands/background_image.rs @@ -62,15 +62,6 @@ pub fn get_background_images() -> Result, String> { .map_err(|e| format!("Failed to create directory: {}", e))?; } - let file_count: usize = match fs::read_dir(&dir_path) { - Ok(entries) => entries.count(), - Err(_) => 0, // 読み込み失敗の場合は最初のファイルとして 0 - }; - - if file_count == 0 { - return Ok(vec![]); - } - // ディレクトリ内のファイル一覧を取得 match fs::read_dir(&dir_path) { Ok(entries) => { From 8efd3adb151922328710fe2ac9374e54482303d0 Mon Sep 17 00:00:00 2001 From: shm Date: Sun, 3 Nov 2024 19:07:20 +0900 Subject: [PATCH 6/9] =?UTF-8?q?Fix:=20UUID=E7=94=9F=E6=88=90=E6=96=B9?= =?UTF-8?q?=E6=B3=95=E3=82=92v7=E3=81=AB=E5=A4=89=E6=9B=B4=E3=81=97?= =?UTF-8?q?=E3=80=81=E8=83=8C=E6=99=AF=E7=94=BB=E5=83=8F=E3=83=AA=E3=82=B9?= =?UTF-8?q?=E3=83=88=E3=82=92=E3=82=BD=E3=83=BC=E3=83=89=E3=81=A7=E3=81=8D?= =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src-tauri/Cargo.toml | 2 +- src-tauri/src/commands/background_image.rs | 6 +- .../SelectBackgroundImage.tsx | 61 +++++++++---------- 3 files changed, 34 insertions(+), 35 deletions(-) diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 5328e15..17913af 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -46,7 +46,7 @@ image = "0.25.4" [dependencies.uuid] version = "1.11.0" features = [ - "v4", # Lets you generate random UUIDs + "v7", # Lets you generate random UUIDs "fast-rng", # Use a faster (but still sufficiently random) RNG "macro-diagnostics", # Enable better diagnostics for compile-time UUIDs ] diff --git a/src-tauri/src/commands/background_image.rs b/src-tauri/src/commands/background_image.rs index 0c8dede..0e868ca 100644 --- a/src-tauri/src/commands/background_image.rs +++ b/src-tauri/src/commands/background_image.rs @@ -65,7 +65,7 @@ pub fn get_background_images() -> Result, String> { // ディレクトリ内のファイル一覧を取得 match fs::read_dir(&dir_path) { Ok(entries) => { - let images: Vec = entries + let mut images: Vec = entries .filter_map(|entry| { let entry = entry.ok()?; let file_name = entry.file_name().into_string().ok()?; @@ -82,6 +82,8 @@ pub fn get_background_images() -> Result, String> { }) }) .collect(); + + images.sort_by(|a, b| b.file_id.cmp(&a.file_id)); Ok(images) } Err(e) => Err(format!("Failed to read directory: {}", e)), @@ -114,7 +116,7 @@ pub fn save_background_image(image_data: String) -> Result { // 改行や余分な空白を除去 let cleaned_data = image_data.replace("\n", "").replace("\r", ""); - let file_id = Uuid::new_v4().to_string(); + let file_id = Uuid::now_v7().to_string(); let file_name = FILE_NAME_FORMAT.replace("{}", &file_id); let file_path = dir_path.join(file_name); diff --git a/src/components/forms/SelectBackgroundImage/SelectBackgroundImage.tsx b/src/components/forms/SelectBackgroundImage/SelectBackgroundImage.tsx index a0a7468..b58767f 100644 --- a/src/components/forms/SelectBackgroundImage/SelectBackgroundImage.tsx +++ b/src/components/forms/SelectBackgroundImage/SelectBackgroundImage.tsx @@ -38,38 +38,35 @@ export const BackgroundImageList = () => { )} - {backgroundImageList - .slice() - .reverse() - .map((image) => ( -
- - -
- ))} + {backgroundImageList.map((image) => ( +
+ + +
+ ))} ); }; From a03b71d966b4e21af7a715893593d45bab365f46 Mon Sep 17 00:00:00 2001 From: shm Date: Sun, 3 Nov 2024 19:23:02 +0900 Subject: [PATCH 7/9] =?UTF-8?q?Fix:=20=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB?= =?UTF-8?q?=E5=87=A6=E7=90=86=E3=81=AE=E9=9D=9E=E5=90=8C=E6=9C=9F=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src-tauri/src/commands/background_image.rs | 70 +++++++++++++--------- 1 file changed, 42 insertions(+), 28 deletions(-) diff --git a/src-tauri/src/commands/background_image.rs b/src-tauri/src/commands/background_image.rs index 0e868ca..86e4d42 100644 --- a/src-tauri/src/commands/background_image.rs +++ b/src-tauri/src/commands/background_image.rs @@ -3,9 +3,9 @@ use base64::Engine; use image::load_from_memory; use image::ImageFormat; use serde::{Deserialize, Serialize}; -use std::fs; -use std::fs::File; use tauri::command; +use tokio::fs; +use tokio::io::AsyncWriteExt; use uuid::Uuid; use crate::utils::file::get_app_data_dir; @@ -19,12 +19,13 @@ const BG_IMG_DIR_NAME: &str = "BgImages"; /// - `file_id`: 画像ファイルID /// #[command] -pub fn get_background_image(file_id: String) -> Result { +pub async fn get_background_image(file_id: String) -> Result { let dir_path = get_app_data_dir(BG_IMG_DIR_NAME); // App/BgImages ディレクトリが存在しない場合新規作成 if !dir_path.exists() { fs::create_dir_all(&dir_path) + .await .map_err(|e| format!("Failed to create directory: {}", e))?; } @@ -32,7 +33,7 @@ pub fn get_background_image(file_id: String) -> Result { let file_path = dir_path.join(file_name); // 画像を読み込んでBase64にエンコード - match fs::read(&file_path) { + match fs::read(&file_path).await { Ok(image_data) => Ok(STANDARD.encode(image_data)), Err(e) => Err(format!("Failed to load image: {}", e)), } @@ -53,35 +54,37 @@ pub struct BackgroundImage { /// BG_IMG_DIR_NAME ディレクトリ内の背景画像一覧を取得 /// #[command] -pub fn get_background_images() -> Result, String> { +pub async fn get_background_images() -> Result, String> { let dir_path = get_app_data_dir(BG_IMG_DIR_NAME); // App/BgImages ディレクトリが存在しない場合新規作成 if !dir_path.exists() { fs::create_dir_all(&dir_path) + .await .map_err(|e| format!("Failed to create directory: {}", e))?; } // ディレクトリ内のファイル一覧を取得 - match fs::read_dir(&dir_path) { - Ok(entries) => { - let mut images: Vec = entries - .filter_map(|entry| { - let entry = entry.ok()?; - let file_name = entry.file_name().into_string().ok()?; - let file_id = file_name + match fs::read_dir(&dir_path).await { + Ok(mut entries) => { + let mut images: Vec = Vec::new(); + + while let Some(entry) = entries.next_entry().await.ok().flatten() { + if let Some(file_name) = entry.file_name().to_str() { + if let Some(file_id) = file_name .strip_prefix("bg-img-") - .and_then(|s| s.strip_suffix(".png"))?; - let file_path = entry.path(); - let image_data = fs::read(&file_path) - .ok() - .map(|data| STANDARD.encode(data))?; - Some(BackgroundImage { - file_id: file_id.to_string(), - image_data, - }) - }) - .collect(); + .and_then(|s| s.strip_suffix(".png")) + { + let file_path = entry.path(); + if let Ok(image_data) = fs::read(&file_path).await { + images.push(BackgroundImage { + file_id: file_id.to_string(), + image_data: STANDARD.encode(image_data), + }); + } + } + } + } images.sort_by(|a, b| b.file_id.cmp(&a.file_id)); Ok(images) @@ -97,12 +100,13 @@ pub fn get_background_images() -> Result, String> { /// - returns: `file_id` /// #[command] -pub fn save_background_image(image_data: String) -> Result { +pub async fn save_background_image(image_data: String) -> Result { let dir_path = get_app_data_dir(BG_IMG_DIR_NAME); // App/BgImages ディレクトリが存在しない場合新規作成 if !dir_path.exists() { fs::create_dir_all(&dir_path) + .await .map_err(|e| format!("Failed to create directory: {}", e))?; } @@ -126,10 +130,20 @@ pub fn save_background_image(image_data: String) -> Result { // 画像データをPNGとして保存 match load_from_memory(&decoded_data) { Ok(image) => { - let mut file = File::create(&file_path) + let mut file = fs::File::create(&file_path) + .await .map_err(|e| format!("Failed to create file: {}", e))?; + + // 非同期で画像データを書き込む + let mut buffer = Vec::new(); + let mut cursor = std::io::Cursor::new(&mut buffer); image - .write_to(&mut file, ImageFormat::Png) + .write_to(&mut cursor, ImageFormat::Png) + .map_err(|e| format!("Failed to convert image to PNG format: {}", e))?; + + file + .write_all(&buffer) + .await .map_err(|e| format!("Failed to save image as PNG: {}", e))?; Ok(file_id) } @@ -145,12 +159,12 @@ pub fn save_background_image(image_data: String) -> Result { /// - `file_id`: 画像ファイルID /// #[tauri::command] -pub fn delete_background_image(file_id: String) -> Result<(), String> { +pub async fn delete_background_image(file_id: String) -> Result<(), String> { let dir_path = get_app_data_dir(BG_IMG_DIR_NAME); let file_name = FILE_NAME_FORMAT.replace("{}", &file_id); let file_path = dir_path.join(file_name); - match fs::remove_file(&file_path) { + match fs::remove_file(&file_path).await { Ok(_) => Ok(()), Err(e) => Err(format!("Failed to delete image: {}", e)), } From 965b358f75c0f8163b1ac3bee57eaa2d2ecd6c39 Mon Sep 17 00:00:00 2001 From: shm Date: Sun, 3 Nov 2024 21:25:26 +0900 Subject: [PATCH 8/9] =?UTF-8?q?Fix:=20=E8=83=8C=E6=99=AF=E7=94=BB=E5=83=8F?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=99=82=E3=81=AE=E6=8C=99=E5=8B=95=E3=82=92?= =?UTF-8?q?=E5=BE=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 41 ++++++++++++------- .../SelectBackgroundImage.tsx | 4 +- .../forms/UploadImage/UploadImage.tsx | 14 +++++-- .../forms/UploadImage/useUploadImageForm.ts | 1 + 4 files changed, 40 insertions(+), 20 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 6c127b9..474783b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import Dashboard from "./template/Dashboard"; import ChartTemplate from "./template/Usage"; import "./index.css"; @@ -26,7 +26,10 @@ const onError = (error: Error, info: ErrorInfo) => { const Page = () => { const { settings } = useSettingsAtom(); const { toggle } = useDarkMode(); - const { backgroundImage } = useBackgroundImage(); + const { backgroundImage: nextImage } = useBackgroundImage(); + + const [currentImage, setCurrentImage] = useState(nextImage); + const [opacity, setOpacity] = useState(1); useErrorModalListener(); useUsageUpdater("cpu"); @@ -41,6 +44,16 @@ const Page = () => { } }, [settings.theme, toggle]); + useEffect(() => { + setOpacity(0); + const fadeOutTimeout = setTimeout(() => { + setCurrentImage(nextImage); + setOpacity(1); + }, 500); + + return () => clearTimeout(fadeOutTimeout); + }, [nextImage]); + const displayTargets: Record = { dashboard: ( @@ -57,18 +70,18 @@ const Page = () => { return ( -
- {backgroundImage && ( -
- )} +
+
{displayTargets[settings.state.display]} diff --git a/src/components/forms/SelectBackgroundImage/SelectBackgroundImage.tsx b/src/components/forms/SelectBackgroundImage/SelectBackgroundImage.tsx index b58767f..b662e8b 100644 --- a/src/components/forms/SelectBackgroundImage/SelectBackgroundImage.tsx +++ b/src/components/forms/SelectBackgroundImage/SelectBackgroundImage.tsx @@ -21,14 +21,14 @@ export const BackgroundImageList = () => { }); return ( -
+
{backgroundImageList.length > 0 && (
-
diff --git a/src/components/forms/UploadImage/useUploadImageForm.ts b/src/components/forms/UploadImage/useUploadImageForm.ts index ba1a621..0554ca1 100644 --- a/src/components/forms/UploadImage/useUploadImageForm.ts +++ b/src/components/forms/UploadImage/useUploadImageForm.ts @@ -56,6 +56,7 @@ export const useUploadImage = () => { form, picture, onSubmit, + isSubmitting, fileName, displayUrl, }; From f49441829e9a4ad9f565d2caf34aa24f6b8bc959 Mon Sep 17 00:00:00 2001 From: shm Date: Mon, 4 Nov 2024 00:28:22 +0900 Subject: [PATCH 9/9] =?UTF-8?q?Fix:=20=E4=B8=8D=E8=A6=81=E3=81=AAimport=20?= =?UTF-8?q?=E3=81=AE=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/forms/UploadImage/UploadImage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/forms/UploadImage/UploadImage.tsx b/src/components/forms/UploadImage/UploadImage.tsx index 9eec5fe..c694e73 100644 --- a/src/components/forms/UploadImage/UploadImage.tsx +++ b/src/components/forms/UploadImage/UploadImage.tsx @@ -1,4 +1,3 @@ -import { cn } from "@/lib/utils"; import { ImageSquare, Spinner, UploadSimple } from "@phosphor-icons/react"; import { Button } from "../../ui/button"; import {