Skip to content

Commit 269e707

Browse files
maryam-olabisimaryam-olabisi
authored
Merge pull request #45 from she-code-africa/event-fixes
Event Page
2 parents 47c56f0 + 58a310c commit 269e707

15 files changed

+282
-55
lines changed

‎package-lock.json

+14
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
@@ -9,6 +9,7 @@
99
"@testing-library/user-event": "^12.8.3",
1010
"axios": "^0.21.1",
1111
"bootstrap": "^5.0.1",
12+
"moment": "^2.29.4",
1213
"node-sass": "^6.0.0",
1314
"react": "^17.0.2",
1415
"react-bootstrap": "^1.6.1",

‎src/App.js

+7
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ import ProgramOverview from "./views/programs/overview";
1919
import ConParticipant from "./views/programs/participants";
2020
import ConMentor from "./views/programs/mentors";
2121
import ConSponsor from "./views/programs/sponsors";
22+
import Report from "./views/programs/report";
23+
import Evaluation from "./views/programs/evaluation";
24+
import Project from "./views/programs/project";
25+
//
2226

2327

2428
import { ProtectedRoute, GuestRoute } from './components/routes';
@@ -62,6 +66,9 @@ function App() {
6266
<Route path="/events"> <Events /> </Route>
6367
<Route exact path="/programs"> <Programs /> </Route>
6468
<Route exact path="/contributhon/overview"> <ProgramOverview /> </Route>
69+
<Route exact path="/contributhon/report"> <Report /> </Route>
70+
<Route exact path="/contributhon/evaluation"> <Evaluation /> </Route>
71+
<Route exact path="/contributhon/projects"> <Project /> </Route>
6572
<Route exact path="/contributhon/participants"> <ConParticipant /> </Route>
6673
<Route exact path="/contributhon/mentors"> <ConMentor /> </Route>
6774
<Route exact path="/contributhon/sponsors"> <ConSponsor /> </Route>

‎src/components/eventcard.js

+68-10
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,74 @@
1-
import React from "react";
1+
import React, { Component } from "react";
22
import '../styles/components/eventcard.css';
3+
import Modal from 'react-bootstrap/Modal';
4+
import Button from "react-bootstrap/Button";
5+
import Moment from 'moment';
36

4-
function Card(props) {
5-
return (
6-
<div className="card event-card">
7-
<div class="card-body">
8-
<h5 class="card-title">{props.eventTitle}</h5>
9-
<h6 class="card-subtitle mb-2">{props.eventLocation}</h6>
10-
<p class="card-text">{props.eventTime}</p>
7+
class Card extends Component {
8+
constructor(props) {
9+
super(props);
10+
this.state = {
11+
activeid: null,
12+
setShow: false,
13+
show: false,
14+
15+
}
16+
}
17+
18+
handleClose = () => {
19+
this.setState({setShow: false, activeid: null})
20+
}
21+
handleShow = e => {
22+
this.setState({setShow: true, activeid: e})
23+
}
24+
25+
render() {
26+
return (
27+
<>
28+
<div className="card event-card" onClick={e => {this.handleShow(this.props._id) }}>
29+
<div className="card-body">
30+
<h5 className="card-title">{this.props.eventTitle}</h5>
31+
<h6 className="card-subtitle mb-2">{this.props.eventLocation}</h6>
32+
<p className="card-text">{Moment(this.props.eventTime).format('MMMM Do YYYY, h:mm:ss a')}</p>
33+
</div>
1134
</div>
12-
</div>
13-
);
35+
<Modal
36+
show = {this.state.setShow}
37+
onHide= {this.handleClose}
38+
{...this.props}
39+
size="md"
40+
aria-labelledby="contained-modal-title-vcenter"
41+
centered
42+
>
43+
<Modal.Header closeButton>
44+
<Modal.Title id="contained-modal-title-vcenter">
45+
Event Details
46+
</Modal.Title>
47+
</Modal.Header>
48+
<Modal.Body>
49+
<h4>{this.props.eventTitle}</h4>
50+
<h6> {Moment(this.props.eventTime).format('MMMM Do YYYY, h:mm:ss a')} to {Moment(this.props.eventEndTime).format('MMMM Do YYYY, h:mm:ss a')}</h6>
51+
<h6>{this.props.eventLocation}</h6>
52+
<br/>
53+
<h5>Details: {this.props.eventDetails}</h5>
54+
55+
</Modal.Body>
56+
<Modal.Footer>
57+
{this.props.eventLink ?
58+
<Button className="sub-button event-button">REGISTER</Button>
59+
: <></> }
60+
<Button className="eventcard-button event-button">
61+
<a href={this.props.eventLink} target="_blank" rel="noreferrer" className="event-link-botton">
62+
REGISTER
63+
</a>
64+
</Button>
65+
<Button className="eventcard-button event-button" onClick={this.handleClose}>CLOSE</Button>
66+
</Modal.Footer>
67+
68+
</Modal>
69+
</>
70+
);
71+
}
1472
}
1573

1674
export default Card;

‎src/styles/components/eventcard.css

+33
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,14 @@
55
border: 1px solid #70707042;
66
border-radius: 15px;
77
margin: 16px 16px;
8+
cursor: pointer;
89
}
910

11+
.event-card:hover {
12+
background: rgb(3, 1, 36) 0% 0% no-repeat border-box;
13+
}
14+
15+
1016
.card-body {
1117
opacity: 1;
1218
}
@@ -41,6 +47,33 @@
4147
font-weight: bold;
4248
}
4349

50+
.eventcard-button {
51+
width: 30% !important;
52+
background: #B70569 0% 0% no-repeat padding-box;
53+
box-shadow: 0px 3px 18px #ffc6e633;
54+
border-radius: 7px;
55+
opacity: 1;
56+
border: 0;
57+
font-size: 10px;
58+
height: 40px;
59+
}
60+
61+
.eventcard-button:hover {
62+
background-color: #FFFFFF;
63+
color: #B70569;
64+
border-width: 1px;
65+
border-style: solid;
66+
border-color: #B70569;
67+
}
68+
69+
.event-link-botton {
70+
color: #FFFFFF;
71+
}
72+
73+
.event-link-botton:hover {
74+
color: #B70569;
75+
}
76+
4477
@media (min-width: 992px) and (max-width: 1199px) {
4578
.event-card {
4679
width: 29%;

‎src/views/admin/joint.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import React, { Component } from "react";
2-
import Logo from "../../assets/icons/Logo.png";
2+
// import Logo from "../../assets/icons/Logo.png";
33
import Dashboard from "./custom";
4-
import Events from './events';
5-
import Programs from './programs';
6-
import User from './users';
7-
import Repos from './repos';
4+
// import Events from './events';
5+
// import Programs from './programs';
6+
// import User from './users';
7+
// import Repos from './repos';
88
import '../../styles/views/admin.css';
99
import Header from '../../components/admin-head';
10-
import { FiBell } from 'react-icons/fi';
11-
import { MdKeyboardArrowDown } from 'react-icons/md';
10+
// import { FiBell } from 'react-icons/fi';
11+
// import { MdKeyboardArrowDown } from 'react-icons/md';
1212

1313
class Admin extends Component {
1414
constructor(props) {
1515
super(props);
1616
this.state = {
17-
value: 0,
18-
subMenu: false
17+
// value: 0,
18+
// subMenu: false
1919
};
2020
}
2121
// showDashboard = () => {

‎src/views/events/event.js

+65-21
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,53 @@
11
import React, { Component } from 'react';
22
import Header from '../../components/header';
33
import Footer from '../../components/footer';
4-
import Subscribe from '../../components/subscribe';
54
import Card from '../../components/eventcard';
65
import woman from '../../assets/images/eventwoman.png';
76
import man from '../../assets/images/eventman.png';
87
import '../../styles/views/event.css';
98
import Form from "react-bootstrap/Form";
109
import Col from "react-bootstrap/Col";
1110
import Button from "react-bootstrap/Button";
12-
import axios from 'axios';
11+
import {events_, events_search} from './eventService';
12+
import { CircularProgress } from '@material-ui/core';
1313

1414

1515
class Events extends Component {
1616
constructor(props) {
1717
super(props);
1818
this.state = {
1919
status: null,
20+
selectedEvent: null,
21+
loading: true,
22+
show: false,
23+
setShow: false,
2024
eventsList: [],
25+
message: '',
26+
location: '',
2127
};
2228
}
23-
29+
30+
changeHandler = (event) => {
31+
this.setState({ [event.target.name]: event.target.value })
32+
}
33+
34+
handleSearch = (e) => {
35+
e.preventDefault();
36+
this.setState({ loading: true })
37+
var locator = this.state.location;
38+
events_search(locator)
39+
.then((response) => {
40+
var results = response.data.data.events;
41+
this.setState({ loading: false })
42+
if (results.length > 0) {
43+
this.setState({ message: ''})
44+
this.setState({ eventsList: results })
45+
} else {
46+
this.setState({ message: `No events found for ${locator}!` })
47+
}
48+
})
49+
}
50+
2451
render() {
2552

2653
return (
@@ -40,16 +67,13 @@ class Events extends Component {
4067
<img src={man} alt="..." />
4168
</div>
4269
</div>
43-
<Form className="form">
70+
<Form className="form" onSubmit={this.handleSearch}>
4471
<Form.Row>
4572
<Col>
46-
<Form.Control placeholder="Location" />
73+
<Form.Control placeholder="Location" readOnly style={{visibility:'hidden'}} />
4774
</Col>
4875
<Col>
49-
<Form.Control placeholder="Time Zone" />
50-
</Col>
51-
<Col>
52-
<Form.Control placeholder="Keyword" />
76+
<Form.Control placeholder="Location" name="location" value={this.state.location} onChange={this.changeHandler} />
5377
</Col>
5478
<Col >
5579
<Button className="sub-button event-button" type="submit">SEARCH</Button>
@@ -58,28 +82,48 @@ class Events extends Component {
5882
</Form.Row>
5983
</Form>
6084
</div>
61-
<div className="row events">
62-
{this.state.eventsList.map((event) => (
63-
<Card
64-
key={event.id}
65-
eventTitle={event.name}
66-
eventLocation={event.location}
67-
eventTime={event.startTime}
68-
/>
69-
))}
85+
<div className='row'>
86+
{this.state.loading ?
87+
<CircularProgress style={{marginLeft:'auto', marginRight:'auto' }} />
88+
: <p></p>
89+
}
7090
</div>
71-
{/* <Subscribe /> */}
91+
{
92+
this.state.message ?
93+
<div className='row'>
94+
<p style={{marginLeft:'auto', marginRight:'auto', color:'#B70569' }}>{this.state.message}</p>
95+
</div>
96+
:
97+
<div className="row events">
98+
{this.state.eventsList.map((event) => (
99+
<Card
100+
key={event._id}
101+
eventTitle={event.name}
102+
eventLocation={event.location}
103+
eventTime={event.startTime}
104+
eventEndTime={event.endTime}
105+
eventDetails={event.description}
106+
/>
107+
))}
108+
</div>
109+
}
72110
<div className="jumbotron"></div>
73111
</div>
74112
<Footer />
75113
</React.Fragment >
76114
)
77115
}
78116
async componentDidMount() {
79-
await axios.get('https://wosca-backend.herokuapp.com/api/v1/events')
117+
await events_()
80118
.then((response) => {
81119
var vop = response.data
82-
this.setState({ eventsList: vop.data.events })
120+
var all_events = vop.data.events
121+
this.setState({ loading: false })
122+
if (all_events.length > 0) {
123+
this.setState({ eventsList: all_events })
124+
} else {
125+
this.setState({ message: 'No events found!' })
126+
}
83127
})
84128
}
85129
}

‎src/views/events/eventService.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import http from "../../services/api"
2+
3+
export const events_ = () => {
4+
return http.get(`/events/`)
5+
}
6+
7+
export const events_search = e => {
8+
return http.get(`/events/search?location=${e}`)
9+
}

0 commit comments

Comments
 (0)