Merge pull request #205 from CodeForSocialGood/featura/minio-server

Minio-server and upload project image

Author: sexta13

.setup/minio/run.sh

@@ -0,0 +1,53 @@
+#!/usr/bin/env bash
+
+set +x -e -o pipefail
+
+NAME=minio
+ID_FROM_NAME=$(docker ps -aq -f name=$NAME)
+IMAGE=minio/minio
+
+start () {
+  set -u
+  # Make sure a container isn't already running
+  if [[ -z "$ID_FROM_NAME" ]] ; then
+    echo "--- Starting new docker container with Minio.."
+    docker run --name=$NAME -d -p 9000:9000 \
+    -e "MINIO_ACCESS_KEY=minioAccessKey" \
+    -e "MINIO_SECRET_KEY=minioSecretKey" \
+    $IMAGE server /data \
+      | xargs echo "--- Started container"  
+  else
+    echo "--- Skipping start, container already running"
+    exit 0
+  fi
+}
+
+stop () {
+  set -u
+  # Make sure there's a container to stop
+  if [[ ! -z "$ID_FROM_NAME" ]] ; then
+    ID=$ID_FROM_NAME
+  else
+    echo "--- Skipping stop and remove, no container found"
+    exit 0
+  fi
+
+  echo "--- Stopping and removing docker container.."
+  docker stop $ID | xargs echo "--- Stopped container"
+  docker rm $ID | xargs echo "--- Removed container"
+}
+
+info () {
+cat <<EOF
+  Usage: ./minio/run.sh <target>
+  Targets:
+    start - start a docker container with minio content server
+    stop - stop and remove the docker container
+EOF
+}
+
+case $1 in
+  start)        start         ;;
+  stop)         stop          ;;
+  *)            info          ;;
+esac

client/actions/project/index.js

@@ -1,15 +1,12 @@
-import {
-  FETCHING_PROJECTS,
-  RECEIVED_PROJECTS,
-  FAILED_PROJECTS
-} from './types'
+import * as actionTypes from './types'
+import { push } from 'react-router-redux'
 
 import apiOptionsFromState from '../../api/lib/apiOptionsFromState'
 import projectsApiClient from '../../api/projects'
 
-export const fetching = { type: FETCHING_PROJECTS }
-export const received = { type: RECEIVED_PROJECTS }
-export const failed = { type: FAILED_PROJECTS }
+export const fetching = { type: actionTypes.FETCHING_PROJECTS }
+export const received = { type: actionTypes.RECEIVED_PROJECTS }
+export const failed = { type: actionTypes.FAILED_PROJECTS }
 
 export default class ProjectActionCreator {
   static fetching () {
@@ -81,4 +78,31 @@ export default class ProjectActionCreator {
       }
     }
   }
+
+  static async uploadImage (file, apiOptions) {
+    const url = await projectsApiClient.getPresignedUrlForProjectImage(apiOptions, file.name)
+    await projectsApiClient.uploadImage(apiOptions, url, file)
+  }
+
+  static createProject (projectName, causes, technologies, organization, file) {
+    return async (dispatch, getState) => {
+      dispatch({type: actionTypes.CREATE_PROJECT_START})
+
+      try {
+        const state = getState()
+        const apiOptions = apiOptionsFromState(state)
+        await ProjectActionCreator.uploadImage(file, apiOptions)
+        await projectsApiClient.createProject(apiOptions, projectName, causes,
+          technologies, organization)
+        dispatch({type: actionTypes.CREATE_PROJECT_SUCCESS})
+        dispatch(push('/'))
+      } catch (e) {
+        console.trace(e)
+        dispatch({
+          type: actionTypes.CREATE_PROJECT_FAILED,
+          payload: e,
+          error: true})
+      }
+    }
+  }
 }

client/actions/project/types.js

@@ -1,3 +1,7 @@
 export const FETCHING_PROJECTS = 'FETCHING_PROJECTS'
 export const RECEIVED_PROJECTS = 'RECEIVED_PROJECTS'
 export const FAILED_PROJECTS = 'FAILED_PROJECTS'
+
+export const CREATE_PROJECT_START = 'CREATE_PROJECT_START'
+export const CREATE_PROJECT_FAILED = 'CREATE_PROJECT_FAILED'
+export const CREATE_PROJECT_SUCCESS = 'CREATE_PROJECT_SUCCESS'

client/api/projects.js

@@ -15,7 +15,7 @@ const projectsApiClient = {
     return apiRequest.get('/projects', apiOptions, query)
   },
 
-  async createProject (name, causes, technologies, organization) {
+  async createProject (apiOptions, name, causes, technologies, organization) {
     const options = {
       method: 'POST',
       headers: {
@@ -26,6 +26,18 @@ const projectsApiClient = {
     return fetch('/api/projects/', options)
   },
 
+  async getPresignedUrlForProjectImage (apiOptions, imageName) {
+    const query = { imageName }
+    return apiRequest.get('/projects/presignedUrl', apiOptions, query)
+  },
+
+  async uploadImage (apiOptions, url, file) {
+    return fetch(url, {
+      method: 'PUT',
+      body: file
+    })
+  },
+
   getProjectById (apiOptions, id) {
     return apiRequest.get('/projects/' + id, apiOptions, null)
   }

client/components/CreateProjectForm/CreateProjectForm.js

@@ -7,12 +7,13 @@ import Button from 'material-ui/Button/Button'
 import Checkbox from 'material-ui/Checkbox'
 import { FormGroup, FormLabel, FormControlLabel } from 'material-ui/Form'
 
-import projectsApiClient from '../../api/projects'
 import UploadDropzone from '../UploadDropzone/UploadDropzone'
 import styles from './CreateProjectForm.scss'
 import { buttonSubmit } from './createProjectFormJss'
 import { causes, technologies } from '../shared/constants'
 
+import ProjectActionCreator from '../../actions/project/'
+
 class CreateProjectForm extends Component {
   constructor (props, context) {
     super(props, context)
@@ -25,12 +26,13 @@ class CreateProjectForm extends Component {
       error: '',
       projectName: '',
       causes: [],
-      technologies: []
+      technologies: [],
+      file: ''
     }
   }
 
-  saveFile () {
-    // TODO ... implement the save file
+  saveFile (file) {
+    this.setState({file})
   }
 
   projectNameChange (event) {
@@ -40,17 +42,11 @@ class CreateProjectForm extends Component {
 
   async createProject (event) {
     event.preventDefault()
-    const response = await projectsApiClient.createProject(
-      this.state.projectName,
+    this.props.createProject(this.state.projectName,
       this.state.causes,
       this.state.technologies,
-      this.props.user.organization
-    )
-    if (response.status === 500) {
-      this.setState({error: response.statusText})
-    } else {
-      this.context.router.history.push('/profile')
-    }
+      this.props.user.organization,
+      this.state.file)
   }
 
   handleCheckbox (event, checked) {
@@ -104,9 +100,9 @@ class CreateProjectForm extends Component {
         Create Project
         </Button>
 
-        {this.state.error &&
+        {this.props.errorMessage.length > 0 &&
           <div className={styles.errorContent}>
-            {this.state.error}
+            {this.props.errorMessage}
           </div>
         }
       </form>
@@ -117,10 +113,15 @@ class CreateProjectForm extends Component {
 function mapStateToProps (state) {
   return {
     projects: state.project.projects,
-    user: state.user
+    user: state.user,
+    errorMessage: state.project.error.message
   }
 }
 
+const mapDispatchToProps = {
+  createProject: ProjectActionCreator.createProject
+}
+
 CreateProjectForm.contextTypes = {
   router: PropTypes.object
 }
@@ -130,7 +131,9 @@ CreateProjectForm.propTypes = {
   handleSubmit: PropTypes.func,
   createProject: PropTypes.func,
   user: PropTypes.object,
-  classes: PropTypes.object
+  classes: PropTypes.object,
+  projects: PropTypes.array,
+  errorMessage: PropTypes.string
 }
 
-export default connect(mapStateToProps, null)(withStyles(buttonSubmit)(CreateProjectForm))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(buttonSubmit)(CreateProjectForm))

client/reducers/initialState.js

@@ -9,7 +9,10 @@ export default {
   },
   projects: {
     fetching: false,
-    projects: []
+    projects: [],
+    error: {
+      message: ''
+    }
   },
   users: {},
   applications: {

client/reducers/projectReducer.js

@@ -2,7 +2,8 @@ import initialState from './initialState'
 import {
   FETCHING_PROJECTS,
   RECEIVED_PROJECTS,
-  FAILED_PROJECTS
+  FAILED_PROJECTS,
+  CREATE_PROJECT_FAILED
 } from '../actions/project/types'
 
 export default function (state = initialState.projects, action) {
@@ -22,6 +23,9 @@ export default function (state = initialState.projects, action) {
 
     case FAILED_PROJECTS:
       return { ...state, fetching: false }
+    case CREATE_PROJECT_FAILED: {
+      return {...state, error: {message: payload}}
+    }
 
     default:
       return state

package.json

@@ -13,9 +13,9 @@
     "client:watch": "webpack --mode development --watch --progress --hide-modules",
     "server:watch": "nodemon --watch server/ --ignore server/public/ --exec 'node server/'",
     "sync": "browser-sync start --proxy localhost:3000 --files server/**/* --port 3001 --ws --no-open --https",
-    "prestart": "yarn db start && yarn email start && yarn clear-ports",
+    "prestart": "yarn db start && yarn email start && yarn minio start && yarn clear-ports",
     "start": "npm-run-all --parallel client:watch server:watch sync",
-    "stop": "yarn db stop && yarn email stop",
+    "stop": "yarn db stop && yarn email stop && yarn minio stop",
     "restart": "yarn stop && yarn start",
     "pretest": "yarn lint && yarn build",
     "test": "SILENT=true ava --verbose",
@@ -25,6 +25,7 @@
     "build": "webpack --mode production --bail --display errors-only",
     "db": "./.setup/db/run.sh",
     "email": "./.setup/email/run.sh",
+    "minio": "./.setup/minio/run.sh",
     "clear-ports": "./.setup/client/clear-ports.sh"
   },
   "dependencies": {
@@ -93,6 +94,7 @@
     "eslint-plugin-react": "^7.7.0",
     "eslint-plugin-standard": "^3.0.1",
     "ignore-styles": "^5.0.1",
+    "minio": "^5.0.0",
     "mongodb-memory-server": "^1.6.3",
     "nightwatch": "^1.0.1",
     "nightwatch-cucumber": "^9.0.0",

server/config/index.js

@@ -2,4 +2,5 @@ export { default as appConfig } from './app'
 export { default as authConfig } from './auth'
 export { default as databaseConfig } from './database'
 export { default as mailerConfig } from './mailer'
+export { default as minioConfig } from './minio'
 export { default as rollbarConfig } from './rollbar'

server/config/minio.js

@@ -0,0 +1,18 @@
+import { Client } from 'minio'
+
+const region = 'us-east-1'
+
+const minioClient = new Client({
+  endPoint: 'localhost',
+  port: 9000,
+  path: 'minio',
+  secure: false,
+  insecure: true,
+  accessKey: 'minioAccessKey',
+  secretKey: 'minioSecretKey'
+})
+
+export default {
+  client: minioClient,
+  region
+}