Major Refactor

.eslintrc.json

@@ -4,11 +4,10 @@
 	"extends": ["prettier", "plugin:react/recommended"],
 	"rules": {
 		"indent": ["error", "tab", { "SwitchCase": 1 }],
-		"react/jsx-no-bind": "error",
+		"react/jsx-no-bind": "warn",
 		"react/require-default-props": "error",
 		"react/forbid-component-props": ["error", { "forbid": ["style"] }],
 		"react/forbid-dom-props": ["error", { "forbid": ["style"] }],
-		"react/no-danger": "error",
 		"react/no-this-in-sfc": "error",
 		"react/no-unused-prop-types": "warn",
 		"react/no-unused-state": "warn",

src/components/About.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import Team from './Team';
+
+import '../styles/About.css';
+
+class About extends React.Component {
+	componentDidMount() {
+		document.body.scrollTop = 0;
+	}
+	render() {
+		return (
+			<div className="uk-container">
+				<div className="uk-margin-large-top">
+					<div className="about-title">About Fest</div>
+					<p>
+						<span className="primary-color">Indian Institution of Information Technology, Vadodara</span> (IIIT-V) is
+						one of the newly formed IIIT by the Ministry of Human Resource Development (
+						<span className="primary-color">MHRD</span>) , Government of India under Public Private Partnership (PPP)
+						model. The partners in this project are Government of India, Government of Gujarat, Gujarat Energy Research
+						and Management Institute, Gujarat State Fertilizers and Chemicals Ltd. and Tata Consultancy Services.
+					</p>
+					<p>
+						<span className="primary-color">Cerebro</span> is the{' '}
+						<span className="primary-color">Annual Technical Festival</span> of Indian Institute of Information
+						Technology, Vadodara held in <span className="primary-color">March</span>. It is entirely organized by the{' '}
+						<span className="primary-color">Technical Society of IIIT, Vadodara</span> and serves as a platform for
+						technophiles to showcase their creativity and intelligence. The festival aims to bring together great minds
+						through various activities like <span className="primary-color">Technical Workshops, events, talks</span>{' '}
+						and <span className="primary-color">exhibitions</span>.
+					</p>
+				</div>
+				<div className="uk-margin-large-top">
+					<div className="about-title">Team</div>
+					{this.props.team.map((team, idx) => (
+						<Team key={idx} team={team} />
+					))}
+				</div>
+			</div>
+		);
+	}
+}
+
+const mapStateToProps = state => {
+	return {
+		team: state.team.team
+	};
+};
+
+export default connect(mapStateToProps)(About);

src/components/Countdown.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import '../styles/Countdown.css';
+
+const Countdown = props => (
+	<div className="countdown">
+		<img className="uk-margin-large-bottom cerebro-hero" src="./fest-logo.png" alt="Logo" />
+		<div
+			className="uk-grid-small uk-child-width-auto timer"
+			uk-grid="true"
+			uk-countdown="date: 2019-03-02T09:00:00+05:30"
+		>
+			<div>
+				<div className="uk-countdown-number uk-countdown-days" />
+				<div className="uk-countdown-label uk-text-center">DAYS</div>
+			</div>
+			<div className="uk-countdown-separator">:</div>
+			<div>
+				<div className="uk-countdown-number uk-countdown-hours" />
+				<div className="uk-countdown-label uk-text-center">HRS</div>
+			</div>
+			<div className="uk-countdown-separator">:</div>
+			<div>
+				<div className="uk-countdown-number uk-countdown-minutes" />
+				<div className="uk-countdown-label uk-text-center">MINS</div>
+			</div>
+			<div className="uk-countdown-separator">:</div>
+			<div>
+				<div className="uk-countdown-number uk-countdown-seconds" />
+				<div className="uk-countdown-label uk-text-center">SECS</div>
+			</div>
+		</div>
+	</div>
+);
+
+export default Countdown;

src/components/dashboard/index.js → src/components/Dashboard.js

@@ -3,10 +3,11 @@ import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 import _ from 'lodash';
 import * as firebase from 'firebase';
-import './dashboard.css';
 
-import { unregisterFromEvent } from '../../actions/eventActions';
-import { saveUserPhone } from '../../actions/userPhoneReducer';
+import { unregisterFromEvent } from '../actions/eventActions';
+import { saveUserPhone } from '../actions/userPhoneActions';
+
+import '../styles/Dashboard.css';
 
 class Dashboard extends React.Component {
 	componentDidMount() {
@@ -29,7 +30,7 @@ class Dashboard extends React.Component {
 
 	render() {
 		if (!this.props.user) {
-			return <Redirect to={'/'} />;
+			return <Redirect to="/" />;
 		}
 		let userRegisteredEvents = this.props.events.filter(event =>
 			_.some(Object.keys(event.participants), uid => uid === this.props.user.uid)
@@ -39,21 +40,21 @@ class Dashboard extends React.Component {
 			<div className="dashboard uk-container">
 				<div uk-grid="true" className="uk-grid-large uk-child-width-expand@s uk-text-center">
 					<div>
-						<div className={'uk-flex'}>
+						<div className="uk-flex">
 							{this.props.user && (
-								<img className={'uk-border-circle user-img'} src={this.props.user.photoURL} alt={'User'} />
+								<img className="uk-border-circle user-img" src={this.props.user.photoURL} alt="User" />
 							)}
-							<div className={'uk-flex uk-flex-column uk-text-left uk-flex-center'}>
+							<div className="uk-flex uk-flex-column uk-text-left uk-flex-center">
 								<div className="user-name">{this.props.user ? this.props.user.displayName : 'human.'}</div>
-								<div className={'user-name'}>
+								<div className="user-name">
 									<b>Mobile: </b>
 									{this.props.userPhone}
 								</div>
 							</div>
 						</div>
 					</div>
 					<div>
-						<div className="">
+						<div>
 							<button className="uk-button uk-button-secondary" onClick={() => firebase.auth().signOut()}>
 								Sign out
 							</button>
@@ -93,8 +94,8 @@ class Dashboard extends React.Component {
 						ref={ref => (this.mobileInput = ref)}
 						className="uk-input uk-form-width-medium"
 						type="tel"
-						id={'phone-input'}
-						placeholder={'Mobile'}
+						id="phone-input"
+						placeholder="Mobile"
 					/>
 					<button
 						className="uk-button uk-button-secondary uk-margin-left"

src/components/event/index.js → src/components/Event.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import _ from 'lodash';
-import '../../css/EventDetail.css';
 
-import { registerToEvent, unregisterFromEvent } from '../../actions/eventActions';
+import { registerToEvent, unregisterFromEvent } from '../actions/eventActions';
+
+import '../styles/EventDetail.css';
 
 class Event extends React.Component {
 	componentDidMount() {
 		document.body.scrollTo = 0;
 	}
+
 	render() {
 		let eventId = this.props.match.params.id;
 		if (this.props.event.events.length <= eventId) {
@@ -25,8 +27,8 @@ class Event extends React.Component {
 		return (
 			<div className="uk-container uk-margin-large-top">
 				<div uk-grid="true" className="uk-grid-large uk-child-width-expand@s">
-					<div className={'uk-width-1-2@s'}>
-						<img src={event.img ? event.img : '/fest-logo.png'} alt="" />
+					<div className="uk-width-1-2@s">
+						<img src={event.img ? event.img : '/fest-logo.png'} alt="Logo" />
 						<div className="uk-margin-large-top uk-flex uk-flex-center butt">
 							<div>
 								{this.props.user ? (
@@ -49,31 +51,31 @@ class Event extends React.Component {
 							</button>
 						</div>
 					</div>
-					<div className={'uk-width-1-2@s'}>
-						<div style={{ color: 'white', fontWeight: '800', fontSize: '28px' }}>{event.name}</div>
-						<div className={'primary-color uk-margin-top'}>
+					<div className="uk-width-1-2@s">
+						<div className="event-name">{event.name}</div>
+						<div className="primary-color uk-margin-top">
 							PRIZE WORTH: <b>{event['prize-worth']}</b>
 						</div>
-						<div className={'primary-color uk-margin-small-top'}>
+						<div className="primary-color uk-margin-small-top">
 							TEAM SIZE: <b>{event['team-size']}</b>
 						</div>
-						<div className={'primary-color uk-margin-small-top'}>
+						<div className="primary-color uk-margin-small-top">
 							VENUE: <b>{event['venue']}</b>
 						</div>
-						<div className={'primary-color uk-margin-small-top'}>
+						<div className="primary-color uk-margin-small-top">
 							DATE: <b>{event['start-time'].slice(0, 11)}</b>
 						</div>
-						<div className={'primary-color uk-margin-small-top'}>
+						<div className="primary-color uk-margin-small-top">
 							TIME:{' '}
 							<b>
 								{event['start-time'].slice(11)} - {event['end-time'].slice(11)}
 							</b>
 						</div>
-						<div className={'uk-margin-large-top'}>
+						<div className="uk-margin-large-top">
 							<span className="contacts">Contacts:</span>
-							<div className={'uk-margin-top'}>
+							<div className="uk-margin-top">
 								{Object.keys(event.contact).map(role => (
-									<div className={'uk-flex uk-flex-between'} key={role}>
+									<div className="uk-flex uk-flex-between" key={role}>
 										<div>
 											{event.contact[role].name} ({event.contact[role].role})
 										</div>
@@ -82,10 +84,10 @@ class Event extends React.Component {
 								))}
 							</div>
 						</div>
-						<p className={'uk-margin-large-top faded'}>{event.description}</p>
+						<p className="uk-margin-large-top faded">{event.description}</p>
 						<div className="uk-margin-large-top rules">
 							<div className="contacts">Rules</div>
-							<ul className={'rule-ul'}>
+							<ul className="rule-ul">
 								{event.rules.map((rule, idx) => (
 									<li
 										className={'uk-margin-small-top faded rule-li'}