From d0aeca324645c55633fdb91e30f38e2975aa74cd Mon Sep 17 00:00:00 2001
From: SARDONYX-sard <68905624+SARDONYX-sard@users.noreply.github.com>
Date: Sat, 7 Oct 2023 06:11:00 +0900
Subject: [PATCH] refactor(front): merge state to `useDynStyle`

---
 frontend/src/components/pages/converter.tsx |  7 +++----
 frontend/src/components/pages/settings.tsx  |  5 ++---
 frontend/src/hooks/dyn_style.ts             | 12 ++++++++----
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/pages/converter.tsx b/frontend/src/components/pages/converter.tsx
index e9809fb..a0f5e66 100644
--- a/frontend/src/components/pages/converter.tsx
+++ b/frontend/src/components/pages/converter.tsx
@@ -1,14 +1,13 @@
 "use client";
 
-import { Toaster } from "react-hot-toast";
-import { useDynStyle, useStorageState, useToastLimit } from "@/hooks";
 import { ConvertForm } from "@/components/form";
+import { useDynStyle, useToastLimit } from "@/hooks";
 import { Box } from "@mui/material";
+import { Toaster } from "react-hot-toast";
 
 export default function Converter() {
   useToastLimit(1);
-  const [style, _setStyle] = useStorageState("customCSS");
-  useDynStyle(style);
+  useDynStyle();
 
   return (
     <>
diff --git a/frontend/src/components/pages/settings.tsx b/frontend/src/components/pages/settings.tsx
index 38c118a..a7c5ca7 100644
--- a/frontend/src/components/pages/settings.tsx
+++ b/frontend/src/components/pages/settings.tsx
@@ -1,11 +1,10 @@
 "use client";
 
 import { Box, Button, TextField } from "@mui/material";
-import { useDynStyle, useStorageState } from "@/hooks";
+import { useDynStyle } from "@/hooks";
 
 export default function Settings() {
-  const [style, setStyle] = useStorageState("customCSS");
-  useDynStyle(style);
+  const [style, setStyle] = useDynStyle();
 
   return (
     <Box
diff --git a/frontend/src/hooks/dyn_style.ts b/frontend/src/hooks/dyn_style.ts
index 15cd211..f54ae4a 100644
--- a/frontend/src/hooks/dyn_style.ts
+++ b/frontend/src/hooks/dyn_style.ts
@@ -1,4 +1,5 @@
 import { useInsertionEffect } from "react";
+import { useStorageState } from "@/hooks";
 
 /**
  * Inject CSS dynamically on the client side.
@@ -6,15 +7,18 @@ import { useInsertionEffect } from "react";
  * Frequent style recalculation is inevitable,
  * but this hook can solve the delay problem caused by style injection lifecycle discrepancies.
  *  - See: [useInsertionEffect](https://react.dev/reference/react/useInsertionEffect)
- * @param css
  */
-export function useDynStyle(css: string) {
+export function useDynStyle() {
+  const [style, setStyle] = useStorageState("customCSS");
+
   useInsertionEffect(() => {
     const styleElement = document.createElement("style");
-    styleElement.innerHTML = css;
+    styleElement.innerHTML = style;
     document.head.appendChild(styleElement);
     return () => {
       document.head.removeChild(styleElement);
     };
-  }, [css]);
+  }, [style]);
+
+  return [style, setStyle] as const;
 }