CSB to Master

README.md

@@ -9,3 +9,22 @@ A react web application, in the early stages of development, that will allow use
 Eventually the goal is to implement this as a cryptocurrency of sorts with smart contracts, maybe using some proof stake systems.
 
 The project is under development at Foodhall, a grassroots community project based in Sheffield.
+
+## Getting involved
+
+We warmly welcome new participants.
+
+- Please get in touch with us at [info@nationalfoodservice.uk](mailto:info@nationalfoodservice.uk)
+- User stories are on [this Trello board](https://trello.com/b/6yiDv1ZW/mutual-impact)
+- We discuss development on the [National Food Service Slack](national-food-service.slack.com)
+- If you're new to development in general, or React in particular, we can set you up with some scaffolded tasks to get started.
+
+## Workflow
+
+Our current development process is to:
+1. Make changes locally on the [Code Sandbox image of the webapp]( https://codesandbox.io/s/mutual-impact-feed-mvdl7)
+2. Create a Pull Request to this repo from the Code Sandbox image.
+3. Netlify will deploy automatically once the Pull Request is approved.
+
+## How to add a component
+*TBC*

src/components/AboutPage/index.js

@@ -0,0 +1,28 @@
+import React, { Fragment } from "react";
+import { Segment } from "semantic-ui-react";
+
+const AboutPage = () => (
+  <Fragment>
+    <Segment>
+      <h1>What is this?</h1>
+      <p>Mutual impact is an impact tracker for the National Food Service and partnering
+        mutual community groups to collect vital evidence to demonstrate impact as a whole.</p>
+      <p>This allows accessiblity and transparency. To paint a picture to the public and can
+        be shared with funders to enable more support for work. </p>
+      <p>It also aims to remove some administrative burden and enable automatic reports and grant applications in the future, as well as increasing the total evidence base for Mutual Aid and voluntary labor.</p>
+      <h2>How do I get involved?</h2>
+      <p>To log your organisations impact, please <a href="https://www.mutualimpact.site/sign-in">Sign In</a></p>
+
+      <p>We also warmly welcome any help developing the webapp.</p>
+        <ul>
+          <li>Please get in touch with us at <a href="mailto:info@nationalfoodservice.uk">info@nationalfoodservice.uk</a></li>
+          <li>We have a <a href="https://github.com/ldpohl1/Mutualimpact/k">GitHub repository for the project </a>with more info about how to help develop the webapp </li>
+          <li>User stories are on <a href="https://trello.com/b/6yiDv1ZW/mutual-impact">this Trello board</a></li>
+          <li>We discuss development on the <a href="national-food-service.slack.com">National Food Service Slack</a></li>
+        </ul>
+      <p>For more information on the National Food Service campaign, please  <a href="https://nationalfoodservice.uk">check out our site!</a></p>
+    </Segment>
+  </Fragment>
+);
+
+export default AboutPage;

src/components/App.js

@@ -12,6 +12,7 @@ import InfoModal from './InfoModal';
 
 import TimeLoggingForm from './TimeLoggingForm';
 import SendHrsForm from './SendHrsForm';
+import AboutPage from './AboutPage';
 import HomePage from './HomePage';
 import SignInPage from './SignInPage';
 import SignUpPage from './SignUpPage';
@@ -39,19 +40,20 @@ const App = (props) => {
 				<InfoModal />
 				<Container style={{ marginTop: '4.5rem' }}>
 					<Switch>
-						<Route exact path={routes.HOME_PAGE} component={HomePage} />
-						<Route exact path={routes.SIGN_IN} component={SignInPage} />
-						<Route exact path={routes.SIGN_UP} component={SignUpPage} />
-						<Route exact path={routes.ADD_HRS} component={TimeLoggingForm} />
-						<Route exact path={routes.SEND_HRS} component={SendHrsForm} />
-						<Route exact path={routes.MANAGE_ACCOUNT} component={ManageAccount} />
-						<Route exact path={routes.PROFILE} component={ProfilePage} />
-						<Route exact path={routes.USER_PAGE} component={UserPage} />
-						<Route exact path={routes.ORGANISATION_PAGE} component={OrganisationPage} />
-						<Route exact path={routes.ADMIN_PAGE} component={AdminPage} />
-						<Route exact path={routes.ADMIN_ADD_ORGANISATION} component={AddOrganisation} />
-						<Route exact path={routes.ADMIN_MANAGE_REQUESTS} component={ManageRequests} />
-						<Route render={({ location }) => {
+            <Route exact path={routes.HOME_PAGE} component={HomePage} />
+            <Route exact path={routes.SIGN_IN} component={SignInPage} />
+            <Route exact path={routes.SIGN_UP} component={SignUpPage} />
+            <Route exact path={routes.ADD_HRS} component={TimeLoggingForm} />
+            <Route exact path={routes.SEND_HRS} component={SendHrsForm} />
+            <Route exact path={routes.MANAGE_ACCOUNT} component={ManageAccount} />
+            <Route exact path={routes.PROFILE} component={ProfilePage} />
+            <Route exact path={routes.USER_PAGE} component={UserPage} />
+            <Route exact path={routes.ORGANISATION_PAGE} component={OrganisationPage} />
+            <Route exact path={routes.ABOUT_PAGE} component={AboutPage} />
+            <Route exact path={routes.ADMIN_PAGE} component={AdminPage} />
+            <Route exact path={routes.ADMIN_ADD_ORGANISATION} component={AddOrganisation} />
+            <Route exact path={routes.ADMIN_MANAGE_REQUESTS} component={ManageRequests} />
+            <Route render={({ location }) => {
 							// console.log(location);
 							return (
 							<h1>404! {location.pathname} not found!</h1>

src/components/HomePage/index.js

@@ -1,12 +1,23 @@
-import React, { Fragment } from 'react';
-import { Segment } from 'semantic-ui-react';
+import React, { Fragment } from "react";
+import { Segment } from "semantic-ui-react";
 
-import EventFeed from './EventFeed';
+import EventFeed from "./EventFeed";
 
-const HomePage = () =>
-	<Fragment>
-		<Segment>Welcome to the hours project dude</Segment>
-		<EventFeed />
-	</Fragment>
+const HomePage = () => (
+  <Fragment>
+    <Segment>
+      <h3>Welcome to the mutual impact feed</h3>
+      <p>
+        Please note: this feed is only populated with data that has been
+        collected and uploaded.
+      </p>
+      <p>
+        An absence of data for a given area should not be interpreted to mean
+        that work hasn't happened, just that it hasn't been recorded.
+      </p>
+    </Segment>
+    <EventFeed />
+  </Fragment>
+);
 
-export default HomePage;
+export default HomePage;

src/components/Navigation/index.js

@@ -7,73 +7,74 @@ import AccountDropdown from './AccountDropdown';
 import { FirebaseAuthUserContext } from '../Session/FirebaseAuthUserProvider';
 import * as routes from '../../constants/routes';
 
-// const Navigation = () => 
+// const Navigation = () =>
 //     <FirebaseAuthUserContext.Consumer>
 //         {user => user.isUserSignedIn && !user.pendingUser ? <NavigationAuth user={user} /> : <NavigationNonAuth />}
 //     </FirebaseAuthUserContext.Consumer>
 
 // const NavigationAuth = (props) => {
 //     const isAdmin = props.user.role === 'ADMIN';
-    
+
 //     return (
 //         <Menu stackable>
 //         <Menu.Item exact as={NavLink} to={routes.HOME_PAGE}>Homepage</Menu.Item>
 //         <Menu.Item as={NavLink} to={routes.ADD_HRS}>Log Hrs</Menu.Item>
-//         <Menu.Item as={NavLink} to={routes.SEND_HRS}>Send Hrs</Menu.Item>  
-//         <Menu.Item as={NavLink} to={routes.PROFILE}>Your Profile</Menu.Item>  
+//         <Menu.Item as={NavLink} to={routes.SEND_HRS}>Send Hrs</Menu.Item>
+//         <Menu.Item as={NavLink} to={routes.PROFILE}>Your Profile</Menu.Item>
 //         {isAdmin ? <Menu.Item as={NavLink} to={routes.ADMIN_PAGE}>Admin Page</Menu.Item> : null}
 //         <Menu.Menu position='right'>
 //             <SearchMembers className="right aligned item" />
 //             <AccountDropdown user={props.user} />
 //             {/* <Menu.Item><Button onClick={auth.doSignOut}>Log out</Button></Menu.Item> */}
-//         </Menu.Menu>  
+//         </Menu.Menu>
 //     </Menu>
 //     )
 // }
-
 
-// const NavigationNonAuth = () => 
+
+// const NavigationNonAuth = () =>
 //     <Menu>
 //         <Menu.Item exact as={NavLink} to={routes.HOME_PAGE}>Homepage</Menu.Item>
-//         <Menu.Item as={NavLink} to={routes.SIGN_IN}>Sign in</Menu.Item> 
+//         <Menu.Item as={NavLink} to={routes.SIGN_IN}>Sign in</Menu.Item>
 //         <Menu.Item position='right' fitted>
 //             <Button as={NavLink} to={routes.SIGN_UP} fluid primary>Sign up</Button>
-//         </Menu.Item> 
+//         </Menu.Item>
 //     </Menu>
 
 
-const NonAuthMenuItems = () => 
+const NonAuthMenuItems = () =>
     <Fragment>
         <Menu.Item exact as={NavLink} to={routes.HOME_PAGE}>Homepage</Menu.Item>
-        <Menu.Item as={NavLink} to={routes.SIGN_IN}>Sign in</Menu.Item> 
+        <Menu.Item as={NavLink} to={routes.ABOUT_PAGE}>About</Menu.Item>
+        <Menu.Item as={NavLink} to={routes.SIGN_IN}>Sign in</Menu.Item>
         <Menu.Item position='right' fitted>
             <Button as={NavLink} to={routes.SIGN_UP} fluid primary>Sign up</Button>
         </Menu.Item>
     </Fragment>
 
 const AuthMenuItems = (props) => {
     const isAdmin = props.user.role === 'ADMIN';
-    
+
     return (
         <Fragment>
             <Menu.Item exact as={NavLink} to={routes.HOME_PAGE}>Homepage</Menu.Item>
             <Menu.Item as={NavLink} to={routes.ADD_HRS}>Log Hrs</Menu.Item>
-            <Menu.Item as={NavLink} to={routes.SEND_HRS}>Send Hrs</Menu.Item>  
-            <Menu.Item as={NavLink} to={routes.PROFILE}>Your Profile</Menu.Item>  
+            <Menu.Item as={NavLink} to={routes.SEND_HRS}>Send Hrs</Menu.Item>
+            <Menu.Item as={NavLink} to={routes.PROFILE}>Your Profile</Menu.Item>
             {isAdmin ? <Menu.Item as={NavLink} to={routes.ADMIN_PAGE}>Admin Page</Menu.Item> : null}
             <Menu.Menu position='right'>
                 <SearchMembers className="right aligned item" />
                 <AccountDropdown user={props.user} />
                 {/* <Menu.Item><Button onClick={auth.doSignOut}>Log out</Button></Menu.Item> */}
-            </Menu.Menu>  
+            </Menu.Menu>
         </Fragment>
     )
 }
 
 const MenuItems = () =>
     <FirebaseAuthUserContext.Consumer>
-        {user => user.isUserSignedIn && !user.pendingUser 
-        ? <AuthMenuItems user={user} /> : 
+        {user => user.isUserSignedIn && !user.pendingUser
+        ? <AuthMenuItems user={user} /> :
         <NonAuthMenuItems />}
     </FirebaseAuthUserContext.Consumer>
 
@@ -90,7 +91,7 @@ const SidebarMenu = (props) => (
     </Sidebar>
 )
 
-const BarMenu = () => 
+const BarMenu = () =>
     <Menu fixed='top'>
         <MenuItems />
     </Menu>
@@ -106,7 +107,7 @@ class ResponsiveNavigation extends React.Component {
         if (locationChanged) this.hideSidebar();
     }
 
-    handleButtonClick = () => 
+    handleButtonClick = () =>
         this.setState(prevState => ({ sidebarActive: !prevState.sidebarActive }));
 
     hideSidebar = () => this.setState({ sidebarActive: false });
@@ -120,17 +121,17 @@ class ResponsiveNavigation extends React.Component {
                             <Icon name='bars' />
                         </Menu.Item>
                     </Menu>
-                    <SidebarMenu visible={this.state.sidebarActive} onHide={this.hideSidebar} /> 
+                    <SidebarMenu visible={this.state.sidebarActive} onHide={this.hideSidebar} />
                 </Responsive>
                 <Responsive minWidth={Responsive.onlyTablet.minWidth}>
                     <BarMenu />
-                </Responsive>                 
-                
+                </Responsive>
+
             </Fragment>
         )
     }
 }
 
 const ResponsiveNavigationWithRouter = withRouter(ResponsiveNavigation);
 
-export default ResponsiveNavigationWithRouter;
+export default ResponsiveNavigationWithRouter;

src/constants/routes.js

@@ -1,4 +1,5 @@
 export const HOME_PAGE = '/';
+export const ABOUT_PAGE = "/about";
 export const ADD_HRS = '/add-hrs';
 export const SEND_HRS = '/send-hrs';
 export const USER_PAGE = '/user/:userId';