Add image upload support, profile edit and org management

package.json

@@ -6,9 +6,9 @@
     "firebase": "^5.0.4",
     "history": "^4.7.2",
     "lodash": "^4.17.10",
-    "npm": "^6.1.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-firebase-file-uploader": "^2.4.3",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.1",
     "react-swipeable": "^4.3.0",
@@ -25,4 +25,4 @@
   "devDependencies": {},
   "keywords": [],
   "description": ""
-}
+}

src/components/ActivityFeed.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Feed, Segment, Image } from "semantic-ui-react";
+import { getImageSize } from '../helpers';
+
+import "./HomePage/EventFeed.css";
+
+import jennySmall from "../jennySmall.jpg";
+
+const ActivityFeed = props => (
+  <Feed id="eventFeed">
+    {props.items.map(feedItem => (
+      <Feed.Event key={feedItem.id}>
+        <Feed.Label className="middle aligned">
+          <Image
+            src={ getImageSize( feedItem.userPhoto, 'square_sm' ) || jennySmall }
+            verticalAlign="middle"
+          />
+        </Feed.Label>
+        <Feed.Content>
+          <Segment className="feed item" raised>
+            <Feed.Summary>
+              {feedItem.summary}
+              <Feed.Date>{feedItem.date} ago</Feed.Date>
+            </Feed.Summary>
+            <Feed.Extra images>
+              { feedItem.extra && <p>{ feedItem.extra }</p> }
+              { /* feedItem.orgPhoto && (
+                <a href={ feedItem.orgPhoto } download>
+                  <img src={ getImageSize( feedItem.orgPhoto, 'letter_md' ) } alt="Org logo" />
+                </a>
+              ) */ }
+              { feedItem.photo && (
+                <a href={ feedItem.photo } download>
+                  <img
+                    src={ getImageSize( feedItem.photo, 'letter_md' ) }
+                    alt={ feedItem.extra }
+                    style={{width: '100%'}}
+                  />
+                </a>
+              ) }
+            </Feed.Extra>
+          </Segment>
+        </Feed.Content>
+      </Feed.Event>
+    ))}
+  </Feed>
+);
+
+export default ActivityFeed;

src/components/Admin/AddOrganisation.js

@@ -11,10 +11,9 @@ class AddOrganisation extends Component {
         error: null,
         success: null,
     }
-    
+
     onSubmit = e => {
         e.preventDefault();
-        // console.log(this.state);
         const { name, description } = this.state;
         admin.createOrganisation(name,description)
         .then(success => {
@@ -27,7 +26,7 @@ class AddOrganisation extends Component {
         .catch(error => this.setState({ error }))
     }
 
-    handleChange = (e, { name, value }) => {  
+    handleChange = (e, { name, value }) => {
         this.setState({ [name]: value });
     }
 
@@ -43,9 +42,9 @@ class AddOrganisation extends Component {
                     content={this.state.error ? this.state.error.message : ''} />
                 <Message success header='Form Completed' content={this.state.success || ''} />
             </Form>
-        );  
+        );
     }
 }
 
 const authCondition = (user) => (user.role === 'ADMIN');
-export default withAuthorization(authCondition)(AddOrganisation);
+export default withAuthorization(authCondition)(AddOrganisation);

src/components/Admin/AdminPage.js

@@ -4,19 +4,27 @@ import { Grid, Button } from "semantic-ui-react";
 
 import withAuthorization from "../Session/withAuthorization";
 import * as routes from "../../constants/routes";
+import ManageOrganisations from './ManageOrganisations';
 
 const AdminPage = () => (
-  <Grid padded>
-    <Grid.Row>
-      <Button as={Link} to={routes.ADMIN_ADD_ORGANISATION}>
-        Add Organisation
-      </Button>
-    </Grid.Row>
-    <Grid.Row>
-      <Button as={Link} to={routes.ADMIN_MANAGE_REQUESTS}>
-        Manage token requests
-      </Button>
-    </Grid.Row>
+  <Grid padded columns={2}>
+    <Grid.Column>
+      <Grid.Row>
+        <Button primary as={Link} to={routes.ADMIN_ADD_ORGANISATION}>
+          Add Organisation
+        </Button>
+      </Grid.Row>
+      <Grid.Row>
+        <ManageOrganisations />
+      </Grid.Row>
+    </Grid.Column>
+    <Grid.Column>
+      <Grid.Row>
+        <Button primary as={Link} to={routes.ADMIN_MANAGE_REQUESTS}>
+          Manage token requests
+        </Button>
+      </Grid.Row>
+    </Grid.Column>
   </Grid>
 );
 

src/components/Admin/EditOrganisation.js

@@ -0,0 +1,93 @@
+import React, { Component } from 'react';
+import { Form, Message, Header, Button } from 'semantic-ui-react';
+import { NavLink } from 'react-router-dom';
+import ImageUpload from '../Forms/ImageUpload';
+
+import { admin, db } from '../../firebase';
+import withAuthorization from '../Session/withAuthorization';
+import * as routes from '../../constants/routes';
+
+class EditOrganisation extends Component {
+    state = {
+        loading: true,
+        id: null,
+        name: '',
+        description: '',
+        photo: null,
+        error: null,
+        success: null,
+    }
+
+    componentDidMount() {
+		const match = this.props.match;
+        db.getOrganisation( match.params.organisationId )
+            .then( org => {
+                this.setState( {
+                    loading: false,
+                    id: match.params.organisationId,
+                    ...org
+                } );
+            } )
+            .catch( error => {
+                this.setState( { error } );
+            } );
+    }
+
+    onSubmit = e => {
+        e.preventDefault();
+        console.log(this.state, this.props)
+
+        if ( this.state.loading || !this.state.id ) {
+            return;
+        }
+
+        const data = {
+            name: this.state.name,
+            description: this.state.description,
+            photo: this.state.photo,
+        };
+
+        admin.updateOrganisation(this.state.id, data)
+            .then(success => {
+                this.setState( {
+                    error: null,
+                    success: 'Organisation created successfully!'
+                })
+            })
+            .catch(error => this.setState({ error }))
+    }
+
+    handleChange = (e, { name, value }) => {
+        this.setState({ error: null, success: null, [name]: value });
+    }
+
+    render() {
+        return (
+            <Form onSubmit={ this.onSubmit } error={ this.state.error !== null } success={ this.state.success !== null }>
+                <Header as="h1">
+                    Edit Organisation
+                    <NavLink to={ routes.ADMIN_PAGE }>
+                        <Button floated="right" secondary>Return to admin</Button>
+                    </NavLink>
+                </Header>
+                <Form.Input name='name' value={this.state.name} placeholder='Organisation name' onChange={this.handleChange}/>
+                <Form.TextArea name='description' value={ this.state.description } placeholder='Description' onChange={ this.handleChange } />
+                <ImageUpload
+                    prefix="organisation"
+                    filename={ this.state.id }
+                    onUpload={ photo => this.setState( { photo } ) }
+                    image={ this.state.photo }
+                />
+                <Message
+                    error
+                    header="Form Error"
+                    content={this.state.error ? this.state.error.message : ''} />
+                <Message success header='Organisation Updated' content={this.state.success || ''} />
+                <Form.Button primary disabled={this.state.loading || !this.state.id} type='submit'>Update Organisation</Form.Button>
+            </Form>
+        );
+    }
+}
+
+const authCondition = (user) => (user.role === 'ADMIN');
+export default withAuthorization(authCondition)(EditOrganisation);

src/components/Admin/ManageOrganisations.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import { db } from '../../firebase';
+import { Link } from 'react-router-dom';
+import withAuthorization from '../Session/withAuthorization';
+import { Dimmer, Loader, Segment, Icon, Divider } from 'semantic-ui-react';
+
+class ManageOrganisations extends Component {
+	state = {
+		loading: true,
+		organisations: []
+	}
+
+	componentDidMount() {
+		db.getOrganisations()
+			.then( organisations => this.setState( {
+				organisations,
+				loading: false,
+			}))
+	}
+
+	render() {
+		if ( this.state.loading ) {
+			return <Dimmer inverted active><Loader inverted /></Dimmer>
+		}
+
+		if ( !this.state.loading && this.state.organisations.length === 0 ) {
+			return <p>No organisations found</p>
+		}
+
+		return (
+			<div className="organisation-list">
+				<Divider hidden />
+				{ this.state.organisations.map( org => (
+					<Segment vertical key={ org.id }>
+						<Icon.Group>
+							<Icon name="group" />
+							<Icon corner name="edit" />
+						</Icon.Group>
+						{ " " }
+						<Link to={`/admin/edit-organisation/${org.id}`}>{org.name}</Link>
+					</Segment>
+				)) }
+			</div>
+		)
+	}
+}
+
+const authCondition = (user) => (user.role === 'ADMIN');
+export default withAuthorization(authCondition)(ManageOrganisations);

src/components/App.js

@@ -17,11 +17,13 @@ import SignInPage from './SignInPage';
 import SignUpPage from './SignUpPage';
 import ManageAccount from './ManageAccount';
 import ProfilePage from './ProfilePage';
+import ProfileEditPage from './ProfileEditPage';
 
 import OrganisationPage from './InfoPages/OrganisationPage';
 import UserPage from './InfoPages/UserPage';
 
 import AddOrganisation from './Admin/AddOrganisation';
+import EditOrganisation from './Admin/EditOrganisation';
 import ManageRequests from './Admin/ManageRequests';
 import AdminPage from './Admin/AdminPage';
 
@@ -45,11 +47,13 @@ const App = (props) => {
 						<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.PROFILE} component={ ProfilePage } />
+						<Route exact path={routes.PROFILE_EDIT} component={ProfileEditPage} />
 						<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_EDIT_ORGANISATION} component={EditOrganisation} />
 						<Route exact path={routes.ADMIN_MANAGE_REQUESTS} component={ManageRequests} />
 						<Route render={({ location }) => {
 							// console.log(location);