Adds meals provided field & organisation feed

src/components/HomePage/EventFeed.js

@@ -1,8 +1,7 @@
-import React, { Component, Fragment } from "react";
+import React, { Component } from "react";
 import { Feed, Segment, Dimmer, Loader, Image, Grid } from "semantic-ui-react";
-import { Link } from "react-router-dom";
 
-import { timeSince } from "../../helpers";
+import { eventLogMapper } from "../../helpers";
 import { db } from "../../firebase";
 
 import jennySmall from "../../jennySmall.jpg";
@@ -37,74 +36,6 @@ const FeedFromArray = props => (
   </Feed>
 );
 
-const eventLogMapper = {
-  SEND_TOKENS: eventItem => {
-    const { docId: id, details, dateCreated } = eventItem;
-    const hours = details.amount;
-    const description = details.description || "";
-    const toLink = <Link to={`user/${details.to.id}`}>{details.to.name}</Link>;
-    const fromLink = (
-      <Link to={`user/${details.from.id}`}>{details.from.name}</Link>
-    );
-    return {
-      id,
-      summary: (
-        <Fragment>
-          {toLink} recieved {hours} hours from {fromLink}
-        </Fragment>
-      ),
-      date: timeSince(dateCreated),
-      extra: description
-    };
-  },
-  APPROVE_TOKENS: eventItem => {
-    const { docId: id, details, dateCreated } = eventItem;
-    const hours = details.tokens;
-    const description = details.description;
-    const contributorLink = (
-      <Link to={`user/${details.requesterId}`}>{details.requesterName}</Link>
-    );
-    const organisationLink = (
-      <Link to={`organisation/${details.fromId}`}>{details.fromName}</Link>
-    );
-    return {
-      id,
-      summary: (
-        <Fragment>
-          {contributorLink} helped {hours} people with {organisationLink}{" "}
-          (Approved)
-        </Fragment>
-      ),
-      date: timeSince(dateCreated),
-      extra: description
-    };
-  },
-  REQUEST_TOKENS: eventItem => {
-    const { docId: id, details, dateCreated } = eventItem;
-    const hours = details.loggedHours;
-    const description = details.description;
-    const contributorLink = (
-      <Link to={`user/${details.requester.id}`}>{details.requester.name}</Link>
-    );
-    const organisationLink = (
-      <Link to={`organisation/${details.fromOrg.id}`}>
-        {details.fromOrg.name}
-      </Link>
-    );
-    return {
-      id,
-      summary: (
-        <Fragment>
-          {contributorLink} helped {hours} people with {organisationLink}{" "}
-          (Pending approval)
-        </Fragment>
-      ),
-      date: timeSince(dateCreated),
-      extra: description
-    };
-  }
-};
-
 class EventFeed extends Component {
   state = {
     feedItems: [],

src/components/InfoModal.js

@@ -23,12 +23,12 @@ const infoPanes = [
     text: (
       <Fragment>
         <Header content="Help people" size="small" />
-        Help people in your community.
+        <p>Help people in your community.</p>
         <Header content="Post your impact" size="small" />
-        Post your impact on the newsfeed.
+        <p>Post your impact on the newsfeed.</p>
         <Header content="Evidence impact." size="small" />
-        We hope this tool will provide an easy framework for mutualist groups to
-        achieve support for their work.
+        <p>We hope this tool will provide an easy framework for mutualist groups to
+        achieve support for their work.</p>
       </Fragment>
     ),
 
@@ -60,14 +60,17 @@ const infoPanes = [
     text: (
       <Fragment>
         <Header content="Who is making this" size="small" />
-        This system is designed by members of the National Food Service
-        campaign, a grassroots network to end food insecurity in the U.K. We are
-        looking for more contributors, so if you would like to help build this
-        app or for more information visit the
-        <a href="https://www.nationalfoodservice.uk/">
+        <p>
+          This system is designed by members of the National Food Service
+          campaign, a grassroots network to end food insecurity in the U.K. We are
+          looking for more contributors, so if you would like to help build this
+          app or for more information visit the
           {" "}
-          National Food Service website
-        </a>
+          <a href="https://www.nationalfoodservice.uk/">
+
+            National Food Service website
+          </a>
+        </p>
       </Fragment>
     ),
 
@@ -107,6 +110,7 @@ class InfoGallery extends Component {
   render() {
     const { panes } = this.props;
     const { activeIndex } = this.state;
+    const pane = panes[ activeIndex ];
     return (
       <Grid
         as={Swipeable}
@@ -119,11 +123,11 @@ class InfoGallery extends Component {
             <Button basic icon="chevron left" onClick={this.onLeftClick} />
           </Grid.Column>
           <Grid.Column width={6} stretched>
-            <Header content={panes[activeIndex].header} size="huge" />
-            <p>{panes[activeIndex].text}</p>
+            <Header content={pane.header} size="huge" />
+            {typeof pane.text === 'string' ? <p>{ pane.text }</p> : pane.text}
           </Grid.Column>
           <Grid.Column width={6} verticalAlign="middle">
-            <Image src={panes[activeIndex].image} />
+            <Image src={pane.image} />
           </Grid.Column>
           <Grid.Column width={2} verticalAlign="middle" only="computer">
             <Button basic icon="chevron right" onClick={this.onRightClick} />

src/components/InfoPages/OrganisationPage.js

@@ -3,6 +3,7 @@ import { Icon } from "semantic-ui-react";
 
 import { db } from "../../firebase";
 import LoadingCardView from "../LoadingCardView";
+import OrganisationFeed from '../OrganisationFeed';
 
 import moonScaffold from "../../moonScaffold.jpg";
 
@@ -11,38 +12,51 @@ class OrganisationPage extends React.Component {
     name: "",
     description: "",
     hoursGenerated: null,
+    mealsProvided: null,
     loading: true
   };
 
   componentDidMount() {
     const match = this.props.match;
-    console.log(match);
     db.getOrganisation(match.params.organisationId).then(
-      ({ name, hoursGenerated, description }) => {
-        this.setState({ name, hoursGenerated, description, loading: false });
+      ({ name, hoursGenerated, mealsProvided, description }) => {
+        this.setState({
+          name,
+          hoursGenerated,
+          mealsProvided,
+          description,
+          loading: false
+        });
       }
     );
   }
 
   render() {
+    const match = this.props.match;
+    const meta = [];
+    if ( this.state.hoursGenerated ) {
+      meta.push( `${ this.state.hoursGenerated } people helped` );
+    }
+    if ( this.state.mealsProvided ) {
+      meta.push( `${ this.state.mealsProvided } meals provided` );
+    }
     return (
-      <LoadingCardView
-        loading={this.state.loading}
-        header={this.state.name || ""}
-        description={this.state.description}
-        meta={
-          this.state.hoursGenerated !== null
-            ? this.state.hoursGenerated + " people helped"
-            : ""
-        }
-        image={moonScaffold}
-        extra={
-          <Fragment>
-            <Icon name="group" />
-            Organisation
-          </Fragment>
-        }
-      />
+      <Fragment>
+        <LoadingCardView
+          loading={this.state.loading}
+          header={this.state.name || ""}
+          description={this.state.description}
+          meta={ meta.join(', ')}
+          image={moonScaffold}
+          extra={
+            <Fragment>
+              <Icon name="group" />
+              Organisation
+            </Fragment>
+          }
+        />
+        <OrganisationFeed orgId={match.params.organisationId} />
+      </Fragment>
     );
   }
 }

src/components/InfoPages/UserPage.js

@@ -10,35 +10,43 @@ class UserPage extends React.Component {
 	state = {
 		name: '',
 		hours: null,
+		meals: null,
 		loading: true,
 	};
-	
+
 	componentDidMount() {
 		const match = this.props.match;
 		db.getUser(match.params.userId)
-		.then(({name, hours}) => {
-			this.setState({ name, hours, loading: false });
+		.then(({name, hours, meals}) => {
+			this.setState({ name, hours, meals, loading: false });
 			console.log(this.state);
 		})
 	}
 
-	
-	
+
+
 	render() {
 		const { userId } = this.props.match.params;
+		const meta = [];
+		if ( this.state.hours ) {
+			meta.push( `${ this.state.hours } people helped` );
+		}
+		if ( this.state.meals ) {
+			meta.push( `${ this.state.meals } meals provided` );
+		}
 		return (
 			<Fragment>
-			<LoadingCardView 
-				loading={this.state.loading} 
-				image={userImage} 
-				header={this.state.name || ''}
-				meta={this.state.hours !== null ? `${this.state.hours} hours` : ''}
-				extra={<Fragment><Icon name='user' /> User</Fragment>}
-			/>
-			<PersonalFeed userId={userId} />
+				<LoadingCardView
+					loading={this.state.loading}
+					image={userImage}
+					header={this.state.name || ''}
+					meta={meta.join(', ')}
+					extra={<Fragment><Icon name='user' /> User</Fragment>}
+				/>
+				<PersonalFeed userId={userId} />
 			</Fragment>
 		)
-	}	
+	}
 };
 
-export default UserPage;
+export default UserPage;

src/components/Navigation/SearchMembers.js

@@ -28,15 +28,15 @@ class SearchMembers extends Component {
             return db.getOrganisations();
         })
         .then(orgs => {
-            const orgsWithType = orgs.map(({ name, id }) => ({ title: name, value: id, description: 'Organisation' }))            
+            const orgsWithType = orgs.map(({ name, id }) => ({ title: name, value: id, description: 'Organisation' }))
             this.setState(prevState => {
                 const { members } = prevState;
                 members.push(...orgsWithType);
                 return { ...prevState, members }
             })
         })
     }
-    
+
     resetComponent = () => this.setState({ isLoading: false, results: [], value: '' })
 
     handleResultSelect = (e, { result }) => {
@@ -54,10 +54,10 @@ class SearchMembers extends Component {
 
         setTimeout(() => {
             if (this.state.value.length < 1) return this.resetComponent()
-      
+
             const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
             const isMatch = result => re.test(result.title)
-      
+
             this.setState({
               isLoading: false,
               results: _.filter(this.state.members, isMatch),
@@ -75,10 +75,10 @@ class SearchMembers extends Component {
                 onSearchChange={_.debounce(this.handleSearchChange, 500, { leading: true })}
                 results={results}
                 value={value}
-                {...this.props}
+                className={this.props.className}
             />
         )
     }
 }
 
-export default withRouter(SearchMembers)
+export default withRouter(SearchMembers)

src/components/Navigation/index.js

@@ -49,9 +49,11 @@ const NonAuthMenuItems = () => (
       Sign in
     </Menu.Item>
     <Menu.Item position="right" fitted>
-      <Button as={NavLink} to={routes.SIGN_UP} fluid primary>
-        Sign up
-      </Button>
+      <NavLink to={ routes.SIGN_UP } >
+        <Button fluid primary>
+          Sign up
+        </Button>
+      </NavLink>
     </Menu.Item>
   </Fragment>
 );