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.

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

Feat: developed contribution section in project page #173

Open
wants to merge 13 commits into
base: develop
Choose a base branch
from
Open
16,201 changes: 16,201 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/Components/Content/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ function Content({ selected, titles }) {
return <AboutUs />;
} else if (selected === 3) {
return <Projects />;
}
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
}
}

if (selected === 5) {
return <Contribute />;
} else {
Expand Down
42 changes: 42 additions & 0 deletions src/Components/Projects/Contribution/Box/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from 'react';
import { StyleSheet, View} from 'react-native';


const ContributionBox = ({ props }) => {
var hue = 0;
switch (true) {
Copy link
Contributor

Choose a reason for hiding this comment

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

This is dodgy i think simple if else would do here

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done @annabauza please check it


case (props < 2):
Copy link
Contributor

Choose a reason for hiding this comment

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

can't we just use interpolation here?

hue = .4;
break;
case (props >=2 && props < 4):
hue = .6;
break;
case (props >=4 && props < 8):
hue = .7;
break;
case (props >=8 && props < 12):
hue = .9;
break;
case (props >=12 ):
hue = 1;
break;
default :
hue = 0;
break;
}
var colorCode = 'rgba(0, 113, 188,' + hue + ')';
return (
<View style={[style.box, {backgroundColor: colorCode}]}/>
);
};

const style = StyleSheet.create({
box: {
width: 20,
height: 20,
margin: 2.5,
}
});

export default ContributionBox;
83 changes: 83 additions & 0 deletions src/Components/Projects/Contribution/ContributionRow.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import ContributionBox from './Box';

class ContributionRow extends React.Component {
Copy link
Contributor

Choose a reason for hiding this comment

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

Change class component to functional component (preferably arrow function).

I know both are same in terms of performance, but functional components are more concise and modern (and are used everywhere else). They don't have any disadvantages but may get optimized in future. Please refer https://www.twilio.com/blog/react-choose-functional-components for more information.

Do let me know if you face any trouble with functional components.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ok i will use useEffect there and it will be done

Copy link
Contributor

Choose a reason for hiding this comment

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

@Bucky25 Are you saying about componentDidMount? If yes, there is a React hook called useEffect which you can use (refer to the link shared above)


constructor(props){
super(props);
this.state = {data: null}
}

componentDidMount(){
const endpoint = this.props.detail.link;
const headers = {
"Authorization" : process.env.ACCESS_TOKEN
}
fetch(endpoint, {
"method" :"GET",
"headers" : headers
})
.then((resp) => resp.json())
.then((js) => this.setState({data: js}));
}

render() {
var Contributionrow = [];
const reponame = this.props.detail.name;
const take = () =>{
Contributionrow.push(<Text key={0} style={styles.desc}>{reponame}</Text>);
var week = 0;
var days =0;
while (true) {
for (var i=6;i>=0;i--)
{
Contributionrow.push(
<ContributionBox key={days+1} props={this.state.data[51-week].days[i]} />
);
days++;
if(days>=30)break;
annabauza marked this conversation as resolved.
Show resolved Hide resolved
}
week++;
if(days>=30)break;
}
return null;
}

return (

<View>
{this.state.data === null ?
<Text style={styles.desc}>loading...</Text>
:
<View style={{
flexDirection: 'row',
flexWrap: 'wrap',
}}
>
{take()}
{Contributionrow}
</View>
}
</View>

);
}
};

const styles = StyleSheet.create({
desc: {
color: '#0071BC',
fontSize: 16,
fontWeight: '400',
width: 190,
margin:4,
},
box: {
flexDirection: 'row',
flexWrap: 'wrap',
marginTop: 8,
}
})

export default ContributionRow;
73 changes: 73 additions & 0 deletions src/Components/Projects/Contribution/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import SectionHeader from './../../SectionHeader';
import ContributionRow from './ContributionRow';
import ContributionBox from './Box';

const data = [
Copy link
Contributor

Choose a reason for hiding this comment

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

move this to content folder please.

{
name : 'Anitab-org.github.io',
link : 'https://api.github.com/repos/anitab-org/anitab-org.github.io/stats/commit_activity',
},
{
name : 'Mentorship-backend',
link : 'https://api.github.com/repos/anitab-org/mentorship-backend/stats/commit_activity',
},
{
name : 'Mentorship-android',
link : 'https://api.github.com/repos/anitab-org/mentorship-android/stats/commit_activity',
},
{
name : 'Mentorship-ios',
link : 'https://api.github.com/repos/anitab-org/mentorship-ios/stats/commit_activity',
},
{
name : 'Portal',
link : 'https://api.github.com/repos/anitab-org/portal/stats/commit_activity',
},
{
name : 'Vms',
link : 'https://api.github.com/repos/anitab-org/vms/stats/commit_activity',
}
];

function Contribution () {
Copy link
Contributor

Choose a reason for hiding this comment

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

Use arrow function here for consistency as it's being used everywhere else.

return (
<View >
<SectionHeader title={'Last 30 Days Contribution'} />
<View style={{margin: 32}}>
{data.map((repo,index) => (
<ContributionRow detail={repo} key={index} />
))
}
<View style={styles.description}>
<Text style={styles.text}>Less</Text>
<ContributionBox props={1} />
Copy link
Contributor

Choose a reason for hiding this comment

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

I think it will be good to rename it from props. The name is misleading.

<ContributionBox props={3} />
<ContributionBox props={6} />
<ContributionBox props={10} />
<ContributionBox props={13} />
<Text style={styles.text}>More</Text>
</View>
</View>
</View>
);

}

const styles = StyleSheet.create({
description: {
flexDirection: 'row',
flexWrap: 'wrap',
alignSelf: 'flex-end',
width: '47%',
},
text: {
color: '#0071BC',
fontSize: 12,
fontWeight: '400',
padding: 4,
},
});

export default Contribution;
4 changes: 2 additions & 2 deletions src/Components/Projects/ProjectCard/ProjectCardBadge/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ const styles = StyleSheet.create({
marginTop: 8,
},
image: {
width: 24,
height: 24,
width: 32,
height: 32,
},
title: {
color: '#103B81',
Expand Down
4 changes: 4 additions & 0 deletions src/Components/Projects/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import { View } from 'react-native';
import ImageTextSection from './../ImageTextSection';
import { getProjects } from './../../content/projects_content';
import ProjectCard from './ProjectCard';
import Calander from './Contribution';
Copy link
Contributor

Choose a reason for hiding this comment

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

Change Calander to Calendar




function Projects(props) {
const projects = getProjects();
Expand Down Expand Up @@ -45,6 +48,7 @@ function Projects(props) {
{/*
<SectionHeader title="Partners" />
<Sponsors /> */}
<Calander/>
</View>
);
}
Expand Down
Binary file added src/assets/events_and_highlights/calendar.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/events_and_highlights/location.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/events_and_highlights/time.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
135 changes: 135 additions & 0 deletions src/content/events_and_highlights.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
const events_highlight = {
sections: [
{
title: 'Our Events and Highlights',
content: [
{
par: 'AnitaB.org Open Source Events convenes members from all backgrounds and levels of expertise throughout the year to bridge the diversity gap in Open Source development.'
},
{
par: 'Our events aim to give members insights from industry experts and female-identifying leaders on a variety of topics promoting Open Source, and covering stages of Open Source development right from Introduction to Quality Assurance.'
}
]
},
{
events: [
{
title: 'Why I contribute to Open source?',
date: 'July 4, 2020',
location: 'Virtual',
timings: '1am (UTC)',
description: [
{
par: 'Heard about Open Source, not sure what’s in it for you? Need a boost to begin?'
},
{
par: 'This event will give you an understanding of the motivation behind individuals who contribute to open source'
},
{
par: 'Open Source contributors with varying experiences will be there to share their journey, and answer your questions!'
}
],
highlights:{
source: require('./../assets/events_and_highlights/1.png'),
},
know_more:
{
par: 'Feel free to contact AnitaB.org Open Source on Zulip if you need any further information about this event.',
link: 'https://anitab-org.zulipchat.com',
}
},
{
title: 'Engaging Open Source community in Quality Assurance',
date: 'August 9, 2020',
location: 'Virtual',
timings: '9am (EST)',
description: [
{
par: 'Wondered how Quality Assurance (QA) for software is performed in companies or what are the roles and responsibilities of an QA engineer?'
},
{
par: 'This talk will help members grasp concepts of traditional QA methods such as formalized testing, writing and tracking bugs which are equally relevant for Open Source development.'
},
{
par: 'We will explore the contrasting nature of software quality assurance under the Open Source model and traditional software development models. Consequently, their translation in practical advantages.'
},
{
par: 'It will draw attention to pragmatic quality assurance practices in upstream Open Source projects like Fedora.'
},
{
par: 'This will certainly give members a head-start by laying out some of the best practices and common challenges faced while quality testing Open Source products.'
}
],
highlights:{
source: require('./../assets/events_and_highlights/2.png'),
},
know_more: {
par: 'Feel free to contact AnitaB.org Open Source on Zulip if you need any further information about this event.',
link: 'https://anitab-org.zulipchat.com',
}
},
{
title: 'Hopper India 2020',
date: 'August 6 — August 7,2020',
location: 'Virtual',
timings: '9:30am - 4pm (IST)',
description: [
{
par: 'Our vibrant community of women in technology from Chennai, Delhi, Hyderabad, and Pune is coming together to present this two-day virtual event modeled after the popular Grace Hopper Celebration India (GHCI) conference for women in technology.'
},
{
par: 'This immersive event brings together women technologists at all levels from industry, academia, research and startups to build connections, learn, and advance their careers.'
},
{
par: 'Attend inspiring keynotes and sessions led by charismatic women carrying a zeal to learn, grow and lead.'
},
{
par: 'Don’t miss out on the opportunity to network with peers, and gain important resources to help you succeed in and further your career.'
},
{
par: 'Our Career Fair, hosting tech giants, research labs, and financial-tech companies, offers immense job opportunities to both students and professionals.'
}
],
highlights:{
source: require('./../assets/events_and_highlights/3.png'),
},
know_more: {
par: 'Visit our official Grace Hopper Celebration India website for details about registration, eligibility, scholarships, conference sessions and FAQs.',
link: 'https://ghcindia.anitab.org/',
}
},
{
title: 'Grace Hopper Celebration 2020',
date: 'September 29 — October 3,2020',
location: 'Virtual',
timings: '11am - 3pm (PT)',
description: [
{
par: 'AnitaB.org’s flagship event Grace Hopper Celebration brings the research and career interests of women in computing to the forefront.'
},
{
par: 'Grace Hopper Celebration (GHC), world’s largest gathering of women technologists, commemorates, celebrates, fosters and encourages the magnificent women in technology who dared to shed their inhibitions, and recognized the genius in them.'
},
{
par: 'Attend inspiring keynotes and sessions, network with peers, and gain important resources to help you succeed in and further your career.'
},
{
par: 'The celebration consists of a combination of technical sessions, poster sessions, career fairs, award ceremonies and more.'
}
],
highlights:{
source: require('./../assets/events_and_highlights/4.png'),
},
know_more:{
par: 'Visit our official Grace Hopper Celebration website for details about registration, eligibility, scholarships, conference sessions and FAQs.',
link: 'https://ghc.anitab.org',
}
}
]
}
]
};

export const getevents_highlights = () => {
return events_highlight;
};
Loading