Add feature to create, view, edit & delete forms

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.19.2",
+    "moment": "^2.27.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

src/Routes.js

@@ -3,9 +3,10 @@ import { Route, Switch, Redirect } from 'react-router-dom'
 import Login from './components/Login'
 import Register from './components/Register'
 import Dashboard from './components/Dashboard'
-import Form from './components/Form'
+import Forms from './components/Forms'
 import Submission from './components/Submission'
-import { login, register, dashboard, form, submission } from './urls'
+import Questions from './components/Questions'
+import { login, register, dashboard, forms, submission, urlBaseFrontend } from './urls'
 import {PrivateRoute} from './PrivateRoute'
 import { AuthRoute } from './AuthRoute'
 
@@ -15,8 +16,9 @@ export default class Routes extends Component {
             <>
             <Switch>
                 <PrivateRoute exact path={dashboard()} component={Dashboard} />
-                <PrivateRoute exact path={form()} component={Form} />
+                <PrivateRoute exact path={forms()} component={Forms} />
                 <PrivateRoute exact path={submission()} component={Submission} />
+                <PrivateRoute exact path={`${urlBaseFrontend()}form/:id`} component={Questions} />
                 <AuthRoute path={login()} component={Login} />
                 <AuthRoute path={register()} component={Register} />
                 <Route render={() => <Redirect to='/' />} />    

src/actions/form.js

@@ -0,0 +1,253 @@
+import axios from 'axios'
+import {
+    urlPostForm,
+    urlGetForm,
+    urlFormId
+} from '../urls'
+import {
+    GET_PUBLISHED_FORMS,
+    GET_UNPUBLISHED_FORMS,
+    GET_FORM,
+    POST_FORM,
+    UPDATE_PUBLISHED_FORM,
+    UPDATE_UNPUBLISHED_FORM,
+    UNPUBLISH_FORM,
+    PUBLISH_FORM,
+    DELETE_UNPUBLISHED_FORM,
+    DELETE_PUBLISHED_FORM,
+    FORM_ERRORS
+} from './types'
+
+export const getPublishedForm = (status, status2) => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                Authorization: `Bearer ${localStorage.token}`,
+            }
+        }
+        // url: form/?status=published&status=closed
+        const res = await axios.get(urlGetForm(status, status2), config);
+        dispatch({
+            type: GET_PUBLISHED_FORMS,
+            payload: res.data
+        });
+    }
+    catch (err) {
+        dispatch({
+            type: FORM_ERRORS,
+            payload: err.response.data
+        })
+    }
+}
+
+export const getUnpublishedForm = (status) => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                Authorization: `Bearer ${localStorage.token}`,
+            }
+        }
+        // url: form/?status=unpublished
+        const res = await axios.get(urlGetForm(status), config);
+        dispatch({
+            type: GET_UNPUBLISHED_FORMS,
+            payload: res.data
+        });
+    }
+    catch (err) {
+        dispatch({
+            type: FORM_ERRORS,
+            payload: err.response.data
+        })
+    }
+}
+
+export const getForm = (id) => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                Authorization: `Bearer ${localStorage.token}`,
+            }
+        }
+        const res = await axios.get(urlFormId(id), config);
+        dispatch({
+            type: GET_FORM,
+            payload: res.data
+        });
+    }
+    catch (err) {
+        dispatch({
+            type: FORM_ERRORS,
+            payload: err.response.data
+        })
+    }
+}
+
+export const postForm = (data, callback) => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                'content-type': 'application/json',
+                Authorization: `Bearer ${localStorage.token}`,
+            }
+        }
+        const res = await axios.post(urlPostForm(), data, config);
+        dispatch({
+            type: POST_FORM,
+            payload: res.data
+        });
+        callback()
+    }
+    catch (err) {
+        console.log(err)
+        dispatch({
+            type: FORM_ERRORS,
+            payload: err.response.data
+        });
+        callback()
+    }
+};
+
+export const unpublishForm = (id, data, callback) => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                'content-type': 'application/json',
+                Authorization: `Bearer ${localStorage.token}`,
+            }
+        }
+        const res = await axios.patch(urlFormId(id), data, config);
+        dispatch({
+            type: UNPUBLISH_FORM,
+            payload: res.data
+        });
+        callback()
+    }
+    catch (err) {
+        dispatch({
+            type: FORM_ERRORS,
+            payload: err.response.data
+        });
+        callback()
+    }
+};
+
+export const publishForm = (id, data, callback) => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                'content-type': 'application/json',
+                Authorization: `Bearer ${localStorage.token}`,
+            }
+        }
+        const res = await axios.patch(urlFormId(id), data, config);
+        dispatch({
+            type: PUBLISH_FORM,
+            payload: res.data
+        });
+        callback()
+    }
+    catch (err) {
+        dispatch({
+            type: FORM_ERRORS,
+            payload: err.response.data
+        });
+        callback()
+    }
+};
+
+export const patchPublishedForm = (id, data, callback) => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                'content-type': 'application/json',
+                Authorization: `Bearer ${localStorage.token}`,
+            }
+        }
+        const res = await axios.patch(urlFormId(id), data, config);
+        dispatch({
+            type: UPDATE_PUBLISHED_FORM,
+            payload: res.data
+        });
+        callback()
+    }
+    catch (err) {
+        dispatch({
+            type: FORM_ERRORS,
+            payload: err.response.data
+        });
+        callback()
+    }
+};
+
+export const patchUnpublishedForm = (id, data, callback) => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                'content-type': 'application/json',
+                Authorization: `Bearer ${localStorage.token}`,
+            }
+        }
+        const res = await axios.patch(urlFormId(id), data, config);
+        dispatch({
+            type: UPDATE_UNPUBLISHED_FORM,
+            payload: res.data
+        });
+        callback()
+    }
+    catch (err) {
+        dispatch({
+            type: FORM_ERRORS,
+            payload: err.response.data
+        });
+        callback()
+    }
+};
+
+export const deletePublishedForm = (id, status, callback) => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                'content-type': 'application/json',
+                Authorization: `Bearer ${localStorage.token}`,
+            }
+        }
+        const res = await axios.delete(urlFormId(id, status), config);
+        dispatch({
+            type: DELETE_PUBLISHED_FORM,
+            payload: id
+        });
+        callback()
+    }
+    catch (err) {
+        dispatch({
+            type: FORM_ERRORS,
+            payload: err.response.data
+        });
+        callback()
+    }
+};
+
+export const deleteUnpublishedForm = (id, status, callback) => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                'content-type': 'application/json',
+                Authorization: `Bearer ${localStorage.token}`,
+            }
+        }
+        const res = await axios.delete(urlFormId(id, status), config);
+        dispatch({
+            type: DELETE_UNPUBLISHED_FORM,
+            payload: id
+        });
+        callback()
+    }
+    catch (err) {
+        dispatch({
+            type: FORM_ERRORS,
+            payload: err.response.data
+        });
+        callback()
+    }
+};

src/actions/question.js

@@ -0,0 +1,52 @@
+import axios from 'axios'
+import {
+    urlQuestions
+} from '../urls'
+import {
+    GET_QUESTIONS,
+    POST_QUESTIONS,
+    QUESTION_ERROR
+} from './types'
+
+export const getQuestions = (form_id) => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                Authorization: `Bearer ${localStorage.token}`,
+            }
+        }
+        const res = await axios.get(urlQuestions(form_id), config);
+        dispatch({
+            type: GET_QUESTIONS,
+            payload: res.data
+        });
+    }
+    catch (err) {
+        dispatch({
+            type: QUESTION_ERROR,
+            payload: err.response.data
+        })
+    }
+}
+
+export const postQuestions = (form_id, data, callback) => async dispatch => {
+    try {
+        const config = {
+            headers: {
+                Authorization: `Bearer ${localStorage.token}`,
+            }
+        }
+        const res = await axios.post(urlQuestions(form_id),data, config);
+        dispatch({
+            type: POST_QUESTIONS,
+            payload: res.data
+        });
+        callback()
+    }
+    catch (err) {
+        dispatch({
+            type: QUESTION_ERROR,
+            payload: err.response.data
+        })
+    }
+}

src/actions/types.js

@@ -9,3 +9,17 @@ export const GET_USER_INFO = 'GET_USER_INFO';
 export const POST_USER_INFO = 'POST_USER_INFO';
 export const UPDATE_USER_INFO = 'UPDATE_USER_INFO';
 export const USER_INFO_ERRORS = 'USER_INFO_ERRORS';
+export const GET_PUBLISHED_FORMS = 'GET_PUBLISHED_FORMS';
+export const GET_UNPUBLISHED_FORMS = 'GET_UNPUBLISHED_FORMS';
+export const UNPUBLISH_FORM = 'UNPUBLISH_FORM';
+export const PUBLISH_FORM = 'PUBLISH_FORM';
+export const GET_FORM = 'GET_FORM';
+export const POST_FORM = 'POST_FORM';
+export const UPDATE_PUBLISHED_FORM = 'UPDATE_PUBLISHED_FORM';
+export const UPDATE_UNPUBLISHED_FORM = 'UPDATE_UNPUBLISHED_FORM';
+export const DELETE_PUBLISHED_FORM = 'DELETE_PUBLISHED_FORM';
+export const DELETE_UNPUBLISHED_FORM = 'DELETE_UNPUBLISHED_FORM';
+export const FORM_ERRORS = 'FORM_ERRORS';
+export const GET_QUESTIONS = 'GET_QUESTIONS';
+export const POST_QUESTIONS = 'POST_QUESTIONS';
+export const QUESTION_ERROR = 'QUESTION_ERROR';