GAID

Please enter the google analytics ID for appData file.

Gain insights into using Python and Transcrypt to build complete web applications. Delve into refactoring, adding new features, and creating cohesive frontend-backend projects with React.

tarball.tar.gz

Final_App

ReactPythonStep01

ReactPythonStep02

ReactPythonStep03

ReactPythonStep04

ReactPythonStep05

ReactPythonStep06

ReactPythonStep07

ReactPythonStep08

ReactPythonStep09

ReactPythonStep10

ReactPythonStep11

ReactPythonStep12

ReactPythonStep13

FinalWebApp

Gunicorn_run

ReactPythonStep01-copy

Python is already used in the backend of most web applications, but sadly it does not work with web browsers to drive the frontend of those applications. Transcrypt can help by creating more coherent web-based projects, using Python to write both the backend and the frontend.

This course builds on the lessons in Using the Python Transcrypt Transipler for Front-end Coding to implement a complete React and Python web-based project. In each chapter, we will refactor existing code to add new functionality, building up the application as you go. Each chapter ends with a running application that includes all of the features we added up to that specific point.

Using Python and Transcrypt to Build a Complete Web Application

# About the application

In this application, we'll look at final modifications in some of the existing Python modules. We'll learn how the application uses the customized `Link` component wrapped inside the `Typography` component, which is further wrapped inside the `FlexboxCenter` component. Next, we'll be taking a look at modifications, which include both addition and removal of some functionalities in modules after the `spaRedirect()` function is incorporated in them.

This is what the application looks like:
> **Note:** To log in, use the username `admin` and password `123`.

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

# Modifications in the `landingPageView` module

The requirement is to update all of the application views to utilize the new SPA redirect functionality.  Our application will use the `spaRedirect()` function to facilitate a view change and factor in utilizing the URL parameters to initialize the state when view components are loaded. Let’s look at the changes in the `landingPageView.py` module, located inside the `bookapp/client/src/views/landingPage/` folder.

At lines 15 and 16 for the `LandingPage` component, instead of using the `setBooksShow()` function that was previously passed in as a prop to change views, we now have the `params` and `pathname` props and the `spaRedirect()` function to control the view at line 37.

One of the keys that may be included in the `params` dictionary is “login”, which will trigger the modal `Login` view to be visible when set to a value of `show`. At line 68, this is accomplished with a `useEffect()` hook function that monitors the local variable `show_login` at line 18 and will set the `loginModal` state variable when it changes.

At line 45, in the `doLogin()` function, it checks if there is a `redir` key in the `params` dictionary if the user session gets invalidated at some point. The `fetch()` function redirects to the login form after receiving an HTTP `401` response.

At line 37, if there is a `redir` key present, after a successful login, `spaRedirect()` will be called with the URL value specified in that key.  That will take the user to the view where they were previously, before being redirected to the login form.

# Modifications in the `urlutils` module

At line 4, instead of using the Material UI `Link` component as before, we now have the wrapped version of the `Link` component imported from the `urlutils.py` module located inside the `bookapp/client/src/common/` folder that allows the application to take advantage of the SPA redirect functionality.

At line 93, for the link to the `bookList` view in `landingPageView.py` module, instead of having an `onClick` event handler,  we can now directly provide the routing URL for the `bookList` view in the `to` prop.  Our wrapped `Link` component will then take care of executing the `spaRedirect()` function using the provided URL.

In lines 98, 99, and 100, we keep the same `onClick` event handler for the login link since it is still executing a function without changing the current view.  The wrapped `Link` component has a slightly different prop signature, so it will use the `to` prop instead of the `href` prop.

# Modifications in the `bookListView` module

Next, let's look at the same treatment to the `bookListView.py` module located inside the `bookapp/client/src/views/bookList/` folder. 

At lines 13 and 35, just like in the `LandingPage` component—where we had the `setBooksShow()` function that was previously passed in as a prop to change views—we now have the `params` prop and the `spaRedirect()` function to control the view.

At line 102, to control the visibility of the modal `BookEdit` view,  we add the ID of the book record that we want to edit as a URL querystring parameter instead of setting the `bookModal` state variable directly. That leads us to the `bookModal` state variable getting updated indirectly by utilizing a `useEffect()` hook function that monitors the `book_id` local variable that holds the value of the ID `querystring` parameter if it exists.  Using this method allows us to directly open the record of a specific book using a bookmarkable URL.

At line 37, since the `book_id` variable is in scope outside of the `setEdit()` function, there is no need to pass the book ID to the function as an argument.

At line 123, for the close icon button, instead of setting the value of a state variable to get back to the `landingPage` view, we now have the `spaRedirect()` function to set the URL to the default route.  

Then, at line 114, for the add icon button, we have the `handleAdd()` function that calls `spaRedirect()` and adds the `id` query string parameter with a value of `NEW` to the `bookList` route at line 34. This will also update the `bookModal` state variable causing the view to re-render and show the modal `bookEdit` view with a new book record.

At line 134, since it is now using the URL to dictate showing the modal `bookEdit` view, there is no need to pass the `setEdit()` function to the `BooksTable` component as a prop so it can also be removed.  Similarly, the `onClose()` function for the `BookEdit` component is also not needed, so that prop can be removed as well.

# Modifications in the `bookListTable` module

Next, let's look at some modifications to edit an existing record using the SPA redirect functionality in the `bookListTable.py` module located inside the `bookapp/client/src/views/bookList/` folder. 

In lines 8 and 45, there is a prop  for the `setEdit()` function in both the `BooksTable` component and the `BookRowVu` component that has been removed.  

At line 21, the next change in this module was in the `handleEdit()` function of the `BookRowVu` component.  The call to `setEdit()` function is replaced with a call to `spaRedirect()` function instead, where at line 20, we have the `id` query string parameter added with the ID value of the book to the `bookList` route that requires some editing.

Let's look at the last module that requires some modifications, which is our `bookEditView.py` module located inside the `bookapp/client/src/views/bookList/` folder, where we will see how we can handle the closing of the modal view.

An `onClose()` function is no longer needed, which was previously passed in as a prop.  The `onClose()` function is replaced with a call to the `spaRedirect()` function, which passes the URL route for the `bookList` view without any URL query parameters.  In lines 76 and 123 (`bookEditView.py`), this change is reflected in both the `on_update_success()` function and the `onClick`  event of the `IconButton` used for closing the modal view.

# What we achieved with those changes

What we'll now see when we open up the book list or an individual book is that the URL will reflect the state of the specific view.  For example, given a specific book ID, we can now jump right to the view for that book without going through the landing page or book list view first.

# About SPA redirect functionality

While a lot of changes are required to achieve the SPA redirect functionality, it is a necessary feature for any single-page application of significant size.  But now that the framework is there, adding new views to the application becomes more compartmentalized.  Using the web browser URL for view navigation is natural for applications running in a web browser environment. Using the SPA redirect framework ultimately helps to reduce complexity in our code.

Learn how we can redirect pages with the spaRedirect() function.

Introduction

Environment Setup

Landing Page

Modal View

REST Service

Books

Menus

User Login

Lookups

User Context

Editing Lookups

Filtering Data

Editing Books

SPA Redirect

Deploying the Application

Conclusion

Redirecting Pages

About the application