Refactor all JS API calls nabeelio#360 (nabeelio#375)

* Refactor all JS API calls nabeelio#360

* Remove unused imports

* Lint JS

* Fix doubled api key

* Formatting

* Added extra logging to distance lookup

* Remove the .editorconfig file in distrib

* shell check fixes

* Remove the .editorconfig file in distrib

.editorconfig

@@ -0,0 +1,18 @@
+#
+root = true
+
+[*.js]
+indent_style = space
+indent_size = 2
+
+[*.php]
+indent_style = space
+indent_size = 4
+
+[Makefile]
+indent_style = tab
+
+# Matches the exact files either package.json or .travis.yml
+[{package.json, .travis.yml}]
+indent_style = space
+indent_size = 2

.eslintrc

@@ -2,13 +2,16 @@
   "extends": "airbnb",
   "env": {
     "es6": true,
-    "mocha": true
+    "browser": true
   },
   "parserOptions": {
     "ecmaVersion": 8
   },
   "rules": {
     "camelcase": 0,
+    "no-console": 0,
+    "func-names": 0,
+    "prefer-object-spread": 0,
     "no-param-reassign": [
       2,
       {

.travis/deploy_script.sh

@@ -14,7 +14,7 @@ if [ "$TRAVIS" = "true" ]; then
             exit 0;
         fi;
 
-        BASE_VERSION=`php artisan phpvms:version --base-only`
+        BASE_VERSION=$(php artisan phpvms:version --base-only)
         PKG_NAME=${BASE_VERSION}-${TRAVIS_BRANCH}
     fi
 
@@ -23,7 +23,7 @@ if [ "$TRAVIS" = "true" ]; then
     echo "Writing $TAR_NAME"
 
     php artisan phpvms:version --write > VERSION
-    VERSION=`cat VERSION`
+    VERSION=$(cat VERSION)
     echo "Version: $VERSION"
 
     echo "Cleaning files"
@@ -59,6 +59,7 @@ if [ "$TRAVIS" = "true" ]; then
         tests
         _ide_helper.php
         .dpl
+        .editorconfig
         .eslintignore
         .eslintrc
         .php_cs

app/Http/Controllers/Admin/PirepController.php

@@ -181,6 +181,7 @@ public function fares(Request $request)
         Log::info('aircraft', $aircraft->toArray());
 
         return view('admin.pireps.fares', [
+            'pirep'     => null,
             'aircraft'  => $aircraft,
             'read_only' => false,
         ]);

app/Http/Controllers/Api/AcarsController.php

@@ -73,8 +73,8 @@ public function index(Request $request)
         $pireps = $this->acarsRepo->getPositions(setting('acars.live_time'));
         $positions = $this->geoSvc->getFeatureForLiveFlights($pireps);
 
-        return response(json_encode($positions), 200, [
-            'Content-type' => 'application/json',
+        return response()->json([
+            'data' => $positions,
         ]);
     }
 
@@ -84,15 +84,15 @@ public function index(Request $request)
      * @param         $pirep_id
      * @param Request $request
      *
-     * @return \Illuminate\Contracts\Routing\ResponseFactory
+     * @return \Illuminate\Http\JsonResponse
      */
     public function acars_geojson($pirep_id, Request $request)
     {
         $pirep = Pirep::find($pirep_id);
         $geodata = $this->geoSvc->getFeatureFromAcars($pirep);
 
-        return response(\json_encode($geodata), 200, [
-            'Content-Type' => 'application/json',
+        return response()->json([
+            'data' => $geodata,
         ]);
     }
 

app/Http/Controllers/Api/PirepController.php

@@ -505,6 +505,7 @@ public function finances_recalculate($id, Request $request)
     public function route_get($id, Request $request)
     {
         $pirep = Pirep::find($id);
+
         return AcarsRouteResource::collection(Acars::where([
             'pirep_id' => $id,
             'type'     => AcarsType::ROUTE,

app/Http/Resources/PirepFieldCollection.php

@@ -4,9 +4,6 @@
 
 use Illuminate\Http\Resources\Json\ResourceCollection;
 
-/**
- * Class PirepFieldCollection
- */
 class PirepFieldCollection extends ResourceCollection
 {
     public function toArray($request)

package.json

@@ -47,6 +47,12 @@
   },
   "devDependencies": {
     "copy-webpack-plugin": "^4.6.0",
+    "eslint": "^6.2.2",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-airbnb-base": "^14.0.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.14.3",
     "tailwindcss": "^0.5.3",
     "webpack-bundle-analyzer": "^3.3",
     "webpack-dev-server": "^3.1.11"

public/mix-manifest.json

@@ -1,9 +1,9 @@
 {
-    "/assets/frontend/js/app.js": "/assets/frontend/js/app.js?id=4ef5a26ff476bb0a9fcf",
+    "/assets/frontend/js/app.js": "/assets/frontend/js/app.js?id=96bf382a8107b3fa5495",
     "/assets/frontend/css/now-ui-kit.css": "/assets/frontend/css/now-ui-kit.css?id=c4987da93365a82d32b6",
     "/assets/admin/css/vendor.min.css": "/assets/admin/css/vendor.min.css?id=da87041e81048759bd41",
-    "/assets/admin/js/app.js": "/assets/admin/js/app.js?id=918b9ff17affe36bab4c",
-    "/assets/installer/js/app.js": "/assets/installer/js/app.js?id=964075bbd7379552bc05",
+    "/assets/admin/js/app.js": "/assets/admin/js/app.js?id=09af8d2b342688a72153",
+    "/assets/installer/js/app.js": "/assets/installer/js/app.js?id=db625369782c7597e139",
     "/assets/fonts/glyphicons-halflings-regular.woff2": "/assets/fonts/glyphicons-halflings-regular.woff2?id=349344e92fb16221dd56",
     "/assets/admin/fonts/glyphicons-halflings-regular.woff2": "/assets/admin/fonts/glyphicons-halflings-regular.woff2?id=349344e92fb16221dd56",
     "/assets/admin/img/clear.png": "/assets/admin/img/clear.png?id=63b3af84650a0145d61a",

resources/js/admin/airport_lookup.js

@@ -1,17 +1,18 @@
-'use strict';
+
+import request from '../request';
 
 /**
  * Lookup an airport from the server
  *
  * @param {String} icao
  */
 export default async (icao) => {
-    let params = {
-        method: 'GET',
-        url: '/api/airports/' + icao + '/lookup',
-    };
+  const params = {
+    method: 'GET',
+    url: `/api/airports/${icao}/lookup`,
+  };
 
-    const response = await axios(params);
-    console.log('lookup raw response: ', response);
-    return response.data;
+  const response = await request(params);
+  console.log('lookup raw response: ', response);
+  return response.data;
 };

resources/js/admin/app.js

@@ -3,10 +3,10 @@
  */
 
 
-require('./../bootstrap');
+import airport_lookup from './airport_lookup';
+import calculate_distance from './calculate_distance';
 
-import airport_lookup from "./airport_lookup";
-import calculate_distance from "./calculate_distance";
+require('./../bootstrap');
 
 window.phpvms.airport_lookup = airport_lookup;
 window.phpvms.calculate_distance = calculate_distance;

resources/js/admin/calculate_distance.js

@@ -1,16 +1,19 @@
+
+import request from '../request';
+
 /**
  * Lookup an airport from the server
  *
  * @param {String} fromICAO
  * @param {String} toICAO
  */
 export default async (fromICAO, toICAO) => {
-    let params = {
-        method: 'GET',
-        url: '/api/airports/' + fromICAO + '/distance/' + toICAO,
-    };
+  const params = {
+    method: 'GET',
+    url: `/api/airports/${fromICAO}/distance/${toICAO}`,
+  };
 
-    const response = await axios(params);
-    console.log('distance raw response: ', response);
-    return response.data;
+  const response = await request(params);
+  console.log('distance raw response: ', response);
+  return response.data;
 };

resources/js/bootstrap.js

@@ -2,49 +2,19 @@
  * Bootstrap any Javascript libraries required
  */
 
+import Storage from './storage';
+import config from './config';
+import request from './request';
 
 window.axios = require('axios');
 
-import Storage from "./storage";
-
 /**
  * Container for phpVMS specific functions
  */
 window.phpvms = {
-  config: {},
+  config,
+  request,
   Storage,
 };
 
-/**
- * Configure Axios with both the csrf token and the API key
- */
-
-const base_url = document.head.querySelector('meta[name="base-url"]');
-if(base_url) {
-  console.log(`baseURL=${base_url.content}`);
-  window.phpvms.config.base_url = base_url.content;
-  window.axios.default.baseURL = base_url.content;
-}
-
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
-const token = document.head.querySelector('meta[name="csrf-token"]');
-
-if (token) {
-  window.phpvms.config.csrf_token = token.content;
-  window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content
-} else {
-  console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token')
-}
-
-const api_key = document.head.querySelector('meta[name="api-key"]');
-if (api_key) {
-  window.axios.defaults.headers.common['x-api-key'] = api_key.content;
-  window.phpvms.config.user_api_key = api_key.content;
-  window.PHPVMS_USER_API_KEY = api_key.content
-} else {
-  window.phpvms.config.user_api_key = false;
-  window.PHPVMS_USER_API_KEY = false;
-  console.error('API Key not found!')
-}
-
 require('./common');

resources/js/common.js

@@ -1,6 +1,3 @@
-/**
- *
- */
 
 const rivets = require('rivets');
 
@@ -11,18 +8,18 @@ const rivets = require('rivets');
  * @returns {*}
  */
 rivets.formatters.prepend = function (value, prepend) {
-    return prepend + value
+  return prepend + value;
 };
 
 /**
  * Format minutes into HHh MMm
  * @param value
  * @returns {string}
  */
-rivets.formatters.time_hm = function(value) {
-    const hours = Math.floor(value / 60);
-    const mins = value % 60;
-    return hours + 'h ' + mins + 'm';
+rivets.formatters.time_hm = function (value) {
+  const hours = Math.floor(value / 60);
+  const mins = value % 60;
+  return `${hours}h ${mins}m`;
 };
 
 /**
@@ -31,26 +28,20 @@ rivets.formatters.time_hm = function(value) {
  * @param len
  * @returns {boolean}
  */
-rivets.formatters.gt = (value, len) => {
-    return value.length > len;
-};
+rivets.formatters.gt = (value, len) => value.length > len;
 
 /**
  *
  * @param value
  * @param len
  * @returns {boolean}
  */
-rivets.formatters.lt = (value, len) => {
-    return value.length < len;
-};
+rivets.formatters.lt = (value, len) => value.length < len;
 
 /**
  *
  * @param value
  * @param len
  * @returns {boolean}
  */
-rivets.formatters.eq = (value, len) => {
-    return value.length > len;
-};
+rivets.formatters.eq = (value, len) => value.length > len;

resources/js/config.js

@@ -0,0 +1,10 @@
+
+const base_url = document.head.querySelector('meta[name="base-url"]');
+const token = document.head.querySelector('meta[name="csrf-token"]');
+const api_key = document.head.querySelector('meta[name="api-key"]');
+
+export default {
+  api_key: api_key.content || '',
+  base_url: base_url.content || '',
+  csrf_token: token.content || '',
+};

resources/js/frontend/app.js

@@ -1,11 +1,12 @@
 
+// Import the bids functionality
+import { addBid, removeBid } from './bids';
+
 require('./../bootstrap');
 
-// Import the bids functionality
-import {addBid, removeBid} from './bids';
 window.phpvms.bids = {
-    addBid,
-    removeBid,
+  addBid,
+  removeBid,
 };
 
 // Import the mapping function