refactored components

client/apps/admin/components/application_instance_settings/application_instance_settings.jsx

@@ -8,7 +8,6 @@ export default function ApplicationInstanceSettings(props) {
   const {
     application,
     applicationInstance,
-    sites,
     tabComponent,
     location
   } = props;
@@ -19,7 +18,6 @@ export default function ApplicationInstanceSettings(props) {
         location={location}
         application={application}
         applicationInstance={applicationInstance}
-        sites={sites}
       />
       <div className="display-page">
         {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,

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,

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(
-        <Configuration />
+      <Provider store={store}>
+        <Configuration params={params}/>
+      </Provider>
     );
     expect(result).toMatchSnapshot();
   });

client/apps/admin/components/application_instance_settings/header.jsx

@@ -1,28 +1,26 @@
 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';
 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,

client/apps/admin/components/application_instance_settings/header.spec.jsx

@@ -1,17 +1,36 @@
 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: {},
   };
   const application = {};
 
   it('renders the Header component', () => {
     const result = TestRenderer.create(
+      <Provider store={store}>
         <Header applicationInstance={applicationInstance} application={application}/>
+      </Provider>
     );
     expect(result).toMatchSnapshot();
   });

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) {
           <ApplicationInstanceSettings
             application={application}
             applicationInstance={applicationInstance}
-            sites={sites}
             tabComponent={children}
             location={location}
           />
@@ -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,

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(
       <Provider store={store}>
-        <Index 
-          params={params} 
-          applications={applications}
-          applicationInstances={applicationInstances}
-          location={location}
-        />
+        <Index params={params}/>
       </Provider>
     );
     expect(result).toMatchSnapshot();