clean fix

src/Components/DOM/VoteStatusButton.js

@@ -1,102 +1,84 @@
 import React, { useState, useEffect } from 'react';
-import { render } from 'react-dom';
-import { postGetPullRequest, postGetPRvoteYesTotals, postGetPRvoteNoTotals } from '../../requests';
 import { Button } from 'react-bootstrap';
+import useGetVotes from '../../hooks/useGetVotes.js';
+import Skeleton from '@mui/material/Skeleton';
 
-export default function VoteStatusButton(props){
+export default function VoteStatusButton({
+  user,
+  repo,
+  repoID,
+  issueID,
+  contributorID,
+  side,
+  modalOpen,
+  toggleModal,
+  socketEvents
+}) {
+  const [voteStatusButton, setVoteStatusButton] = useState({
+    color: 'gray',
+    text: '?',
+    state: 'vote',
+    mergeableCodeHost: true
+  });
+  const [voteTotals, setVoteTotals] = useState(0);
 
-    const [user, setUser] = useState(props.user);
-    const [repo, setRepo] = useState(props.repo);
-    const [issueID, setIssueID] = useState(props.issueID);
-    const [contributorID, setContributorID] = useState(props.contributorID);
-    const [voteStatusButton, setVoteStatusButton] = useState({ color: 'gray', text: '?' });
-    const [tsrcPRStatus, setTsrcPRStatus] = useState(props.tsrcPRstatus || {state: 'vote', mergeableCodeHost: true});
-    const [voteYesTotalState, setVoteYesTotalState] = useState(0.0);
-    const [voteNoTotalState, setVoteNoTotalState] = useState(0.0);
-    const [voteTotals, setVoteTotals] = useState(0);
-    const [yesPercent, setYesPercent] = useState(0);
-    const [noPercent, setNoPercent] = useState(0);
-    const [side, setSide] = useState(props.side);
-    const [clicked, setClicked] = useState(props.clicked);
-    const buttonStyle = {
-      vote: ['lightgreen', 'vote'],
-      'pre-open': ['green', voteTotals],
-      open: ['orchid', voteTotals],
-      conflict: ['orange', 'conflict'],
-      merge: ['darkorchid', 'merged'],
-      close: ['red', 'closed']
-    };
-
-    const fetchVoteStatus = async () => {
-      let textMath = voteStatusButton.textMath;
-      let tsrcPRStatusComponent
-      try {
-          tsrcPRStatusComponent = await postGetPullRequest(
-          user,
-          repo,
-          issueID,
-          contributorID,
-          side
-          );
-        const voteYesTotal = await postGetPRvoteYesTotals(
-          user,
-          repo,
-          issueID,
-          contributorID,
-          ""
-        );
-        const voteNoTotal = await postGetPRvoteNoTotals(
-          user,
-          repo,
-          issueID,
-          contributorID,
-          ""
-        );
-        let quorum = 0.5;
-        const totalVotes = voteYesTotal + voteNoTotal;
-        const totalPossibleVotes = 1_000_000;
-        const totalPercent = (totalVotes / totalPossibleVotes) * 100 * (1 / quorum);
-        if (totalPercent !== null) {
-          setVoteTotals(`${Math.floor(totalPercent)}%`);
-        }
-        setVoteYesTotalState(voteYesTotal);
-        setVoteNoTotalState(voteNoTotal);
-        setTsrcPRStatus(tsrcPRStatusComponent);
-      } catch (error) {
-        console.log('fetchVoteStatus error:', error)
-        textMath = "";
-      }
-        };
+  const { prData, loading } = useGetVotes(user, repoID, issueID, contributorID, side, socketEvents, modalOpen);
+
+  const buttonStyle = {
+    vote: ['lightgreen', 'vote'],
+    'pre-open': ['green', Math.floor(voteTotals) + '%'],
+    open: ['orchid', Math.floor(voteTotals) + '%'],
+    conflict: ['orange', 'conflict'],
+    merge: ['darkorchid', 'merged'],
+    close: ['red', 'closed']
+  };
+
+  useEffect(() => {
+    if (!loading) {
+      let quorum = prData.voteData.voteTotals.quorum;
+      const totalVotes = prData.voteData.voteTotals.totalVotes;
+      const totalPossibleVotes = 1_000_000;
+      const voteTotals = (totalVotes / totalPossibleVotes) * 100 * (1 / quorum);
+      setVoteTotals(voteTotals);
 
-    useEffect(() => {
-        fetchVoteStatus();
-    }, [props.socketEvents, clicked]);
+      let newState = {
+        color: 'lightgreen',
+        text: 'vote',
+        state: prData.state,
+        mergeableCodeHost: prData.mergeable
+      };
+
+      if (!prData.mergeable) {
+        newState.state = 'conflict';
+      } else if (voteTotals === 0) {
+        newState.state = 'vote';
+        newState.color = 'lightgreen';
+        newState.text = 'vote';
+        newState.mergeableCodeHost = true;
+      } else {
+        const buttonColor = buttonStyle[prData.state][0];
+        const buttonText = buttonStyle[prData.state][1];
+        newState.color = buttonColor;
+        newState.text = buttonText;
+        newState.voteTotals = Math.floor(voteTotals);
+      }
 
-    useEffect(() => {
-
-        if(!tsrcPRStatus) {
-          return;
-        }
-        if(!tsrcPRStatus.mergeableCodeHost) {
-          tsrcPRStatus.state = 'conflict';
-        }
-        const buttonColor = buttonStyle[tsrcPRStatus.state][0]
-        const buttonText = buttonStyle[tsrcPRStatus.state][1]
-        setVoteStatusButton({color: buttonColor, text: buttonText});
-    }, [voteYesTotalState, voteNoTotalState, tsrcPRStatus, voteTotals]);
+      setVoteStatusButton(newState);
+    }
+  }, [prData, loading, socketEvents]);
 
+  const handleClick = e => {
+    e.preventDefault();
+    toggleModal(e);
+  };
 
-    const handleClick = (e) => {
-        e.preventDefault();
-        props.toggleModal(e)
-    };
+  if (loading) {
+    return <Skeleton animation="wave" variant="rounded" width={80} height={30} />;
+  }
 
-    return (
-        <Button
-        style={{ color: 'white', background: voteStatusButton.color }}
-        onClick={(e) => handleClick(e)}
-        >
-        {voteStatusButton.text}
-        </Button>
-    );
-};
+  return (
+    <Button style={{ color: 'white', background: voteStatusButton.color, width: '80px' }} onClick={e => handleClick(e)}>
+      {voteStatusButton.voteTotals < 100 ? voteStatusButton.voteTotals + '%' : voteStatusButton.text}
+    </Button>
+  );
+}

src/hooks/useGetVotes.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+import { postGetVotes } from '../requests';
+const useGetVotes = (user, repoID, issueID, contributorID, side, socketEvents, modalOpen) => {
+  const [prData, setPRData] = useState({});
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        let getVotesRes = await postGetVotes(repoID, issueID, contributorID);
+        setPRData(getVotesRes);
+        if (getVotesRes) {
+          setLoading(false);
+        }
+      } catch (error) {
+        console.error('useFetchVoteStatus error:', error);
+      }
+    };
+
+    fetchData();
+  }, [user, repoID, issueID, contributorID, side, socketEvents, modalOpen]);
+  return { prData, loading };
+};
+
+export default useGetVotes;

src/inject.js

@@ -6,7 +6,7 @@ const createButtonHtml = require('./Components/DOM/createButtonHtml');
 import VoteStatusButton from './Components/DOM/VoteStatusButton';
 import ModalVote from './Components/Modal/ModalVote';
 const { socket } = require('./socketConfig');
-const { postGetRepoData, postGetVotes, postFindOrCreateUser } = require('./requests');
+const { postGetRepoData, postGetVotes, getNameSpaceRepo } = require('./requests');
 let cypress = {};
 try {
   cypress = require('../cypress.env.json');
@@ -17,7 +17,7 @@ try {
 var modal;
 var user;
 var repo;
-var repo_id;
+var repoID;
 var issue_id;
 var contributor_id;
 var contributor_name;
@@ -79,11 +79,12 @@ let getFromStorage = keys =>
     githubUserObject = JSON.parse(turbosrcUser);
   }
 
-  repo_id = `${user}/${repo}`;
+  const repoName = `${user}/${repo}`;
+  const { status, repoID } = await getNameSpaceRepo(repoName)
 
   // Backend:
   // All relevant data for this repo can be found in this response:
-  var repoData = await postGetRepoData(repo_id, contributor_id);
+  var repoData = status === 200 && await postGetRepoData(repoID, contributor_id);
   // Is repo on turbosrc:
   const onTurboSrc = repoData?.status === 200 ? true : false;
   // Is current contributor is authorized for this repo:
@@ -200,9 +201,10 @@ let getFromStorage = keys =>
     var domContainerTurboSrcButton;
     let socketEvents = 0;
     let getVotesRes;
-    let getVotes = async () => await postGetVotes(repo_id, issue_id, contributor_id);
-    const clickedState = {
-      clicked: false
+    let getVotes = async () => await postGetVotes(repoID, issue_id, contributor_id);
+    const modalState = {
+      modalOpen: false,
+      currentIssueID: issue_id  
     };
 
     // Modal functionality below:
@@ -224,10 +226,12 @@ let getFromStorage = keys =>
         modal.style.display = 'block';
         const domContainerModal = myModalNode;
         getVotesRes = await getVotes();
+        modalState.currentIssueID = issue_id;
         render(
           ce(ModalVote, {
             user: user,
             repo: repo,
+            repoID: repoID,
             issueID: issue_id,
             contributorID: contributor_id,
             contributorName: contributor_name,
@@ -250,12 +254,13 @@ let getFromStorage = keys =>
 
     // Update modal (if open) if its associated PR has been voted upon
     const updateModalVotesTable = async issueID => {
-      if (issueID === issue_id && modal.style.display === 'block') {
+      if (issueID === modalState.currentIssueID && modal.style.display === 'block') {
         const domContainerModal = myModalNode;
         render(
           ce(ModalVote, {
             user: user,
             repo: repo,
+            repoID: repoID,
             issueID: issue_id,
             contributorID: contributor_id,
             contributorName: contributor_name,
@@ -282,10 +287,11 @@ let getFromStorage = keys =>
             socketEvents: socketEvents,
             user: user,
             repo: repo,
+            repoID: repoID,
             issueID: issue_id,
             contributorName: contributor_name,
             contributorID: contributor_id,
-            clicked: clickedState.clicked,
+            modalOpen: modalState.modalOpen,
             toggleModal: toggleModal
           }),
           domContainerTurboSrcButton
@@ -304,11 +310,12 @@ let getFromStorage = keys =>
         ce(VoteStatusButton, {
           user: user,
           repo: repo,
+          repoID: repoID,
           issueID: issue_id,
           contributorName: contributor_name,
           contributorID: contributor_id,
           repoData: repoData,
-          clicked: clickedState.clicked,
+          modalOpen: modalState.modalOpen,
           toggleModal: toggleModal,
           socketEvents: socketEvents
         }),
@@ -318,7 +325,7 @@ let getFromStorage = keys =>
 
     // Socket listener for above actions. Every time a user votes our socket will check if it's for the current repo and update
     socket.on('vote received', function(ownerFromServer, repoFromServer, issueIDFromServer) {
-      if (user === ownerFromServer && repo === repoFromServer) {
+      if (user === ownerFromServer && repoID === repoFromServer) {
         /* To update the correct VoteStatusButton & VotesTable we need to both update the socketEvents variable 
           and call the React render function for them. */
         socketEvents += 1;