refactor: use Options instead of Errors

app/converters/json-yaml/page.tsx

@@ -1,9 +1,12 @@
 "use client";
 
 import { useCallback, useMemo, useState } from "react";
+import * as O from "fp-ts/lib/Option";
 import YAML from "yaml";
 
 import { toolGroups } from "@/config/tools";
+import { safeJsonParse } from "@/lib/json";
+import { safeYamlParse } from "@/lib/yaml";
 import { Editor, EditorProps } from "@/components/ui/editor";
 import {
   Select,
@@ -34,28 +37,24 @@ export default function Page() {
 
   const setJsonReactively = useCallback(
     (text: string) => {
-      setJson(text);
+      const parsed = safeJsonParse(text);
 
-      try {
+      setJson(text);
-        const parsed = JSON.parse(text) as unknown;
+      setYaml(
-        setYaml(YAML.stringify(parsed, { indent: indentation.length, simpleKeys: true }));
+        O.isNone(parsed)
-      } catch {
+          ? ""
-        setYaml("");
+          : YAML.stringify(parsed.value, { indent: indentation.length, simpleKeys: true })
-      }
+      );
     },
     [indentation.length]
   );
 
   const setYamlReactively = useCallback(
     (text: string) => {
-      setYaml(text);
+      const parsed = safeYamlParse(text, (_, v) => v, { merge: true });
 
-      try {
+      setYaml(text);
-        const parsed = YAML.parse(text, { merge: true }) as unknown;
+      setJson(O.isNone(parsed) ? "" : JSON.stringify(parsed.value, null, indentation));
-        setJson(JSON.stringify(parsed, null, indentation));
-      } catch {
-        setJson("");
-      }
     },
     [indentation]
   );
@@ -68,12 +67,13 @@ export default function Page() {
   const onIndentationChange: SelectProps["onValueChange"] = value => {
     setIndentation(value);
 
-    try {
+    const parsed = safeJsonParse(json);
-      const parsed = JSON.parse(json) as unknown;
+
-      setJson(JSON.stringify(parsed, null, value));
+    if (O.isNone(parsed)) {
-      setYaml(YAML.stringify(parsed, { indent: value.length, simpleKeys: true }));
-    } catch {
       clearBoth();
+    } else {
+      setJson(JSON.stringify(parsed.value, null, value));
+      setYaml(YAML.stringify(parsed.value, { indent: value.length, simpleKeys: true }));
     }
   };
 

app/encoders-decoders/jwt/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useMemo, useState } from "react";
+import * as O from "fp-ts/lib/Option";
 
 import { toolGroups } from "@/config/tools";
 import { decode } from "@/lib/jwt";
@@ -19,9 +20,9 @@ export default function Page() {
     "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"
   );
 
-  const { headerObj, payloadObj } = decode(jwt);
+  const { header: h, payload: p } = decode(jwt);
-  const header = JSON.stringify(headerObj, null, 2) ?? "";
+  const header = O.isNone(h) ? "" : JSON.stringify(h.value, null, 2);
-  const payload = JSON.stringify(payloadObj, null, 2) ?? "";
+  const payload = O.isNone(p) ? "" : JSON.stringify(p.value, null, 2);
 
   const clearJwt = useCallback(() => setJwt(""), []);
 

app/encoders-decoders/url/page.tsx

@@ -1,8 +1,11 @@
 "use client";
 
 import { useCallback, useMemo, useState } from "react";
+import * as O from "fp-ts/lib/Option";
+import { constant } from "fp-ts/lib/function";
 
 import { toolGroups } from "@/config/tools";
+import { safeDecodeURIComponent, safeEncodeURIComponent } from "@/lib/uri";
 import { Textarea, TextareaProps } from "@/components/ui/textarea";
 import { ClearButton } from "@/components/buttons/clear";
 import { CopyButton } from "@/components/buttons/copy";
@@ -18,22 +21,12 @@ export default function Page() {
 
   const setDecodedReactively = useCallback((text: string) => {
     setDecoded(text);
-
+    setEncoded(O.getOrElse(constant(""))(safeEncodeURIComponent(text)));
-    try {
-      setEncoded(encodeURIComponent(text));
-    } catch {
-      setEncoded("");
-    }
   }, []);
 
   const setEncodedReactively = useCallback((text: string) => {
     setEncoded(text);
-
+    setDecoded(O.getOrElse(constant(""))(safeDecodeURIComponent(text)));
-    try {
-      setDecoded(decodeURIComponent(text));
-    } catch {
-      setDecoded("");
-    }
   }, []);
 
   const clearBoth = useCallback(() => {

app/formatters/json/page.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import { useCallback, useMemo, useState } from "react";
+import * as O from "fp-ts/lib/Option";
 
 import { toolGroups } from "@/config/tools";
+import { safeJsonParse } from "@/lib/json";
 import { Editor, EditorProps } from "@/components/ui/editor";
 import {
   Select,
@@ -31,13 +33,8 @@ export default function Page() {
   const [indentation, setIndentation] = useState(two);
   const [input, setInput] = useState('{\n"foo":"bar"\n}');
 
-  let output: string;
+  const parsed = safeJsonParse(input);
-  try {
+  const output = O.isNone(parsed) ? "" : JSON.stringify(parsed.value, null, indentation);
-    const parsed = JSON.parse(input) as unknown;
-    output = JSON.stringify(parsed, null, indentation);
-  } catch {
-    output = "";
-  }
 
   const clearInput = useCallback(() => setInput(""), []);
 

lib/json.ts

@@ -0,0 +1,3 @@
+import { tryCatchK } from "fp-ts/lib/Option";
+
+export const safeJsonParse = tryCatchK(JSON.parse);

lib/jwt.ts

@@ -1,22 +1,16 @@
+import * as O from "fp-ts/lib/Option";
 import jwt_decode from "jwt-decode";
 
+const safeJwtDecode = O.tryCatchK(jwt_decode);
+
 export const decode = (token: string) => {
-  let headerObj;
+  let header: O.Option<Record<string, unknown>> = O.none;
-  let payloadObj;
+  let payload: O.Option<unknown> = O.none;
 
   if (token.split(".").length === 3) {
-    /* eslint-disable no-empty */
+    header = safeJwtDecode(token, { header: true });
-
+    payload = safeJwtDecode(token, { header: false });
-    try {
-      headerObj = jwt_decode(token, { header: true });
-    } catch {}
-
-    try {
-      payloadObj = jwt_decode(token, { header: false });
-    } catch {}
-
-    /* eslint-enable no-empty */
   }
 
-  return { headerObj, payloadObj };
+  return { header, payload };
 };

lib/uri.ts

@@ -0,0 +1,4 @@
+import { tryCatchK } from "fp-ts/lib/Option";
+
+export const safeEncodeURIComponent = tryCatchK(encodeURIComponent);
+export const safeDecodeURIComponent = tryCatchK(decodeURIComponent);

lib/yaml.ts

@@ -0,0 +1,4 @@
+import { tryCatchK } from "fp-ts/lib/Option";
+import YAML from "yaml";
+
+export const safeYamlParse = tryCatchK(YAML.parse);