Skip to content

Commit 3a2ac33

Browse files
Abhishek-kumar09Abhishek-kumar09
authored
Merge pull request #102 from dipscoder/pageChanges
Page changes
2 parents 49d2758 + 4e44fcc commit 3a2ac33

File tree

12 files changed

+258
-170
lines changed

12 files changed

+258
-170
lines changed

‎src/components/Badge.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -87,17 +87,17 @@ function Badge() {
8787
alt="badge"
8888
height="60px"
8989
/>
90-
<Typography className={classes.badgesText}>Super Blogger</Typography>
90+
<Typography className={classes.badgesText}>Beginner</Typography>
9191
</Grid>
9292
<Grid item>
9393
<img
9494
src="./static/images/icons/star_orange.svg"
9595
alt="badge"
9696
height="60px"
9797
/>
98-
<Typography className={classes.badgesText}>GitHub Hero</Typography>
98+
<Typography className={classes.badgesText}>Ambassador</Typography>
9999
</Grid>
100-
<Grid item>
100+
{/* <Grid item>
101101
<img
102102
src="./static/images/icons/star_blue.svg"
103103
alt="badge"
@@ -112,7 +112,7 @@ function Badge() {
112112
height="60px"
113113
/>
114114
<Typography className={classes.badgesText}>Organizer</Typography>
115-
</Grid>
115+
</Grid> */}
116116
</Grid>
117117
<div className={classes.buttonContainer}>
118118
<Button variant="contained" className={classes.button}>

‎src/components/CreateNewEvent.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,7 @@ function CreateNewEvent() {
250250
formData.createdBy = userId;
251251
formData.bannerImg = imageURL;
252252
formData.createdOn = new Date().toLocaleString();
253+
formData.totalAttendees = 0;
253254
const db = firebase.firestore();
254255
const ref = db.collection('events');
255256

‎src/components/NewEvents.js‎

Lines changed: 68 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import React, { useEffect } from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import { makeStyles } from '@material-ui/styles';
33
import { Button, Card, Grid, Typography } from '@material-ui/core';
4+
import { useSelector } from 'react-redux';
5+
import { firebase } from 'src/services/authService';
46

57
const useStyles = makeStyles(() => ({
68
root: {
@@ -62,101 +64,82 @@ const useStyles = makeStyles(() => ({
6264

6365
function NewEvents() {
6466
const classes = useStyles();
65-
useEffect(() => {}, []);
67+
const user = useSelector(state => state.account.user);
68+
const [attendingEvent, setAttendingEvent] = useState([]);
69+
70+
const readIds = async (collection, ids) => {
71+
const reads = ids.map(id => collection.doc(id).get());
72+
const result = await Promise.all(reads);
73+
return result.map(r => r.data());
74+
};
75+
76+
useEffect(() => {
77+
const fetchAttendingEvents = async () => {
78+
if (user === undefined || user === null) return;
79+
80+
const userID = user.uid;
81+
const db = firebase.firestore();
82+
const userRef = await db.collection('users').doc(userID);
83+
userRef.get().then(doc => {
84+
if (doc.exists) {
85+
let data = doc.data();
86+
readIds(db.collection('events'), data.attending).then(result =>
87+
setAttendingEvent(result)
88+
);
89+
}
90+
});
91+
};
92+
fetchAttendingEvents();
93+
}, [user]);
94+
95+
const handleClick = link => {
96+
if (link.length <= 0) return;
97+
const win = window.open(`${link}`, '_blank');
98+
win.focus();
99+
};
100+
66101
return (
67102
<Card className={classes.root}>
68103
<Grid container>
69104
<Grid item className={classes.topContainer}>
70105
<Typography variant="h1" className={classes.topText}>
71-
New Events
106+
Attending Events
72107
</Typography>
73108
</Grid>
74109
</Grid>
75110
<Grid container className={classes.event}>
76-
<Grid className={classes.eventText}>
77-
<img
78-
style={{ borderRadius: '8px' }}
79-
src=".././static/images/icons/event.svg"
80-
alt="event"
81-
/>
82-
<Grid className={classes.eventInfo}>
83-
<Typography variant="h5">Intro to Open Source</Typography>
84-
<div style={{ display: 'flex' }}>
85-
<Typography variant="subtitle2" className={classes.eventDate}>
86-
16 Jan 2021 (2 days left)
87-
</Typography>
88-
</div>
89-
<Button
90-
variant="contained"
91-
style={{ backgroundColor: 'white' }}
92-
className={classes.rsvp}
93-
>
94-
<img
95-
src=".././static/images/icons/event_calendar.svg"
96-
alt="rsvp"
97-
height="12px"
98-
style={{ marginRight: '6px' }}
99-
/>
100-
RSVP
101-
</Button>
102-
</Grid>
103-
</Grid>
104-
<Grid className={classes.eventText}>
105-
<img
106-
style={{ borderRadius: '8px' }}
107-
src=".././static/images/icons/event.svg"
108-
alt="event"
109-
/>
110-
<Grid className={classes.eventInfo}>
111-
<Typography variant="h5">Intro to Open Source</Typography>
112-
<div style={{ display: 'flex' }}>
113-
<Typography variant="subtitle2" className={classes.eventDate}>
114-
16 Jan 2021 (2 days left)
115-
</Typography>
116-
</div>
117-
<Button
118-
variant="contained"
119-
style={{ backgroundColor: 'white' }}
120-
className={classes.rsvp}
121-
>
122-
<img
123-
src=".././static/images/icons/event_calendar.svg"
124-
alt="rsvp"
125-
height="12px"
126-
style={{ marginRight: '6px' }}
127-
/>
128-
RSVP
129-
</Button>
130-
</Grid>
131-
</Grid>
132-
<Grid className={classes.eventText}>
133-
<img
134-
style={{ borderRadius: '8px' }}
135-
src=".././static/images/icons/event.svg"
136-
alt="event"
137-
/>
138-
<Grid className={classes.eventInfo}>
139-
<Typography variant="h5">Intro to Open Source</Typography>
140-
<div style={{ display: 'flex' }}>
141-
<Typography variant="subtitle2" className={classes.eventDate}>
142-
16 Jan 2021 (2 days left)
143-
</Typography>
144-
</div>
145-
<Button
146-
variant="contained"
147-
style={{ backgroundColor: 'white' }}
148-
className={classes.rsvp}
149-
>
111+
{attendingEvent.length > 0 &&
112+
attendingEvent.map((event, idx) => (
113+
<Grid key={idx} className={classes.eventText}>
150114
<img
151-
src=".././static/images/icons/event_calendar.svg"
152-
alt="rsvp"
153-
height="12px"
154-
style={{ marginRight: '6px' }}
115+
style={{ borderRadius: '8px', width: '74px', height: '71px' }}
116+
src={event.bannerImg}
117+
alt="event"
155118
/>
156-
RSVP
157-
</Button>
158-
</Grid>
159-
</Grid>
119+
<Grid className={classes.eventInfo}>
120+
<Typography variant="h5">{event.eventName}</Typography>
121+
<div style={{ display: 'flex' }}>
122+
<Typography variant="subtitle2" className={classes.eventDate}>
123+
{event.date}
124+
</Typography>
125+
</div>
126+
<Button
127+
variant="contained"
128+
style={{ backgroundColor: 'white' }}
129+
className={classes.rsvp}
130+
onClick={() => handleClick(`${event.eventLink}`)}
131+
>
132+
<img
133+
src=".././static/images/icons/event_calendar.svg"
134+
alt="rsvp"
135+
height="12px"
136+
style={{ marginRight: '6px' }}
137+
/>
138+
RSVP
139+
</Button>
140+
</Grid>
141+
</Grid>
142+
))}
160143
</Grid>
161144
</Card>
162145
);

‎src/components/Profile.js‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { firebase } from 'src/services/authService';
55
import { useSelector } from 'react-redux';
66
import Badge from './Badge';
77
import ProfileInfo from './ProfileInfo';
8-
import ProfilePublications from './ProfilePublications';
8+
// import ProfilePublications from './ProfilePublications';
99
import ProfileEvents from './ProfileEvents';
1010
import CommitChart from './CommitChart';
1111
import ProjectsCarousel from './ProjectsCarousel';
@@ -15,6 +15,7 @@ import Loader from './Loader';
1515
export default function Profile() {
1616
const user = useSelector(state => state.account.user);
1717
const [myProfile, setMyProfile] = useState(null);
18+
const [userEvents, setUserEvents] = useState([]);
1819
const [loading, setLoading] = useState(true);
1920

2021
useEffect(() => {
@@ -24,6 +25,15 @@ export default function Profile() {
2425

2526
const docRef = db.collection('users').doc(userId);
2627

28+
// For getting user's upcoming events
29+
db.collection('events')
30+
.where('createdBy', '==', `${userId}`)
31+
.limit(2)
32+
.get()
33+
.then(userEventCollection => {
34+
setUserEvents(userEventCollection.docs.map(doc => doc.data()));
35+
});
36+
2737
docRef
2838
.get()
2939
.then(doc => {
@@ -61,10 +71,12 @@ export default function Profile() {
6171
</Grid>
6272
<Grid container>
6373
<Grid xs={12} sm={6}>
64-
<ProfileEvents />
74+
{userEvents.length > 0 && (
75+
<ProfileEvents userEvents={userEvents} />
76+
)}
6577
</Grid>
6678
<Grid xs={12} sm={6}>
67-
<ProfilePublications />
79+
{/* <ProfilePublications /> */}
6880
</Grid>
6981
</Grid>
7082
<ProjectsCarousel />

‎src/components/ProfileEvents.js‎

Lines changed: 38 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,16 @@ const useStyles = makeStyles(() => ({
6161
}
6262
}));
6363

64-
function ProfileEvents() {
64+
function ProfileEvents({ userEvents }) {
6565
const classes = useStyles();
6666
useEffect(() => {}, []);
67+
68+
const handleClick = link => {
69+
if (link.length <= 0) return;
70+
const win = window.open(`${link}`, '_blank');
71+
win.focus();
72+
};
73+
6774
return (
6875
<Card className={classes.root}>
6976
<Grid container>
@@ -74,62 +81,37 @@ function ProfileEvents() {
7481
</Grid>
7582
</Grid>
7683
<Grid container className={classes.event}>
77-
<Grid className={classes.eventText}>
78-
<img
79-
style={{ borderRadius: '8px' }}
80-
src="./static/images/icons/prof_event.png"
81-
alt="event"
82-
/>
83-
<Grid className={classes.eventInfo}>
84-
<Typography variant="h5">Intro to Open Source</Typography>
85-
<Typography variant="subtitle2" className={classes.eventDate}>
86-
16 Jan 2021 (2 days left)
87-
<br />
88-
100+ RSVPs
89-
</Typography>
90-
<Button
91-
variant="contained"
92-
style={{ backgroundColor: '#291755' }}
93-
className={classes.eventButton}
94-
>
95-
<img
96-
src="./static/images/icons/event_calendar_w.svg"
97-
alt="rsvp"
98-
height="12px"
99-
style={{ marginRight: '6px' }}
100-
/>
101-
RSVP
102-
</Button>
84+
{userEvents?.map((event, idx) => (
85+
<Grid key={idx} className={classes.eventText}>
86+
<img
87+
style={{ borderRadius: '8px', width: '74px', height: '71px' }}
88+
src={event.bannerImg}
89+
alt="event"
90+
/>
91+
<Grid className={classes.eventInfo}>
92+
<Typography variant="h5">{event.eventName}</Typography>
93+
<Typography variant="subtitle2" className={classes.eventDate}>
94+
{event.date}
95+
<br />
96+
{event.totalAttendees} RSVPs
97+
</Typography>
98+
<Button
99+
variant="contained"
100+
style={{ backgroundColor: '#291755' }}
101+
className={classes.eventButton}
102+
onClick={() => handleClick(`${event.eventLink}`)}
103+
>
104+
<img
105+
src="./static/images/icons/event_calendar_w.svg"
106+
alt="rsvp"
107+
height="12px"
108+
style={{ marginRight: '6px' }}
109+
/>
110+
RSVP
111+
</Button>
112+
</Grid>
103113
</Grid>
104-
</Grid>
105-
<Grid className={classes.eventText}>
106-
<img
107-
style={{ borderRadius: '8px' }}
108-
src="./static/images/icons/prof_event.png"
109-
alt="event"
110-
/>
111-
<Grid className={classes.eventInfo}>
112-
<Typography variant="h5">Git & GitHub Basics</Typography>
113-
<Typography variant="subtitle2" className={classes.eventDate}>
114-
10 Jan 2021
115-
<br />
116-
300+ views
117-
</Typography>
118-
<Button
119-
variant="contained"
120-
style={{ backgroundColor: '#291755' }}
121-
className={classes.eventButton}
122-
>
123-
<img
124-
src="./static/images/icons/play_rec.png"
125-
alt="watch recording"
126-
height="12px"
127-
style={{ marginRight: '6px' }}
128-
/>
129-
WATCH RECORDING
130-
</Button>
131-
</Grid>
132-
</Grid>
114+
))}
133115
</Grid>
134116
</Card>
135117
);

‎src/components/Stats.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22

3-
const Stats = ({ conducted }) => {
3+
const Stats = ({ conducted, attending }) => {
44
const heading = {
55
color: '#291755',
66
marginBottom: '10px'
@@ -60,7 +60,7 @@ const Stats = ({ conducted }) => {
6060
<br />
6161
attended
6262
</p>
63-
<div style={circle}>0</div>
63+
<div style={circle}>{attending}</div>
6464
</div>
6565
</div>
6666
</div>

‎src/components/UserUpcomingEvents.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ function UserUpcomingEvents({ userEvents }) {
9191
style={{ backgroundColor: 'white' }}
9292
className={classes.button}
9393
>
94-
{event.speakers.map(speaker => speaker.speakerName)}
94+
{event.totalAttendees} Attendees
9595
</Button>
9696
</Grid>
9797
</Grid>

0 commit comments

Comments
 (0)