Browse Source

#87 - Add AttributesSummary Page (WIP for Jordi)

Elena Cristina Raffay Iglesias 1 year ago
parent
commit
afa341be36

+ 95 - 0
apps/wallet/screens/AttributesSummary.js

@@ -0,0 +1,95 @@
1
+import React from 'react';
2
+import { connect } from 'react-redux';
3
+import PropTypes from 'prop-types';
4
+import { Constants, SecureStore, WebBrowser } from 'expo';
5
+import { Linking, View } from 'react-native';
6
+import { goToPetitionSummary } from '../application/redux/actions/navigation';
7
+import Button from '../application/components/Button/Button';
8
+import { addCredential } from '../application/redux/actions/attributes';
9
+import { getPetition } from '../application/redux/actions/petition';
10
+
11
+
12
+class AttributesSummary extends React.Component {
13
+  static route = {
14
+    navigationBar: {
15
+      backgroundColor: 'white',
16
+      fontSize: 20,
17
+      fontWeight: '500',
18
+      tintColor: 'rgb(0,163,158)',
19
+      title: 'Verify Your Information',
20
+    },
21
+  };
22
+
23
+  componentDidMount() {
24
+    this.props.getPetition(this.props.petitionLink);
25
+  }
26
+
27
+  handleRedirect = (event) => {
28
+    const { url } = event;
29
+    const { petition, walletId } = this.props;
30
+
31
+    this.props.addCredential(petition.attributes[0], walletId, url);
32
+
33
+    WebBrowser.dismissBrowser();
34
+    this.props.goToPetitionSummary(this.props.petitionLink);
35
+  };
36
+
37
+  openWebBrowserAsync = async () => {
38
+    const queryParam = encodeURIComponent(Constants.linkingUri);
39
+    const url = `http://atlantis-decode.s3-website-eu-west-1.amazonaws.com/#/?linkingUri=${queryParam}`;
40
+
41
+    Linking.addEventListener('url', this.handleRedirect);
42
+    await WebBrowser.openBrowserAsync(url);
43
+    Linking.removeEventListener('url', this.handleRedirect);
44
+  };
45
+
46
+  render() {
47
+    return (
48
+      <View>
49
+        <Button
50
+          name="Verify with Barcelona Council"
51
+          onPress={this.openWebBrowserAsync}
52
+          style={{
53
+            alignSelf: 'flex-end',
54
+            width: 250,
55
+          }}
56
+        />
57
+      </View>
58
+    );
59
+  }
60
+}
61
+
62
+AttributesSummary.propTypes = {
63
+  getPetition: PropTypes.func.isRequired,
64
+  petitionLink: PropTypes.string.isRequired,
65
+  petition: PropTypes.shape({
66
+    id: PropTypes.string,
67
+    title: PropTypes.string,
68
+    description: PropTypes.string,
69
+    closingDate: PropTypes.string,
70
+  }),
71
+  goToPetitionSummary: PropTypes.func.isRequired,
72
+  addCredential: PropTypes.func.isRequired,
73
+  walletId: PropTypes.string.isRequired,
74
+};
75
+
76
+AttributesSummary.defaultProps = {
77
+  petition: undefined,
78
+};
79
+
80
+const mapStateToProps = state => ({
81
+  petitionLink: state.petitionLink.petitionLink,
82
+  petition: state.petition.petition,
83
+  walletId: state.wallet.id,
84
+  attributes: state.attributes,
85
+});
86
+
87
+const mapDispatchToProps = dispatch => ({
88
+  getPetition: (petitionLink) => { dispatch(getPetition(petitionLink)); },
89
+  goToPetitionSummary: (petitionLink) => { dispatch(goToPetitionSummary(petitionLink)); },
90
+  addCredential: (attribute, walletId, url) => {
91
+    dispatch(addCredential(attribute, walletId, url, SecureStore.setItemAsync));
92
+  },
93
+});
94
+
95
+export default connect(mapStateToProps, mapDispatchToProps)(AttributesSummary);

+ 96 - 0
apps/wallet/test/components/AttributesSummary.test.js

@@ -0,0 +1,96 @@
1
+// import React from 'react';
2
+// import configureStore from 'redux-mock-store';
3
+// import thunk from 'redux-thunk';
4
+// import Enzyme, { shallow } from 'enzyme';
5
+// import Adapter from 'enzyme-adapter-react-16/build/index';
6
+// import Button from '../../application/components/Button/Button';
7
+// import AttributesSummary from '../../screens/AttributesSummary';
8
+//
9
+//
10
+// Enzyme.configure({ adapter: new Adapter() });
11
+//
12
+// const mockStore = configureStore([thunk]);
13
+//
14
+// describe('The AttributesSummary page', () => {
15
+//   const somePetitionLink = 'http://some-petition.com';
16
+//   const goToPetitionSummaryMock = jest.fn();
17
+//   const openWebBroswerAsyncMock = jest.fn();
18
+//
19
+//   // it('should show any unverified required attribute for the petition', () => {
20
+//   //
21
+//   // });
22
+//
23
+//
24
+//   // describe('when the verify button is pressed', () => {
25
+//   //   it('should go to credential issuer', () => {
26
+//   //     const initialState = {
27
+//   //       petitionLink: {
28
+//   //         petitionLink: somePetitionLink,
29
+//   //       },
30
+//   //       petition: {
31
+//   //         petition: {
32
+//   //           title: 'hello',
33
+//   //           description: 'world',
34
+//   //           closingDate: 'today',
35
+//   //           id: '1234',
36
+//   //           isEthereum: 'false',
37
+//   //         },
38
+//   //       },
39
+//   //       wallet: {
40
+//   //         id: 'something',
41
+//   //       },
42
+//   //       authorization: {},
43
+//   //     };
44
+//   //
45
+//   //     const wrapper = shallow(
46
+//   //       <AttributesSummary />,
47
+//   //       { context: { store: mockStore(initialState) } },
48
+//   //     );
49
+//   //
50
+//   //     // wrapper.dive().find(Button).first().simulate('click');
51
+//   //
52
+//   //     const spy = jest.spyOn(wrapper.instance(), 'openWebBrowserAsync');
53
+//   //     wrapper.update();
54
+//   //     wrapper.find(Button).simulate('click');
55
+//   //     expect(spy).toHaveBeenCalled();
56
+//   //   });
57
+//   // });
58
+//
59
+//   // describe('on redirect from credential issuer', () => {
60
+//   //   it('should go to petitionSummary page', () => {
61
+//   //     const initialState = {
62
+//   //       petitionLink: {
63
+//   //         petitionLink: somePetitionLink,
64
+//   //       },
65
+//   //       petition: {
66
+//   //         petition: {
67
+//   //           title: 'hello',
68
+//   //           description: 'world',
69
+//   //           closingDate: 'today',
70
+//   //           id: '1234',
71
+//   //           isEthereum: 'false',
72
+//   //         },
73
+//   //       },
74
+//   //       wallet: {
75
+//   //         id: 'something',
76
+//   //       },
77
+//   //       authorization: {},
78
+//   //     };
79
+//   //
80
+//   //     const wrapper = shallow(
81
+//   //       <AttributesSummary />,
82
+//   //       { context: { store: mockStore(initialState) } },
83
+//   //     );
84
+//   //
85
+//   //     const attributesSummaryComponent = wrapper.dive().instance();
86
+//   //     attributesSummaryComponent.props = {
87
+//   //       ...attributesSummaryComponent.props,
88
+//   //       goToPetitionSummary: goToPetitionSummaryMock,
89
+//   //     };
90
+//   //
91
+//   //     wrapper.dive().find(Button).first().simulate('click');
92
+//   //
93
+//   //     expect(goToPetitionSummaryMock).toBeCalledWith(somePetitionLink);
94
+//   //   });
95
+//   // });
96
+// });