Skip to content

Commit

Permalink
Merge pull request #10 from dhis2/react16-migration
Browse files Browse the repository at this point in the history 
React16 migration
  • Loading branch information
@Birkbjo
Birkbjo authored Oct 19, 2017
2 parents bd2c3f8 + d15a2e2 commit 4970909
Show file tree
Hide file tree
Showing 54 changed files with 1,119 additions and 481 deletions.
Binary file removed app/build/.DS_Store
View file
Binary file not shown.
1 change: 0 additions & 1 deletion app/build/app-store.js.map
View file

This file was deleted.

12 changes: 6 additions & 6 deletions app/indexbuild.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>DHIS2 AppStore</title>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="%BASE_URL%/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="%BASE_URL%/favicon-16x16.png">
<link rel="icon" type="image/x-icon" href="%BASE_URL%/favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"

rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,400" rel="stylesheet">
<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
</head>
<body>
<div id="appStore"></div>
Expand Down
77 changes: 9 additions & 68 deletions app/src/actions/actionCreators.js
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,6 @@
import * as actions from "../constants/actionTypes";
import { REVERT, COMMIT } from "redux-optimistic-ui";

//OPTIMISTIC-ACTION HANDLERS

/**
* Action-enhancer that produces an optimistic action
* by adding optimistic meta properties
* @param action
*/
const optimisticActionCreator = action => ({
...action,
meta: { ...action.meta, isOptimistic: true }
});

/**
* Commit or revert an optimistic action that has been handled by the server
* @param action to handle
* @param transactionID of the optimistic-action
* @param error: override error in action.error, will revert the action
* @returns action with enhanced properties so that redux-optimistic-ui can handle the reverted or committed action
*/
export const commitOrRevertOptimisticAction = (
action,
transactionID,
error = false
) => {
if (action.error) {
error = true;
}
return {
...action,
meta: {
...action.meta,
optimistic: error
? { type: REVERT, id: transactionID }
: { type: COMMIT, id: transactionID }
}
};
};

export const commitOptimisticAction = (action, transactionID) => {
return {
...action,
meta: {
...action.meta,
optimistic: { type: COMMIT, id: transactionID }
}
};
};

export const revertOptimisticAction = (action, transactionID) => {
return {
...action,
meta: {
...action.meta,
optimistic: { type: REVERT, id: transactionID }
}
};
};

//ACTION-CREATORS
import { optimisticAction } from '../utils/optimisticActions';

export const loadAllApps = actionCreator(actions.APPS_ALL_LOAD);

Expand All @@ -70,7 +11,7 @@ export const loadApprovedApps = actionCreator(actions.APPS_APPROVED_LOAD);
export const loadedApprovedApps = actionCreator(actions.APPS_APPROVED_LOADED);

export const setAppApproval = (app, status) =>
optimisticActionCreator(
optimisticAction(
actionCreator(actions.SET_APPROVAL_APP)({
app,
status
Expand Down Expand Up @@ -99,15 +40,15 @@ export const addApp = (app, file, image) =>
});

export const editApp = (app, data) =>
optimisticActionCreator(
optimisticAction(
actionCreator(actions.APP_EDIT)({
app,
data
})
);

export const editImage = (appId, imageId, data) =>
optimisticActionCreator(
optimisticAction(
actionCreator(actions.APP_IMAGE_EDIT)({
appId,
imageId,
Expand All @@ -132,7 +73,7 @@ export const editImageLogo = (appId, imageId, logo) =>
});

export const editAppVersion = (appId, version) =>
optimisticActionCreator(
optimisticAction(
actionCreator(actions.APP_VERSION_EDIT)({
appId,
version
Expand Down Expand Up @@ -188,7 +129,7 @@ export const addImageToAppSuccess = (appId, image) =>
});

export const deleteImageFromApp = (appId, imageId) =>
optimisticActionCreator(
optimisticAction(
actionCreator(actions.APP_IMAGE_DELETE)({
appId,
imageId
Expand All @@ -202,7 +143,7 @@ export const deleteImageFromAppSuccess = (appId, imageId) =>
});

export const deleteAppVersion = (version, appId) =>
optimisticActionCreator(
optimisticAction(
actionCreator(actions.APP_VERSION_DELETE)({
version,
appId
Expand All @@ -228,7 +169,7 @@ export const editAppSuccess = (app, data) =>
});

export const deleteApp = app =>
optimisticActionCreator(
optimisticAction(
actionCreator(actions.APP_DELETE)({
app
})
Expand Down Expand Up @@ -278,7 +219,7 @@ export const actionErrorCreator = (type, error, meta) =>
* @param type of action
* @returns {object} FSA-compliant action
*/
function actionCreator(type) {
export function actionCreator(type) {
return (payload, meta, error) => {
if (payload == null) {
payload = {};
Expand Down
37 changes: 20 additions & 17 deletions app/src/actions/epics.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ import "rxjs/add/observable/from";
import "rxjs/add/operator/do";
import { Observable } from "rxjs/Observable";
import { REVERT, COMMIT } from "redux-optimistic-ui";
import {
commitOptimisticAction,
revertOptimisticAction
} from "../utils/optimisticActions";

const loadAppsAll = action$ =>
action$.ofType(actions.APPS_ALL_LOAD).concatMap(action => {
Expand Down Expand Up @@ -59,13 +63,13 @@ const setAppApproval = action$ =>
return api
.setAppApproval(id, status)
.then(resp =>
actionCreators.commitOrRevertOptimisticAction(
commitOptimisticAction(
actionCreators.setAppApprovalSuccess(action.payload),
transactionID
)
)
.catch(error =>
actionCreators.commitOrRevertOptimisticAction(
revertOptimisticAction(
actionCreators.actionErrorCreator(
actions.SET_APPROVAL_APP_ERROR,
error
Expand All @@ -81,13 +85,13 @@ const deleteApp = action$ =>
return api
.deleteApp(action.payload.app.id)
.then(resp =>
actionCreators.commitOrRevertOptimisticAction(
commitOptimisticAction(
actionCreators.deleteAppSuccess(action.payload.app),
id
)
)
.catch(error =>
actionCreators.commitOrRevertOptimisticAction(
revertOptimisticAction(
actionCreators.actionErrorCreator(
actions.APP_DELETE_ERROR,
error
Expand Down Expand Up @@ -161,22 +165,21 @@ const newApp = action$ =>
const editApp = action$ =>
action$.ofType(actions.APP_EDIT).concatMap(action => {
const { app, data } = action.payload;
const { id } = action.meta.optimistic;
return api
.updateApp(app.id, data)
.then(resp =>
actionCreators.commitOrRevertOptimisticAction(
commitOptimisticAction(
actionCreators.editAppSuccess(app, data),
id
action
)
)
.catch(error =>
actionCreators.commitOrRevertOptimisticAction(
revertOptimisticAction(
actionCreators.actionErrorCreator(
actions.APP_EDIT_ERROR,
error
),
id
action
)
);
});
Expand All @@ -192,7 +195,7 @@ const deleteVersion = action$ =>
return api
.deleteVersion(appId, version.id)
.then(response =>
actionCreators.commitOrRevertOptimisticAction(
commitOptimisticAction(
actionCreators.deleteAppVersionSuccess(
version,
action.payload.appId
Expand All @@ -201,7 +204,7 @@ const deleteVersion = action$ =>
)
)
.catch(error =>
actionCreators.commitOrRevertOptimisticAction(
revertOptimisticAction(
actionCreators.actionErrorCreator(
actions.APP_VERSION_DELETE_ERROR,
error
Expand Down Expand Up @@ -272,13 +275,13 @@ const deleteImage = action$ =>
return api
.deleteImage(appId, imageId)
.then(response =>
actionCreators.commitOrRevertOptimisticAction(
commitOptimisticAction(
actionCreators.deleteImageFromAppSuccess(appId, imageId),
id
)
)
.catch(error =>
actionCreators.commitOrRevertOptimisticAction(
revertOptimisticAction(
actionCreators.actionErrorCreator(
actions.APP_IMAGE_DELETE_ERROR,
error
Expand All @@ -299,13 +302,13 @@ const editImage = action$ =>
return api
.updateImage(appId, imageId, data)
.then(response =>
actionCreators.commitOrRevertOptimisticAction(
commitOptimisticAction(
actionCreators.editImageSuccess(appId, imageId, data),
id
)
)
.catch(error =>
actionCreators.commitOrRevertOptimisticAction(
revertOptimisticAction(
actionCreators.actionErrorCreator(
actions.APP_IMAGE_EDIT_ERROR,
error
Expand All @@ -327,13 +330,13 @@ const editVersion = action$ =>
return api
.updateVersion(appId, versionId, version)
.then(response =>
actionCreators.commitOrRevertOptimisticAction(
commitOptimisticAction(
actionCreators.editAppVersionSuccess(appId, version),
id
)
)
.catch(error =>
actionCreators.commitOrRevertOptimisticAction(
revertOptimisticAction(
actionCreators.actionErrorCreator(
actions.APP_VERSION_EDIT_ERROR,
error,
Expand Down
5 changes: 1 addition & 4 deletions app/src/components/AppStore.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import { Router, Route, Redirect, Switch } from "react-router-dom";
import { history } from "../utils/history";
import "material-components-web/dist/material-components-web.css";
import '@material/toolbar/dist/mdc.toolbar.min.css';
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import theme from "../styles/theme";
import "../styles/override.css";
Expand All @@ -14,11 +14,8 @@ import DialogRoot from "./dialog/DialogRoot";
import PrivateRoute from "./utils/PrivateRoute";
import { Provider, connect } from "react-redux";
import store from "../store";
import injectTapEventPlugin from "react-tap-event-plugin";
import { getAuth } from "../utils/AuthService";

injectTapEventPlugin();

const auth = getAuth();
export default function AppStore() {
return (
Expand Down
37 changes: 17 additions & 20 deletions app/src/components/appCards/AppCards.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,13 @@ import {
filterAppType
} from "../utils/Filters";
import { ToolbarGroup } from "material-ui/Toolbar";
//import {values, sortBy} from 'lodash';
import sortBy from "lodash/sortBy";
//import values from 'lodash/values';
import SubHeader from "../header/SubHeader";
import ErrorOrLoading from "../utils/ErrorOrLoading";
import { FadeAnimation, FadeAnimationList } from "../utils/Animate";
import "../../styles/utils/animations.scss";
import Theme from "../../styles/theme";

class AppCards extends Component {
componentDidMount() {
this.props.loadApps();
Expand Down Expand Up @@ -60,11 +59,11 @@ class AppCards extends Component {
filterApp(app, searchFilter) &&
filterAppType(app, this.props.filters)
)
.map((app, i) => (
.map((app, i) =>
<Col key={app.id} span={3} phone={4} style={styles.appItem}>
<AppCardItem key={app.id} app={app} />
</Col>
));
);

const emptyApps = (
<FadeAnimation appear>
Expand Down Expand Up @@ -108,22 +107,20 @@ class AppCards extends Component {
</SubHeader>
</Col>
<Col span={12}>
{loadOrErr || !apps ? (
<ErrorOrLoading
loading={loading}
error={error}
retry={this.props.loadApps}
/>
) : (
<FadeAnimationList
component={Grid}
nested
nestedStyle={styles.grid}
exit={false}
>
{apps}
</FadeAnimationList>
)}
{loadOrErr || !apps
? <ErrorOrLoading
loading={loading}
error={error}
retry={this.props.loadApps}
/>
: <FadeAnimationList
component={Grid}
nested
nestedStyle={styles.grid}
exit={false}
>
{apps}
</FadeAnimationList>}
{loaded && apps.length < 1 && emptyApps}
</Col>
</Grid>
Expand Down
Loading

0 comments on commit 4970909

Please sign in to comment.