update collabocat auth

Author: Akpjunior94

src/@core/api-client.ts

@@ -16,13 +16,19 @@ export const apiClient = async <T>(endpoint: string, options: RequestInit = {}):
     headers,
   });
 
+  const data = await response.json();
+
   if (!response.ok) {
-    const errorData = await response.json();
-    throw new Error(errorData.message ||  `Error ${response.status}: ${response.statusText}`);
+    // 🔥 throw structured error instead of plain Error
+    throw {
+      status: response.status,
+      message: data?.error?.message || response.statusText,
+      raw: data
+    };
   }
 
   // Type casting to ensure that response data is in the expected format
-  return (await response.json()) as T;
+  return data as T;
 } catch (error) {
     console.log(`API Error [${API_BASE_URL}${endpoint}]:`, error);
     throw error;

src/components/@hooks_state/useSubmitIssue.ts

@@ -1,8 +1,7 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { createContainer } from 'unstated-next';
 import { submitIssue, submitAnonymousIssue } from '../../@core/submitIssue';
 import { GitHubIssueTemplateContainer } from './useTemplate';
-import { signInWithGithub } from '../../@core/auth';
 
 function useSubmitIssueState (){
   const { issueBody, setIssueBody, issueTitle, setIssueTitle, setDropdownButtonTitle, dropdownButtonText } = GitHubIssueTemplateContainer.useContainer();
@@ -15,19 +14,9 @@ function useSubmitIssueState (){
     setShowButton(!showButton);
   }
 
-  const loginWithGithub = () => {
-    signInWithGithub()
-  }
-
   // Shared submission logic
   const handleSubmission = async (data: { title: string; body: string }, isAnonymous: boolean) => {
     try {
-      // If the user is not authenticated, prompt them to log in
-      if (!isAnonymous) {
-        setToastrMessage({ message: 'Please log in to submit an issue.' });
-        setShowGithubLoginButton(true);
-        return;
-      }
       const response = isAnonymous ? await submitAnonymousIssue(data) : await submitIssue(data);
 
       setIssueTitle('');
@@ -40,11 +29,12 @@ function useSubmitIssueState (){
       setDropdownButtonTitle(dropdownButtonText);
 
       return response;
-    } catch (error) {
-      setToastrMessage({
-        message: 'Failed to submit issue'
-      });
-      throw error;
+    } catch (error: any) {
+      console.log('Error submitting issue:', error);
+      if (error?.status === 401) {
+        setShowGithubLoginButton(true);
+        setToastrMessage({message: 'Please Login as a GitHub User to submit an issue ticket'});
+      }
     }
   };
 
@@ -71,7 +61,6 @@ function useSubmitIssueState (){
     handleSubmitAnonymous,
     handleButtonClick,
     showButton,
-    loginWithGithub,
     showGithubLoginButton
   };
 }

src/components/@section_modal/ModalPopup.tsx

@@ -10,7 +10,7 @@ export const ModalPopup: React.FunctionComponent<ModalPopupProps> = (props: Moda
   const { instanceId, updateInstanceId } = GlobalContainer.useContainer();
   console.log('ModalPopup instance_id:', instanceId);
   const { issueBody, setIssueBody, issueTitle, setIssueTitle } = GitHubIssueTemplateContainer.useContainer();
-  const { toastrMessage, handleSubmit, showButton, handleButtonClick, handleSubmitAnonymous, loginWithGithub, showGithubLoginButton } = SubmitIssueContainer.useContainer();
+  const { toastrMessage, handleSubmit, showButton, handleButtonClick, handleSubmitAnonymous, showGithubLoginButton } = SubmitIssueContainer.useContainer();
 
   return (
     <>
@@ -67,7 +67,7 @@ export const ModalPopup: React.FunctionComponent<ModalPopupProps> = (props: Moda
             </div>
           )}
           {showGithubLoginButton && (
-            <button className="bb-collabocate_github-button" onClick={loginWithGithub}>Login with Github</button>
+            <a href='/login' className="bb-collabocate_github-button">Login with Github</a>
           )}
         </div>
       </div>