TGIMBA .NET Core Upgrade – Main Menu with partial functionality – Vanilla JS, JQuery JS, Angular 6 Type Script and React/Redux JS w/Selenium Test

Git  Code Commit (all commits between last post and this commit (link))

Git  Selenium Code Commit

Today I add the next piece of the The Globe In My BucketList Application (TGIMBA) component chain – the main menu.

In the previous .NET 4.6.x version, the functionality of the main menu allowed a user to add a bucket list item, sort the existing list, run an existing algorithm, log out and cancel the menu to return to the main display. I plan to keep this functionality.

Vanilla JavaScript
This implementation was pretty simple.  I added the files – MenuController.js, MainController.js, and Menu/Index.html.

1

  • Menu/Index.html – This contains the markup for the 5 buttons and their handler method calls.

1

  • MenuController.js – This file contains the handler code (only cancel and logout are functional as of now).

1

  • MainController.js – I added this to display the main panel.

1

Because Vanilla JavaScript is the main focus of the .NET Core TGIMBA, I had already added the constants and session modules.  With this post, I am having to add session/constants to the Angular 6 Type Script and React Redux JS clients.

JQuery
The JQuery implementation update was also pretty light this time.  If you remember, the previous TGIMBA version was written all in JQuery and I wanted to focus on Vanilla JavaScript this time around.  So, this JQuery implementation only consists of things that are different from Vanilla JavaScript – Application Programmatic Interface (API) and Document Object Model (DOM) related code.  I made ServerCalls and object and tweaked a some minor things.

Angular 6 Type Script
To start, I added the new menu files.1

menu.component.html is very similar to the Vanilla JavaScript Hyper Text Markup Language (HTML) file, menu.component.cs is empty and menu.component.ts has an event for each button (cancel and logout function as of now).

I had to add a button to main.component.html to launch the menu (main.component.ts only has an event with a redirect to launch the menu).

1

Then, I had to add session.  To accomplish this here, I added two files under common – constants.component.ts and session.component.ts.  1

NOTE: The files under emptyHtml are empty templates.  The compiler kept complaining without them.  I had just assumed I could add a Type Script file (did it all the time in my Node JS API projects), but apparently not here.  I will remove them later if I discover a way.

  • constants.component.ts – This file is pretty simple.  Just the key for the token.

1

  • session.component.ts – This class is pretty close to the Vanilla/JQuery implementation.  The only real different is I am using a Map here (key/value) to hold the session values.

1

I added the IsLoggedIn() method to login.component.ts and use it elsewhere to determine if the login screen or main panel should be displayed.

1

React Redux JS
The React Redux JS implementation turns out to be the most interesting of the 4 this time. More specifically, I am starting to understand more how fundamentally different React is from how I have built things in the past (at least as far a the web).

For example, in my windows form application days, it was quite normal to declare a new button and add it to the form. This is also true in with my web adventures. More specifically, all of the forms in this 4 client adventure involve “<input type=’button'” additions. Just like adding a button object to a windows form, I have been adding an ‘input’ button tagto my web pages. With react, it appears you have a deeper level of control. Instead of using a windows button object or an HTML5 “<input type=’button'” object, you can create your buttons and then use them. I am not sure if this is a good thing or a bad thing.

With greater control comes greater responsibility. For example, another analogy is C/C++ vs Java/C# type ‘managed’ languages. I have spent most of my career with the latter and have been quite content. I personally don’t see the need to manage my own memory. Furthermore, I have also been quite happy with the ‘provided’ windows and HTML5 tags. I have not (so far) need to go ‘deeper’. I am sure there are examples where this may be needed, but I have not personally needed it (yet). I am going to follow this standard for the React Redux TGIMBA client because that is what this technology does, but I wanted to point out how different this approach is compared to what I have followed to date.

So, with this new approach, I am going to start with a button object as it can be added to my existing registration/login components as well as the menu component I am adding in this post. A really good example I found is reference #7 (I found it listed among other examples on reference #6).

NOTE:

  • This example does not appear to be part of the Microsoft React JS or React React JS template(s).
  • I have a lot of ‘remnant’ classes from the Microsoft template I used to create this client. I am ‘dumping’ Button.js and any other ‘smaller’ components in the components directory for now. I will decide where to move them later (i.e. a specific directory for non-page components) as well as remove the non-used template classes.
  • Making comments is a bit different in React. To make a comment, use this syntax (from reference #8) -> {/* An awesome comment */}

If you notice, the author creates a Button.js and then uses it in a ButtonPanel.js. I am also using this approach. However, I use the author’s Button.js object example, but add it to MainMenu.js. I also replace my previously “<input type=’button'” buttons in the registration/login components with references to Button.js.

First thing I noticed is in the example (reference #7), the button was used multiple times. But it’s click action mapped to one handler that processed each button by name. In a calculator, this probably makes sense. But, for TGIMBA, this will not work. I believe the Redux part of this separates logic from the presentation (among other things). So, I plugged in my Button.js into my Login.js component and it rendered. I had added a Button.js store with its own handler which fired with each button click.

I then had an issue where I got this error:
./src/components/Login.js
196:8-14 ‘./Button’ does not contain an export named ‘Button’.

After a bit of digging, I found the answer in reference #10.  More specifically, I needed to change ‘import { Button } from ‘./Button’;’ to ‘import Button from ‘./Button’;’ in Login.js.

After fixing the import, I returned to reference #9 and reviewed how they got ‘Button.js’ to take the title and handler of the JavaScript file it was being used in. The secret it seems is to use the onPress event in the JavaScript file to pass the handler and the title is passed in as a property. In Login.js, ‘processLogin’ is set in the onPress handler and ‘Login’ is the value. Then, inside Button.js, the onPress handler (you can pass functions in JavaScript) is tied to the onClick and the title is the children value.

  • Login.js

1

  • Button.js

2

At this point, Button.js does not seem to need its store (i.e. store/Button.js). I am going to leave it for now, but if it is not used, I will eventually remove it.  I then replaced the buttons in Registration.js with Button.js as well as created MainMenu.js under the component and store directories.

To round out the React JS implementation, I had to add the session state to store whether the user was logged in or not.  Just like the other implementations, its consists of three components – Utilities.js, Constants.js and Session.js.

1

More specifically:

  • Utilities.js – This module is different than the other implementations.  I have chosen to place the IsLoggedIn() function here.  I am not completely sure if this should be in the component/Login.js or store/Login.js.  If is my understanding that component/Login.js is presentation only.  However, store/Login.js is meant to handle state.  So, you could argue it should go into the store/Login.js.  But as I am still kinda new to React Redux JS, I am going to leave it in the Utilities.js until I get a better understanding of where it should go (but I am betting it will ultimately be in store/Login.js).

1

  • Constants.js – Constants.js is pretty straight forward.  It just holds the token key name.

1

  • Session.js – This module is pretty straight forward like Constants.js.  The only thing that is really different than the Vanilla/JQuery JavaScript implementation is that I am using a Map (key/value) object like the Angular 6 Type Script client.  I chose to do this because I don’t know exactly how to access the HTML 5 session feature within React.

1

This session approach (all implementations) only allows one user to really be logged in at a time.  I will have to update this for multiple users down the road, but it is sufficient for now.

You may also notice that I am using the module.exports.X approach to give access to these modules.  I haven’t really used this in a client before, but I did in a lot of my Node JS API’s.  For the Vanilla/JQuery implementation, you really only have to import the X.js file in the page and then it is accessible anywhere.  I chose to use the module.exports.X method here because it was the first way that worked 🙂

To access one of these modules in the subscribing module, I am using the Object.Create(args) method.  For example, here is the GetHost() method I added being called in store/Main.js

1

In the next blog post, I will be adding a bucket list item and displaying it.

Stay tuned!

References

  1. https://stackoverflow.com/questions/18751766/is-there-a-way-to-use-typescript-collections-hashtable-in-my-code
  2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Keyed_collections
  3. https://stackoverflow.com/questions/22991968/public-static-const-in-typescript
  4. https://stackoverflow.com/questions/39832855/typescript-and-converting-object-to-string
  5. https://stackoverflow.com/questions/41861092/static-methods-and-angular-2-services-in-javascript-es6
  6. https://reactjs.org/community/examples.html
  7. https://github.com/ahfarmer/calculator
  8. https://wesbos.com/react-jsx-comments/
  9. https://blog.logrocket.com/a-guide-to-react-onclick-event-handlers-d411943b14dd
  10. https://stackoverflow.com/questions/44172727/home-does-not-contain-an-export-named-home
  11. https://stackoverflow.com/questions/14300411/nodejs-module-exports-prototype-has-no-method
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s