+ {this.membersdata.map((item, ix) => {
+ return (
+
+ )}
+ )}
+
+ );
+ }
+}
+
+function getTestData() {
+ return( [{
+ id: 2890627,
+ name: 'Nomad3k',
+ bio: 'Main organiser and React architect for the NottsJS group',
+ photo: {
+ id: 252816582,
+ thumb_link: 'https://secure.meetupstatic.com/photos/member/8/e/e/6/thumb_252816582.jpeg'
+ },
+ link: 'https://www.meetup.com/NottsJS/members/2890627/'
+ }]);
+}
+
+
diff --git a/src/components/Common/Template.jsx b/src/components/Common/Template.jsx
index 35da4fa..e152480 100644
--- a/src/components/Common/Template.jsx
+++ b/src/components/Common/Template.jsx
@@ -1,23 +1,33 @@
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';
+ var templateStyle = {
+ position: 'static',
+ width: '800px',
+ top: '0px',
+ height: '900px',
+ marginLeft: 'auto',
+ marginRight: 'auto'
+ }
return (
-
-
-
- {this.props.children}
-
+
+
+ {this.props.children}
);
}
-}
+}
\ No newline at end of file
diff --git a/src/components/Common/Topics.jsx b/src/components/Common/Topics.jsx
new file mode 100644
index 0000000..1fb67a9
--- /dev/null
+++ b/src/components/Common/Topics.jsx
@@ -0,0 +1,185 @@
+/* eslint no-console: 0*/
+
+import React from 'react';
+import topicData from '../../data/topiclist.js';
+
+// TOPIC COMPONENT =====================================
+class Topic extends React.Component {
+ constructor(props){
+ super(props);
+ }
+
+ // TOPIC return method
+ render(){
+ var divStyle = {
+ position: 'absolute',
+ width: '220px',
+ border: '1px solid black',
+ fontSize: '12px',
+ borderRadius: '30px 30px 30px 30px',
+ backgroundColor: 'pink'
+ }
+ // Position the div's vertically and horizontally
+ // first time through they are placed on top of one another
+ // and hidden. Second and subsequent times through they are visible.
+ divStyle.top = this.props.top + 'px';
+ divStyle.left = this.props.left + 'px';
+ divStyle.visibility = this.props.showTopics;
+
+ var centeredH2 = {
+ textAlign: 'center'
+ }
+ var centeredImg = {
+ margin: '0 auto',
+ display: 'block'
+ }
+ var centeredP = {
+ textAlign: 'center',
+ margin: '0 auto'
+ }
+ var divp = {
+ padding: '15px',
+ width: '180px',
+ marginLeft: 'auto',
+ marginRight: 'auto'
+ }
+ var ds = this.props.dataString;
+ return (
+
this.props.clicked(e,this.props.ident)} style={divStyle} ref={input => this.divRef = input}>
+
{ds.title}
+
+
+
+ );
+ }
+}
+
+
+// TOPICS COMPONENT =================================
+export default class Topics extends React.Component {
+ constructor(props){
+ super(props); // Calls the constructor of the parent class. In this case React.component
+ this.topicData = topicData;
+ this.topPos = [5,5,5];
+ this.leftPos = [5,230,455];
+ // first time through all topics are loaded to 5,5. From there we can get actual rendered sizes
+ // and re-position using state to cause the trigger
+ this.state = ({visibility: 'hidden'});
+ // State is only ever local or it can be passed down as props.
+ this.topicRefs = [];
+ this.topicHeights = [0,0,0];
+ // array to hold refs for the mounted topics
+ console.log('--- Topics Constructor Loading ...');
+
+ }
+
+ componentDidMount(){
+ if (this.state.visibility = 'hidden') {
+ console.log('--- All components mounted - first time load');
+ console.log(this.topicRefs);
+ // Work through all topics to record their rendered height.
+ this.topicRefs.forEach((item,ix) => {
+ this.topicHeights[ix] = item.divRef.offsetHeight;
+ });
+ this.setState({ visibility: 'visible' });
+ /*
+ Note - Immediately after setting state, visibility is still hidden.
+ However by the time we get to re-rendering the Topics it shows correctly
+ as visible.
+ Changing state forces a remount but this time topics will be visible
+ and we know the rendered height of each topic. So we can position
+ it correctly.
+ */
+ } else {
+ console.log('--- All components mounted - through again');
+ }
+ }
+
+ findMinIdx(anArray) {
+ var minVal = anArray[0]; // Keeps a running count of the smallest value so far
+ var minIdx = 0; // Will store the index of minVal
+ var idx=0;
+ for(idx=1; idx
{
+ // Having clicked on the topic we need to take information from the event to
+ // jump to the next route.
+ e.preventDefault();
+ console.log('--- Topic ' + ident + ' has been clicked');
+ console.log('--- Jumping to ' + this.topicData[ident].href);
+ var win = window.open(this.topicData[ident].href);
+ win.focus();
+
+ }
+
+ // MEMBERSLIST return method with styling
+ render(){
+ var bodysection = {
+ position: 'relative',
+ float: 'left',
+ display: 'inline-block',
+ width: '670px',
+ height: '784px',
+ margin: '2px',
+ border: '1px solid black',
+ padding: '5px',
+ backgroundColor:' #ffcccc'
+ // overflow: 'scroll'
+ }
+ console.log('--- Rendering the topics. State is ' + this.state.visibility);
+ console.log('--- Topic Heights ' + this.topicHeights);
+ console.log('--- Topic Tops ' + this.topPos);
+ console.log('--- Topic Lefts ' + this.leftPos);
+
+
+ return(
+
+ {
+ this.topicData.map((item, ix) => {
+ this.newtop = 0;
+ this.newleft = 0;
+ if (this.state.visibility != 'hidden'){
+ this.col = this.findMinIdx(this.topPos)
+ this.newtop = this.topPos[this.col]
+ this.newleft = this.leftPos[this.col]
+ // ... finds the index of the column that is the least utilised
+ // this makes the column positioning dynamic based on the positioning of what
+ // has gone before. Only second time through though. First time through all
+ // topic components are loaded on top of each other at position 5,5 and they are hidden
+ /* console.log('--- The selected column is ' + this.col)
+ console.log('--- The left position is ' + this.leftPos[this.col])
+ console.log('--- The topic height is ' + this.topicHeights[this.col]). */
+ this.topPos[this.col] += this.topicHeights[ix] + 5
+ }
+ return (
+ this.topicRefs[ix] = el}
+ />
+ )}
+ )}
+
+ );
+ }
+}
+
+/*
+
+
+*/
+
diff --git a/src/components/Pages/About.jsx b/src/components/Pages/About.jsx
index e4d7110..7297f4e 100644
--- a/src/components/Pages/About.jsx
+++ b/src/components/Pages/About.jsx
@@ -1,12 +1,15 @@
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 (
-
- This will be the about page
+
+
);
}
}
+
diff --git a/src/components/Pages/Home.jsx b/src/components/Pages/Home.jsx
index e22beae..80f6c6a 100644
--- a/src/components/Pages/Home.jsx
+++ b/src/components/Pages/Home.jsx
@@ -1,14 +1,40 @@
+
import React from 'react';
-import ContributorList from '../../controls/contributor-list';
-import contributors from '../../data/contributors';
-import Template from '../Common/Template'
+import Template from '../Common/Template';
+import Topics from '../Common/Topics';
+import MembersList from '../Common/MembersList';
+
export default class HomeComponent extends React.Component {
render() {
+ var bodycontainer = {
+ position: 'relative',
+ width: '800px',
+ height: '800px',
+ /* border: '3px solid blue', */
+ marginLeft: 'auto',
+ marginRright: 'auto'
+ }
return (
-
-
+
+
+
+
+
);
}
}
+
+/*
+
+
+
+
+
Lovely day for a walk dont you think.
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+