Skip to content

Commit 8a9b7c4

Browse files
dipscoderdipscoder
authored
Public profile (#108)
* Add public profile page * Update static route * Render 'public view' btn conditionally * Add user id on drawer * Add copy to clipboard * Add Profile Photo * Stop reloding the whole page * Update static file location * Update public Profile condition * Fix drawer
1 parent 56cf16b commit 8a9b7c4

File tree

6 files changed

+54
-51
lines changed

6 files changed

+54
-51
lines changed

‎src/components/Badge.js

+4-7
Original file line numberDiff line numberDiff line change
@@ -83,35 +83,32 @@ function Badge() {
8383
{/* for demo purpose added badges statically */}
8484
<Grid item>
8585
<img
86-
src=".././static/images/icons/star_yellow.svg"
86+
src="/static/images/icons/star_yellow.svg"
8787
alt="badge"
8888
height="60px"
8989
/>
9090
<Typography className={classes.badgesText}>Beginner</Typography>
9191
</Grid>
9292
<Grid item>
9393
<img
94-
src=".././static/images/icons/star_orange.svg"
94+
src="/static/images/icons/star_orange.svg"
9595
alt="badge"
9696
height="60px"
9797
/>
9898
<Typography className={classes.badgesText}>Ambassador</Typography>
9999
</Grid>
100100
{/* <Grid item>
101101
<img
102-
src=".././static/images/icons/star_blue.svg"
102+
src="/static/images/icons/star_blue.svg"
103103
alt="badge"
104104
height="60px"
105105
/>
106106
<Typography className={classes.badgesText}>I am Famous</Typography>
107107
</Grid>
108108
<Grid item>
109109
<img
110-
src=".././static/images/icons/star_yellow.svg"
110+
src="/static/images/icons/star_yellow.svg"
111111
alt="badge"
112-
height="60px"
113-
/>
114-
<Typography className={classes.badgesText}>Organizer</Typography>
115112
</Grid> */}
116113
</Grid>
117114
<div className={classes.buttonContainer}>

‎src/components/ProfileEvents.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ function ProfileEvents({ userEvents }) {
102102
onClick={() => handleClick(`${event.eventLink}`)}
103103
>
104104
<img
105-
src=".././static/images/icons/event_calendar_w.svg"
105+
src="/static/images/icons/event_calendar_w.svg"
106106
alt="rsvp"
107107
height="12px"
108108
style={{ marginRight: '6px' }}

‎src/components/ProfileInfo.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ function ProfileInfo({ myProfile, profileType }) {
137137
src={
138138
myProfile.photoURL.length > 0
139139
? myProfile.photoURL
140-
: '.././static/profile/icons/icons.png'
140+
: '/static/profile/icons/icons.png'
141141
}
142142
className={classes.medium}
143143
/>
@@ -164,28 +164,28 @@ function ProfileInfo({ myProfile, profileType }) {
164164
<img
165165
className={classes.tiny}
166166
alt="LinkedIn"
167-
src=".././static/profile/icons/Vector.png"
167+
src="/static/profile/icons/Vector.png"
168168
/>
169169
</IconButton>
170170
<IconButton href={myProfile.twitter}>
171171
<img
172172
className={classes.tiny}
173173
alt="Twitter"
174-
src=".././static/profile/icons/Vector-1.png"
174+
src="/static/profile/icons/Vector-1.png"
175175
/>
176176
</IconButton>
177177
<IconButton href={myProfile.github}>
178178
<img
179179
className={classes.tiny}
180180
alt="GitHub"
181-
src=".././static/profile/icons/Vector-3.png"
181+
src="/static/profile/icons/Vector-3.png"
182182
/>
183183
</IconButton>
184184
<IconButton href={myProfile.website}>
185185
<img
186186
className={classes.tiny}
187187
alt="Website"
188-
src=".././static/profile/icons/Vector-2.png"
188+
src="/static/profile/icons/Vector-2.png"
189189
/>
190190
</IconButton>
191191
</Box>

‎src/components/ProjectsCarousel.js

+10-10
Original file line numberDiff line numberDiff line change
@@ -114,27 +114,27 @@ const ProjectCard = () => {
114114
<Grid container style={{ padding: '2px' }}>
115115
<img
116116
className={classes.ratingStar}
117-
src=".././static/images/icons/rating_star_red.svg"
117+
src="/static/images/icons/rating_star_red.svg"
118118
alt="rating"
119119
/>
120120
<img
121121
className={classes.ratingStar}
122-
src=".././static/images/icons/rating_star_red.svg"
122+
src="/static/images/icons/rating_star_red.svg"
123123
alt="rating"
124124
/>
125125
<img
126126
className={classes.ratingStar}
127-
src=".././static/images/icons/rating_star_red.svg"
127+
src="/static/images/icons/rating_star_red.svg"
128128
alt="rating"
129129
/>
130130
<img
131131
className={classes.ratingStar}
132-
src=".././static/images/icons/rating_star_red.svg"
132+
src="/static/images/icons/rating_star_red.svg"
133133
alt="rating"
134134
/>
135135
<img
136136
className={classes.ratingStar}
137-
src=".././static/images/icons/rating_star_white.svg"
137+
src="/static/images/icons/rating_star_white.svg"
138138
alt="rating"
139139
/>
140140
</Grid>
@@ -144,14 +144,14 @@ const ProjectCard = () => {
144144
</Typography>
145145
<Grid container style={{ padding: '5px', alignItems: 'center' }}>
146146
<div style={{ display: 'flex', marginRight: '10px' }}>
147-
<img src=".././static/images/avatar-1.png" alt="contributor" />
147+
<img src="/static/images/avatar-1.png" alt="contributor" />
148148
<img
149-
src=".././static/images/avatar-2.png"
149+
src="/static/images/avatar-2.png"
150150
style={{ marginLeft: '-15px' }}
151151
alt="contributor"
152152
/>
153153
<img
154-
src=".././static/images/avatar-3.png"
154+
src="/static/images/avatar-3.png"
155155
style={{ marginLeft: '-15px' }}
156156
alt="contributor"
157157
/>
@@ -165,7 +165,7 @@ const ProjectCard = () => {
165165
<Grid>
166166
<Button variant="outlined" className={classes.starButton}>
167167
<img
168-
src=".././static/images/icons/star_button.svg"
168+
src="/static/images/icons/star_button.svg"
169169
style={{ marginRight: '5px' }}
170170
alt="star"
171171
/>
@@ -178,7 +178,7 @@ const ProjectCard = () => {
178178
style={{ backgroundColor: '#291757' }}
179179
>
180180
<img
181-
src=".././static/images/icons/fork_button.svg"
181+
src="/static/images/icons/fork_button.svg"
182182
style={{ marginRight: '5px' }}
183183
alt="fork"
184184
/>

‎src/components/PublicProfile.js

+32-27
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import ProfileEvents from './ProfileEvents';
1010
import ProjectsCarousel from './ProjectsCarousel';
1111
import Loader from './Loader';
1212
import Badge from './Badge';
13+
import fb from 'firebase/app';
1314

1415
const useStyles = makeStyles(theme => ({
1516
root: {
@@ -32,35 +33,39 @@ const PublicProfile = () => {
3233
const history = useHistory();
3334

3435
useEffect(() => {
35-
if (user === undefined || userID === undefined) return;
36-
const db = firebase.firestore();
36+
const fetchData = async () => {
37+
// if (user === undefined) return;
38+
if (fb.apps.length) {
39+
const db = await firebase.firestore();
40+
const userRef = db.collection('users').doc(userID);
3741

38-
const userRef = db.collection('users').doc(userID);
42+
userRef
43+
.get()
44+
.then(doc => {
45+
if (doc.exists) {
46+
const data = doc.data();
47+
setMyProfile(data);
48+
setLoading(false);
49+
} else {
50+
history.push('/*');
51+
return;
52+
}
53+
})
54+
.catch(error => {
55+
console.log('Error getting document:', error);
56+
});
3957

40-
userRef
41-
.get()
42-
.then(doc => {
43-
if (doc.exists) {
44-
const data = doc.data();
45-
setMyProfile(data);
46-
setLoading(false);
47-
} else {
48-
history.push('/*');
49-
return;
50-
}
51-
})
52-
.catch(error => {
53-
console.log('Error getting document:', error);
54-
});
55-
56-
// For getting user's upcoming events
57-
db.collection('events')
58-
.where('createdBy', '==', `${userID}`)
59-
.limit(2)
60-
.get()
61-
.then(userEventCollection => {
62-
setUserEvents(userEventCollection.docs.map(doc => doc.data()));
63-
});
58+
// For getting user's upcoming events
59+
db.collection('events')
60+
.where('createdBy', '==', `${userID}`)
61+
.limit(2)
62+
.get()
63+
.then(userEventCollection => {
64+
setUserEvents(userEventCollection.docs.map(doc => doc.data()));
65+
});
66+
}
67+
};
68+
fetchData();
6469
}, [user, userID, history]);
6570

6671
return (

‎src/layouts/DrawerLayout/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,8 @@ const useStyles = makeStyles(theme => ({
9797
display: 'flex',
9898
textAlign: 'left',
9999
color: 'white',
100-
fontSize: '12px'
100+
fontSize: '12px',
101+
overflowWrap: 'anywhere'
101102
},
102103
idavatar: {
103104
marginLeft: '0px',

0 commit comments

Comments
 (0)