This is an automated email from the ASF dual-hosted git repository.
ako pushed a commit to branch new-web
in repository https://gitbox.apache.org/repos/asf/age-website.git
The following commit(s) were added to refs/heads/new-web by this push:
new 701f878f contributors update (#121)
701f878f is described below
commit 701f878f367ed3ecc335fd10311f677415a01334
Author: MJinH <[email protected]>
AuthorDate: Thu Jan 5 21:59:52 2023 -0800
contributors update (#121)
Co-authored-by: [email protected] <[email protected]>
---
src/api/issueStateManager.js | 2 +-
src/api/pullRequestStateManager.js | 2 +-
src/components/AgeContributors.js | 193 ++++++++++++++--------
src/components/ContributorsList.js | 6 +-
src/components/WeekContext.js | 19 ++-
src/components/styles/AgeContributors.module.scss | 37 ++---
6 files changed, 160 insertions(+), 99 deletions(-)
diff --git a/src/api/issueStateManager.js b/src/api/issueStateManager.js
index b3b2ae05..33e9cd0f 100644
--- a/src/api/issueStateManager.js
+++ b/src/api/issueStateManager.js
@@ -16,7 +16,7 @@ const getDates = (isLast) => {
}
async function getIssuesStateSetter(setIssueInfo,repo,state) {
- const response = await
fetch(`https://api.github.com/repos/apache/${repo}/issues?state=${state}`,
+ const response = await
fetch(`https://api.github.com/repos/apache/${repo}/issues?state=${state}&per_page=1000`,
{
method: 'GET',
headers: {
diff --git a/src/api/pullRequestStateManager.js
b/src/api/pullRequestStateManager.js
index db5ceed9..18524ece 100644
--- a/src/api/pullRequestStateManager.js
+++ b/src/api/pullRequestStateManager.js
@@ -16,7 +16,7 @@ const getDates = (isLast) => {
}
async function getPullRequestStateSetter(setPullRequestInfo,repo,state) {
- const response = await
fetch(`https://api.github.com/repos/apache/${repo}/pulls?state=${state}`,
+ const response = await
fetch(`https://api.github.com/repos/apache/${repo}/pulls?state=${state}&per_page=1000`,
{
method: 'GET',
headers: {
diff --git a/src/components/AgeContributors.js
b/src/components/AgeContributors.js
index a6945c25..a22bfd79 100644
--- a/src/components/AgeContributors.js
+++ b/src/components/AgeContributors.js
@@ -28,28 +28,48 @@ const Contributors = () => {
const [ageLastTC, setAgeLastTC] = useState({});
const [isLoading, setLoadingYn] = useState(true);
+ const [viewerLastRestTPC, setViewerLastRestTPC] = useState([]);
+ const [ageLastRestTPC, setAgeLastRestTPC] = useState([]);
+ const [viewerThisRestTPC, setViewerThisRestTPC] = useState([]);
+ const [ageThisRestTPC, setAgeThisRestTPC] = useState([]);
+
+ const [isAgeLE, setIsAgeLE] = useState(false);
+ const [isAgeE, setIsAgeE] = useState(false);
+ const [isViewerLE, setIsViewerLE] = useState(false);
+ const [isViewerE, setIsViewerE] = useState(false);
+
useEffect(() => {
issueManager.getIssuesStateSetter(setViewerIssueInfo,'age-viewer','open').then((res)
=> {
if (res) {
-
issueManager.getIssuesStateSetter(setViewerClosedIsInfo,'age-viewer','closed').then((res)
=> {})
- }
- })
-
issueManager.getIssuesStateSetter(setAgeIssueInfo,'age','open').then((res) => {
- if (res) {
-
issueManager.getIssuesStateSetter(setAgeClosedIssueInfo,'age','closed').then((res)
=> {})
- }
- })
-
pullRequestManager.getPullRequestStateSetter(setViewerPullRequestInfo,'age-viewer','open').then((res)
=> {
- if (res) {
-
pullRequestManager.getPullRequestStateSetter(setAgePullRequestInfo,'age','open').then((res)
=> {})
- }
- })
-
pullRequestManager.getPullRequestStateSetter(setViewerClosedPRInfo,'age-viewer','closed').then((res)
=> {
- if (res) {
-
pullRequestManager.getPullRequestStateSetter(setAgeClosedPRInfo,'age','closed').then((res)
=> {})
+
issueManager.getIssuesStateSetter(setViewerClosedIsInfo,'age-viewer','closed').then((res)
=> {
+ if (res) {
+
issueManager.getIssuesStateSetter(setAgeIssueInfo,'age','open').then((res) => {
+ if (res) {
+
issueManager.getIssuesStateSetter(setAgeClosedIssueInfo,'age','closed').then((res)
=> {
+ if (res) {
+
pullRequestManager.getPullRequestStateSetter(setViewerPullRequestInfo,'age-viewer','open').then((res)
=> {
+ if (res) {
+
pullRequestManager.getPullRequestStateSetter(setAgePullRequestInfo,'age','open').then((res)
=> {
+ if (res) {
+
pullRequestManager.getPullRequestStateSetter(setViewerClosedPRInfo,'age-viewer','closed').then((res)
=> {
+ if (res) {
+
pullRequestManager.getPullRequestStateSetter(setAgeClosedPRInfo,'age','closed').then((res)
=> {
+ if (res)
setLoadingYn(false);
+ })
+ }
+ })
+ }
+ })
+ }
+ })
+ }
+ })
+ }
+ })
+ }
+ })
}
})
-
}, []);
useEffect(() => {
@@ -82,57 +102,67 @@ const Contributors = () => {
})
}
- if(viewerIssueInfo.length > 1 || viewerPullRequestInfo.length > 1 ||
viewerClosedPRInfo.length > 1 || viewerClosedIsInfo.length > 1) {
+ const sortPoints = (pts) => {
+ const sortedPoints = Object.keys(pts).sort(function(x,y) {
+ return pts[y] - pts[x]
+ })
+ return sortedPoints
+ }
+
+ if (!isLoading) {
getPoints(viewerPullRequestInfo,100,viewerPts,viewerAvt,viewerLWPT,viewerLWAV);
getPoints(viewerClosedPRInfo,100,viewerPts,viewerAvt,viewerLWPT,viewerLWAV);
getPoints(viewerIssueInfo,50,viewerPts,viewerAvt,viewerLWPT,viewerLWAV);
getPoints(viewerClosedIsInfo,50,viewerPts,viewerAvt,viewerLWPT,viewerLWAV);
- const thisTotalPoints = Object.keys(viewerPts).sort(function(x,y) {
- return viewerPts[y] - viewerPts[x];
- })
- const lastTotalPoints = Object.keys(viewerLWPT).sort(function(x,y)
{
- return viewerLWPT[y] - viewerLWPT[x];
- })
- if (thisTotalPoints.length < 5) {
- const tempV = [null,null,null,null,null];
- tempV.forEach((i) => thisTotalPoints.push(i));
+ const ViewerThisTotalPoints = sortPoints(viewerPts)
+ const ViewerLastTotalPoints = sortPoints(viewerLWPT)
+ if (ViewerThisTotalPoints.length < 5) {
+ const len = ViewerThisTotalPoints.length
+ for(let i=0; i < 5 - len; i++)
+ ViewerThisTotalPoints.push(null)
}
- if (lastTotalPoints.length < 1) {
- lastTotalPoints.push(null);
+ if (ViewerLastTotalPoints.length < 1) {
+ ViewerLastTotalPoints.push(null);
}
- setViewerTopContributors(thisTotalPoints.slice(0,5));
+ setViewerTopContributors(ViewerThisTotalPoints.slice(0,5));
setViewerAvatar(viewerAvt);
- setViewerLastTC(lastTotalPoints.slice(0,1));
+ setViewerLastTC(ViewerLastTotalPoints.slice(0,1));
setViewerLastTCAV(viewerLWAV);
- }
- if(ageIssueInfo.length > 1 || agePullRequestInfo.length > 1 ||
ageClosedPRInfo.length > 1 || ageClosedIssueInfo.length > 1) {
+ if (ViewerLastTotalPoints.length > 1) {
+
setViewerLastRestTPC(ViewerLastTotalPoints.slice(1,ViewerLastTotalPoints.length))
+ }
+ if (ViewerThisTotalPoints.length > 5) {
+
setViewerThisRestTPC(ViewerThisTotalPoints.slice(5,ViewerThisTotalPoints.length))
+ }
getPoints(agePullRequestInfo,100,agePts,ageAvt,ageLWPT,ageLWAV);
getPoints(ageClosedPRInfo,100,agePts,ageAvt,ageLWPT,ageLWAV);
getPoints(ageIssueInfo,50,agePts,ageAvt,ageLWPT,ageLWAV);
getPoints(ageClosedIssueInfo,50,agePts,ageAvt,ageLWPT,ageLWAV);
- const totalPoints = Object.keys(agePts).sort(function(x,y) {
- return agePts[y] - agePts[x];
- })
- const lastTotalPoints = Object.keys(ageLWPT).sort(function(x,y) {
- return ageLWPT[y] - ageLWPT[x];
- })
- if (totalPoints.length < 5) {
- const tempV = [null,null,null,null,null]
- tempV.forEach((i) => totalPoints.push(i))
+ const AgeThisTotalPoints = sortPoints(agePts)
+ const AgeLastTotalPoints = sortPoints(ageLWPT)
+ if (AgeThisTotalPoints.length < 5) {
+ const len = AgeThisTotalPoints.length
+ for(let i=0; i < 5 - len; i++)
+ AgeThisTotalPoints.push(null)
}
- if (lastTotalPoints.length < 1) {
- lastTotalPoints.push(null);
+ if (AgeLastTotalPoints.length < 1) {
+ AgeLastTotalPoints.push(null);
}
- setAgeTopContributors(totalPoints.slice(0,5));
+ setAgeTopContributors(AgeThisTotalPoints.slice(0,5));
setAgeAvatar(ageAvt);
- setAgeLastTC(lastTotalPoints.slice(0,1));
+ setAgeLastTC(AgeLastTotalPoints.slice(0,1));
setAgeLastTCAV(ageLWAV);
- }
- if(viewerTopContributors.length > 1 && ageTopContributors.length > 1)
setLoadingYn(false);
+ if (AgeLastTotalPoints.length > 1) {
+
setAgeLastRestTPC(AgeLastTotalPoints.slice(1,AgeLastTotalPoints.length))
+ }
+ if (AgeThisTotalPoints.length > 5) {
+
setAgeThisRestTPC(AgeThisTotalPoints.slice(5,AgeThisTotalPoints.length))
+ }
+ }
- },
[viewerClosedIsInfo,ageClosedIssueInfo,agePullRequestInfo,ageClosedPRInfo])
+ }, [isLoading])
return (
<>
@@ -142,32 +172,49 @@ const Contributors = () => {
</p>
) : (
<>
- <div className={styles.Repos}>
- <h3>AGE</h3>
- <div className={styles.ReposSeparator}></div>
- <h3>AGE Viewer</h3>
- </div>
<div className={styles.root}>
- <div className={styles.Contributors}>
- <WeekContext text={"Previous Week's Top
Contributor"} last={true}/>
- {ageLastTC?.map((user,index) => (
- <ContributorsList index={index} user={user}
avatar={ageLastTCAV[user]?.avatar} html={ageLastTCAV[user]?.html} last={true} />
- ))}
- <WeekContext text={"Current Week"} last={false}/>
- {ageTopContributors.length > 1 &&
ageTopContributors?.map((user,index) => (
- <ContributorsList index={index} user={user}
avatar={ageAvatar[user]?.avatar} html={ageAvatar[user]?.html} last={false} />
- ))}
- </div>
+ <div>
+ <div className={styles.Repo}>
+ <h3>AGE</h3>
+ </div>
+ <div className={styles.Contributors}>
+ <WeekContext text={"Previous Week's Top
Contributor"} last={true} status={isAgeLE} setStatus={setIsAgeLE}
len={ageLastRestTPC.length}/>
+ {ageLastTC.length > 0 &&
ageLastTC.map((user,index) => (
+ <ContributorsList index={index}
user={user} avatar={ageLastTCAV[user]?.avatar} html={ageLastTCAV[user]?.html}
last={true} icon={true}/>
+ ))}
+ {isAgeLE && ageLastRestTPC.map((user,index) =>
(
+ <ContributorsList index={index+1}
user={user} avatar={ageLastTCAV[user]?.avatar} html={ageLastTCAV[user]?.html}
last={true} icon={false}/>
+ ))}
+ <WeekContext text={"Current Week"}
last={false} status={isAgeE} setStatus={setIsAgeE} len={ageThisRestTPC.length}/>
+ {ageTopContributors.length > 1 &&
ageTopContributors?.map((user,index) => (
+ <ContributorsList index={index}
user={user} avatar={ageAvatar[user]?.avatar} html={ageAvatar[user]?.html}
last={false} icon={false}/>
+ ))}
+ {isAgeE && ageThisRestTPC.map((user,index) => (
+ <ContributorsList index={index+1}
user={user} avatar={ageAvatar[user]?.avatar} html={ageAvatar[user]?.html}
last={true} icon={false}/>
+ ))}
+ </div>
+ </div>
<div className={styles.Separator}></div>
- <div className={styles.Contributors}>
- <WeekContext text={"Previous Week's Top
Contributor"} last={true}/>
- {viewerLastTC?.map((user,index) => (
- <ContributorsList index={index} user={user}
avatar={viewerLastTCAV[user]?.avatar} html={viewerLastTCAV[user]?.html}
last={true} />
- ))}
- <WeekContext text={"Current Week"} last={false}/>
- {viewerTopContributors.length > 1 &&
viewerTopContributors?.map((user,index) => (
- <ContributorsList index={index} user={user}
avatar={viewerAvatar[user]?.avatar} html={viewerAvatar[user]?.html}
last={false} />
- ))}
+ <div>
+ <div className={styles.Repo}>
+ <h3>AGE Viewer</h3>
+ </div>
+ <div className={styles.Contributors}>
+ <WeekContext text={"Previous Week's Top
Contributor"} last={true} status={isViewerLE} setStatus={setIsViewerLE}
len={viewerLastRestTPC.length}/>
+ {viewerLastTC.length > 0 &&
viewerLastTC.map((user,index) => (
+ <ContributorsList index={index}
user={user} avatar={viewerLastTCAV[user]?.avatar}
html={viewerLastTCAV[user]?.html} last={true} icon={true} />
+ ))}
+ {isViewerLE &&
viewerLastRestTPC.map((user,index) => (
+ <ContributorsList index={index+1}
user={user} avatar={viewerLastTCAV[user]?.avatar}
html={viewerLastTCAV[user]?.html} last={true} icon={false}/>
+ ))}
+ <WeekContext text={"Current Week"}
last={false} status={isViewerE} setStatus={setIsViewerE}
len={viewerThisRestTPC.length}/>
+ {viewerTopContributors.length > 1 &&
viewerTopContributors?.map((user,index) => (
+ <ContributorsList index={index}
user={user} avatar={viewerAvatar[user]?.avatar} html={viewerAvatar[user]?.html}
last={false} icon={false} />
+ ))}
+ {isViewerE &&
viewerThisRestTPC.map((user,index) => (
+ <ContributorsList index={index+1}
user={user} avatar={viewerAvatar[user]?.avatar} html={viewerAvatar[user]?.html}
last={true} icon={false}/>
+ ))}
+ </div>
</div>
</div>
</>
diff --git a/src/components/ContributorsList.js
b/src/components/ContributorsList.js
index 8e64c17a..0c2c13f6 100644
--- a/src/components/ContributorsList.js
+++ b/src/components/ContributorsList.js
@@ -2,11 +2,11 @@ import React from 'react';
import * as styles from './styles/AgeContributors.module.scss';
import medalImage from '../../static/img/medal.jpg'
-const ContributorsList = ({ index, user, avatar, html, last }) => {
+const ContributorsList = ({ index, user, avatar, html, last, icon }) => {
return (
- <div className={styles.Users} style={last ? {paddingBottom: "0"} :
{paddingBottom: "1.5rem"}}>
+ <div className={styles.Users}>
<div className={styles.Rank}>
- {last ? <img src={medalImage}></img> : <p>{index+1}</p>}
+ {icon ? user && last ? <img src={medalImage}></img> : <></> :
<p>{index+1}</p> }
<a href={html} style={avatar ? {visibility: "visible"} :
{visibility: "hidden"}}><img className={styles.Avatar} src={avatar}></img></a>
</div>
<div className={styles.User}>
diff --git a/src/components/WeekContext.js b/src/components/WeekContext.js
index a6991a33..a3901290 100644
--- a/src/components/WeekContext.js
+++ b/src/components/WeekContext.js
@@ -1,10 +1,27 @@
import React from 'react';
import * as styles from './styles/AgeContributors.module.scss';
+import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons'
+
+const WeekContext = ({ text, last, status, setStatus, len }) => {
+
+ const handleClick = (s) => {
+ setStatus(s)
+ }
-const WeekContext = ({ text, last }) => {
return (
<div className={styles.Weeks} style={last ? {color: '#483D8B'} :
{color: '#B8145A'}}>
<p>{text}</p>
+ {
+ len > 0 ?
+ <>
+ <div className={styles.Caret} onClick={() =>
handleClick(!status)}>
+ { status ? <CaretUpOutlined /> : <CaretDownOutlined />}
+ </div>
+ </>
+ :
+ <>
+ </>
+ }
</div>
)
}
diff --git a/src/components/styles/AgeContributors.module.scss
b/src/components/styles/AgeContributors.module.scss
index 1b10babf..6bdcc248 100644
--- a/src/components/styles/AgeContributors.module.scss
+++ b/src/components/styles/AgeContributors.module.scss
@@ -5,10 +5,7 @@
display: grid;
grid-template-columns: 1fr 0fr 1fr;
max-width: 90.125rem;
- align-items: center;
- justify-items: center;
width: 100%;
- height: 100%;
/* UI Properties */
opacity: 1;
.Contributors {
@@ -17,6 +14,7 @@
border: 0.25rem solid $thirdColor;
border-radius: 1.625rem;
box-shadow: 0rem 0rem 1.5rem #cf0e5330;
+ height: fit-content;
> h3 {
font: $h3;
color: $primayrColor;
@@ -47,6 +45,9 @@
margin: 0;
width: 40px;
height: 40px;
+ display:flex;
+ align-items: center;
+ justify-content: center;
}
>img {
width: 40px;
@@ -58,10 +59,9 @@
object-fit: contain;
width: 40px;
height: 40px;
- margin-left: 3rem;
+ margin-left: 2rem;
}
}
-
.User {
display:flex;
align-items: center;
@@ -72,8 +72,13 @@
overflow: hidden;
}
}
+
}
.Weeks {
+ display:flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
text-align: center;
padding: 1rem;
>p {
@@ -81,24 +86,16 @@
font-weight: bold;
margin: 0;
}
+ .Caret {
+ position: absolute;
+ right:1rem;
+ font-size: 1.8rem;
+ cursor: pointer;
+ }
}
}
-.Repos {
- margin: 2.75rem auto 0 auto;
- display: grid;
- grid-template-columns: 1fr 0fr 1fr;
- max-width: 80.125rem;
- align-items: center;
- justify-items: center;
- width: 100%;
- height: 100%;
- /* UI Properties */
- opacity: 1;
- .ReposSeparator {
- border: 1px solid #ffffff;
- width: 1px;
- }
+.Repo {
> h3 {
font: $h3;
color: $primayrColor;
