error handling

Author: coilysiren

src/components/error.tsx

@@ -1,24 +1,31 @@
 import React from "react"
 
-const showError = async (
+const showHTTPError = async (
   setter: (value: React.SetStateAction<React.ReactNode>) => void,
   response: Response
 ) => {
   const data =
     response.status < 500
       ? JSON.stringify(await response.json(), null, 2)
       : await response.text()
+  return await showError(setter, response.status < 500, data)
+}
+
+const showError = async (
+  setter: (value: React.SetStateAction<React.ReactNode>) => void,
+  warning: boolean,
+  message: string
+) => {
+  console.log(message)
   setter(() => (
     <div>
       <div
-        className={
-          response.status < 500 ? "alert alert-warning" : "alert alert-danger"
-        }
+        className={warning ? "alert alert-warning" : "alert alert-danger"}
         role="alert"
       >
-        {response.status < 500 ? (
+        {warning ? (
           <div>
-            <pre className="error-message">{data}</pre>
+            <pre className="warning-message">{message}</pre>
           </div>
         ) : (
           <p>
@@ -38,4 +45,4 @@ const showError = async (
   ))
 }
 
-export default showError
+export { showHTTPError, showError }

src/pages/apps/bsky-follow-suggestions.tsx

@@ -3,7 +3,7 @@ import { useSearchParams, BrowserRouter } from "react-router-dom"
 import Layout from "../../components/layout"
 import Closer from "../../components/closer"
 import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs"
-import showError from "../../components/error"
+import { showHTTPError } from "../../components/error"
 
 const requestFrequency = 100
 
@@ -72,7 +72,7 @@ const Bsky = () => {
     )
     if (!response.ok) {
       clearApplicationState()
-      showError(setError, response)
+      showHTTPError(setError, response)
       return
     }
     const data: string[] = await response.json()
@@ -108,7 +108,7 @@ const Bsky = () => {
     )
     if (!response.ok) {
       clearApplicationState()
-      showError(setError, response)
+      showHTTPError(setError, response)
       return
     }
     const data: string[] = await response.json()
@@ -224,7 +224,7 @@ const Bsky = () => {
     )
     if (!response.ok) {
       clearApplicationState()
-      showError(setError, response)
+      showHTTPError(setError, response)
       return
     }
     const data: { [key: string]: ProfileViewDetailed } = await response.json()

src/pages/apps/testing.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useRef, useState } from "react"
+import { useSearchParams, BrowserRouter } from "react-router-dom"
+import Layout from "../../components/layout"
+import Closer from "../../components/closer"
+import { showError } from "../../components/error"
+
+const Bsky = () => {
+  // START: GENERIC STATE
+  // This kind of state is likely to be used in most applications.
+  const handleRef = useRef<HTMLInputElement | null>(null)
+  const [searchParams, setSearchParams] =
+    typeof window !== "undefined"
+      ? useSearchParams()
+      : [new URLSearchParams(), () => {}]
+  const [error, setError] = useState<React.ReactNode>()
+  // END: GENERIC STATE
+
+  // Get the "handle" query parameter.
+  // This should eventually be replaced with a user input field.
+  // "I / Me" from this point are the perspective of the user, eg. the handle.
+  // "You" is the server / website.
+  const myHandle = searchParams.get("handle")
+
+  return (
+    <Layout>
+      <section className="post-body">
+        <div className="post-header">
+          <h2>
+            <p>Testing</p>
+          </h2>
+        </div>
+        <div className="post-content">
+          <button
+            className="btn btn-warning"
+            type="button"
+            onClick={() => {
+              showError(setError, true, "This is a warning message!")
+            }}
+          >
+            Warn!
+          </button>
+          <button
+            className="btn btn-danger"
+            type="button"
+            onClick={() => {
+              showError(setError, false, "This is an error message!")
+            }}
+          >
+            Error!
+          </button>
+        </div>
+        <div className="post-content">{error ? error : null}</div>
+        <Closer />
+      </section>
+    </Layout>
+  )
+}
+
+export default () => {
+  return typeof window !== "undefined" ? (
+    <BrowserRouter>
+      <Bsky />
+    </BrowserRouter>
+  ) : null
+}

src/sass/post.scss

@@ -163,7 +163,7 @@ p > code {
 }
 
 // Styling of triple ```
-pre:not(.error-message) {
+pre:not(.warning-message) {
   background-color: vars.$dark-purple;
   background-image: url("../images/rows-triangles.svg");
   background-repeat: repeat-x;