From 27e52b80515c52d06c5e4b8986d023e4567cd847 Mon Sep 17 00:00:00 2001
From: Tomasz Knapik <hi@tmkn.org>
Date: Wed, 9 Jan 2019 19:34:01 +0000
Subject: [PATCH] Add API module
---
opentech/static_src/src/app/src/api/index.js | 5 +++
.../static_src/src/app/src/api/submissions.js | 5 +++
opentech/static_src/src/app/src/api/utils.js | 19 +++++++++++
.../SubmissionsByRoundListHeading.js | 2 +-
.../containers/SubmissionsByRoundContainer.js | 26 ++++++++++++---
opentech/static_src/src/app/src/index.js | 1 -
.../src/app/src/redux/actions/submissions.js | 32 +++++++++++++++++++
.../src/app/src/redux/reducers/submissions.js | 26 +++++++--------
.../app/src/redux/selectors/submissions.js | 12 +++++++
.../static_src/src/app/webpack.base.config.js | 1 +
10 files changed, 109 insertions(+), 20 deletions(-)
create mode 100644 opentech/static_src/src/app/src/api/index.js
create mode 100644 opentech/static_src/src/app/src/api/submissions.js
create mode 100644 opentech/static_src/src/app/src/api/utils.js
diff --git a/opentech/static_src/src/app/src/api/index.js b/opentech/static_src/src/app/src/api/index.js
new file mode 100644
index 000000000..770802352
--- /dev/null
+++ b/opentech/static_src/src/app/src/api/index.js
@@ -0,0 +1,5 @@
+import { fetchSubmissionsByRound } from '@api/submissions';
+
+export default {
+ fetchSubmissionsByRound,
+};
diff --git a/opentech/static_src/src/app/src/api/submissions.js b/opentech/static_src/src/app/src/api/submissions.js
new file mode 100644
index 000000000..5b8f5b169
--- /dev/null
+++ b/opentech/static_src/src/app/src/api/submissions.js
@@ -0,0 +1,5 @@
+import { apiFetch } from '@api/utils';
+
+export async function fetchSubmissionsByRound(id) {
+ return apiFetch('/apply/api/submissions/');
+}
diff --git a/opentech/static_src/src/app/src/api/utils.js b/opentech/static_src/src/app/src/api/utils.js
new file mode 100644
index 000000000..19bc84419
--- /dev/null
+++ b/opentech/static_src/src/app/src/api/utils.js
@@ -0,0 +1,19 @@
+const getBaseUrl = () => {
+ return 'http://apply.localhost:8000/';
+};
+
+export async function apiFetch(path, method = 'GET', params, options) {
+ console.log('apifetch');
+ const url = new URL(getBaseUrl());
+ url.pathname = path;
+
+ if (params !== undefined) {
+ url.searchParams = new URLSearchParams(params);
+ }
+
+ return fetch(url, {
+ ...options,
+ method,
+ mode: 'same-origin',
+ });
+}
diff --git a/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.js b/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.js
index e3e2dd4e2..4291cd7c9 100644
--- a/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.js
+++ b/opentech/static_src/src/app/src/components/SubmissionsByRoundListHeading.js
@@ -6,7 +6,7 @@ export default class SubmissionsByRoundListHeading extends React.Component {
render() {
return (
<li>
- <h2>{this.props.title}</h2>
+ <h2>{this.props.title} ({this.props.count})</h2>
</li>
);
}
diff --git a/opentech/static_src/src/app/src/containers/SubmissionsByRoundContainer.js b/opentech/static_src/src/app/src/containers/SubmissionsByRoundContainer.js
index 96c5095c3..1d5f23de9 100644
--- a/opentech/static_src/src/app/src/containers/SubmissionsByRoundContainer.js
+++ b/opentech/static_src/src/app/src/containers/SubmissionsByRoundContainer.js
@@ -3,14 +3,18 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux'
import SubmissionsByRoundList from '@components/SubmissionsByRoundList';
-import { getCurrentRoundSubmissions } from '@selectors/submissions';
-import { setCurrentSubmissionRound } from '@actions/submissions';
+import { getCurrentRoundSubmissionsByStatus } from '@selectors/submissions';
+import { setCurrentSubmissionRound, fetchSubmissionsByRound } from '@actions/submissions';
class SubmissionsByRoundContainer extends React.Component {
constructor(props) {
super(props);
- props.dispatch(setCurrentSubmissionRound(props.roundId));
+ }
+
+ componentDidMount() {
+ this.props.setSubmissionRound(this.props.roundId);
+ this.props.loadSubmissions(this.props.roundId);
}
render() {
@@ -25,14 +29,26 @@ class SubmissionsByRoundContainer extends React.Component {
const mapStateToProps = state => {
return {
- items: getCurrentRoundSubmissions(state),
+ items: getCurrentRoundSubmissionsByStatus(state),
};
};
+const mapDispatchToProps = dispatch => {
+ return {
+ loadSubmissions: id => {
+ dispatch(fetchSubmissionsByRound(id));
+ },
+ setSubmissionRound: id => {
+ dispatch(setCurrentSubmissionRound(id));
+ },
+ }
+};
+
SubmissionsByRoundContainer.propTypes = {
roundId: PropTypes.number,
+ loadSubmissions: PropTypes.func,
};
-export default connect(mapStateToProps)(SubmissionsByRoundContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(SubmissionsByRoundContainer);
diff --git a/opentech/static_src/src/app/src/index.js b/opentech/static_src/src/app/src/index.js
index 326d703a1..a3359dcd2 100644
--- a/opentech/static_src/src/app/src/index.js
+++ b/opentech/static_src/src/app/src/index.js
@@ -10,7 +10,6 @@ const container = document.getElementById('submissions-by-round-react-app');
const store = createStore();
-console.log(container.dataset);
ReactDOM.render(
<Provider store={store}>
<SubmissionsByRoundApp pageContent={container.innerHTML} roundId={parseInt(container.dataset.roundId)} />
diff --git a/opentech/static_src/src/app/src/redux/actions/submissions.js b/opentech/static_src/src/app/src/redux/actions/submissions.js
index aaf0f900c..5902baf02 100644
--- a/opentech/static_src/src/app/src/redux/actions/submissions.js
+++ b/opentech/static_src/src/app/src/redux/actions/submissions.js
@@ -1,6 +1,38 @@
+import api from '@api';
+
+
export const SET_CURRENT_SUBMISSION_ROUND = 'SET_CURRENT_SUBMISSION_ROUND';
+export const UPDATE_SUBMISSIONS_BY_ROUND = 'UPDATE_SUBMISSIONS_BY_ROUND';
+
export const setCurrentSubmissionRound = id => ({
type: SET_CURRENT_SUBMISSION_ROUND,
id,
});
+
+export const fetchSubmissionsByRound = id => {
+ console.log('fetch submissions by round');
+ return async function(dispatch) {
+ //dispatch(fetchSubmissionsByRoundBegin());
+ try {
+ console.log('before api call');
+ const response = await api.fetchSubmissionsByRound(id);
+ console.log('response', response);
+ const json = await response.json();
+ if (!response.ok) {
+ // handle error
+ }
+ dispatch(updateSubmissionsByRound(id, json));
+ } catch (e) {
+ console.error(e);
+ // handle error
+ }
+ };
+};
+
+
+export const updateSubmissionsByRound = (roundId, data) => ({
+ type: UPDATE_SUBMISSIONS_BY_ROUND,
+ roundId,
+ data,
+});
diff --git a/opentech/static_src/src/app/src/redux/reducers/submissions.js b/opentech/static_src/src/app/src/redux/reducers/submissions.js
index 0fe5c95fb..2f82a4ff2 100644
--- a/opentech/static_src/src/app/src/redux/reducers/submissions.js
+++ b/opentech/static_src/src/app/src/redux/reducers/submissions.js
@@ -1,19 +1,8 @@
-import { SET_CURRENT_SUBMISSION_ROUND } from '@actions/submissions';
+import { SET_CURRENT_SUBMISSION_ROUND, UPDATE_SUBMISSIONS_BY_ROUND } from '@actions/submissions';
const initialState = {
currentRound: null,
- itemsByRound: {
- 796: [
- {
- title: "Test stage 1",
- applications: [],
- },
- {
- title: "Test stage 2 blabla",
- applications: [],
- },
- ]
- }
+ itemsByRound: {}
};
export default function submissions(state = initialState, action) {
@@ -23,6 +12,17 @@ export default function submissions(state = initialState, action) {
...state,
currentRound: action.id,
};
+ case UPDATE_SUBMISSIONS_BY_ROUND:
+ const newData = {};
+ newData[action.roundId] = action.data.results;
+
+ return {
+ ...state,
+ itemsByRound: {
+ ...state.itemsByRound,
+ ...newData,
+ },
+ };
default:
return state;
}
diff --git a/opentech/static_src/src/app/src/redux/selectors/submissions.js b/opentech/static_src/src/app/src/redux/selectors/submissions.js
index 7d03d4483..37a267695 100644
--- a/opentech/static_src/src/app/src/redux/selectors/submissions.js
+++ b/opentech/static_src/src/app/src/redux/selectors/submissions.js
@@ -9,6 +9,18 @@ const getCurrentRoundSubmissions = createSelector(
(submissionsByRound, currentRound) => submissionsByRound[currentRound] || []
);
+const getCurrentRoundSubmissionsByStatus = createSelector(
+ [getCurrentRoundSubmissions] ,
+ currentRoundSubmissions => {
+ const submissionsByStatus = [{
+ title: 'Test stage',
+ applications: currentRoundSubmissions,
+ }];
+ return submissionsByStatus;
+ }
+);
+
export {
getCurrentRoundSubmissions,
+ getCurrentRoundSubmissionsByStatus,
};
diff --git a/opentech/static_src/src/app/webpack.base.config.js b/opentech/static_src/src/app/webpack.base.config.js
index 1915d2ae3..be11bcbcb 100644
--- a/opentech/static_src/src/app/webpack.base.config.js
+++ b/opentech/static_src/src/app/webpack.base.config.js
@@ -63,6 +63,7 @@ module.exports = {
'@reducers': path.resolve(__dirname, 'src/redux/reducers'),
'@selectors': path.resolve(__dirname, 'src/redux/selectors'),
'@actions': path.resolve(__dirname, 'src/redux/actions'),
+ '@api': path.resolve(__dirname, 'src/api'),
}
}
};
--
GitLab