Skip to content

Commit c1f9248

Browse files
dipscoderdipscoder
authored
Bookmark (#104)
* Add bookmark feature * Improve styling * Add loader on individual event
1 parent 37a8c18 commit c1f9248

File tree

2 files changed

+276
-248
lines changed

2 files changed

+276
-248
lines changed

‎src/components/BookmarkedEvents.js‎

Lines changed: 84 additions & 130 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, 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: {
@@ -41,6 +43,13 @@ const useStyles = makeStyles(() => ({
4143
marginRight: '16px',
4244
marginBottom: '16px'
4345
},
46+
eventHeading: {
47+
overflow: 'hidden',
48+
textOverflow: 'ellipsis',
49+
display: '-webkit-box',
50+
WebkitLineClamp: 2,
51+
WebkitBoxOrient: 'vertical'
52+
},
4453
checkOut: {
4554
borderRadius: '16px',
4655
marginTop: '21px',
@@ -54,7 +63,36 @@ const useStyles = makeStyles(() => ({
5463

5564
function BookmarkedEvents() {
5665
const classes = useStyles();
57-
useEffect(() => {}, []);
66+
const user = useSelector(state => state.account.user);
67+
const [bookmarkEvent, setBookmarkEvent] = useState([]);
68+
const [eventID, setEventID] = useState(null);
69+
70+
const readIds = async (collection, ids) => {
71+
setEventID(ids);
72+
const reads = ids.map(id => collection.doc(id).get());
73+
const result = await Promise.all(reads);
74+
return result.map(r => r.data());
75+
};
76+
77+
useEffect(() => {
78+
const fetchBookmarkEvents = async () => {
79+
if (user === undefined || user === null) return;
80+
81+
const userID = user.uid;
82+
const db = firebase.firestore();
83+
const userRef = await db.collection('users').doc(userID);
84+
userRef.get().then(doc => {
85+
if (doc.exists) {
86+
let data = doc.data();
87+
readIds(db.collection('events'), data.bookmarked).then(result =>
88+
setBookmarkEvent(result)
89+
);
90+
}
91+
});
92+
};
93+
fetchBookmarkEvents();
94+
}, [user]);
95+
5896
return (
5997
<div className={classes.root}>
6098
<Grid container>
@@ -77,134 +115,50 @@ function BookmarkedEvents() {
77115
</Grid>
78116
<Grid container className={classes.bmEvents}>
79117
{/* sample bookmarked events */}
80-
<Grid className={classes.bmText}>
81-
<Grid
82-
container
83-
style={{
84-
backgroundColor: '#291757CC',
85-
width: '114px',
86-
height: '147px',
87-
borderRadius: '20px'
88-
}}
89-
align="center"
90-
justify="center"
91-
direction="column"
92-
>
93-
<Typography variant="h5" style={{ marginBottom: '14px' }}>
94-
Event-1
95-
</Typography>
96-
<div style={{ display: 'inline-block', margin: '0 auto' }}>
97-
<Typography variant="subtitle1" style={{ fontSize: '10px' }}>
98-
29TH MARCH
99-
</Typography>
100-
<Typography variant="subtitle1" style={{ fontSize: '10px' }}>
101-
6:00 PM
102-
</Typography>
103-
</div>
104-
<Button
105-
style={{ backgroundColor: 'white' }}
106-
className={classes.checkOut}
107-
>
108-
CHECK OUT
109-
</Button>
110-
</Grid>
111-
</Grid>
112-
<Grid className={classes.bmText}>
113-
<Grid
114-
container
115-
style={{
116-
backgroundColor: '#291757CC',
117-
width: '114px',
118-
height: '147px',
119-
borderRadius: '20px'
120-
}}
121-
align="center"
122-
justify="center"
123-
direction="column"
124-
>
125-
<Typography variant="h5" style={{ marginBottom: '14px' }}>
126-
Event-2
127-
</Typography>
128-
<div style={{ display: 'inline-block', margin: '0 auto' }}>
129-
<Typography variant="subtitle1" style={{ fontSize: '10px' }}>
130-
29TH MARCH
131-
</Typography>
132-
<Typography variant="subtitle1" style={{ fontSize: '10px' }}>
133-
6:00 PM
134-
</Typography>
135-
</div>
136-
<Button
137-
style={{ backgroundColor: 'white' }}
138-
className={classes.checkOut}
139-
>
140-
CHECK OUT
141-
</Button>
142-
</Grid>
143-
</Grid>
144-
<Grid className={classes.bmText}>
145-
<Grid
146-
container
147-
style={{
148-
backgroundColor: '#291757CC',
149-
width: '114px',
150-
height: '147px',
151-
borderRadius: '20px'
152-
}}
153-
align="center"
154-
justify="center"
155-
direction="column"
156-
>
157-
<Typography variant="h5" style={{ marginBottom: '14px' }}>
158-
Event-3
159-
</Typography>
160-
<div style={{ display: 'inline-block', margin: '0 auto' }}>
161-
<Typography variant="subtitle1" style={{ fontSize: '10px' }}>
162-
29TH MARCH
163-
</Typography>
164-
<Typography variant="subtitle1" style={{ fontSize: '10px' }}>
165-
6:00 PM
166-
</Typography>
167-
</div>
168-
<Button
169-
style={{ backgroundColor: 'white' }}
170-
className={classes.checkOut}
171-
>
172-
CHECK OUT
173-
</Button>
174-
</Grid>
175-
</Grid>
176-
<Grid className={classes.bmText}>
177-
<Grid
178-
container
179-
style={{
180-
backgroundColor: '#291757CC',
181-
width: '114px',
182-
height: '147px',
183-
borderRadius: '20px'
184-
}}
185-
align="center"
186-
justify="center"
187-
direction="column"
188-
>
189-
<Typography variant="h5" style={{ marginBottom: '14px' }}>
190-
Event-4
191-
</Typography>
192-
<div style={{ display: 'inline-block', margin: '0 auto' }}>
193-
<Typography variant="subtitle1" style={{ fontSize: '10px' }}>
194-
29TH MARCH
195-
</Typography>
196-
<Typography variant="subtitle1" style={{ fontSize: '10px' }}>
197-
6:00 PM
198-
</Typography>
199-
</div>
200-
<Button
201-
style={{ backgroundColor: 'white' }}
202-
className={classes.checkOut}
203-
>
204-
CHECK OUT
205-
</Button>
206-
</Grid>
207-
</Grid>
118+
{bookmarkEvent.length > 0 &&
119+
bookmarkEvent.map((event, idx) => (
120+
<Grid key={idx} className={classes.bmText}>
121+
<Grid
122+
container
123+
style={{
124+
backgroundColor: '#291757CC',
125+
width: '114px',
126+
height: '147px',
127+
borderRadius: '20px'
128+
}}
129+
align="center"
130+
justify="center"
131+
direction="column"
132+
>
133+
<Typography
134+
className={classes.eventHeading}
135+
variant="h5"
136+
style={{ marginBottom: '14px' }}
137+
>
138+
{event.eventName}
139+
</Typography>
140+
<div style={{ display: 'inline-block', margin: '0 auto' }}>
141+
<Typography variant="subtitle1" style={{ fontSize: '10px' }}>
142+
{event.date}
143+
</Typography>
144+
<Typography variant="subtitle1" style={{ fontSize: '10px' }}>
145+
{event.time}
146+
</Typography>
147+
</div>
148+
<Button
149+
className={classes.checkOut}
150+
href={`/events/${eventID[idx]}`}
151+
style={
152+
event?.eventName.length <= 11
153+
? { marginTop: '21px', backgroundColor: 'white' }
154+
: { marginTop: '1px', backgroundColor: 'white' }
155+
}
156+
>
157+
CHECK OUT
158+
</Button>
159+
</Grid>
160+
</Grid>
161+
))}
208162
</Grid>
209163
</div>
210164
);

0 commit comments

Comments
 (0)