refactor: use normal variable instead of component state for better maintaince

src/TransformGridItem/index.tsx

@@ -25,13 +25,14 @@ interface TransformGridItemProp {
 export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
   const [value, setValue] = useRecoilState(EditorValueState)
   const [options, setOptions] = useState(transform.options)
-  const [previewDisabled, setPreviewDisabled] = useState(false)
+  const [closedToggle, setClosedToggle] = useLocalStorage(`transform_closed__${transform.name}`, false)
-  const [alreadyClosed, setAlreadyClosed] = useState(false)
-  const [closed, setClosed] = useLocalStorage(`transform_closed__${transform.name}`, false)
   const [result, setResult] = useState<WrappedTransformResult>({
     error: false,
     value: ''
   })
+  
+  const previewDisabled = value.length > 30000
+  const closed = previewDisabled || closedToggle
 
   const triggerTransform = async () =>
     await transform
@@ -40,11 +41,8 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
         setResult(result)
         return result
       })
-
-  useEffect(() => {
-    setAlreadyClosed(closed)
-  }, [])
   
+  // trigger transform when value, option or closed state changed
   useEffect(() => {
     if (previewDisabled)
       return
@@ -52,10 +50,20 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
     triggerTransform()
   }, [value, options, closed])
 
+  // reset error state when option changed
   useEffect(() => {
-    if (value.length > 30000) {
+    if (!previewDisabled)
-      setClosed(true)
+      return
-      setPreviewDisabled(true)
+
+    setResult({
+      error: false,
+      value: ''
+    })
+  }, [options])
+
+  // forcely disable preview when value is longer than 30,000 chars
+  useEffect(() => {
+    if (previewDisabled) {
       setResult({
         error: false,
         value: ''
@@ -63,11 +71,7 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
       return
     }
 
-    if (previewDisabled) {
+    triggerTransform()
-      setClosed(alreadyClosed)
-      triggerTransform()
-      setPreviewDisabled(false)
-    }
   }, [value])
 
   const onCheckboxOptionChanged =
@@ -132,12 +136,8 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
   const onLabelClicked = async () => {
     if (previewDisabled)
       return
-
-    if (closed)
-      triggerTransform()
     
-    setClosed(!closed)
+    setClosedToggle(!closed)
-    setAlreadyClosed(!closed)
   }
 
   return (
@@ -152,7 +152,7 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
           </Button>
         </div>
 
-        <Tooltip id={`${transform.name}-tooltip`} place="bottom">
+        <Tooltip className={style.error} id={`${transform.name}-tooltip`} place="bottom">
           {previewDisabled && result.error && result.value}
         </Tooltip>
         

src/TransformGridItem/style.module.scss

@@ -13,6 +13,10 @@
     background-color: #323232;
     border-radius: 4px;
 
+    .error {
+      color: #ffcaca;
+    }
+
     .name {
       font-size: inherit;
       padding: 14px 6px;