fix ws connection state (#175)

Co-authored-by: Gregory Schier <gschier1990@gmail.com>

src-web/components/core/HttpStatusTag.tsx

@@ -0,0 +1,40 @@
+import type { HttpResponse } from '@yaakapp-internal/models';
+import classNames from 'classnames';
+
+interface Props {
+  response: HttpResponse;
+  className?: string;
+  showReason?: boolean;
+}
+
+export function HttpStatusTag({ response, className, showReason }: Props) {
+  const { status, state } = response;
+
+  let colorClass;
+  let label = `${status}`;
+
+  if (state === 'initialized') {
+    label = 'CONNECTING';
+    colorClass = 'text-text-subtle';
+  } else if (status < 100) {
+    label = 'ERROR';
+    colorClass = 'text-danger';
+  } else if (status < 200) {
+    colorClass = 'text-info';
+  } else if (status < 300) {
+    colorClass = 'text-success';
+  } else if (status < 400) {
+    colorClass = 'text-primary';
+  } else if (status < 500) {
+    colorClass = 'text-warning';
+  } else {
+    colorClass = 'text-danger';
+  }
+
+  return (
+    <span className={classNames(className, 'font-mono', colorClass)}>
+      {label}{' '}
+      {showReason && 'statusReason' in response ? response.statusReason : null}
+    </span>
+  );
+}

src-web/components/core/StatusTag.tsx

@@ -1,34 +0,0 @@
-import type {HttpResponse, WebsocketConnection} from '@yaakapp-internal/models';
-import classNames from 'classnames';
-
-interface Props {
-  response: HttpResponse | WebsocketConnection;
-  className?: string;
-  showReason?: boolean;
-}
-
-export function StatusTag({ response, className, showReason }: Props) {
-  const { status, state } = response;
-  const label = status < 100 ? 'ERROR' : status;
-  const category = `${status}`[0];
-  const isInitializing = state === 'initialized';
-
-  return (
-    <span
-      className={classNames(
-        className,
-        'font-mono',
-        !isInitializing && category === '0' && 'text-danger',
-        !isInitializing && category === '1' && 'text-info',
-        !isInitializing && category === '2' && 'text-success',
-        !isInitializing && category === '3' && 'text-primary',
-        !isInitializing && category === '4' && 'text-warning',
-        !isInitializing && category === '5' && 'text-danger',
-        isInitializing && 'text-text-subtle',
-      )}
-    >
-      {isInitializing ? 'CONNECTING' : label}{' '}
-      {showReason && 'statusReason' in response ? response.statusReason : null}
-    </span>
-  );
-}

src-web/components/core/WebsocketStatusTag.tsx

@@ -0,0 +1,31 @@
+import type { WebsocketConnection } from '@yaakapp-internal/models';
+import classNames from 'classnames';
+
+interface Props {
+  connection: WebsocketConnection;
+  className?: string;
+}
+
+export function WebsocketStatusTag({ connection, className }: Props) {
+  const { state, error } = connection;
+
+  let label;
+  let colorClass = 'text-text-subtle';
+
+  if (error) {
+    label = 'ERROR';
+    colorClass = 'text-danger';
+  } else if (state === 'connected') {
+    label = 'CONNECTED';
+    colorClass = 'text-success';
+  } else if (state === 'closing') {
+    label = 'CLOSING';
+  } else if (state === 'closed') {
+    label = 'CLOSED';
+    colorClass = 'text-warning';
+  } else {
+    label = 'CONNECTING';
+  }
+
+  return <span className={classNames(className, 'font-mono', colorClass)}>{label}</span>;
+}