Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor/home #71

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Refactor/home #71

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
29e7c90
initial
Jul 19, 2023
e0f69c9
testing refactor
ramirc5 Jul 20, 2023
0800402
refactored setPullRequest()
ramirc5 Jul 20, 2023
4b8b532
split up some code in home.js to a new file
ramirc5 Jul 21, 2023
e0f232a
got custom hook working
ramirc5 Jul 24, 2023
3ec5cc4
merged refactor/useRepoData
ramirc5 Jul 24, 2023
815469c
removed console.logs
ramirc5 Jul 24, 2023
1003ebb
removed console.logs
ramirc5 Jul 24, 2023
20f9bc7
moved loading to new hook and now using topinfobar where needed to re…
ramirc5 Jul 25, 2023
1941bf8
refactored home view logic
ramirc5 Jul 25, 2023
f4c6092
prettify
ramirc5 Jul 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/Components/DOM/VoteStatusButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default function VoteStatusButton(props){

const fetchVoteStatus = async () => {
let textMath = voteStatusButton.textMath;
let tsrcPRStatusComponent
let tsrcPRStatusComponent;
try {
tsrcPRStatusComponent = await postGetPullRequest(
user,
Expand Down Expand Up @@ -63,7 +63,6 @@ export default function VoteStatusButton(props){
setVoteNoTotalState(voteNoTotal);
setTsrcPRStatus(tsrcPRStatusComponent);
} catch (error) {
console.log('fetchVoteStatus error:', error)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe VoteStatusButton is outside of the scope of refactoring the extension Home page, also the console log is fine if it is console logging an error in a trycatch

textMath = "";
}
};
Expand Down
251 changes: 41 additions & 210 deletions src/Components/Extension/Home/Home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,22 @@
import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import superagent from 'superagent';
import { postGetRepoData } from '../../../requests';
import useCommas from '../../../hooks/useCommas';
import styled from 'styled-components';
import PullRequestRow from './PullRequestRow.js';
import ArrowRight from '../../../../icons/arrowright.png';
import BackArrow from '../../../../icons/back.png';
import SkeletonModal from './SkeletonExt.js';
import SinglePullRequestView from '../SinglePullRequestView/SinglePullRequestView.js';
import { set } from '../../../utils/storageUtil';
const { socket } = require('../../../socketConfig');
const { postGetVotes } = require('../../../requests');
import TopInfoBar from './TopInfoBar';
import useRepoData from '../../../hooks/useRepoData';

const VoteText = styled.span`
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
font-family: 'Inter', sans-serif;
color: black;
`;
const { socket } = require('../../../socketConfig');

const ArrowPic = styled.img`
width: 13px;
height: 13px;
`;

const VotePower = styled(VoteText)`
font-weight: 500;
font-size: 14px;
margin-bottom: 0px;
color: #4a00ba;
background: #e7f0ff;
padding: 5px 8px;
letter-spacing: 0.2px;
`;

const TurbosrcNotice = styled.div`
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap');
font-family: 'Roboto Mono', monospace;
Expand All @@ -45,6 +27,7 @@ const TurbosrcNotice = styled.div`
position: relative;
top: 150px;
`;

const CenteredWrapper = styled.div`
display: flex;
align-items: center;
Expand All @@ -63,46 +46,6 @@ const CreateRepo = styled.span`
background-color: #e5eefd;
`;

const BoldText = styled(VoteText)`
font-weight: 700;
font-size: 18px;
margin-bottom: 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width:120px;
`;

const TopBar = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
`;

const OwnerRepo = styled.div`
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
`;

const OwnerText = styled(VoteText)`
font-weight: 500;
font-size: 18px;
margin-bottom: 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width:120px;
`;

const SlashText = styled(OwnerText)`
color: #6A6868;
margin-left: -5px;
margin-right: -5px;
`;

const Data = styled.div`
width: 100%;
height: 100%;
Expand All @@ -122,6 +65,7 @@ const Content = styled.div`
const DataHeading = styled.div`
display: grid;
grid-template-columns: 20% 60% 10% 10%;
padding: 10px 0 5px 0;
`;

const PullRequestHeading = styled.p`
Expand All @@ -146,16 +90,12 @@ const RepoButton = styled.button`
align-items: center;
gap: 5px;

&:disabled{
&:disabled {
background-color: darkgrey;
cursor: auto;
}
`;

const GithubLink = styled.a`
color: black;
`;

const CreateNotice = styled.span`
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
font-family: 'Inter', sans-serif;
Expand All @@ -167,10 +107,6 @@ const CreateNotice = styled.span`
line-height: 1.8;
`;

const BtnSpan = styled.span`
text-align: center;
`;

const Back = styled(PullRequestHeading)`
font-weight: 500;
`;
Expand All @@ -186,113 +122,43 @@ const BackButton = styled.span`
cursor: pointer;
`;

const port = process.env.PORT || 'http://localhost:4000';

export default function Home() {
const user = useSelector(state => state.auth.user);
const repo = useSelector(state => state.repo.name);
const owner = useSelector(state => state.repo.owner.login);
const oldVersion = false;
const [pullRequests, setPullRequests] = useState([]);
const [tokenized, setTokenized] = useState(false);
const [loading, setLoading] = useState(true);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please declare the loading variable in the useGetRepoData hook and return it

It should be dependent on the response from useGetRepoData, so when the res is ready, set it to false

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There could also be a variable called errorText in useGetRepoData which would set an error message to display in Home.js

.catch(error => if(error.status >= 400) {setErrorText('There was an error fetching the data')}

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update - this could be a stretch goal. We could do it later on

const [seeModal, setSeeModal] = useState(false);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please change seeModal to [seeSinglePR, setSeeSinglePR]

const [pullRequestsLoaded, setPullRequestsLoaded] = useState(false);
const [selectedPullRequest, setSelectedPullRequest] = useState(null);
const [selectedPullRequestID, setSelectedPullRequestID] = useState('');
const [selectedPullRequestVotesArray, setSelectedPullRequestVotesArray] = useState([]);
const [selectedPullRequestState, setSelectedPullRequestState] = useState('');
const [selectedPullRequestYesPercent, setSelectedPullRequestYesPercent] = useState(0);
const [selectedPullRequestNoPercent, setSelectedPullRequestNoPercent] = useState(0);
const [selectedPullRequestBaseBranch, setSelectedPullRequestBaseBranch] = useState('');
const [selectedPullRequestForkBranch, setSelectedPullRequestForkBranch] = useState('');
const [selectedPullRequestCreatedAt, setSelectedPullRequestCreatedAt] = useState('');
const [selectedPullRequestVotePower, setSelectedPullRequestVotePower] = useState(0);
const [selectedPullRequestVoted, setSelectedPullRequestVoted] = useState(false);
const [selectedPullRequestTitle, setSelectedPullRequestTitle] = useState('');
const [selectedPullRequestChosenSide, setSelectedPullRequestChosenSide] = useState('');
const [selectedPullRequestDefaultHash, setSelectedPullRequestDefaultHash] = useState('');
const [selectedPullRequestChildDefaultHash, setSelectedPullRequestChildDefaultHash] = useState('');
const [selectedPullRequestIssueID, setSelectedPullRequestIssueID] = useState('');
const [selectedPullRequestTotalVotes, setSelectedPullRequestTotalVotes] = useState('');
const [selectedPullRequest, setSelectedPullRequest] = useState({});
const navigate = useNavigate();
let name = user?.name;
let username = user?.login;

let [tokenAmount, setTokenAmount] = useState('');

let avatar = user?.avatar_url || null;

useEffect(() => {
//Set current logged in contributor/id to chrome storage for inject to verify user for voting
chrome.storage.local.set({ contributor_name: user.login });
chrome.storage.local.set({ contributor_id: user.ethereumAddress });
setTimeout(() => setLoading(false), 1500);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to remove this setTimeout and have the loading be dependent on the res inside useGetRepoData

console.log('user', user, 'repo', repo, 'owner', owner);
});

const handlePullRequestClick = pullRequest => {
setSelectedPullRequest(pullRequest);
setSelectedPullRequestID(pullRequest.repo_id);
setSelectedPullRequestVotesArray(pullRequest.voteData.votes);
setSelectedPullRequestState(pullRequest.state);
setSelectedPullRequestBaseBranch(pullRequest.baseBranch);
setSelectedPullRequestForkBranch(pullRequest.forkBranch);
setSelectedPullRequestYesPercent((pullRequest.voteData.voteTotals.yesPercent));
setSelectedPullRequestNoPercent(pullRequest.voteData.voteTotals.noPercent);
setSelectedPullRequestCreatedAt(pullRequest.voteData.contributor.createdAt);
setSelectedPullRequestVotePower(pullRequest.voteData.contributor.votePower);
setSelectedPullRequestVoted(pullRequest.voteData.voted);
setSelectedPullRequestTitle(pullRequest.title);
setSelectedPullRequestChosenSide(pullRequest.voteData.contributor.side);
setSelectedPullRequestDefaultHash(pullRequest.defaultHash);
setSelectedPullRequestChildDefaultHash(pullRequest.childDefaultHash);
setSelectedPullRequestIssueID(pullRequest.issue_id);
setSelectedPullRequest({ ...pullRequest });
setSeeModal(true);
setSelectedPullRequestVoted(pullRequest.voteData.contributor.voted);
setSelectedPullRequestTotalVotes(pullRequest.voteData.voteTotals.totalVotes);
};

const getRepoDataHandler = async () => {
try {
const response = await postGetRepoData(`${owner}/${repo}`, user.ethereumAddress).then(res => {
if (res != null || res != undefined) {
setTokenized(true);
}
setPullRequests(res.pullRequests);
let tokens = useCommas(res.contributor.votePower);
setTokenAmount(tokens);
});
} catch (error) {
console.error('Error fetching repo data:', error);
}
};

useEffect(() => {
setTimeout(() => {
getRepoDataHandler();
}, 500);
setPullRequestsLoaded(false);
}, [owner, repo]);
const { onTurboSrc, pullRequests, votePowerAmount } = useRepoData(owner, repo, user.ethereumAddress);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let


socket.on('vote received', function(ownerFromServer, repoFromServer, issueIDFromServer) {
if (owner === ownerFromServer && repo === repoFromServer) {
getRepoDataHandler();
const { onTurboSrc, pullRequests, votePowerAmount } = useRepoData(owner, repo, ethereumAddress);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think change the declarations above to be let instead of const

then just reassign them here

}
});
});

let getVotes = async () => await postGetVotes(repo_id, issue_id, contributor_id);
if (oldVersion){
if (oldVersion) {
return (
<TurbosrcNotice>Your version of Turbosrc is out of date and needs to be updated to continue.</TurbosrcNotice>
);
} else if (owner === 'none' && repo === 'none') {
return (
<TurbosrcNotice>Please visit a Github repo page in your browser to use Turbosrc.</TurbosrcNotice>
);
return <TurbosrcNotice>Please visit a Github repo page in your browser to use Turbosrc.</TurbosrcNotice>;
}


switch (seeModal) {
case true:
return (
Expand All @@ -302,65 +168,28 @@ export default function Home() {
<Back>Back to all</Back>
</BackButton>
<SinglePullRequestView
pullRequests={selectedPullRequest}
repo_id={selectedPullRequestID}
title={selectedPullRequestTitle}
votesArray={selectedPullRequestVotesArray}
state={selectedPullRequestState}
baseBranch={selectedPullRequestBaseBranch}
forkBranch={selectedPullRequestForkBranch}
yesPercent={selectedPullRequestYesPercent}
noPercent={selectedPullRequestNoPercent}
createdAt={selectedPullRequestCreatedAt}
votePower={selectedPullRequestVotePower}
alreadyVoted={selectedPullRequestVoted}
chosenSide={selectedPullRequestChosenSide}
selectedPullRequest={selectedPullRequest}
user={user}
repo={repo}
githubToken={user.token}
defaultHash={selectedPullRequestDefaultHash}
childDefaultHash={selectedPullRequestChildDefaultHash}
contributorID={user.ethereumAddress}
owner={owner}
issueID={selectedPullRequestIssueID}
totalVotes={selectedPullRequestTotalVotes}
contributorID={user.ethereumAddress}
/>

</>
);
case false:
return (
<Content>
<div className="home">
<section>
<TopBar>
<OwnerRepo>
<OwnerText>
<GithubLink href={`https://github.com/${owner}`} target="_blank">
{owner}
</GithubLink>{' '}

</OwnerText>
<SlashText>/</SlashText>
<BoldText>
<GithubLink href={`https://github.com/${owner}/${repo}`} target="_blank">
{repo}
</GithubLink>
</BoldText>
</OwnerRepo>
{tokenized ? (
<VotePower>{tokenAmount === 0 ? '0 votepower' : `${tokenAmount} votepower`}</VotePower>
) : null}
</TopBar>
</section>
{tokenized && (
<TopInfoBar owner={owner} repo={repo} votePowerAmount={votePowerAmount} onTurboSrc={onTurboSrc} />
{onTurboSrc && (
<>
<DataHeading>
<PullRequestHeading>Status</PullRequestHeading>
<PullRequestHeading>Pull Request</PullRequestHeading>
<PullRequestHeading>Yes</PullRequestHeading>
<PullRequestHeading>No</PullRequestHeading>
</DataHeading>
)}
{tokenized && (
<Data>
{pullRequests.map((pr, index) => (
<div onClick={() => handlePullRequestClick(pr)}>
Expand All @@ -379,26 +208,28 @@ export default function Home() {
</div>
))}
</Data>
)}
{tokenized ? null : loading ? (
<SkeletonModal />
) : (
<CenteredWrapper>
<CreateNotice>
If you are the maintainer of{' '}
<CreateRepo>
{owner}/{repo}
</CreateRepo>{' '}
you can add it to Turbosrc
</CreateNotice>

<RepoButton type="button" disabled={owner === user.login ? false : true} onClick={() => navigate('/onboard')}>
<p>Continue</p> <ArrowPic src={ArrowRight} />
</RepoButton>

</CenteredWrapper>
)}
</div>
</>
)}
{onTurboSrc ? null : loading ? (
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This conditional is confusing

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can take out the onTurboSrc ? null : and just have the loading ? etc

<SkeletonModal />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove Modal wording, SkeletonHome or something like that would be better

) : (
<CenteredWrapper>
<CreateNotice>
If you are the maintainer of{' '}
<CreateRepo>
{owner}/{repo}
</CreateRepo>{' '}
you can add it to Turbosrc
</CreateNotice>
<RepoButton
type="button"
disabled={owner === user.login ? false : true}
onClick={() => navigate('/onboard')}
>
<p>Continue</p> <ArrowPic src={ArrowRight} />
</RepoButton>
</CenteredWrapper>
)}
</Content>
);
default:
Expand Down
Loading