Cleanup socketio stuff for typescript

Author: DaneEveritt

package.json

@@ -20,7 +20,9 @@
         "@babel/plugin-transform-async-to-generator": "^7.0.0-beta.49",
         "@babel/plugin-transform-runtime": "^7.0.0-beta.49",
         "@babel/preset-env": "^7.0.0-beta.49",
+        "@types/lodash": "^4.14.119",
         "@types/node": "^10.12.15",
+        "@types/socket.io-client": "^1.4.32",
         "@types/webpack-env": "^1.13.6",
         "autoprefixer": "^8.2.0",
         "axios": "^0.18.0",
@@ -33,7 +35,6 @@
         "babel-plugin-transform-runtime": "^6.23.0",
         "babel-plugin-transform-strict-mode": "^6.18.0",
         "babel-register": "^6.26.0",
-        "camelcase": "^5.0.0",
         "clean-webpack-plugin": "^0.1.19",
         "css-loader": "^0.28.11",
         "eslint": "^5.6.0",

resources/assets/scripts/components/server/Server.vue

@@ -69,7 +69,7 @@
     import ProgressBar from './components/ProgressBar';
     import { mapState } from 'vuex';
     import io from 'socket.io-client';
-    import { Socketio } from './../../mixins/socketio';
+    import { Socketio } from '../../mixins/socketio/index';
 
     import PowerButtons from './components/PowerButtons';
     import Flash from '../Flash';

resources/assets/scripts/components/server/components/PowerButtons.vue

@@ -24,7 +24,7 @@
 
 <script>
     import Status from '../../../helpers/statuses';
-    import { Socketio } from './../../../mixins/socketio';
+    import { Socketio } from '../../../mixins/socketio/index';
     import { mapState } from 'vuex';
 
     export default {

resources/assets/scripts/components/server/components/filemanager/FileManagerFileRow.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-    import * as Helpers from './../../../../helpers/index';
+    import * as Helpers from '../../../../helpers/index';
     import { FileTextIcon, Link2Icon } from 'vue-feather-icons';
     import FileManagerContextMenu from './FileManagerContextMenu';
 

resources/assets/scripts/components/server/components/filemanager/FileManagerFolderRow.vue

@@ -16,7 +16,7 @@
 
 <script>
     import { FolderIcon } from 'vue-feather-icons';
-    import { formatDate } from './../../../../helpers/index';
+    import { formatDate } from '../../../../helpers/index';
 
     export default {
         name: 'file-manager-folder-row',

resources/assets/scripts/components/server/subpages/Console.vue

@@ -28,7 +28,7 @@
     import { Terminal } from 'xterm';
     import * as TerminalFit from 'xterm/lib/addons/fit/fit';
     import {mapState} from 'vuex';
-    import {Socketio} from './../../../mixins/socketio';
+    import {Socketio} from '../../../mixins/socketio/index';
 
     Terminal.applyAddon(TerminalFit);
 

resources/assets/scripts/helpers/axios.js resources/assets/scripts/helpers/axios.tsresources/assets/scripts/helpers/axios.js renamed to resources/assets/scripts/helpers/axios.ts

@@ -1,15 +1,18 @@
+import axios, {AxiosResponse} from 'axios';
+
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
-
-let axios = require('axios');
 axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 axios.defaults.headers.common['Accept'] = 'application/json';
 
+// Attach the response data to phpdebugbar so that we can see everything happening.
+// @ts-ignore
 if (typeof phpdebugbar !== 'undefined') {
-    axios.interceptors.response.use(function (response) {
+    axios.interceptors.response.use(function (response: AxiosResponse) {
+        // @ts-ignore
         phpdebugbar.ajaxHandler.handle(response.request);
 
         return response;

resources/assets/scripts/helpers/index.js resources/assets/scripts/helpers/index.tsresources/assets/scripts/helpers/index.js renamed to resources/assets/scripts/helpers/index.ts

@@ -1,19 +1,16 @@
-import format from 'date-fns/format';
+import { format } from 'date-fns';
 
 /**
  * Return the human readable filesize for a given number of bytes. This
  * uses 1024 as the base, so the response is denoted accordingly.
- *
- * @param {Number} bytes
- * @return {String}
  */
-export function readableSize (bytes) {
+export function readableSize (bytes: number): string {
     if (Math.abs(bytes) < 1024) {
         return `${bytes} Bytes`;
     }
 
-    let u = -1;
-    const units = ['KiB', 'MiB', 'GiB', 'TiB'];
+    let u: number = -1;
+    const units: Array<string> = ['KiB', 'MiB', 'GiB', 'TiB'];
 
     do {
         bytes /= 1024;
@@ -25,10 +22,7 @@ export function readableSize (bytes) {
 
 /**
  * Format the given date as a human readable string.
- *
- * @param {String} date
- * @return {String}
  */
-export function formatDate (date) {
+export function formatDate (date: string): string {
     return format(date, 'MMM D, YYYY [at] HH:MM');
 }

resources/assets/scripts/mixins/flash.js resources/assets/scripts/mixins/flash.tsresources/assets/scripts/mixins/flash.js renamed to resources/assets/scripts/mixins/flash.ts

@@ -2,60 +2,50 @@ export const flash = {
     methods: {
         /**
          * Flash a message to the event stream in the browser.
-         *
-         * @param {string} message
-         * @param {string} title
-         * @param {string} severity
          */
-        flash: function (message, title, severity = 'info') {
+        flash: function (message: string, title: string, severity: string = 'info'): void {
             severity = severity || 'info';
             if (['danger', 'fatal', 'error'].includes(severity)) {
                 severity = 'error';
             }
 
+            // @ts-ignore
             window.events.$emit('flash', { message, title, severity });
         },
 
         /**
          * Clear all of the flash messages from the screen.
          */
-        clearFlashes: function () {
+        clearFlashes: function (): void {
+            // @ts-ignore
             window.events.$emit('clear-flashes');
         },
 
         /**
          * Helper function to flash a normal success message to the user.
-         *
-         * @param {string} message
          */
-        success: function (message) {
+        success: function (message: string): void {
             this.flash(message, 'Success', 'success');
         },
 
         /**
          * Helper function to flash a normal info message to the user.
-         *
-         * @param {string} message
          */
-        info: function (message) {
+        info: function (message: string): void {
             this.flash(message, 'Info', 'info');
         },
 
         /**
          * Helper function to flash a normal warning message to the user.
-         *
-         * @param {string} message
          */
-        warning: function (message) {
+        warning: function (message: string): void {
             this.flash(message, 'Warning', 'warning');
         },
 
         /**
          * Helper function to flash a normal error message to the user.
-         *
-         * @param {string} message
          */
-        error: function (message) {
+        error: function (message: string): void {
             this.flash(message, 'Error', 'danger');
         },
     }