FIX: Allow issues to be submitted using the user's GitHub username in Collabocate

Author: Akpjunior94

src/@core/api-client.ts

@@ -2,7 +2,7 @@ const API_BASE_URL= process.env.REACT_APP_BACKEND_API_URL;
 
 // Custom fetch API client
 export const apiClient = async <T>(endpoint: string, options: RequestInit = {}): Promise<T> => {
-  const token = typeof window !== 'undefined' ? localStorage.getItem('collabocate_authToken') : ''; // Get token from localStorage
+  const token = typeof window !== 'undefined' ? localStorage.getItem('authToken') : ''; // Get token from localStorage
 
   const headers: HeadersInit = {
     'Content-Type': 'application/json',

src/@core/auth.ts

@@ -0,0 +1,4 @@
+export const signInWithGithub = async () => {
+  const githubAuthUrl = `${process.env.REACT_APP_BACKEND_API_URL}/auth/github`;
+  window.location.href = githubAuthUrl; // Redirect user to github Auth
+};

src/@core/submitIssue.ts

@@ -8,4 +8,13 @@ export const submitIssue = async (issueData: Issue_POST_RequestBody): Promise<Is
     });
     console.log('Issue submitted successfully:', response);
     return response;
+};
+
+export const submitAnonymousIssue = async (issueData: Issue_POST_RequestBody): Promise<IssueResponse> => {
+  const response = await apiClient<IssueResponse>('/external/github/issues-unauthenticated', {
+    method: 'POST',
+    body: JSON.stringify(issueData)
+  });
+  console.log('Issue submitted successfully:', response);
+  return response;
 };

src/components/@hooks_state/useSubmitIssue.ts

@@ -1,26 +1,35 @@
 import { useState } from 'react';
 import { createContainer } from 'unstated-next';
-import { submitIssue } from '../../@core/submitIssue';
+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();
-  const [toastrMessage, setToastrMessage] = useState<{message: string; issueURL?: string; 
-    issueNumber?: number;} | null>(null);
-    
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const title = issueTitle.trim();
-    const body = issueBody.trim();
-    
-    if (!title || !body) {
-      setToastrMessage({message:'Issue Title and Body cannot be empty.'});
-      return;
-    }
-    
-      const data = { title, body };
+  const { issueBody, setIssueBody, issueTitle, setIssueTitle, setDropdownButtonTitle, dropdownButtonText } = GitHubIssueTemplateContainer.useContainer();
+  const [toastrMessage, setToastrMessage] = useState<{ message: string; issueURL?: string; issueNumber?: number } | null>(null);
+  const [showButton, setShowButton] = useState<boolean>(false);
+  const [showGithubLoginButton, setShowGithubLoginButton] = useState<boolean>(false);
+
+
+  const handleButtonClick = () => {
+    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);
 
-      const response = await submitIssue(data);
       setIssueTitle('');
       setIssueBody('');
       setToastrMessage({
@@ -29,11 +38,41 @@ function useSubmitIssueState (){
         issueNumber: response.data.number,
       });
       setDropdownButtonTitle(dropdownButtonText);
+
+      return response;
+    } catch (error) {
+      setToastrMessage({
+        message: 'Failed to submit issue'
+      });
+      throw error;
+    }
   };
 
+  // Common validation and submission handler
+  const validateAndSubmit = async (isAnonymous: boolean) => {
+    const title = issueTitle.trim();
+    const body = issueBody.trim();
+
+    if (!title || !body) {
+      setToastrMessage({ message: 'Issue Title and Body cannot be empty.' });
+      return;
+    }
+
+    return handleSubmission({ title, body }, isAnonymous);
+  };
+  // Public handlers
+  const handleSubmit = () => validateAndSubmit(false);
+
+  const handleSubmitAnonymous = () => validateAndSubmit(true);
+
   return {
     toastrMessage,
     handleSubmit,
+    handleSubmitAnonymous,
+    handleButtonClick,
+    showButton,
+    loginWithGithub,
+    showGithubLoginButton
   };
 }
 export const SubmitIssueContainer = createContainer(useSubmitIssueState);

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 } = SubmitIssueContainer.useContainer();
+  const { toastrMessage, handleSubmit, showButton, handleButtonClick, handleSubmitAnonymous, loginWithGithub, showGithubLoginButton } = SubmitIssueContainer.useContainer();
 
   return (
     <>
@@ -26,7 +26,7 @@ export const ModalPopup: React.FunctionComponent<ModalPopupProps> = (props: Moda
             </div>
             <p className="bb-content-group__collabocate_plugin">Collabocate | GitHub Sync</p>
         </header>
-        <form className="bb-content-group__collabocate_plugin bb-collabocate_form" id="submitIssueForm" onSubmit={handleSubmit} >
+        <div className="bb-content-group__collabocate_plugin bb-collabocate_form" id="submitIssueForm">
           <div>
             <label className="bb-collabocate_label" htmlFor="issueTemplates">Choose Report Type</label>
             <br />
@@ -42,7 +42,15 @@ export const ModalPopup: React.FunctionComponent<ModalPopupProps> = (props: Moda
             <br />
             <textarea className="bb-content-group__collabocate_form-inner bb-collabocate_input bb-collabocate_textarea" id="issueBody" onChange={(e) =>setIssueBody(e.target.value)} value={issueBody}></textarea>
           </div>
-          <button className="bb-content-group__collabocate_form-inner bb-collabocate_submit-form-button" id="submitIssueButton">Submit Issue Ticket</button>
+          <button className="bb-content-group__collabocate_form-inner bb-collabocate_submit-form-button" id="submitIssueButton" onClick={handleButtonClick}>Submit Issue Ticket</button>
+           {showButton && (
+            <div className="bb-collabocate_auth-options">
+              <button className="bb-content-group__collabocate_form-inner bb-collabocate_submit-form-button bb-collabocate_margin-vertical" onClick={handleSubmitAnonymous}>
+                Continue as Anonymous User
+              </button>
+              <button className="bb-content-group__collabocate_form-inner bb-collabocate_submit-form-button" onClick={handleSubmit}>Continue as GitHub User</button>
+            </div>
+          )}
           {toastrMessage && (
             <div>
               <div>{toastrMessage.message}</div>
@@ -58,7 +66,10 @@ export const ModalPopup: React.FunctionComponent<ModalPopupProps> = (props: Moda
               </div>
             </div>
           )}
-        </form>
+          {showGithubLoginButton && (
+            <button className="bb-collabocate_github-button" onClick={loginWithGithub}>Login with Github</button>
+          )}
+        </div>
       </div>
     </>
   );

src/css/@temporary/bb-modal.css

@@ -69,3 +69,13 @@
     padding: 16px 0;
     border-radius: 10px;
 }
+
+.bb-collabocate_margin-vertical {
+    margin: 12px 0;
+}
+
+.bb-collabocate_github-button {
+    background: black;
+    padding: 10px;
+    color: white
+}