Skip to content

Commit 493c12c

Browse files
dipscoderdipscoder
authored
Public profile (#106)
* 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
1 parent c1f9248 commit 493c12c

File tree

12 files changed

+301
-23853
lines changed

12 files changed

+301
-23853
lines changed

‎package-lock.json

+49-23,750
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
"change-case": "^4.1.1",
5151
"chart.js": "^2.9.3",
5252
"clsx": "^1.1.0",
53+
"copy-to-clipboard": "^3.3.1",
5354
"date-fns": "^2.22.1",
5455
"firebase": "^8.6.7",
5556
"history": "^4.10.1",

‎src/Routes.js

+6
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import Settings from './views/pages/settings/Settings';
1313
import LandingPage from './views/pages/HomeView/LandingPage';
1414
import AuthGuard from './components/auth/AuthGuard';
1515
import LoginPage from 'src/views/pages/login';
16+
import PublicProfile from 'src/components/PublicProfile';
1617

1718
const renderRoutes = () => (
1819
<Suspense fallback={<LoadingScreen />}>
@@ -38,6 +39,11 @@ const renderRoutes = () => (
3839
</AuthGuard>
3940
)}
4041
/>
42+
<Route
43+
path="/publicProfile/:userID"
44+
exact
45+
render={() => <PublicProfile />}
46+
/>
4147
<Route path="/events" exact render={() => <EventDefaultPage />} />
4248
<Route
4349
path="/events/:eventID"

‎src/components/Badge.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -83,31 +83,31 @@ 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"
112112
height="60px"
113113
/>

‎src/components/BookmarkedEvents.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/styles';
33
import { Button, Grid, Typography } from '@material-ui/core';
44
import { useSelector } from 'react-redux';
55
import { firebase } from 'src/services/authService';
6+
import { useHistory } from 'react-router';
67

78
const useStyles = makeStyles(() => ({
89
root: {
@@ -66,6 +67,7 @@ function BookmarkedEvents() {
6667
const user = useSelector(state => state.account.user);
6768
const [bookmarkEvent, setBookmarkEvent] = useState([]);
6869
const [eventID, setEventID] = useState(null);
70+
const history = useHistory();
6971

7072
const readIds = async (collection, ids) => {
7173
setEventID(ids);
@@ -93,6 +95,11 @@ function BookmarkedEvents() {
9395
fetchBookmarkEvents();
9496
}, [user]);
9597

98+
const handleClick = idx => {
99+
if (eventID.length <= 0) return;
100+
history.push(`/events/${eventID[idx]}`);
101+
};
102+
96103
return (
97104
<div className={classes.root}>
98105
<Grid container>
@@ -147,7 +154,7 @@ function BookmarkedEvents() {
147154
</div>
148155
<Button
149156
className={classes.checkOut}
150-
href={`/events/${eventID[idx]}`}
157+
onClick={() => handleClick(idx)}
151158
style={
152159
event?.eventName.length <= 11
153160
? { marginTop: '21px', backgroundColor: 'white' }

‎src/components/Profile.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export default function Profile() {
1717
const [myProfile, setMyProfile] = useState(null);
1818
const [userEvents, setUserEvents] = useState([]);
1919
const [loading, setLoading] = useState(true);
20+
const [profileType] = useState('private');
2021

2122
useEffect(() => {
2223
if (user !== undefined && user !== null) {
@@ -56,7 +57,7 @@ export default function Profile() {
5657
<>
5758
<Grid>
5859
{myProfile !== null ? (
59-
<ProfileInfo myProfile={myProfile} />
60+
<ProfileInfo myProfile={myProfile} profileType={profileType} />
6061
) : (
6162
<>No Data</>
6263
)}

‎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

+111-83
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ import {
1010
Box,
1111
Chip
1212
} from '@material-ui/core';
13-
13+
import { useState } from 'react';
14+
import copy from 'copy-to-clipboard';
15+
import { SnackbarProvider, useSnackbar } from 'notistack';
16+
import { useSelector } from 'react-redux';
1417
const useStyles = makeStyles(theme => ({
1518
root: {
1619
fontFamily: 'Montserrat',
@@ -103,100 +106,125 @@ const AntSwitch = withStyles(theme => ({
103106
checked: {}
104107
}))(Switch);
105108

106-
function ProfileInfo({ myProfile }) {
109+
function ProfileInfo({ myProfile, profileType }) {
107110
const classes = useStyles();
108111
const interestedInArr = myProfile.interestedIn.split(',');
112+
const [copyText, setCopyText] = useState(true);
113+
const { enqueueSnackbar } = useSnackbar();
114+
const user = useSelector(state => state.account.user);
115+
116+
const handleClick = () => {
117+
let variant = 'success';
118+
let publicUrl =
119+
window.location.protocol +
120+
'//' +
121+
window.location.host +
122+
'/publicProfile/' +
123+
user.uid;
124+
if (copyText) {
125+
copy(publicUrl);
126+
enqueueSnackbar('Your Public Profile Link Is Copied!🥳', { variant });
127+
}
128+
setCopyText(!copyText);
129+
};
109130

110131
return (
111132
<Grid container className={classes.root}>
112-
<Box>
113-
<Avatar
114-
alt="ProfileIcon"
115-
src="./static/profile/icons/icons.png"
116-
className={classes.medium}
117-
/>
118-
</Box>
119-
120-
<Box
121-
display="flex"
122-
justifyContent="flex-end"
123-
style={{ position: 'absolute', right: '60px', paddingTop: '50px' }}
124-
>
125-
<Typography variant="h2" className={classes.publictext}>
126-
Public View
127-
</Typography>
128-
129-
<AntSwitch />
130-
</Box>
131-
132-
<Card className={classes.cards}>
133-
<Box display="flex" justifyContent="flex-end">
134-
<Box flexGrow={1} />
135-
<Box xs={12} sm={8}>
136-
<IconButton href={myProfile.linkedIn}>
137-
<img
138-
className={classes.tiny}
139-
alt="LinkedIn"
140-
src="./static/profile/icons/Vector.png"
141-
/>
142-
</IconButton>
143-
<IconButton href={myProfile.twitter}>
144-
<img
145-
className={classes.tiny}
146-
alt="Twitter"
147-
src="./static/profile/icons/Vector-1.png"
148-
/>
149-
</IconButton>
150-
<IconButton href={myProfile.github}>
151-
<img
152-
className={classes.tiny}
153-
alt="GitHub"
154-
src="./static/profile/icons/Vector-3.png"
155-
/>
156-
</IconButton>
157-
<IconButton href={myProfile.website}>
158-
<img
159-
className={classes.tiny}
160-
alt="Website"
161-
src="./static/profile/icons/Vector-2.png"
162-
/>
163-
</IconButton>
164-
</Box>
133+
<SnackbarProvider maxSnack={3}>
134+
<Box>
135+
<Avatar
136+
alt="ProfileIcon"
137+
src={
138+
myProfile.photoURL.length > 0
139+
? myProfile.photoURL
140+
: '.././static/profile/icons/icons.png'
141+
}
142+
className={classes.medium}
143+
/>
165144
</Box>
166145

167-
<Box
168-
display="flex"
169-
flexWrap="wrap"
170-
style={{ paddingLeft: '60px', paddingTop: '10px' }}
171-
>
172-
<Box flexGrow={1} minWidth={200}>
173-
<Typography variant="h1" style={{ fontWeight: '650' }}>
174-
{myProfile.fullName}
175-
</Typography>
176-
<Typography variant="body2" style={{ fontWeight: '650' }}>
177-
{myProfile.role}
178-
</Typography>
179-
<Typography variant="body2" className={classes.profiledesc}>
180-
{myProfile.description}
146+
{profileType === 'private' && (
147+
<Box
148+
display="flex"
149+
justifyContent="flex-end"
150+
style={{ position: 'absolute', right: '60px', paddingTop: '50px' }}
151+
>
152+
<Typography variant="h2" className={classes.publictext}>
153+
Public View
181154
</Typography>
155+
156+
<AntSwitch onClick={handleClick} />
182157
</Box>
158+
)}
159+
<Card className={classes.cards}>
160+
<Box display="flex" justifyContent="flex-end">
161+
<Box flexGrow={1} />
162+
<Box xs={12} sm={8}>
163+
<IconButton href={myProfile.linkedIn}>
164+
<img
165+
className={classes.tiny}
166+
alt="LinkedIn"
167+
src=".././static/profile/icons/Vector.png"
168+
/>
169+
</IconButton>
170+
<IconButton href={myProfile.twitter}>
171+
<img
172+
className={classes.tiny}
173+
alt="Twitter"
174+
src=".././static/profile/icons/Vector-1.png"
175+
/>
176+
</IconButton>
177+
<IconButton href={myProfile.github}>
178+
<img
179+
className={classes.tiny}
180+
alt="GitHub"
181+
src=".././static/profile/icons/Vector-3.png"
182+
/>
183+
</IconButton>
184+
<IconButton href={myProfile.website}>
185+
<img
186+
className={classes.tiny}
187+
alt="Website"
188+
src=".././static/profile/icons/Vector-2.png"
189+
/>
190+
</IconButton>
191+
</Box>
192+
</Box>
193+
183194
<Box
184-
flexGrow={1.5}
185-
maxWidth={380}
186-
mt={1}
187-
style={{ marginTop: '50px' }}
195+
display="flex"
196+
flexWrap="wrap"
197+
style={{ paddingLeft: '60px', paddingTop: '10px' }}
188198
>
189-
<Typography variant="h2" style={{ fontWeight: '650' }}>
190-
Interested in:
191-
</Typography>
192-
{interestedInArr
193-
.filter(e => String(e).trim())
194-
.map(tagName => (
195-
<Chip key={tagName} className={classes.tags} label={tagName} />
196-
))}
199+
<Box flexGrow={1} minWidth={200}>
200+
<Typography variant="h1" style={{ fontWeight: '650' }}>
201+
{myProfile.fullName}
202+
</Typography>
203+
<Typography variant="body2" style={{ fontWeight: '650' }}>
204+
{myProfile.role}
205+
</Typography>
206+
<Typography variant="body2" className={classes.profiledesc}>
207+
{myProfile.description}
208+
</Typography>
209+
</Box>
210+
<Box
211+
flexGrow={1.5}
212+
maxWidth={380}
213+
mt={1}
214+
style={{ marginTop: '50px' }}
215+
>
216+
<Typography variant="h2" style={{ fontWeight: '650' }}>
217+
Interested in:
218+
</Typography>
219+
{interestedInArr
220+
.filter(e => String(e).trim())
221+
.map((tagName, idx) => (
222+
<Chip key={idx} className={classes.tags} label={tagName} />
223+
))}
224+
</Box>
197225
</Box>
198-
</Box>
199-
</Card>
226+
</Card>
227+
</SnackbarProvider>
200228
</Grid>
201229
);
202230
}

0 commit comments

Comments
 (0)