Skip to content

Code Flows

griffincj edited this page Dec 7, 2021 · 4 revisions

There are several "flows" through the code that are particularly common and will likely be relevant in future code changes.

The most common flow is: SomeReact.jsx -> api.js -> urls.py -> some_function() in views.py

Search Query

  • Resesearchers.jsx provides the front-end code for the search page. Like all React pages, the front-end components are rendered in the render() method. The handleSearch() method takes the string from the textbox input and passes it to api.js in a promise (.then())
  • api.js contains endpoints which point to URLs in urls.py. Essentially, this file acts as the bridge between React and Python (or front-end and back-end). For search querying, we refer to the getResearcherSearchResults endpoint, which routes to "/researcher" in urls.py.
  • urls.py is a standard file used by web frameworks like Django to define the routing of URLs within the web application. In this case, the "/researchers" URL is referred to, which retrieves the ResearcherSearchList class from views.py using the query that was passed from api.js
  • views.py contains the main python function definitions for the application, including for ResearcherSearchList. ResearchSearchList returns a queryset all the way back to Researchers.jsx, from which it is displayed.

FAQ Section

  • Citizens.jsx contains the front-end code and api.js references to get the appropriate database objects.

Note: Much of the Citizens.jsx code should be deprecated, as it refers to database columns (i.e. Location ID) that have no use for this specific application.

  • api.js is called for both Api.getLocationQuestions(0) and Api.getLocationStages(0). These refer to urls.py, specifically "/location/0/questions" and "location/0/stages" respectively
  • urls.py refers to LocationQuestionList and LocationStageList for Locations and Stages respectively
  • views.py contains LocationQuestionList, which gets a queryset of questions from the database (queries Question.objects.all()). LocationStageList returns a JSON response containing the hard-coded "stages of a police complaint", which serve as rough categories for the questions.
Clone this wiki locally