Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on Mar 9, 2021. It is now read-only.

Events page updated #11

Merged
merged 17 commits into from
Oct 17, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -116,4 +116,4 @@ $RECYCLE.BIN/

# Others
data/
.next/
.next/
20 changes: 5 additions & 15 deletions components/count-down.js
Original file line number Diff line number Diff line change
Expand Up @@ -85,38 +85,28 @@ class Countdown extends Component {
<div className="countdown">
<span className="countdown-col">
<span className="countdown-col-element">
<strong>
{this.addLeadingZeros(countDown.days)}
</strong>
<span>
{countDown.days === 1 ? 'Day' : 'Days'}
</span>
<strong>{this.addLeadingZeros(countDown.days)}</strong>
<span>{countDown.days === 1 ? 'Day' : 'Days'}</span>
</span>
</span>

<span className="countdown-col">
<span className="countdown-col-element">
<strong>
{this.addLeadingZeros(countDown.hours)}
</strong>
<strong>{this.addLeadingZeros(countDown.hours)}</strong>
<span>Hours</span>
</span>
</span>

<span className="countdown-col">
<span className="countdown-col-element">
<strong>
{this.addLeadingZeros(countDown.min)}
</strong>
<strong>{this.addLeadingZeros(countDown.min)}</strong>
<span>Min</span>
</span>
</span>

<span className="countdown-col">
<span className="countdown-col-element">
<strong>
{this.addLeadingZeros(countDown.sec)}
</strong>
<strong>{this.addLeadingZeros(countDown.sec)}</strong>
<span>Sec</span>
</span>
</span>
Expand Down
5 changes: 3 additions & 2 deletions components/footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import FaYoutube from 'react-icons/lib/fa/youtube-play';
import FaGithub from 'react-icons/lib/fa/github-alt';
import FaInstagram from 'react-icons/lib/fa/instagram';

export default () =>
export default () => (
<footer>
<div className="footer__container">
<div className="footer__content">
Expand Down Expand Up @@ -79,4 +79,5 @@ export default () =>
color: #314159;
}
`}</style>
</footer>;
</footer>
);
15 changes: 8 additions & 7 deletions components/global-styles.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';

export default () =>
export default () => (
<div>
<style jsx global>{`
*,
Expand All @@ -14,9 +14,9 @@ export default () =>
padding: 0;
margin: 0;
background: #fafafa;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif;
font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
'Helvetica Neue', sans-serif;
font-weight: 400;
color: #444;
text-rendering: optimizeLegibility;
Expand All @@ -43,11 +43,12 @@ export default () =>
width: 100px;
height: 100%;
box-shadow: 0 0 10px #d812c8, 0 0 5px #d812c8;
opacity: 1.0;
opacity: 1;
transform: rotate(3deg) translate(0px, -4px);
}
.headroom--pinned header {
box-shadow: 0 2px 4px rgba(61, 71, 82, .1);
box-shadow: 0 2px 4px rgba(61, 71, 82, 0.1);
}
`}</style>
</div>;
</div>
);
9 changes: 4 additions & 5 deletions components/head.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import Head from 'next/head';

export default ({ title }) =>
export default ({ title }) => (
<Head>
<meta charSet="utf-8" />
<meta
Expand Down Expand Up @@ -41,14 +41,13 @@ export default ({ title }) =>
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"
/>
<title>
{title}
</title>
<title>{title}</title>
<meta name="description" content="coderplex" />
<meta property="og:type" content="website" />
<meta property="og:title" content={title} />
<meta property="og:url" content="https://coderplex.org" />
<meta property="og:image" content="/static/favicons/favicon-32x32.png" />
<meta property="og:site_name" content="coderplex" />
<meta property="og:description" content="coderplex" />
</Head>;
</Head>
);
5 changes: 3 additions & 2 deletions components/header.js
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export default props => {
</li>
);
})}
{props.username &&
{props.username && (
<li className="nav__linkItem">
<img src={props.avatarUrl} alt="avatar_img" />
<Dropdown
Expand All @@ -109,7 +109,8 @@ export default props => {
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</li>}
</li>
)}
</ul>
</nav>
</div>
Expand Down
5 changes: 3 additions & 2 deletions components/icon.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';

export default () =>
export default () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
fill="#6B4841"
Expand Down Expand Up @@ -45,4 +45,5 @@ export default () =>
height: 200px;
}
`}</style>
</svg>;
</svg>
);
40 changes: 40 additions & 0 deletions components/row-events.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from 'react';
import { Card, Icon } from 'semantic-ui-react';
import moment from 'moment';

const RowEvent = props => {
return (
<Card fluid raised targer="_blank" href={props.link}>
<Card.Content>
<Card.Header>{props.name}</Card.Header>
<div className="card_venue">
<Card.Meta>
{props.venue === undefined ? 'Online' : props.venue.name}
</Card.Meta>
</div>
</Card.Content>
<Card.Content extra>
<span className="card_icons">
<Icon name="clock" />
{moment(props.time).format("h:mm A, ddd MMM Do 'YY")}
</span>
<span className="card_icons">
<Icon name="users" />
{`${props.yesCount} attended`}
</span>
<Icon name="log out" />
{props.venue === undefined ? 'Free session' : 'Free entry'}
</Card.Content>
<style jsx>{`
.card_venue {
margin-top: 15px;
}
.card_icons {
margin-right: 15px;
}
`}</style>
</Card>
);
};

export default RowEvent;
10 changes: 5 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
"main": "index.js",
"scripts": {
"test": "xo",
"lint": "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write --single-quote --print-width='80' --trailing-comma='all' && xo --fix",
"lint":
"prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write --single-quote --print-width='80' --trailing-comma='all' && xo --fix",
"precommit": "lint-staged",
"analyze": "cross-env ANALYZE=1 next build",
"dev": "cross-env NODE_ENV=development nodemon server.js -w server.js",
Expand Down Expand Up @@ -33,9 +34,6 @@
"git add"
]
},
"engines": {
"node": "8.1.4"
},
"keywords": [],
"author": "Vinay Puppal <[email protected]> (https://www.vinaypuppal.com/)",
"license": "MIT",
Expand All @@ -49,6 +47,7 @@
"feathers-rest": "^1.8.0",
"isomorphic-unfetch": "^2.0.0",
"js-cookie": "^2.1.4",
"moment": "^2.19.1",
"next": "2.4.7",
"nprogress": "^0.2.0",
"preact": "^8.2.1",
Expand All @@ -60,6 +59,7 @@
"react-ga": "^2.2.0",
"react-headroom": "^2.1.6",
"react-icons": "^2.2.5",
"react-textgradient": "0.0.2",
"semantic-ui-react": "^0.71.3"
},
"devDependencies": {
Expand All @@ -71,7 +71,7 @@
"husky": "^0.14.3",
"lint-staged": "^4.0.2",
"nodemon": "^1.11.0",
"prettier": "^1.5.3",
"prettier": "^1.7.0",
"webpack-bundle-analyzer": "^2.8.3",
"xo": "^0.18.2"
}
Expand Down
121 changes: 103 additions & 18 deletions pages/events.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,109 @@
import React from 'react';
import axios from 'axios';
import { Card } from 'semantic-ui-react';

import Icon from '../components/icon';
import publicPage from '../hocs/public-page';
import {
futureEventsMeetupURL,
pastEventsMeetupURL,
reverseProxyCORS,
} from '../utils/urls';
import RowEvent from '../components/row-events';

export default publicPage(() =>
<div>
<main>
<Icon />
<h3>Under Construction, Coming Soon!...</h3>
</main>
<style jsx>{`
main {
min-height: calc(100vh - 70px);
background: #f4f7fb;
color: #314159;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
export default publicPage(
class Events extends React.Component {
static async getInitialProps() {
try {
const requestPastEvents = await axios.get(
`${reverseProxyCORS}${pastEventsMeetupURL}`,
);
const requestFutureEvents = await axios.get(
`${reverseProxyCORS}${futureEventsMeetupURL}`,
);
return {
pastEvents: requestPastEvents.data,
futureEvents: requestFutureEvents.data,
};
} catch (err) {
return {
pastEvents: 'err',
futureEvents: 'err',
};
}
`}</style>
</div>,
}

render() {
return (
<div>
<div className="top_banner_root">
<h1 className="top_banner_headline">Events</h1>
<h2>Because you cannot change the world alone</h2>
</div>
<main>
{this.props.pastEvents !== 'err' &&
this.props.futureEvents !== 'err' ? (
<div>
<h4>Upcoming events</h4>
<div>
{this.props.futureEvents.map(event => (
<Card.Group key={event.id}>
<RowEvent
name={event.name}
yesCount={event.yes_rsvp_count}
time={event.time}
venue={event.venue}
link={event.link}
/>
</Card.Group>
))}
</div>
<h4>Recent events</h4>
<div>
{this.props.pastEvents.map(event => (
<Card.Group key={event.id}>
<RowEvent
key={event.id}
name={event.name}
yesCount={event.yes_rsvp_count}
time={event.time}
venue={event.venue}
link={event.link}
/>
</Card.Group>
))}
</div>
</div>
) : (
<div>Failed to Retrieve Events</div>
)}
</main>
<style jsx>{`
main {
background-color: #ffffff;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
min-height: calc(100vh - 70px);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.top_banner_root {
background-color: #f4f7fb;
min-height: 200px;
text-align: center;
}
.top_banner_headline {
padding-top: 20px;
font-size: 4em;
color: #df1cb5;
font-weight: 900;
}
`}</style>
</div>
);
}
},
);
Loading