From 5fb64a3440f1e1d77812d1442529bd5558efbaf4 Mon Sep 17 00:00:00 2001 From: spal23 Date: Wed, 31 May 2017 17:23:12 +0100 Subject: [PATCH 1/5] First revision of header completed, home page structured, about and training pages running from template for now --- package.json | 5 +- readme.md | 3 - src/components/Common/Footer.jsx | 4 +- src/components/Common/Header.jsx | 30 ++++-- src/components/Common/MembersList.jsx | 98 ++++++++++++++++++ src/components/Common/Template.jsx | 23 +++-- src/components/Pages/About.jsx | 8 +- src/components/Pages/Home.jsx | 23 +++-- src/data/data.js | 45 ++++++++ src/images/Header_01.jpg | Bin 0 -> 175826 bytes src/images/Header_01.png | Bin 0 -> 244126 bytes src/images/jhlogo.jpeg | Bin 0 -> 7120 bytes src/images/mozlogo.jpeg | Bin 0 -> 2709 bytes src/images/rebellogo.jpeg | Bin 0 -> 6661 bytes src/index.html | 1 + src/styles/App.css | 142 +++++++++++++++++++++++++- 16 files changed, 350 insertions(+), 32 deletions(-) create mode 100644 src/components/Common/MembersList.jsx create mode 100644 src/data/data.js create mode 100644 src/images/Header_01.jpg create mode 100644 src/images/Header_01.png create mode 100644 src/images/jhlogo.jpeg create mode 100644 src/images/mozlogo.jpeg create mode 100644 src/images/rebellogo.jpeg diff --git a/package.json b/package.json index e82d046..a369268 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "release:patch": "npm version patch && npm publish && git push --follow-tags", "serve": "node server.js --env=dev", "serve:dist": "node server.js --env=dist", - "start": "node server.js --env=dev", + "start": "nodemon server.js --env=dev", "test": "karma start", "test:watch": "karma start --autoWatch=true --singleRun=false" }, @@ -38,7 +38,7 @@ "eslint-plugin-react": "^6.0.0", "file-loader": "^0.9.0", "glob": "^7.0.0", - "isparta-instrumenter-loader": "^1.0.0", + "isparta-loader": "^1.0.0", "karma": "^1.0.0", "karma-chai": "^0.1.0", "karma-coverage": "^1.0.0", @@ -49,6 +49,7 @@ "karma-webpack": "^1.7.0", "minimist": "^1.2.0", "mocha": "^3.0.0", + "nodemon": "^1.11.0", "null-loader": "^0.1.1", "open": "0.0.5", "phantomjs-prebuilt": "^2.0.0", diff --git a/readme.md b/readme.md index 15a092c..a2939e3 100644 --- a/readme.md +++ b/readme.md @@ -37,9 +37,6 @@ The routing method was based on the article from .. I have gone with browser history for now rather than hash history if someone knows what they are doing feel free to change that about. -I have played around with props, passing back functions and booleans to the header page -to provide switched layouts just to see if it can be done. All of the trial and error work has been done on the /training route and mapped out to / and /about when I have go the hand of it all. - Changes made to .... Components folder diff --git a/src/components/Common/Footer.jsx b/src/components/Common/Footer.jsx index b112316..bbcccdd 100644 --- a/src/components/Common/Footer.jsx +++ b/src/components/Common/Footer.jsx @@ -4,7 +4,9 @@ import React from 'react'; export default class Footer extends React.Component { render() { return ( - +
+

FOOTER LOCATION

+
); } } \ No newline at end of file diff --git a/src/components/Common/Header.jsx b/src/components/Common/Header.jsx index fd99bfe..bd574fa 100644 --- a/src/components/Common/Header.jsx +++ b/src/components/Common/Header.jsx @@ -2,20 +2,36 @@ import React from 'react'; import { Link } from 'react-router'; +/* +var header = require('../../images/Header_01.jpg'); +var logo = require('../../images/nottsjs.png'); +var spon1 = require('../../images/mozlogo.jpeg'); +

Notts JS - {title}

+*/ + export default class Header extends React.Component { + + /* static propTypes = { title: React.PropTypes.string.isRequired } + */ render() { - const { title } = this.props; return ( -
-

Notts JS - {title}

- Home - About - Training -
+
+ + + + + +
+ Home + About + Training +
+
); } } + diff --git a/src/components/Common/MembersList.jsx b/src/components/Common/MembersList.jsx new file mode 100644 index 0000000..adcd336 --- /dev/null +++ b/src/components/Common/MembersList.jsx @@ -0,0 +1,98 @@ +/* eslint no-console: 0*/ + +import React from 'react'; + +/* +// Member format for the members list compopnent +function Member(props) { + return ( +
+ +

{props.quote}

+

{props.name}

+
+
+ ); +} +*/ + +// Top level React component for the members list +export default class MembersList extends React.Component { + constructor(props){ + super(props); + this.membersdata = () => getTestData() + this.imgwidth = 200; + console.log('--- Memberslist is instantiated'); + //var tm = this.membersdata; + } + + getAllMembersData() { + } + + render(){ + console.log('--- Just rendering the members list'); + return( +
+

Bugger Me Pinkish Here is where it all goes to pot {this.membersdata.id}

+
+ ); + } +} + +/* +function getMeetupAPIKey() { + return ('7121206f695127cd116f2743281550'); +} +*/ + +function getTestData() { + return( { + id: { + id: 2890627, + name: 'Nomad3k', + bio: 'Main organiser and React architect for the NottsJS group', + status: 'active', + joined: 1149459999000, + city: 'Derby', + country: 'gb', + localized_country_name: 'United Kingdom', + state: 'D3', + lat: 52.92, + lon: -1.5, + photo: { + id: 252816582, + highres_link: 'https://secure.meetupstatic.com/photos/member/8/e/e/6/highres_252816582.jpeg', + photo_link: 'https://secure.meetupstatic.com/photos/member/8/e/e/6/member_252816582.jpeg', + thumb_link: 'https://secure.meetupstatic.com/photos/member/8/e/e/6/thumb_252816582.jpeg', + type: 'member', + base_url: 'https://secure.meetupstatic.com' + }, + group_profile: { + status: 'active', + visited: 1495045638000, + created: 1452115213000, + updated: 1454692776000, + role: 'coorganizer', + group: { + id: 19268350, + urlname: 'NottsJS', + name: 'NottsJS', + who: 'Members', + members: 470, + join_mode: 'open', + group_photo: { + id: 445593863, + highres_link: 'https://secure.meetupstatic.com/photos/event/8/4/4/7/highres_445593863.jpeg', + photo_link: 'https://secure.meetupstatic.com/photos/event/8/4/4/7/600_445593863.jpeg', + thumb_link: 'https://secure.meetupstatic.com/photos/event/8/4/4/7/thumb_445593863.jpeg', + type: 'event', + base_url: 'https://secure.meetupstatic.com' + } + } + }, + link: 'https://www.meetup.com/NottsJS/members/2890627/' + } + }); +} + + diff --git a/src/components/Common/Template.jsx b/src/components/Common/Template.jsx index 35da4fa..597b845 100644 --- a/src/components/Common/Template.jsx +++ b/src/components/Common/Template.jsx @@ -1,23 +1,30 @@ import React from 'react'; - -import Header from './header'; -import Footer from './footer'; +import Header from './Header'; +import Footer from './Footer'; export default class Template extends React.Component { + /* static propTypes = { title: React.PropTypes.string.isRequired } + */ + + constructor(props){ + super(props); + } + render() { const { title } = this.props; document.title = title + ' - NottsJS'; return ( -
-
-
- {this.props.children} -
+
+
+
{this.props.children}
); } } +/* + +*/ \ No newline at end of file diff --git a/src/components/Pages/About.jsx b/src/components/Pages/About.jsx index e4d7110..10c8feb 100644 --- a/src/components/Pages/About.jsx +++ b/src/components/Pages/About.jsx @@ -1,11 +1,13 @@ import React from 'react'; +import ContributorList from '../../controls/contributor-list'; +import contributors from '../../data/contributors'; import Template from '../Common/Template' -export default class PageComponent extends React.Component { +export default class AboutComponent extends React.Component { render() { return ( -