Add feature for viewing submissions and searching by name and form name

src/actions/form.js

@@ -5,6 +5,7 @@ import {
     urlFormId
 } from '../urls'
 import {
+    GET_ALL_FORMS,
     GET_PUBLISHED_FORMS,
     GET_UNPUBLISHED_FORMS,
     GET_FORM,
@@ -18,6 +19,27 @@ import {
     FORM_ERRORS
 } from './types'
 
+export const getAllForms = () => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                Authorization: `Bearer ${localStorage.token}`,
+            }
+        }
+        const res = await axios.get(urlPostForm(), config);
+        dispatch({
+            type: GET_ALL_FORMS,
+            payload: res.data
+        });
+    }
+    catch (err) {
+        dispatch({
+            type: FORM_ERRORS,
+            payload: err.response.data
+        })
+    }
+}
+
 export const getPublishedForm = (status) => async dispatch => {
     try {
         const config = {

src/actions/submission.js

@@ -0,0 +1,52 @@
+import axios from 'axios'
+import {
+    urlFormsFilled,
+    urlSubmissions
+} from '../urls'
+import {
+    GET_FORMS,
+    GET_SUBMISSIONS,
+    SUBMISSION_ERROR
+} from './types'
+
+export const getFormsFilled = () => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                Authorization: `Bearer ${localStorage.token}`,
+            }
+        }
+        const res = await axios.get(urlFormsFilled(), config);
+        dispatch({
+            type: GET_FORMS,
+            payload: res.data
+        });
+    }
+    catch (err) {
+        dispatch({
+            type: SUBMISSION_ERROR,
+            payload: err.response.data
+        })
+    }
+}
+
+export const getAllSubmissions = (user_name, form_id) => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                Authorization: `Bearer ${localStorage.token}`,
+            }
+        }
+        const res = await axios.get(urlSubmissions(user_name, form_id), config);
+        dispatch({
+            type: GET_SUBMISSIONS,
+            payload: res.data
+        });
+    }
+    catch (err) {
+        dispatch({
+            type: SUBMISSION_ERROR,
+            payload: err.response.data
+        })
+    }
+}

src/actions/types.js

@@ -23,3 +23,8 @@ export const FORM_ERRORS = 'FORM_ERRORS';
 export const GET_QUESTIONS = 'GET_QUESTIONS';
 export const POST_QUESTIONS = 'POST_QUESTIONS';
 export const QUESTION_ERROR = 'QUESTION_ERROR';
+export const GET_FORMS = 'GET_FORMS';
+export const GET_ALL_FORMS = 'GET_ALL_FORMS';
+export const GET_SUBMISSIONS = 'GET_SUBMISSIONS';
+export const SUBMISSION_ERROR = 'SUBMISSION_ERROR';
+

src/components/Dashboard.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import '../styles/Dashboard.css'
 import { Item, Card, Header, Divider, Icon } from 'semantic-ui-react'
 import Profile from './Profile'
+import FormsFilled from './FormsFilled'
 
 export default class Dashboard extends Component {
     constructor(props) {
@@ -39,6 +40,7 @@ export default class Dashboard extends Component {
                         <Item>
                             <Item.Content>
                                 <Header>Forms Filled</Header>
+                                <FormsFilled />
                             </Item.Content>
                         </Item>
                     </Item.Group>

src/components/FormsFilled.js

@@ -0,0 +1,42 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+import { getFormsFilled } from '../actions/submission'
+import PropTypes from 'prop-types'
+import { form } from '../urls'
+import { Card, Button, Message, Modal, Icon, Header, Form, TextArea, Checkbox } from 'semantic-ui-react'
+import moment from 'moment'
+import '../styles/Form.css'
+
+class FormsFilled extends Component {
+    constructor(props) {
+        super(props)
+    }
+
+    componentDidMount() {
+        this.props.getFormsFilled()
+    }
+
+    render() {
+        console.log(this.props)
+        return(
+            <div>
+                hello works
+            </div>
+        )
+    }
+}
+
+FormsFilled.propTypes = {
+    formsfilled: PropTypes.array.isRequired
+};
+
+const mapStateToProps = state => ({
+    formsfilled: state.submission.formsfilled,
+    submissionerror: state.submission.submissionerror
+})
+
+export default connect(
+    mapStateToProps,
+    { getFormsFilled }
+)(FormsFilled)

src/components/Submission.js

@@ -1,11 +1,125 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+import { getAllSubmissions } from '../actions/submission'
+import { getInfo } from '../actions/info'
+import { getAllForms } from '../actions/form'
+import PropTypes from 'prop-types'
+import { form, submission } from '../urls'
+import { Card, Button, Message, Modal, Icon, Header, Form, TextArea, Checkbox, Grid, Dropdown, Search, Input } from 'semantic-ui-react'
+import moment from 'moment'
+import '../styles/Submission.css'
 
-export default class Submissions extends Component {
+const options = [
+    { key: 'accepted', text: 'Accepted', value: 'accepted'},
+    { key: 'rejected', text: 'Rejected', value: 'rejected'},
+    { key: 'waitlisted', text: 'Waitlisted', value: 'waitlisted'},
+    { key: 'pending', text: 'Pending', value: 'pending'},
+]
+
+const colorStyles = {
+    option: (base, state) => ({
+        ...base,
+        color: 'red'
+    })
+}
+
+class Submission extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            form_id: undefined,
+            user_name: undefined,
+        }
+    }
+
+    componentDidMount() {
+        this.props.getInfo()
+        this.props.getAllForms()
+        this.props.getAllSubmissions(this.state.user_name, this.state.form_id)
+    }
+
+    onSearchChange = (e) => {
+        this.setState({
+            user_name: e.target.value,
+        })
+        this.props.getAllSubmissions(this.state.user_name, this.state.form_id)
+    }
+
+    formChange = (e, data) => {
+        this.setState({
+            form_id: data.value.length !== 0 ? data.value : undefined
+        })
+        this.props.getAllSubmissions(this.state.user_name, this.state.form_id)
+    }
+
     render() {
-        return (
-            <div>
-                submissions
+        const { submissions, forms } = this.props
+        const formOptions = forms.map(form => ({
+            key: form.id,
+            text: form.name,
+            value: form.id
+        }))
+        console.log(this.state)
+        return(
+            <div className='submission'>
+                <div className='searches'>
+                    <Input
+                        value={this.state.user_name}
+                        onChange={this.onSearchChange}
+                    />
+                    <Dropdown
+                        multiple
+                        selection
+                        fluid
+                        placeholder='Search by form...'
+                        options={formOptions}
+                        onChange={this.formChange}
+                    />
+                </div>
+                {
+                    submissions && submissions.length !== 0 ?
+                    <Grid celled>
+                    {
+                        submissions.map(submission =>
+                            <Grid.Row>
+                                <Grid.Column width={2}>{submission.user.user_name[0] ? submission.user.user_name[0] : submission.user.username}</Grid.Column>
+                                <Grid.Column width={2}>{submission.form.name}</Grid.Column>
+                                <Grid.Column width={10}>{submission.user.username}</Grid.Column>
+                                <Grid.Column width={2} textAlign='center' >
+                                    <Dropdown
+                                        inline
+                                        options={options}
+                                        defaultValue={submission.acceptance_status}
+                                        styles={colorStyles}
+                                    />
+                                </Grid.Column>
+                            </Grid.Row>
+
+                        )
+                    }
+                    </Grid>
+                    : <span>No submissions yet.</span>
+                }
             </div>
         )
     }
 }
+
+Submission.propTypes = {
+    userinfo: PropTypes.func.isRequired,
+    submissions: PropTypes.array.isRequired,
+    forms: PropTypes.array.isRequired,
+};
+
+const mapStateToProps = state => ({
+    userinfo: state.info.userinfo,
+    submissions: state.submission.submissions,
+    forms: state.form.form,
+    submissionerror: state.submission.submissionerror
+})
+
+export default connect(
+    mapStateToProps,
+    { getAllSubmissions, getInfo, getAllForms }
+)(Submission)

src/reducers/form.js

@@ -1,4 +1,5 @@
 import {
+    GET_ALL_FORMS,
     GET_PUBLISHED_FORMS,
     GET_UNPUBLISHED_FORMS,
     GET_FORM,
@@ -13,6 +14,7 @@ import {
 } from '../actions/types';
 
 const initialState = {
+    form: [],
     publishedform: [],
     unpublishedform: [],
     postform: [],
@@ -25,6 +27,11 @@ const initialState = {
 
 const formReducer = (state = initialState, action) => {
     switch(action.type) {
+        case GET_ALL_FORMS:
+            return {
+                ...state,
+                form: action.payload,
+            };
         case GET_PUBLISHED_FORMS:
             return {
                 ...state,

src/reducers/index.js

@@ -4,13 +4,15 @@ import infoReducer from './info'
 import userReducer from './user'
 import formReducer from './form'
 import questionReducer from './question'
+import submissionReducer from './submission'
 
 const rootReducers = combineReducers ({
     login: loginReducer,
     info: infoReducer,
     user: userReducer,
     form: formReducer,
-    questions: questionReducer
+    questions: questionReducer,
+    submission: submissionReducer
 })
 
 export default rootReducers

src/reducers/submission.js

@@ -0,0 +1,35 @@
+import {
+    GET_FORMS,
+    GET_SUBMISSIONS,
+    SUBMISSION_ERROR
+} from '../actions/types';
+
+const initialState = {
+    formsfilled: [],
+    submissions: [],
+    submissionerror: null
+}
+
+const submissionReducer = (state = initialState, action) => {
+    switch(action.type) {
+        case GET_FORMS:
+            return {
+                ...state,
+                formsfilled: action.payload,
+            };
+        case GET_SUBMISSIONS:
+            return {
+                ...state,
+                submissions: action.payload,
+            };
+        case SUBMISSION_ERROR:
+            return {
+                ...state,
+                submissionerror: action.payload,
+            }
+        default:
+            return state
+    }
+}
+
+export default submissionReducer

src/styles/Submission.css

@@ -0,0 +1,9 @@
+.submission {
+    margin-left: 5vw;
+    margin-right: 5vw;
+}
+
+.searches {
+    display: flex;
+    flex-direction: row;
+}

src/urls.js

@@ -75,4 +75,17 @@ export function urlPatchQuestions() {
     return `${urlBaseBackend()}/questions/`
 }
 
+export function urlFormsFilled() {
+    return `${urlBaseBackend()}/feedback/`
+}
 
+export function urlSubmissions(user_name, form_id) {
+    if(user_name === undefined && form_id === undefined)
+        return `${urlBaseBackend()}/feedback/`
+    else if(user_name === undefined)
+        return `${urlBaseBackend()}/feedback/?form_id=${form_id}`
+    else if(form_id === undefined)
+        return `${urlBaseBackend()}/feedback/?user_name=${user_name}`
+    else
+        return `${urlBaseBackend()}/feedback/?user_name=${user_name}&form_id=${form_id}`
+}