Standardized project code formatting

- Added Prettier code formatter
- Added explicit path converters to urls as type hints
- Made all urls terminate with / to avoid "page not found" when slash used in url bar
- Changed camelCased css classnames to standard '-' separated strings

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+    "trailingComma": "none",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": false,
+    "bracketSpacing": false,
+    "arrowParens": "always"
+}

.vscode/settings.json

@@ -1,6 +1,13 @@
 {
-    "editor.defaultFormatter": "ms-python.autopep8",
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
     "pylint.args": [
         "--disable=E0015"
-    ],
+    ],    
+    "[python]": {
+        "editor.defaultFormatter": "ms-python.autopep8",
+    },
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
+    }
 }

backend/config/urls.py

@@ -27,7 +27,7 @@
     # View Pages
     ################################################################################
     path('', views.index),
-    path('competitiveness', views.competitiveness),
+    path('competitiveness/', views.competitiveness),
     path('campaign-finance/top-10-donors-piechart/', views.PieChart),
     path('campaign-finance/top-10-donors-barchart/', views.BarChart),
     path('campaign-finance/donor-party-sankey/', views.FinanceSankey),
@@ -39,26 +39,25 @@
     path('api/1951-1962elections/', api_views.all_elections),
     path('api/1962-2019seats/', api_views.all_seats),
     path('api/ls-elections/', api_views.all_ls_elections),
-    path('api/ls-elections/<year>', api_views.get_ls_election_year),
-    path('api/ls-elections/<year>/<state>/<constituency_no>',
+    path('api/ls-elections/<int:year>/', api_views.get_ls_election_year),
+    path('api/ls-elections/<int:year>/<str:state>/<int:constituency_no>/',
          api_views.get_specific_ls_election),
     path("api/SDE_DATA_IN_F7DSTRBND_1991/",
          api_views.get_SDE_DATA_IN_F7DSTRBND_1991
     ),
     path("api/all-campaign-finance/", api_views.campaign_finance),
-    path(
-        "api/campaign-finance/party-donor-pair/<party_name>/<donor_name>",
-        api_views.campaign_finance
+    path("api/campaign-finance/party-donor-pair/<str:party_name>/<str:donor_name>/",
+         api_views.campaign_finance
     ),
-    path("api/campaign-finance/all-donors/<party_name>",
+    path("api/campaign-finance/all-donors/<str:party_name>/",
          api_views.campaign_finance_party_subset),
-    path("api/campaign-finance/all-parties/<donor_name>",
+    path("api/campaign-finance/all-parties/<str:donor_name>/",
          api_views.campaign_finance_donor_subset),
     path("api/India_PC_2019_simplified/",
          api_views.get_India_PC_2019_simplified),
     path("api/India_PC_2019/",
          api_views.get_India_PC_2019),
-    path("api/competitiveness_colors/<election_year>",
+    path("api/competitiveness_colors/<int:election_year>/",
          api_views.get_competitiveness_data),
 
 ]

frontend/common.js

@@ -2,8 +2,6 @@
  * Common.js -- miscellaneous routines useful throughout the system
  */
 
-
-
 /**
  * Get the value of a cookie, given its name
  * Adapted from https://docs.djangoproject.com/en/2.2/ref/csrf/#ajax
@@ -16,11 +14,11 @@ export function getCookie(name) {
         for (const rawCookie of cookies) {
             const cookie = rawCookie.trim();
             // Does this cookie string begin with the name we want?
-            if (cookie.substring(0, name.length + 1) === (name + "=")) {
+            if (cookie.substring(0, name.length + 1) === name + "=") {
                 cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                 break;
             }
         }
     }
     return cookieValue;
-}
+}

frontend/components/BarChart.js

@@ -1,11 +1,9 @@
 import React, {useState, useEffect} from "react";
 import Chart from "chart.js/auto";
 
-
 const BarChart = () => {
     const [data, setData] = useState([]);
 
-
     useEffect(() => {
         async function fetchData() {
             try {
@@ -28,7 +26,7 @@ const BarChart = () => {
 
     const renderChart = () => {
         const donors = {};
-        data.forEach(item => {
+        data.forEach((item) => {
             let amountInCrores = item.amount / 10000000; // Convert rupees to crores
             if (!donors[item.donor_name]) {
                 donors[item.donor_name] = amountInCrores;
@@ -67,10 +65,10 @@ const BarChart = () => {
                         title: {
                             display: true,
                             text: "Total Donation Amount (crores)",
-                            font: {size: 25}// Set the font size for the y-axis title
+                            font: {size: 25} // Set the font size for the y-axis title
                         },
                         ticks: {
-                            callback: function(value) {
+                            callback: function (value) {
                                 return "₹" + value.toLocaleString(); // Format as currency
                             },
                             font: {size: 16}
@@ -84,7 +82,6 @@ const BarChart = () => {
                         },
                         ticks: {
                             font: {size: 16}
-
                         }
                     }
                 }
@@ -99,4 +96,4 @@ const BarChart = () => {
         </div>
     );
 };
-export default BarChart;
+export default BarChart;