initial commit, have most of the categories crud methods

budgit.client/src/utils/Logger.js

@@ -0,0 +1,35 @@
+import { dev } from '../env'
+
+function log(type, content) {
+  if (dev) {
+    // eslint-disable-next-line no-console
+    console[type](`[${type}] :: ${new Date().toLocaleTimeString()} :: `, ...content)
+  } else {
+    switch (type) {
+      case 'log':
+      case 'assert':
+        return
+    }
+    // TODO SEND LOGS TO EXTERNAL SERVICE
+    // eslint-disable-next-line no-console
+    console[type](`[${type}] :: ${new Date().toLocaleTimeString()} :: `, ...content)
+  }
+}
+
+export const logger = {
+  log() {
+    log('log', arguments)
+  },
+  error() {
+    log('error', arguments)
+  },
+  warn() {
+    log('warn', arguments)
+  },
+  assert() {
+    log('assert', arguments)
+  },
+  trace() {
+    log('trace', arguments)
+  }
+}

budgit.client/src/utils/Pop.js

@@ -0,0 +1,74 @@
+import Swal from 'sweetalert2'
+import 'sweetalert2/dist/sweetalert2.min.css'
+
+export default class Pop {
+  /**
+ *
+ * @param {string} title The title text.
+ * @param {string} text The body text.
+ * @param {string} icon 'success', 'error', 'info', 'warning', or 'question'.
+ * @param {string} confirmButtonText The text of your confirm button.
+ * -----------------------------------
+ * {@link https://sweetalert2.github.io/#configuration|Check out Sweet Alerts}
+ */
+  static async confirm(title = 'Are you sure?', text = "You won't be able to revert this!", icon = 'warning', confirmButtonText = 'Yes, delete it!') {
+    try {
+      const res = await Swal.fire({
+        title: title,
+        text: text,
+        icon: icon,
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: confirmButtonText
+      })
+      if (res.isConfirmed) {
+        return true
+      }
+      return false
+    } catch (error) {
+      return false
+    }
+  }
+
+  /**
+ *
+ * @param {string} title The title text
+ * @param {string} display 'success', 'error', 'info', 'warning', or 'question'.
+ * @param {string} position 'top', 'top-start', 'top-end', 'center', 'center-start', 'center-end', 'bottom', 'bottom-start', or 'bottom-end'.
+ * @param {number} timer Time in milliseconds.
+ * @param {boolean} progressBar Show progress bar or not respectively.
+ * -----------------------------------
+ * {@link https://sweetalert2.github.io/#configuration|Check out Sweet Alerts}
+ */
+  static toast(title = 'Warning!', display = 'warning', position = 'top-end', timer = 3000, progressBar = true) {
+    Swal.fire({
+      title: title,
+      icon: display,
+      position: position,
+      timer: timer,
+      timerProgressBar: progressBar,
+      toast: true,
+      showConfirmButton: false
+    })
+  }
+  
+  /**
+   * @param {import('axios').AxiosError | Error | String } Error An Error Object.
+   */
+  static error(error) {
+    if (error.isAxiosError) {
+      const { response } = error
+      this.toast(response.data.error?.message || response.data.message, 'error')
+    } else {
+      this.toast(error.message || error, 'error')
+    }
+  }
+
+  /**
+   * @param { String } message The message to display. If not provided, will display a generic message.
+   */
+  static success(message = 'Success!') {
+    this.toast(message, 'success')
+  }
+}

budgit.client/src/utils/SocketHandler.js

@@ -0,0 +1,80 @@
+import { io } from 'socket.io-client'
+import { baseURL, useSockets } from '../env.js'
+import { logger } from './Logger.js'
+
+const SOCKET_EVENTS = {
+  connection: 'connection',
+  connected: 'connected',
+  disconnect: 'disconnect',
+  authenticate: 'authenticate',
+  authenticated: 'authenticated',
+  userConnected: 'userConnected',
+  userDisconnected: 'userDisconnected',
+  error: 'error'
+}
+
+export class SocketHandler {
+  /**
+   * @param {String} url
+   */
+  constructor(requiresAuth = false, url = baseURL) {
+    if (!useSockets) { return }
+    this.socket = io(url || baseURL)
+    this.requiresAuth = requiresAuth
+    this.queue = []
+    this.authenticated = false
+    this
+      .on(SOCKET_EVENTS.connected, this.onConnected)
+      .on(SOCKET_EVENTS.authenticated, this.onAuthenticated)
+      .on(SOCKET_EVENTS.error, this.onError)
+  }
+
+  on(event, fn) {
+    this.socket?.on(event, fn.bind(this))
+    return this
+  }
+
+  onConnected(connection) {
+    logger.log('[SOCKET_CONNECTION]', connection)
+    this.connected = true
+    this.playback()
+  }
+
+  onAuthenticated(auth) {
+    logger.log('[SOCKET_AUTHENTICATED]', auth)
+    this.authenticated = true
+    this.playback()
+  }
+
+  authenticate(bearerToken) {
+    this.socket?.emit(SOCKET_EVENTS.authenticate, bearerToken)
+  }
+
+  onError(error) {
+    logger.error('[SOCKET_ERROR]', error)
+  }
+
+  enqueue(action, payload) {
+    logger.log('[ENQUEING_ACTION]', { action, payload })
+    this.queue.push({ action, payload })
+  }
+
+  playback() {
+    logger.log('[SOCKET_PLAYBACK]')
+    const playback = [...this.queue]
+    this.queue = []
+    playback.forEach(e => {
+      this.emit(e.action, e.payload)
+    })
+  }
+
+  emit(action, payload = undefined) {
+    if (this.requiresAuth && !this.authenticated) {
+      return this.enqueue(action, payload)
+    }
+    if (!this.connected) {
+      return this.enqueue(action, payload)
+    }
+    this.socket.emit(action, payload)
+  }
+}