{tabComponent}
@@ -36,7 +34,6 @@ ApplicationInstanceSettings.propTypes = {
applicationInstance: PropTypes.shape({
lti_key: PropTypes.string,
}),
- sites: PropTypes.shape({}).isRequired,
tabComponent: PropTypes.element,
location: PropTypes.shape({
pathname: PropTypes.string,
diff --git a/client/apps/admin/components/application_instance_settings/configuration.jsx b/client/apps/admin/components/application_instance_settings/configuration.jsx
index b322da53..15ae7e75 100644
--- a/client/apps/admin/components/application_instance_settings/configuration.jsx
+++ b/client/apps/admin/components/application_instance_settings/configuration.jsx
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
import _ from 'lodash';
import * as ApplicationInstanceActions from '../../actions/application_instances';
import Textarea from '../common/textarea';
@@ -20,25 +20,25 @@ function prettyJSON(str) {
}
}
-const select = (state, props) => ({
- loading: state.applicationInstances.loading,
- loaded: state.applicationInstances.loaded,
- applicationInstances: _.filter(state.applicationInstances.applicationInstances,
- { application_id: parseInt(props.params.applicationId, 10) }),
-});
-
-export function Configuration(props) {
+export default function Configuration(props) {
const {
- loading,
- loaded,
params,
- applicationInstances
} = props;
+ const dispatch = useDispatch();
+ const loading = useSelector((state) => state.applicationInstances.loading);
+ const loaded = useSelector((state) => state.applicationInstances.loaded);
+ const applicationInstances = useSelector((state) => _.filter(
+ state.applicationInstances.applicationInstances,
+ { application_id: parseInt(params.applicationId, 10) }
+ ));
+
useEffect(() => {
if (!loading && !loaded) {
- props.getApplicationInstance(params.applicationId, params.applicationInstanceId);
+ dispatch(
+ getApplicationInstance(params.applicationId, params.applicationInstanceId)
+ )
}
},
[]);
@@ -52,7 +52,9 @@ export function Configuration(props) {
useEffect(() => {
// Redux function to store newApplicationInstance
- props.updateNewInstance(newApplicationInstance);
+ dispatch(
+ updateNewInstance(newApplicationInstance)
+ );
},
[newApplicationInstance]);
@@ -135,18 +137,13 @@ export function Configuration(props) {
);
}
-export default connect(select, ApplicationInstanceActions)(Configuration);
-
Configuration.propTypes = {
applicationInstance: PropTypes.shape({
config: PropTypes.string,
lti_config: PropTypes.string,
lti_config_xml: PropTypes.string,
}),
- loading: PropTypes.bool,
- loaded: PropTypes.bool,
updateNewInstance: PropTypes.func,
- applicationInstances: PropTypes.array,
getApplicationInstance: PropTypes.func,
params: PropTypes.shape({
applicationId: PropTypes.string.isRequired,
diff --git a/client/apps/admin/components/application_instance_settings/configuration.spec.jsx b/client/apps/admin/components/application_instance_settings/configuration.spec.jsx
index a7c032f0..8ad0c635 100644
--- a/client/apps/admin/components/application_instance_settings/configuration.spec.jsx
+++ b/client/apps/admin/components/application_instance_settings/configuration.spec.jsx
@@ -1,12 +1,24 @@
import React from 'react';
+import { Provider } from 'react-redux';
import TestRenderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
-import { Configuration } from './configuration';
+import Configuration from './configuration';
+
+const mockStore = configureStore([]);
+
+const store = mockStore({
+ applicationInstances : {},
+});
describe('configuration', () => {
+
+ const params = {};
it('renders the DownloadButton component', () => {
const result = TestRenderer.create(
-
+
+
+
);
expect(result).toMatchSnapshot();
});
diff --git a/client/apps/admin/components/application_instance_settings/header.jsx b/client/apps/admin/components/application_instance_settings/header.jsx
index bae31a6c..f32e70db 100644
--- a/client/apps/admin/components/application_instance_settings/header.jsx
+++ b/client/apps/admin/components/application_instance_settings/header.jsx
@@ -1,6 +1,5 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
import _ from 'lodash';
import EnabledButton from '../common/enabled';
import Menu from '../common/menu';
@@ -8,21 +7,20 @@ import DisabledButton from '../common/disabled';
import DeleteModal from '../common/delete_modal';
import getExtraFields from '../application_instances/extra_fields';
import * as ApplicationInstanceActions from '../../actions/application_instances';
+import { useDispatch, useSelector } from 'react-redux';
-const select = (state) => ({
- newApplicationInstance: state.applicationInstances.newApplicationInstance,
-});
-
-export function Header(props) {
+export default function Header(props) {
const {
goBack,
- applicationInstance,
- application,
deleteInstance,
disableInstance,
- newApplicationInstance,
+ applicationInstance,
+ application,
} = props;
+ const dispatch = useDispatch();
+ const newApplicationInstance = useSelector((state) => state.applicationInstances.newApplicationInstance);
+
const {
nickname,
primary_contact: primaryContact,
@@ -47,7 +45,9 @@ export function Header(props) {
const saveAppInstance = () => {
if (!_.isEmpty(newApplicationInstance)) {
- props.saveApplicationInstance(application.id, newApplicationInstance);
+ dispatch(
+ saveApplicationInstance(application.id, newApplicationInstance)
+ )
}
};
@@ -141,8 +141,6 @@ export function Header(props) {
);
}
-export default connect(select, ApplicationInstanceActions)(Header);
-
Header.propTypes = {
goBack: PropTypes.func,
saveApplicationInstance: PropTypes.func,
diff --git a/client/apps/admin/components/application_instance_settings/header.spec.jsx b/client/apps/admin/components/application_instance_settings/header.spec.jsx
index a32997ab..4fc385df 100644
--- a/client/apps/admin/components/application_instance_settings/header.spec.jsx
+++ b/client/apps/admin/components/application_instance_settings/header.spec.jsx
@@ -1,9 +1,26 @@
import React from 'react';
+import { Provider } from 'react-redux';
import TestRenderer from 'react-test-renderer';
-import { Header } from './header';
+import Header from './header';
+import configureStore from 'redux-mock-store';
+
+const mockStore = configureStore([]);
+
+const settings = {
+ sign_out_url: 'https://www.example.com',
+};
+
+const store = mockStore({
+ applicationInstances: {
+ newApplicationInstance: {
+ }
+ },
+ settings,
+});
describe('Header', () => {
+
const applicationInstance = {
site: {},
};
@@ -11,7 +28,9 @@ describe('Header', () => {
it('renders the Header component', () => {
const result = TestRenderer.create(
+
);
expect(result).toMatchSnapshot();
});
diff --git a/client/apps/admin/components/application_instance_settings/index.jsx b/client/apps/admin/components/application_instance_settings/index.jsx
index 37a8d441..0207a68c 100644
--- a/client/apps/admin/components/application_instance_settings/index.jsx
+++ b/client/apps/admin/components/application_instance_settings/index.jsx
@@ -1,38 +1,32 @@
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
import _ from 'lodash';
import Heading from '../common/heading';
import Header from './header';
import ApplicationInstanceSettings from './application_instance_settings';
import Loader from '../../../../common/components/common/atomicjolt_loader';
import * as ApplicationInstanceActions from '../../actions/application_instances';
+import { useDispatch, useSelector } from 'react-redux';
-const select = (state, props) => ({
- loading: state.applicationInstances.loading,
- applicationInstances: _.filter(state.applicationInstances.applicationInstances,
- { application_id: parseInt(props.params.applicationId, 10) }),
- applications: state.applications,
- sites: state.sites,
-});
-
-export function Index(props) {
+export default function Index(props) {
const {
router,
- applicationInstances,
- loading,
params,
- applications,
deleteApplicationInstance,
disableApplicationInstance,
- sites,
children,
- location,
} = props;
+ const dispatch = useDispatch();
+ const loading = useSelector((state) => state.applicationInstances.loading);
+ const applicationInstances = useSelector((state) => state.applicationInstances);
+ const applications = useSelector((state) => state.applications);
+
useEffect(() => {
- props.getApplicationInstance(params.applicationId, params.applicationInstanceId);
+ dispatch(
+ getApplicationInstance(params.applicationId, params.applicationInstanceId)
+ )
},
[]);
@@ -43,7 +37,6 @@ export function Index(props) {
let backPath = '';
if (!loading) {
backPath = `/applications/${application.id}/application_instances`;
-
}
const renderLoading = () => (
@@ -70,7 +63,6 @@ export function Index(props) {
@@ -80,23 +72,15 @@ export function Index(props) {
);
}
-export default connect(select, ApplicationInstanceActions)(Index);
-
Index.propTypes = {
params: PropTypes.shape({
applicationId: PropTypes.string.isRequired,
applicationInstanceId: PropTypes.string.isRequired,
}).isRequired,
- applications: PropTypes.shape({
- id: PropTypes.string.isRequired,
- }).isRequired,
getApplicationInstance: PropTypes.func,
- applicationInstances: PropTypes.array,
router: PropTypes.shape({
push: PropTypes.func,
}),
- loading: PropTypes.bool,
- sites: PropTypes.shape({}).isRequired,
deleteApplicationInstance: PropTypes.func,
disableApplicationInstance: PropTypes.func,
children: PropTypes.element,
diff --git a/client/apps/admin/components/application_instance_settings/index.spec.jsx b/client/apps/admin/components/application_instance_settings/index.spec.jsx
index 64e6ced0..6f27f9a9 100644
--- a/client/apps/admin/components/application_instance_settings/index.spec.jsx
+++ b/client/apps/admin/components/application_instance_settings/index.spec.jsx
@@ -3,7 +3,30 @@ import TestRenderer from 'react-test-renderer';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
-import { Index } from './index';
+import Index from './index';
+
+const application = {
+ id: 1,
+ name: 'test application',
+};
+
+const site = {
+ url: "https://www.example.com",
+};
+
+const applicationInstance = {
+ id: 1,
+ nickname: 'a test application instance',
+ site: site,
+};
+
+const params = {
+ applicationId: application.id,
+ applicationInstanceId: applicationInstance.id,
+};
+
+const applications = {};
+applications[application.id] = application;
const mockStore = configureStore([]);
const store = mockStore({
@@ -12,48 +35,18 @@ const store = mockStore({
},
applicationInstances: {
newApplicationInstance: {},
+ applicationInstance: applicationInstance,
},
+ application: application,
+ applications: applications,
+ location: {},
});
describe('Index', () => {
it('renders the Index component', () => {
- const application = {
- id: 1,
- name: 'test application',
- };
-
- const site = {
- url: "https://www.example.com",
- };
-
- const applicationInstance = {
- id: 2,
- nickname: 'a test application instance',
- site,
- };
-
- const params = {
- applicationId: application.id,
- applicationInstanceId: applicationInstance.id,
- };
-
- const applications = {};
- applications[application.id] = application;
-
- const applicationInstances = [
- applicationInstance,
- ];
-
- const location = {};
-
const result = TestRenderer.create(
-
+
);
expect(result).toMatchSnapshot();
diff --git a/client/apps/admin/components/application_instance_settings/xml_config.jsx b/client/apps/admin/components/application_instance_settings/xml_config.jsx
index db179d1a..5e5db648 100644
--- a/client/apps/admin/components/application_instance_settings/xml_config.jsx
+++ b/client/apps/admin/components/application_instance_settings/xml_config.jsx
@@ -1,35 +1,31 @@
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
import _ from 'lodash';
import * as ApplicationInstanceActions from '../../actions/application_instances';
import Textarea from '../common/textarea';
+import { useDispatch, useSelector } from 'react-redux';
-const select = (state, props) => (
- {
- loading: state.applicationInstances.loading,
- loaded: state.applicationInstances.loaded,
- applicationInstances: _.filter(
- state.applicationInstances.applicationInstances,
- { application_id: parseInt(props.params.applicationId, 10) }
- ),
- }
-);
-
-export function XmlConfig(props) {
+export default function XmlConfig(props) {
const {
- loading,
- loaded,
params,
- applicationInstances
} = props;
+ const dispatch = useDispatch();
+ const loading = useSelector((state) => state.applicationInstances.loading);
+ const loaded = useSelector((state) => state.applicationInstances.loaded);
+ const applicationInstances = useSelector((state) => _.filter(
+ state.applicationInstances,
+ { application_id: parseInt(props.params.applicationId, 10) }
+ ));
+
useEffect(() => {
if (!loading && !loaded) {
- props.getApplicationInstance(
- params.applicationId,
- params.applicationInstanceId
- );
+ dispatch(
+ getApplicationInstance(
+ params.applicationId,
+ params.applicationInstanceId
+ )
+ )
}
}, []);
@@ -60,8 +56,6 @@ export function XmlConfig(props) {
);
}
-export default connect(select, ApplicationInstanceActions)(XmlConfig);
-
XmlConfig.propTypes = {
applicationInstance: PropTypes.shape({
config: PropTypes.string,
diff --git a/client/apps/admin/components/application_instance_settings/xml_config.spec.jsx b/client/apps/admin/components/application_instance_settings/xml_config.spec.jsx
index b066bdbb..b18300c6 100644
--- a/client/apps/admin/components/application_instance_settings/xml_config.spec.jsx
+++ b/client/apps/admin/components/application_instance_settings/xml_config.spec.jsx
@@ -1,26 +1,34 @@
import React from 'react';
+import { Provider } from 'react-redux';
import TestRenderer from 'react-test-renderer';
-import { XmlConfig } from './xml_config';
+import XmlConfig from './xml_config';
+import configureStore from 'redux-mock-store';
-describe('XmlConfig', () => {
- it('renders the XmlConfig component', () => {
+const mockStore = configureStore([]);
- const applicationInstance = {
- id: 1,
- };
+const applicationInstance = {
+ id: 1,
+ application_id: 2,
+};
- const applicationInstances = [
- applicationInstance,
- ];
+const store = mockStore({
+ applicationInstances: [
+ applicationInstance,
+ ],
+});
+describe('XmlConfig', () => {
+ it('renders the XmlConfig component', () => {
const params = {
- applicationId: "1",
- applicationInstanceId: "1",
+ applicationId: 2,
+ applicationInstanceId: 1,
};
const result = TestRenderer.create(
-
+
+
+
);
expect(result).toMatchSnapshot();
});
diff --git a/client/apps/admin/components/application_instances/settings_drop_down.jsx b/client/apps/admin/components/application_instances/settings_drop_down.jsx
index 0ddffcf1..af793058 100644
--- a/client/apps/admin/components/application_instances/settings_drop_down.jsx
+++ b/client/apps/admin/components/application_instances/settings_drop_down.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
export default function settingDropDown() {
const styles = {
diff --git a/client/apps/admin/components/common/heading.jsx b/client/apps/admin/components/common/heading.jsx
index 9ca248a4..7ed33a8f 100644
--- a/client/apps/admin/components/common/heading.jsx
+++ b/client/apps/admin/components/common/heading.jsx
@@ -1,31 +1,29 @@
import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
-import { connect } from 'react-redux';
import { Link } from 'react-router3';
import Menu from './menu';
import SubNav from './sub_nav';
import logo from '../../assets/images/aj-logo-emblem.svg';
+import { useDispatch, useSelector } from 'react-redux'
-const select = (state) => ({
- signOutUrl: state.settings.sign_out_url,
- userEditUrl: state.settings.user_edit_url,
- usersUrl: state.settings.users_url,
- sites: state.sites,
- journalsAdminUrl: state.settings.journals_admin_url,
- poolsAdminUrl: state.settings.polls_admin_url,
- discussionsAdminUrl: state.settings.discussions_admin_url,
- assessmentsAdminUrl: state.settings.assessments_admin_url,
- searchAdminUrl: state.settings.search_admin_url,
- actAdminUrl: state.settings.act_admin_url,
-});
-
-export function Heading(props) {
+export default function Heading(props) {
const {
application,
-
} = props;
+ const dispatch = useDispatch();
+ const signOutUrl = useSelector((state) => state.settings.sign_out_url);
+ const userEditUrl = useSelector((state) => state.settings.user_edit_url);
+ const usersUrl = useSelector((state) => state.settings.users_url);
+ const sites = useSelector((state) => state.sites);
+ const journalsAdminUrl = useSelector((state) => state.settings.journals_admin_url);
+ const poolsAdminUrl = useSelector((state) => state.settings.polls_admin_url);
+ const discussionsAdminUrl = useSelector((state) => state.settings.discussions_admin_url);
+ const assessmentsAdminUrl = useSelector((state) => state.settings.assessments_admin_url);
+ const searchAdminUrl = useSelector((state) => state.settings.search_admin_url);
+ const actAdminUrl = useSelector((state) => state.settings.act_admin_url);
+
const apps = [
{
displayName: 'Starter',
@@ -63,16 +61,16 @@ export function Heading(props) {