Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Integration for Itinerum #4

Open
wants to merge 42 commits into
base: explore_react_integration
Choose a base branch
from
Open

React Integration for Itinerum #4

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
2690c40
Initial commit attempting to create a boolean variables and empty dat…
jruzekowicz Jul 14, 2021
0ef36c1
Updated files to reflect requested changes.
jruzekowicz Jul 15, 2021
1616bed
Commit demonstrating that the variables are now accessable.
jruzekowicz Jul 15, 2021
bd6340f
Intermediate Commit
jruzekowicz Jul 15, 2021
d48bba1
Does NOT work, but close to what we want. Still searching for the bug…
jruzekowicz Jul 16, 2021
2d6351e
Second level structure implementation with mock JSON file to start off.
jruzekowicz Jul 19, 2021
bf9c9f0
Attempt for the react->angular process. Would like to get Kyle's feed…
jruzekowicz Jul 20, 2021
c6d3eed
Demonstrating the issue with having a single setState handler. Lookin…
jruzekowicz Jul 20, 2021
8da04fb
Finalized demonstration of react to angular implementation.
jruzekowicz Jul 20, 2021
68e27ce
Unable to connect the angular with the react. What is missing here th…
jruzekowicz Jul 21, 2021
1b51ff4
Update www/js/intro.js
jruzekowicz Jul 21, 2021
2a98a4f
Intermediate commit in the angular -> react attempt.
jruzekowicz Jul 21, 2021
0cdc1da
WORKING Angular -> React.
jruzekowicz Jul 21, 2021
fda5412
Update www/components/itinerum_tutorial/Tutorial.jsx
jruzekowicz Jul 22, 2021
15538f4
Update www/js/intro.js
jruzekowicz Jul 22, 2021
bda1af8
A final commit demonstrating the angular -> react integration.
jruzekowicz Jul 22, 2021
8768e1c
First attempt at adding in the http functionality.
jruzekowicz Jul 22, 2021
373450b
Intermediate commit in the process of retrieving the JSON for the sur…
jruzekowicz Jul 22, 2021
8383a86
Code adaption from Kyle's implementation (step 1).
jruzekowicz Jul 22, 2021
0bd6f94
Intermediate commit for the http process. Need help filling in the va…
jruzekowicz Jul 22, 2021
2a41b0f
Intermediate Commit
jruzekowicz Jul 22, 2021
1b83e41
Intermediate commit with substitute data.
jruzekowicz Jul 23, 2021
a8ffdbc
Simple typo fixed within the URL link.
jruzekowicz Jul 23, 2021
2496d94
Added a new function to determine the OS. Need confirmation that this…
jruzekowicz Jul 23, 2021
c96022d
End of day commit, still working on the variables.
jruzekowicz Jul 23, 2021
19b3dc1
intermediate edts
jruzekowicz Aug 3, 2021
f4f8b1b
Merge branch 'dev' of https://github.com/jruzekowicz/e-mission-phone …
jruzekowicz Aug 3, 2021
a49867a
Intermediate committ
jruzekowicz Aug 3, 2021
16c1585
Intermediate commit
jruzekowicz Aug 3, 2021
a80850f
Debugging Process, issue with getting "stuck' in the mark consented n…
jruzekowicz Aug 4, 2021
42b0a83
Intermediate
jruzekowicz Aug 4, 2021
5bdb2b5
Intermediate commit: ISSUE: After the addition of the survey slide af…
jruzekowicz Aug 4, 2021
097e6fc
Using an async process with a wait call, we can get the uuid while av…
jruzekowicz Aug 5, 2021
7ef1a8a
Intermediate commit, figuring out how to display the pulled response.
jruzekowicz Aug 5, 2021
0e853e3
Still having issues with the syncing and showing of the response.
jruzekowicz Aug 5, 2021
1d4bde4
Working demonstration of how the survey material can be displayed dir…
jruzekowicz Aug 6, 2021
90ec37e
Intermediate commit, reverting the changes within startprefs.js back …
jruzekowicz Aug 6, 2021
f332f04
Adding in an export function which can thus be called before we git f…
jruzekowicz Aug 6, 2021
e658d59
Changes name from export_survey to save_survey for clarity.
jruzekowicz Aug 9, 2021
122066a
Firest commit for the saving of survey responses through a newly crea…
jruzekowicz Aug 9, 2021
73c73a3
Syntax fixes. Now working to do testing on the implementation.
jruzekowicz Aug 9, 2021
2327ade
Final commit with changes demonstrting the exporting of survey respon…
jruzekowicz Aug 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion www/components/itinerum_tutorial/Tutorial.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
/*
* src/app/help-panel/Tutorial.jsx
*/

class TutorialComponent extends React.Component {
propTypes: {
test: React.PropTypes.string,
isValid: React.PropTypes.bool,
schema: React.PropTypes.object,
result: React.PropTypes.object
}
render() {
return(
<div className="content-wrapper">
<div>
This is the test -> {this.props.test}
</div>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hopefully something like this works.

Suggested change
<div>
This is the test -> {this.props.test}
</div>
<div>
This is the first name -> {this.props.schema.firstname}
This is the last name -> {this.props.schema.lastname}
</div>

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! This works perfectly. (Surprised it is so simple.)

<div className="row">
{/* bootstrap grid as margin */}
<div className="col-xs-2" />
Expand Down
1 change: 1 addition & 0 deletions www/js/intro.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ angular.module('emission.intro', ['emission.splash.startprefs',
.controller('IntroCtrl', function($scope, $state, $window, $ionicSlideBoxDelegate,
$ionicPopup, $ionicHistory, ionicToast, $timeout, CommHelper, StartPrefs, UpdateCheck, $translate, i18nUtils) {

$scope.surveyState = { test: 'test', isValid: true, schema: {}, result: {} };
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
$scope.surveyState = { test: 'test', isValid: true, schema: {}, result: {} };
$scope.surveyState = { test: 'test', isValid: true, schema: {'firstname': 'Jenna', 'lastname': "Ruzekowicz"}, result: {} };

$scope.platform = $window.device.platform;
$scope.osver = $window.device.version.split(".")[0];
if($scope.platform.toLowerCase() == "android") {
Expand Down
2 changes: 1 addition & 1 deletion www/templates/intro/survey.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<ion-content class="has-footer">
<tutorial/>
<tutorial test="surveyState.test" isValid="surveyState.isValid" schema="surveyState.schema" result="surveyState.result"/>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure why you are passing the individual fields. can you just pass in the surveyState object directly?
Probably best to try that first, since we want to pass in the schema object with sub-fields next.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am attempting to pass the survey state via:
surveyState="surveyState"
but I am hitting a hurdle with then accessing the variables within the $scope.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://stackoverflow.com/questions/49081549/passing-object-as-props-to-jsx

Thought something like this would work.. alas I can't seem to get it right.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what do you mean by accessing variables within the $scope?
Also, you are already passing in an object (surveyState.schema) and it looked like that worked?
Does it mean that top level objects directly under $scope don't work?

Copy link
Author

@jruzekowicz jruzekowicz Jul 16, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Within the .jsx file, we do the prop type checking. I believe one of the issues here is that we originally passed in the name, ie isValid="isValid". Now, we are only passing in the $scope variable surveyState. Code from .jsx:

propTypes: {
        isValid: React.PropTypes.bool,
        schema: React.PropTypes.object,
        result: React.PropTypes.object
    }

My initial instinct was to attempt something like surveyState.result: React.PropTypes.object, but this did not work.

A few ways I've tried to pass in the surveyState:
<tutorial {surveyState} />
<tutorial {...surveyState} />
<tutorial surveyState="surevyState" />

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

well, you would need to change the propTypes to accept a surveyState object as well

Also, check the spelling on <tutorial surveyState="surevyState" />

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we changed the propTypes to accept a surveyState, would that be the only check?
ie. would we have something like:

propTypes : {
    surveyState: React.propTypes.object 
}

I am not seeing how the propTypes would be changed to accept a surveyState object exactly. We would still want to do all the confirmation that isValid is a boolean etc.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah that would be the only check. Note that we already don't do any type checking within either the schema or the results, so we only lose type information for isValid with this approach.

Let's first see if it works, and then we can make the design decision.

Copy link
Author

@jruzekowicz jruzekowicz Jul 16, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, here is a commit that does not quite work yet, but seems to be what we want. Still trying to figure out why this would not work. d48bba1

Question: Why do we need the React.PropTypes. ... as opposed to just PropTypes. ...?

Maybe they need to be key values pairs within the scope now? As in 'isValid': false instead of isValid: false? But not sure why this would work on the individual level but not when we attempt to pass in via the entire scope variable?

</ion-content>
<ion-footer-bar class="no-bgColor" id="intro-footer">
<button class="button button-block button-outline button-positive" ng-click="next()">
Expand Down