@kaspernj/api-maker 1.0.2011 → 1.0.2012

package/src/router.jsx

@@ -1,26 +1,30 @@
+import BaseComponent from "./base-component"
 import PropTypes from "prop-types"
-import React from "react"
-import shouldComponentUpdate from "set-state-compare/src/should-component-update"
-import {Suspense} from "react"
-import withRouter from "./with-router"
-
-class ApiMakerRouter extends React.Component {
-  static propTypes = {
+import propTypesExact from "prop-types-exact"
+import React, {memo, Suspense} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import usePath from "on-location-changed/build/use-path"
+import useRouter from "./use-router"
+
+export default memo(shapeComponent(class ApiMakerRouter extends BaseComponent {
+  static propTypes = propTypesExact({
+    history: PropTypes.object,
+    locales: PropTypes.array.isRequired,
     notFoundComponent: PropTypes.elementType,
-    requireComponent: PropTypes.func.isRequired
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    return shouldComponentUpdate(this, nextProps, nextState)
-  }
+    requireComponent: PropTypes.func.isRequired,
+    routeDefinitions: PropTypes.object,
+    routes: PropTypes.object
+  })
 
   render() {
-    const {match, ...restProps} = this.props
+    const path = usePath()
+    const {locales, notFoundComponent, requireComponent, routeDefinitions, routes} = this.props
+    const {match} = useRouter({locales, path, routes, routeDefinitions})
     const {matchingRoute} = match
 
     if (!matchingRoute) {
-      if (this.props.notFoundComponent) {
-        const NotFoundComponent = this.props.notFoundComponent
+      if (notFoundComponent) {
+        const NotFoundComponent = notFoundComponent
 
         return (
           <Suspense fallback={<div />}>
@@ -32,14 +36,12 @@ class ApiMakerRouter extends React.Component {
       }
     }
 
-    const Component = this.props.requireComponent({routeDefinition: matchingRoute.parsedRouteDefinition.routeDefinition})
+    const Component = requireComponent({routeDefinition: matchingRoute.parsedRouteDefinition.routeDefinition})
 
     return (
       <Suspense fallback={<div />}>
-        <Component match={match} {...restProps} />
+        <Component match={match} />
       </Suspense>
     )
   }
-}
-
-export default withRouter(ApiMakerRouter)
+}))

package/src/{routes-native.mjs → routes-native.js}

@@ -1,6 +1,7 @@
 import {dig, digg, digs} from "diggerize"
-import inflection from "inflection"
+import * as inflection from "inflection"
 import qs from "qs"
+import urlEncode from "./url-encode"
 
 export default class ApiMakerRoutesNative {
   constructor ({getLocale}) {
@@ -33,8 +34,10 @@ export default class ApiMakerRoutesNative {
 
             if (variableMatch) {
               localizedPathParts.push({type: "variable", count: variableCount++})
-            } else {
-              localizedPathParts.push({type: "pathPart", name: dig(this.routeTranslationParts, locale, pathPart) || pathPart})
+            } else if (pathPart) {
+              const name = this.i18n.t(`routes.${pathPart}`, null, {default: pathPart, locale})
+
+              localizedPathParts.push({type: "pathPart", name})
             }
           }
 
@@ -63,6 +66,7 @@ export default class ApiMakerRoutesNative {
   }
 
   loadRouteTranslations (i18n) {
+    this.i18n = i18n
     const locales = digg(i18n, "locales")
 
     for (const locale in locales) {
@@ -81,7 +85,9 @@ export default class ApiMakerRoutesNative {
     let options
 
     // Extract options from args if any
-    if (typeof args[args.length - 1] == "object") {
+    const lastArg = args[args.length - 1]
+
+    if (lastArg && typeof lastArg == "object") {
       options = args.pop()
     } else {
       options = {}
@@ -106,7 +112,7 @@ export default class ApiMakerRoutesNative {
         .join("/")
 
       if (restOptions && Object.keys(restOptions).length > 0) {
-        translatedRoute += `?${qs.stringify(restOptions)}`
+        translatedRoute += `?${qs.stringify(restOptions, {encoder: urlEncode})}`
       }
 
       if (url) return this.addHostToRoute({host, port, protocol, translatedRoute})
@@ -127,7 +133,7 @@ export default class ApiMakerRoutesNative {
         .join("/")
 
       if (restOptions && Object.keys(restOptions).length > 0) {
-        translatedRoute += `?${qs.stringify(restOptions)}`
+        translatedRoute += `?${qs.stringify(restOptions, {encoder: urlEncode})}`
       }
 
       if (url) return this.addHostToRoute({host, port, protocol, translatedRoute})

package/src/{routes.mjs → routes.js}

@@ -1,5 +1,5 @@
 import {digg} from "diggerize"
-import inflection from "inflection"
+import * as inflection from "inflection"
 
 export default class ApiMakerRoutes {
   constructor ({jsRoutes, locale, routeDefinitions}) {

package/src/run-last.js

@@ -0,0 +1,39 @@
+export default class RunLast {
+  constructor(callback) {
+    if (!callback) throw new Error("Empty callback given")
+
+    this.callback = callback
+  }
+
+  // Try to batch calls to backend while waiting for the event-queue-call to clear any other jobs before the request and reset on every flush call
+  // If only waiting a single time, then other event-queue-jobs might be before us and queue other jobs that might queue calls to the backend
+  queue() {
+    this.flushTriggerCount = 0
+    this.clearTimeout()
+    this.flushTrigger()
+  }
+
+  flushTrigger = () => {
+    if (this.flushTriggerCount >= 10) {
+      this.run()
+    } else {
+      this.flushTriggerCount++
+      this.flushTriggerQueue()
+    }
+  }
+
+  flushTriggerQueue() {
+    this.flushTimeout = setTimeout(this.flushTrigger, 0)
+  }
+
+  clearTimeout() {
+    if (this.flushTimeout) {
+      clearTimeout(this.flushTimeout)
+    }
+  }
+
+  run() {
+    this.clearTimeout()
+    this.callback()
+  }
+}

package/src/{serializer.mjs → serializer.js}

@@ -16,7 +16,7 @@ export default class Serializer {
   }
 
   serializeArgument (arg) {
-    if (typeof arg == "object" && arg.constructor.apiMakerType == "BaseModel") {
+    if (typeof arg == "object" && arg && arg.constructor.apiMakerType == "BaseModel") {
       return {
         api_maker_type: "model",
         model_class_name: digg(arg.modelClassData(), "name"),
@@ -44,7 +44,7 @@ export default class Serializer {
       }
     } else if (Array.isArray(arg)) {
       return this.serializeArray(arg)
-    } else if (typeof arg == "object" && arg.constructor && arg.constructor.apiMakerType == "Collection") {
+    } else if (typeof arg == "object" && arg && arg.constructor && arg.constructor.apiMakerType == "Collection") {
       return {
         api_maker_type: "collection",
         value: this.serializeObject(arg)

package/src/{services.mjs → services.js}

@@ -1,4 +1,4 @@
-import CommandsPool from "./commands-pool.mjs"
+import CommandsPool from "./commands-pool"
 
 const shared = {}
 

package/src/session-status-updater.js

@@ -0,0 +1,172 @@
+import config from "./config"
+import Devise from "./devise"
+import * as inflection from "inflection"
+import Logger from "./logger"
+import wakeEvent from "wake-event"
+
+const logger = new Logger({name: "ApiMaker / SessionStatusUpdater"})
+const shared = {}
+
+// logger.setDebug(true)
+
+export default class ApiMakerSessionStatusUpdater {
+  static current(args) {
+    if (!shared.apiMakerSessionStatusUpdater) {
+      shared.apiMakerSessionStatusUpdater = new ApiMakerSessionStatusUpdater(args)
+    }
+
+    return shared.apiMakerSessionStatusUpdater
+  }
+
+  constructor(args = {}) {
+    this.events = {}
+    this.timeout = args.timeout || 600000
+
+    if ("useMetaElement" in args) {
+      this.useMetaElement = args.useMetaElement
+    } else if (typeof document != "undefined") {
+      this.useMetaElement = true
+    } else {
+      this.useMetaElement = false
+    }
+
+    if (typeof window != "undefined") {
+      this.connectOnlineEvent()
+    }
+
+    this.connectWakeEvent()
+  }
+
+  connectOnlineEvent() {
+    window.addEventListener("online", this.updateSessionStatus, false)
+  }
+
+  connectWakeEvent() {
+    wakeEvent(this.updateSessionStatus)
+  }
+
+  async getCsrfToken() {
+    if (this.csrfToken) {
+      logger.debug(`Get CSRF token from set variable: ${this.csrfToken}`)
+
+      return this.csrfToken
+    }
+
+    if (this.useMetaElement) {
+      const csrfTokenElement = document.querySelector("meta[name='csrf-token']")
+
+      if (csrfTokenElement) {
+        logger.debug(() => `Get CSRF token from meta element: ${csrfTokenElement.getAttribute("content")}`)
+
+        this.csrfToken = csrfTokenElement.getAttribute("content")
+
+        return this.csrfToken
+      }
+    }
+
+    logger.debug("Updating session status because no CSRF token set yet")
+    await this.updateSessionStatus()
+
+    if (this.csrfToken) {
+      logger.debug(() => `Returning CSRF token after updating session status: ${this.csrfToken}`)
+
+      return this.csrfToken
+    }
+
+    throw new Error("CSRF token hasn't been set")
+  }
+
+  sessionStatus() {
+    return new Promise((resolve) => {
+      const host = config.getHost()
+      let requestPath = ""
+
+      if (host) requestPath += host
+
+      requestPath += "/api_maker/session_statuses"
+
+      const xhr = new XMLHttpRequest()
+      xhr.open("POST", requestPath, true)
+      xhr.onload = () => {
+        const response = JSON.parse(xhr.responseText)
+        resolve(response)
+      }
+      xhr.send()
+    })
+  }
+
+  onSignedOut(callback) {
+    this.addEvent("onSignedOut", callback)
+  }
+
+  startTimeout() {
+    logger.debug("startTimeout")
+
+    if (this.updateTimeout)
+      clearTimeout(this.updateTimeout)
+
+    this.updateTimeout = setTimeout(
+      () => {
+        this.startTimeout()
+        this.updateSessionStatus()
+      },
+      this.timeout
+    )
+  }
+
+  stopTimeout() {
+    if (this.updateTimeout)
+      clearTimeout(this.updateTimeout)
+  }
+
+  updateSessionStatus = async () => {
+    logger.debug("updateSessionStatus")
+
+    const result = await this.sessionStatus()
+
+    logger.debug(() => `Result: ${JSON.stringify(result, null, 2)}`)
+    this.updateMetaElementsFromResult(result)
+    this.updateUserSessionsFromResult(result)
+  }
+
+  updateMetaElementsFromResult(result) {
+    logger.debug("updateMetaElementsFromResult")
+
+    this.csrfToken = result.csrf_token
+
+    if (this.useMetaElement) {
+      const csrfTokenElement = document.querySelector("meta[name='csrf-token']")
+
+      if (csrfTokenElement) {
+        logger.debug(() => `Changing token from "${csrfTokenElement.getAttribute("content")}" to "${result.csrf_token}"`)
+        csrfTokenElement.setAttribute("content", result.csrf_token)
+      } else {
+        logger.debug("csrf token element couldn't be found")
+      }
+    }
+  }
+
+  updateUserSessionsFromResult(result) {
+    for (const scopeName in result.scopes) {
+      this.updateUserSessionScopeFromResult(scopeName, result.scopes[scopeName])
+    }
+  }
+
+  updateUserSessionScopeFromResult(scopeName, scope) {
+    const deviseIsSignedInMethodName = `is${inflection.camelize(scopeName)}SignedIn`
+
+    if (!(deviseIsSignedInMethodName in Devise)) {
+      throw new Error(`No such method in Devise: ${deviseIsSignedInMethodName}`)
+    }
+
+    const currentlySignedIn = Devise[deviseIsSignedInMethodName]()
+    const signedInOnBackend = scope.signed_in
+
+    if (currentlySignedIn && !signedInOnBackend) {
+      logger.debug(() => `${inflection.camelize(scopeName)} signed in on frontend but not in backend!`)
+
+      Devise.setSignedOut({scope: scopeName})
+      Devise.callSignOutEvent({scope: scopeName})
+    }
+  }
+}

package/src/{source-maps-loader.mjs → source-maps-loader.js}

@@ -1,39 +1,35 @@
 import * as stackTraceParser from "stacktrace-parser"
+import Logger from "./logger"
 import {SourceMapConsumer} from "source-map"
 import uniqunize from "uniqunize"
 
 // Sometimes this needs to be called and sometimes not
 if (SourceMapConsumer.initialize) {
   SourceMapConsumer.initialize({
-    "lib/mappings.wasm": "https://unpkg.com/source-map@0.7.3/lib/mappings.wasm"
+    "lib/mappings.wasm": "https://unpkg.com/source-map@0.7.4/lib/mappings.wasm"
   })
 }
 
+const logger = new Logger({name: "ApiMaker / SourceMapsLoader"})
+
 export default class SourceMapsLoader {
-  constructor () {
-    this.debug = false
+  constructor() {
     this.isLoadingSourceMaps = false
     this.sourceMaps = []
     this.srcLoaded = {}
   }
 
-  loadSourceMapsForScriptTags (callback) {
+  loadSourceMapsForScriptTags(callback) {
     this.loadSourceMapsForScriptTagsCallback = callback
   }
 
-  sourceMapForSource (callback) {
+  sourceMapForSource(callback) {
     this.sourceMapForSourceCallback = callback
   }
 
-  getSources(error) {
-    let sources = this.getSourcesFromScripts()
-
-    if (error) sources = sources.concat(this.getSourcesFromError(error))
-
-    return uniqunize(sources, (source) => source.originalUrl)
-  }
+  async loadSourceMaps(error) {
+    if (!error) throw new Error("No error was given to SourceMapsLoader#loadSourceMaps")
 
-  async loadSourceMaps (error) {
     this.isLoadingSourceMaps = true
 
     try {
@@ -55,6 +51,14 @@ export default class SourceMapsLoader {
     }
   }
 
+  getSources(error) {
+    let sources = this.getSourcesFromScripts()
+
+    if (error) sources = sources.concat(this.getSourcesFromError(error))
+
+    return uniqunize(sources, (source) => source.originalUrl)
+  }
+
   getSourcesFromError(error) {
     const stack = stackTraceParser.parse(error.stack)
     const sources = []
@@ -65,7 +69,13 @@ export default class SourceMapsLoader {
       if (file != "\u003Canonymous>") {
         const sourceMapUrl = this.getMapURL({src: file})
 
-        if (sourceMapUrl) sources.push({originalUrl: file, sourceMapUrl})
+        if (sourceMapUrl) {
+          logger.debug(() => `Found source map from error: ${sourceMapUrl}`)
+
+          sources.push({originalUrl: file, sourceMapUrl})
+        } else {
+          logger.debug(() => `Coudn't get source map from: ${file}`)
+        }
       }
     }
 
@@ -79,7 +89,10 @@ export default class SourceMapsLoader {
     for (const script of scripts) {
       const sourceMapUrl = this.getMapURL({script, src: script.src})
 
-      if (sourceMapUrl) sources.push({originalUrl: script.src, sourceMapUrl})
+      if (sourceMapUrl) {
+        logger.debug(() => `Found source map from script: ${sourceMapUrl}`)
+        sources.push({originalUrl: script.src, sourceMapUrl})
+      }
     }
 
     return sources
@@ -98,42 +111,55 @@ export default class SourceMapsLoader {
     }
   }
 
-  includeMapURL(src) {
-    return src.includes("/packs/")
-  }
+  includeMapURL = (src) => src.includes("/packs/")
 
-  async loadSourceMapForSource ({originalUrl, sourceMapUrl}) {
+  async loadSourceMapForSource({originalUrl, sourceMapUrl}) {
     const xhr = new XMLHttpRequest()
 
     xhr.open("GET", sourceMapUrl, true)
 
-    await this.loadXhr(xhr)
+    try {
+      await this.loadXhr(xhr, sourceMapUrl)
+    } catch (error) {
+      console.log(`Couldn't load source map from: ${sourceMapUrl}: ${xhr.responseText}`)
+
+      return
+    }
 
     const consumer = await new SourceMapConsumer(xhr.responseText)
 
-    this.sourceMaps.push({consumer, originalUrl})
+    if (consumer) {
+      this.sourceMaps.push({consumer, originalUrl})
+    }
   }
 
-  loadUrl (url) {
+  loadUrl(url) {
     const parser = document.createElement("a")
+
     parser.href = url
 
     return parser
   }
 
-  loadXhr (xhr, postData) {
-    return new Promise((resolve) => {
-      xhr.onload = () => resolve()
-      xhr.send(postData)
+  loadXhr(xhr, url) {
+    return new Promise((resolve, reject) => {
+      xhr.onload = () => {
+        if (xhr.status == 200) {
+          resolve()
+        } else {
+          reject(new Error(`HTTP request failed with ${xhr.status} for ${url}`))
+        }
+      }
+      xhr.send()
     })
   }
 
-  parseStackTrace (stackTrace) {
+  parseStackTrace(stackTrace) {
     return this.getStackTraceData(stackTrace)
       .map((traceData) => `at ${traceData.methodName} (${traceData.fileString})`)
   }
 
-  getStackTraceData (stackTrace) {
+  getStackTraceData(stackTrace) {
     const stack = stackTraceParser.parse(stackTrace)
     const newSourceMap = []
 

package/src/super-admin/config-reader.jsx

@@ -0,0 +1,93 @@
+import {digg, digs} from "diggerize"
+import * as inflection from "inflection"
+
+const modelConfigRequireContext = require.context("super-admin/model-configs", true, /.jsx$/)
+
+export default class ApiMakerSuperAdminConfigReader {
+  static forModel(modelClass) {
+    const modelNameCamelized = digg(modelClass.modelClassData(), "nameDasherized")
+    let modelConfig
+
+    try {
+      modelConfig = modelConfigRequireContext(`./${modelNameCamelized}.jsx`).default
+    } catch (error) {
+      if (error.message.includes("Cannot find module")) {
+        console.debug(`No model-config for ${modelClass.modelClassData().name}`)
+      } else {
+        throw error
+      }
+    }
+
+    return new ApiMakerSuperAdminConfigReader(modelClass, modelConfig)
+  }
+
+  constructor(modelClass, modelConfig) {
+    this.modelClass = modelClass
+    this.modelConfig = modelConfig
+  }
+
+  attributesToShow() {
+    const {modelConfig} = digs(this, "modelConfig")
+
+    if (modelConfig?.show?.attributesToShow) {
+      return modelConfig.show.attributesToShow()
+    }
+
+    return this.defaultAttributesToShow()
+  }
+
+  defaultAttributesToShow() {
+    const attributesToShow = []
+    const {columns} = this.defaultTableColumns()
+
+    for (const column of columns) {
+      attributesToShow.push(digg(column, "attribute"))
+    }
+
+    return attributesToShow
+  }
+
+  tableColumns() {
+    const {modelConfig} = digs(this, "modelConfig")
+
+    if (modelConfig?.table?.columns) {
+      return {
+        columns: modelConfig.table.columns()
+      }
+    } else {
+      return this.defaultTableColumns()
+    }
+  }
+
+  defaultTableColumns() {
+    const {modelClass} = digs(this, "modelClass")
+    const attributes = modelClass.attributes()
+    const columns = []
+    const select = {}
+    const modelClassSelect = []
+
+    select[modelClass.modelClassData().name] = modelClassSelect
+
+    for (const attribute of attributes) {
+      if (!attribute.isSelectedByDefault() && attribute.name() != "name") {
+        continue
+      }
+
+      const camelizedName = inflection.camelize(attribute.name(), true)
+      const column = {
+        attribute: camelizedName
+      }
+
+      if (attribute.isColumn()) {
+        column.sortKey = camelizedName
+      } else if (attribute.isTranslated()) {
+        column.sortKey = `currentTranslation${camelizedName}`
+      }
+
+      modelClassSelect.push(camelizedName)
+      columns.push(column)
+    }
+
+    return {columns, select}
+  }
+}