Merge pull request #30 from qoretechnologies/bugfix/fix-401-redirection

Add VSCode settings and update reqore dependency to 0.49.1; enhance error handling in fetch utility

Author: Foxhoundn

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "deepscan.enable": true
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqraft",
-  "version": "0.6.10",
+  "version": "0.6.11",
   "description": "ReQraft is a collection of React components and hooks that are used across Qore Technologies' products made using the ReQore component library from Qore.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -53,7 +53,7 @@
     "@babel/preset-typescript": "^7.12.7",
     "@chromatic-com/storybook": "^2.0.2",
     "@netsells/storybook-mockdate": "^0.3.3",
-    "@qoretechnologies/reqore": "^0.48.18",
+    "@qoretechnologies/reqore": "^0.49.1",
     "@storybook/addon-actions": "^8.3.5",
     "@storybook/addon-essentials": "^8.3.5",
     "@storybook/addon-interactions": "^8.3.5",

src/components/log/Log.stories.tsx

@@ -227,6 +227,7 @@ export const WithAutoScrollAndManualScroll: Story = {
   },
   play: async (args) => {
     await WithAutoScroll.play(args);
+    await sleep(3000);
     await fireEvent.scroll(document.querySelector('.reqore-panel-content'), {
       target: { scrollTop: 100 },
     });

src/hooks/useWebSocket/useWebsocket.stories.tsx

@@ -26,13 +26,13 @@ const CompWithHook = (args: IUseReqraftWebSocketOptions) => {
         { label: 'Send', icon: 'MessageLine', onClick: () => send('This is a test message') },
       ]}
     >
-      {args.includeLogMessagesInState || args.useState ?
+      {args.includeLogMessagesInState || args.useState ? (
         <ReqoreControlGroup vertical>
           {messages.map(({ message }, index) => (
             <ReqoreP key={index}>{message}</ReqoreP>
           ))}
         </ReqoreControlGroup>
-      : null}
+      ) : null}
     </ReqorePanel>
   );
 };
@@ -94,6 +94,9 @@ const meta = {
   },
   parameters: {
     chromatic: { disable: true },
+    jest: {
+      timeout: 60000,
+    },
   },
   render: (args) => {
     return <CompWithHook {...args} />;
@@ -155,6 +158,11 @@ export const ReconnectFails: Story = {
     openOnMount: true,
     reconnectInterval: 500,
   },
+  parameters: {
+    jest: {
+      timeout: 60000,
+    },
+  },
   play: async ({ args, ...rest }) => {
     await OpenOnMount.play({ args, ...rest });
     await testsClickButton({ label: 'Kill' });
@@ -240,13 +248,13 @@ const ConnectionOne = ({ onPanelClose, ...args }: IConnectionProps) => {
         { label: 'Send', icon: 'MessageLine', onClick: () => send('This is a test message') },
       ]}
     >
-      {args.includeLogMessagesInState || args.useState ?
+      {args.includeLogMessagesInState || args.useState ? (
         <ReqoreControlGroup vertical>
           {messages.map(({ message }, index) => (
             <ReqoreP key={index}>{message}</ReqoreP>
           ))}
         </ReqoreControlGroup>
-      : null}
+      ) : null}
     </ReqorePanel>
   );
 };
@@ -280,13 +288,13 @@ const ConnectionTwo = ({ onPanelClose, ...args }: IConnectionProps) => {
         { label: 'Send', icon: 'MessageLine', onClick: () => send('This is a test message') },
       ]}
     >
-      {args.includeLogMessagesInState || args.useState ?
+      {args.includeLogMessagesInState || args.useState ? (
         <ReqoreControlGroup vertical>
           {messages.map(({ message }, index) => (
             <ReqoreP key={index}>{message}</ReqoreP>
           ))}
         </ReqoreControlGroup>
-      : null}
+      ) : null}
     </ReqorePanel>
   );
 };
@@ -309,10 +317,11 @@ const ConnectionThree = ({ onPanelClose, ...args }: IConnectionProps) => {
       minimal
       fluid
       intent={
-        status === 'CLOSED' ? 'danger'
-        : status === 'CONNECTING' ?
-          'pending'
-        : ('success' as TReqoreIntent)
+        status === 'CLOSED'
+          ? 'danger'
+          : status === 'CONNECTING'
+          ? 'pending'
+          : ('success' as TReqoreIntent)
       }
       size='small'
       closeButtonProps={{
@@ -328,13 +337,13 @@ const ConnectionThree = ({ onPanelClose, ...args }: IConnectionProps) => {
         { label: 'Send', icon: 'MessageLine', onClick: () => send('This is a test message') },
       ]}
     >
-      {args.includeLogMessagesInState || args.useState ?
+      {args.includeLogMessagesInState || args.useState ? (
         <ReqoreControlGroup vertical>
           {messages.map(({ message }, index) => (
             <ReqoreP key={index}>{message}</ReqoreP>
           ))}
         </ReqoreControlGroup>
-      : null}
+      ) : null}
     </ReqorePanel>
   );
 };

src/utils/fetch.ts

@@ -85,15 +85,25 @@ export async function query<T>({
     queryFn: async () => {
       const response = await doFetchData(url, method, body);
 
+      if (
+        response.status === 401 &&
+        process.env.NODE_ENV !== 'test' &&
+        process.env.NODE_ENV !== 'storybook'
+      ) {
+        window.location.href = fetchConfig.unauthorizedRedirect(window.location.pathname);
+      }
+
       const clone = response.clone();
-      const json = await clone.json();
+      let data: any;
 
-      if (response.status === 401) {
-        window.location.href = fetchConfig.unauthorizedRedirect(window.location.pathname);
+      try {
+        data = await clone.json();
+      } catch (error) {
+        data = {};
       }
 
       return {
-        data: json,
+        data,
         ok: response.ok,
         status: response.status,
         statusText: response.statusText,

src/utils/websocket.ts

@@ -175,7 +175,11 @@ export class ReqraftWebSocket {
   public async checkServerStatus() {
     const check = await query({ url: '/system/pid', cache: false });
 
-    if (check.code === 401) {
+    if (
+      check.code === 401 &&
+      process.env.NODE_ENV !== 'test' &&
+      process.env.NODE_ENV !== 'storybook'
+    ) {
       // Qorus is back up again but we need to re-authenticate
       // Get the current pathname and redirect to the login page
       window.location.href = fetchConfig.unauthorizedRedirect(window.location.pathname);

yarn.lock

@@ -1682,10 +1682,10 @@
   resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
-"@qoretechnologies/reqore@^0.48.18":
-  version "0.48.18"
-  resolved "https://registry.yarnpkg.com/@qoretechnologies/reqore/-/reqore-0.48.18.tgz#b6a438dafa5e60912790da6fe6a9c07e5a710d9c"
-  integrity sha512-8mGVuUfWJ/a7sssfRSFMd5wcDUPAAPinAtBDXyDVZehAu8GXfyQzNbacYWptp5nVEP53CkIEDTwxHKL4rI/FVg==
+"@qoretechnologies/reqore@^0.49.1":
+  version "0.49.1"
+  resolved "https://registry.yarnpkg.com/@qoretechnologies/reqore/-/reqore-0.49.1.tgz#db1f3f37e39a0aff8ad963883ea4867e322ae8ec"
+  integrity sha512-JV3EnPj6AAIKEAC01YEhfJKJr7IEnjaEnD0HJeCEAwhFTlFG6hWMj2VpjMzXTEi8AJKVuAr4qdQp9Y/JeKLq7A==
   dependencies:
     "@internationalized/date" "^3.5.3"
     "@popperjs/core" "^2.11.6"