Skip to content

Commit d1be284

Browse files
votrungquan1999votrungquan1999
committed
Search Club Page Unfinished
1 parent facdc6c commit d1be284

File tree

7 files changed

+242
-77
lines changed

7 files changed

+242
-77
lines changed

‎packages/backend/common/models/club.js‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
1-
const Joi = require("@hapi/joi");
2-
const { id } = require("./user");
1+
const Joi = require('@hapi/joi');
2+
const { id } = require('./user');
33

44
const ClubSchema = Joi.object({
5-
id: id,
5+
id: id,
66

7-
name: Joi.string().required(),
7+
name: Joi.string().required(),
88

9-
description: Joi.string().required(),
9+
description: Joi.string().required(),
1010

11-
officers: Joi.array()
12-
.items(id)
13-
.min(1),
11+
officers: Joi.array()
12+
.items(id)
13+
.min(1),
1414

15-
meetingTime: Joi.object({
16-
day: Joi.string(),
17-
time: Joi.string(),
18-
period: Joi.string()
19-
}),
15+
meetingTime: Joi.object({
16+
day: Joi.string(),
17+
time: Joi.string(),
18+
period: Joi.string()
19+
}),
2020

21-
gallery: Joi.array().items(Joi.string()),
21+
gallery: Joi.array().items(Joi.string()),
2222

23-
avatarUrl: Joi.string(),
23+
avatarUrl: Joi.string(),
2424

25-
bannerUrl: Joi.string(),
25+
bannerUrl: Joi.string(),
2626

27-
active: Joi.boolean().required(),
27+
active: Joi.boolean().required(),
2828

29-
//stores array of user ids that favorite club
30-
favoriteUsers: Joi.array().items(id),
29+
//stores array of user ids that favorite club
30+
favoriteUsers: Joi.array().items(id),
3131

32-
tags: Joi.array().items(Joi.string())
32+
tags: Joi.array().items(Joi.string())
3333
});
3434

3535
module.exports = ClubSchema;

‎packages/frontend/src/components/AppBar/AppBar.js‎

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,28 @@
1-
import React from 'react'
2-
import styles from './AppBar.module.css'
3-
import { Link } from 'react-router-dom'
4-
import { SearchBar } from '@clubhub/components'
5-
1+
import React from 'react';
2+
import styles from './AppBar.module.css';
3+
import { Link } from 'react-router-dom';
64

75
const AppBar = () => {
8-
return (
9-
<div className={styles.root}>
10-
<SearchBar/>
11-
<div>
12-
<ul>
13-
<li>
14-
<Link to="/">Home</Link>
15-
</li>
16-
<li>
17-
<Link to="/login">Login</Link>
18-
</li>
19-
<li>
20-
<Link to="/register">Register</Link>
21-
</li>
22-
<li>
23-
<Link to="/setting">Setting</Link>
24-
</li>
25-
</ul>
26-
</div>
27-
</div>
28-
)
29-
}
6+
return (
7+
<div className={styles.root}>
8+
<div>
9+
<ul>
10+
<li>
11+
<Link to='/'>Home</Link>
12+
</li>
13+
<li>
14+
<Link to='/login'>Login</Link>
15+
</li>
16+
<li>
17+
<Link to='/register'>Register</Link>
18+
</li>
19+
<li>
20+
<Link to='/setting'>Setting</Link>
21+
</li>
22+
</ul>
23+
</div>
24+
</div>
25+
);
26+
};
3027

31-
export default AppBar
28+
export default AppBar;

‎packages/frontend/src/components/AppBar/AppBar.module.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.root {
2-
display: flex;
3-
flex-direction: row;
1+
ul {
2+
display: flex;
3+
flex-direction: row;
44
}

‎packages/frontend/src/pages/ClubPage/ClubPage.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React from 'react'
2-
import styles from './ClubPage.module.css'
1+
import React from 'react';
2+
import styles from './ClubPage.module.css';
33

44
const ClubPage = () => {
5-
return <div className={styles.root}>Club Page details</div>
6-
}
5+
return <div className={styles.root}>Club Page details</div>;
6+
};
77

8-
export default ClubPage
8+
export default ClubPage;

‎packages/frontend/src/pages/SearchClubPage/SearchClubPage.js‎

Lines changed: 145 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,147 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
2+
import {
3+
AppBar,
4+
FormControl,
5+
FormLabel,
6+
FormControlLabel,
7+
RadioGroup,
8+
Radio
9+
} from '@material-ui/core';
10+
import { SearchBar } from '@clubhub/components';
11+
// import { icon } from '@material-ui/icons';
12+
import styles from './SearchClubPage.module.css';
13+
import { filterByKeyword, sortBy, filterByStatus } from './helpers';
14+
15+
const MockData = [
16+
{
17+
id: 1,
18+
name: 'codingHub',
19+
favorite: 1000000000000000,
20+
rating: 5,
21+
tags: ['coding', 'cs']
22+
},
23+
{
24+
id: 2,
25+
name: 'V-Nation',
26+
favorite: 10,
27+
rating: 4.5,
28+
tags: ['cultural', 'vietnam']
29+
},
30+
{
31+
id: 3,
32+
name: 'JCab',
33+
favorite: 1,
34+
rating: 4,
35+
tags: ['cultural', 'japanesse']
36+
},
37+
{
38+
id: 4,
39+
name: 'CA',
40+
favorite: 5,
41+
rating: 4,
42+
tags: ['cultural', 'chinesse']
43+
}
44+
];
45+
46+
console.log(sortBy(MockData, 'rating', 'asc'));
247

348
const SearchClubPage = () => {
4-
return (
5-
<div>
6-
SearchClubPage
7-
</div>
8-
)
9-
}
10-
11-
export default SearchClubPage;
49+
const [allClubs, setAllClubs] = useState(MockData);
50+
const [displayClubs, setDisplayClubs] = useState([...allClubs]);
51+
const [searchValue, setSearchValue] = useState('');
52+
const [statusValue, setStatusValue] = useState(true);
53+
54+
const handleChangeSearchBar = (e) => {
55+
setSearchValue(e.target.value);
56+
let newDisplayClubs = filterByKeyword(allClubs, e.target.value);
57+
newDisplayClubs = filterByStatus(newDisplayClubs, statusValue);
58+
setDisplayClubs(newDisplayClubs);
59+
};
60+
61+
const handleChangeStatusOption = (e) => {
62+
setStatusValue(e.target.value);
63+
let newDisplayClubs = filterByStatus(allClubs, e.target.value);
64+
newDisplayClubs = filterByKeyword(newDisplayClubs, searchValue);
65+
setDisplayClubs(newDisplayClubs);
66+
};
67+
68+
const handleChangeSortOptions = (e) => {
69+
const [type, order] = e.target.value.split(',');
70+
console.log(type, order);
71+
const newDisplayClubs = sortBy([...displayClubs], type, order);
72+
console.log(newDisplayClubs);
73+
setDisplayClubs(newDisplayClubs);
74+
};
75+
76+
const appBar = (
77+
<AppBar className='appBar' position='static'>
78+
<p>quan dep trai</p>
79+
</AppBar>
80+
);
81+
const sortingOptions = (
82+
<FormControl component='fieldset'>
83+
<FormLabel component='legend'>Sort Options</FormLabel>
84+
<RadioGroup defaultValue='rating,des' onChange={handleChangeSortOptions}>
85+
<FormControlLabel
86+
value={'rating,des'}
87+
control={<Radio />}
88+
label='Rating: High to Low'
89+
/>
90+
<FormControlLabel
91+
value={'rating,asc'}
92+
control={<Radio />}
93+
label='Rating: Low to High'
94+
/>
95+
<FormControlLabel
96+
value={'favorite,des'}
97+
control={<Radio />}
98+
label='Favorite: High to Low'
99+
/>
100+
<FormControlLabel
101+
value={'favorite,asc'}
102+
control={<Radio />}
103+
label='Favorite: Low to High'
104+
/>
105+
</RadioGroup>
106+
</FormControl>
107+
);
108+
const statusOptions = (
109+
<FormControl component='fieldset'>
110+
<FormLabel component='legend'>Status Options</FormLabel>
111+
<RadioGroup defaultValue={true} onChange={handleChangeStatusOption}>
112+
<FormControlLabel value={true} control={<Radio />} label='Active' />
113+
<FormControlLabel value={false} control={<Radio />} label='Inactive' />
114+
<FormControlLabel value={null} control={<Radio />} label='Active and Inactive' />
115+
</RadioGroup>
116+
</FormControl>
117+
);
118+
const clubList = (
119+
<div className={styles.clubList}>
120+
{displayClubs.map((club) => {
121+
return (
122+
<div className={styles.clubCard} key={club.id}>
123+
this is club card {club.name}
124+
</div>
125+
);
126+
})}
127+
</div>
128+
);
129+
130+
return (
131+
<div className={styles.root}>
132+
{appBar}
133+
<div className={styles.wrapper}>
134+
<SearchBar onChange={handleChangeSearchBar} />
135+
<div className={styles.content}>
136+
<div className={styles.options}>
137+
<div>{statusOptions}</div>
138+
{sortingOptions}
139+
</div>
140+
{clubList}
141+
</div>
142+
</div>
143+
</div>
144+
);
145+
};
146+
147+
export default SearchClubPage;

‎packages/frontend/src/pages/SearchClubPage/SearchClubPage.module.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.root {
2+
background-color: rgba(0, 0, 0, 0.054);
3+
}
4+
5+
.wrapper {
6+
margin-top: 53px;
7+
display: flex;
8+
flex-direction: column;
9+
align-items: center;
10+
}
11+
12+
.content {
13+
margin-top: 50px;
14+
width: 100vw;
15+
display: flex;
16+
flex-direction: row;
17+
justify-content: space-evenly;
18+
}
19+
20+
.clubCard {
21+
margin-bottom: 20px;
22+
width: 40vw;
23+
height: 200px;
24+
background-color: white;
25+
}
26+
27+
.options {
28+
display: flex;
29+
flex-direction: column;
30+
}
31+
32+
.options > * {
33+
margin-bottom: 50px;
34+
}

‎packages/frontend/src/pages/SearchClubPage/helpers.js‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,7 @@
55
* @returns {Object[]} filtered clubs with names or keywords that is similar to the key
66
*/
77
export const filterByKeyword = (clubs, key) =>
8-
clubs.filter(
9-
({ name, keywords }) =>
10-
name.includes(key) || keywords.some(keyword => keyword.includes(key))
11-
)
8+
clubs.filter(({ name, tags }) => name.includes(key) || tags.some((tag) => tag.includes(key)));
129

1310
/**
1411
* Filter clubs with property [active] set to true or false
@@ -17,7 +14,7 @@ export const filterByKeyword = (clubs, key) =>
1714
* @returns {Object[]} filtered clubs with property [active] set to true or false
1815
*/
1916
export const filterByStatus = (clubs, status) =>
20-
clubs.filter(({ active }) => active === status)
17+
clubs.filter(({ active }) => (status === null ? true : status === active));
2118

2219
/**
2320
* Sort clubs by type of 'rating' or 'favorite'. Default to be ascending
@@ -27,10 +24,11 @@ export const filterByStatus = (clubs, status) =>
2724
* @returns {Object[]} sorted clubs by type of 'rating' or 'favorite. Default to be ascending
2825
*/
2926
export const sortBy = (clubs, type, order) =>
30-
[...clubs].sort((a, b) => {
31-
if (order.toLowerCase() === "des") {
32-
return a[type] < b[type]
33-
} else {
34-
return a[type] > b[type]
35-
}
36-
})
27+
[...clubs].sort((a, b) => {
28+
console.log({ type, order });
29+
if (order.toLowerCase() === 'des') {
30+
return a[type] < b[type];
31+
} else {
32+
return a[type] > b[type];
33+
}
34+
});

0 commit comments

Comments
 (0)