@kaspernj/api-maker 1.0.2011 → 1.0.2013

package/src/devise.js

@@ -0,0 +1,129 @@
+import Deserializer from "./deserializer"
+import events from "./events"
+import * as inflection from "inflection"
+import modelClassRequire from "./model-class-require"
+import Services from "./services"
+
+if (!globalThis.ApiMakerDevise) globalThis.ApiMakerDevise = {scopes: {}}
+
+const shared = globalThis.ApiMakerDevise
+
+export default class ApiMakerDevise {
+  static callSignOutEvent(args) {
+    events.emit("onDeviseSignOut", {args})
+  }
+
+  static current() {
+    if (!shared.currentApiMakerDevise) {
+      shared.currentApiMakerDevise = new ApiMakerDevise()
+    }
+
+    return shared.currentApiMakerDevise
+  }
+
+  static events() {
+    return events
+  }
+
+  static addUserScope(scope, args = {}) {
+    const currentMethodName = `current${inflection.camelize(scope)}`
+    const isSignedInMethodName = `is${inflection.camelize(scope)}SignedIn`
+    const getArgsMethodName = `get${inflection.camelize(scope)}Args`
+
+    ApiMakerDevise[currentMethodName] = () => ApiMakerDevise.current().getCurrentScope(scope)
+    ApiMakerDevise[isSignedInMethodName] = () => Boolean(ApiMakerDevise.current().getCurrentScope(scope))
+    ApiMakerDevise[getArgsMethodName] = () => args
+  }
+
+  static async signIn(username, password, args = {}) {
+    if (!args.scope) args.scope = "user"
+
+    const postData = {username, password, args}
+    const response = await Services.current().sendRequest("Devise::SignIn", postData)
+
+    let model = response.model
+
+    if (Array.isArray(model)) model = model[0]
+
+    ApiMakerDevise.updateSession(model)
+    events.emit("onDeviseSignIn", Object.assign({username}, args))
+
+    return {model, response}
+  }
+
+  static updateSession(model, args = {}) {
+    if (!args.scope) args.scope = "user"
+
+    const camelizedScopeName = inflection.camelize(args.scope, true)
+
+    ApiMakerDevise.current().currents[camelizedScopeName] = model
+  }
+
+  hasCurrentScope(scope) {
+    const camelizedScopeName = inflection.camelize(scope, true)
+
+    return camelizedScopeName in ApiMakerDevise.current().currents
+  }
+
+  static setSignedOut(args) {
+    ApiMakerDevise.current().currents[inflection.camelize(args.scope, true)] = null
+  }
+
+  static async signOut(args = {}) {
+    if (!args.scope) {
+      args.scope = "user"
+    }
+
+    const response = await Services.current().sendRequest("Devise::SignOut", {args})
+
+    // Cannot use the class because they would both import each other
+    if (shared.apiMakerSessionStatusUpdater) {
+      shared.apiMakerSessionStatusUpdater.updateSessionStatus()
+    }
+
+    ApiMakerDevise.setSignedOut(args)
+    ApiMakerDevise.callSignOutEvent(args)
+
+    return response
+  }
+
+  constructor() {
+    this.currents = {}
+  }
+
+  getCurrentScope(scope) {
+    if (!(scope in this.currents)) {
+      this.currents[scope] = this.loadCurrentScope(scope)
+    }
+
+    return this.currents[scope]
+  }
+
+  hasGlobalCurrentScope(scope) {
+    if (globalThis.apiMakerDeviseCurrent && scope in globalThis.apiMakerDeviseCurrent) {
+      return true
+    }
+
+    return false
+  }
+
+  loadCurrentScope(scope) {
+    if (!this.hasGlobalCurrentScope(scope)) {
+      return null
+    }
+
+    const scopeData = globalThis.apiMakerDeviseCurrent[scope]
+
+    if (!scopeData) return null
+
+    const parsedScopeData = Deserializer.parse(scopeData)
+
+    // Might be a collection with preloaded relationships
+    if (Array.isArray(parsedScopeData)) return parsedScopeData[0]
+
+    const ModelClass = modelClassRequire(scope)
+    const modelInstance = new ModelClass({data: parsedScopeData})
+
+    return modelInstance
+  }
+}

package/src/draggable-sort/controller.js

@@ -0,0 +1,137 @@
+import {digg} from "diggerize"
+import EventEmitter from "events"
+
+export default class DraggableSortController {
+  constructor({data, events, keyExtractor}) {
+    this.data = data
+    this.currentOrder = [...data]
+    this.events = events || new EventEmitter()
+    this.keyExtractor = keyExtractor
+
+    this.draggedItem = null
+    this.draggedItemData = null
+    this.draggedItemNewPosition = null
+
+    this.draggedOverItem = null
+    this.draggedOverItemData = null
+
+    this.itemData = {}
+
+    for (const itemIndex in data) {
+      this.itemData[itemIndex] = {
+        index: itemIndex,
+        item: data[itemIndex],
+        position: itemIndex
+      }
+    }
+  }
+
+  getEvents = () => this.events
+  getItemDataForItem = (item) => this.getItemDataForIndex(this.data.indexOf(item))
+  getItemDataForKey = (key) => this.itemData.find((itemDataI) => digg(itemDataI, "key") == key)
+  getItemDataForIndex = (index) => digg(this, "itemData", index)
+
+  onDragStart = ({item, itemIndex}) => {
+    if (item) {
+      this.draggedItem = item
+      this.draggedItemData = this.getItemDataForIndex(itemIndex)
+      this.draggedItemIndex = itemIndex
+      this.draggedItemPosition = this.draggedItemData.position
+      this.events.emit("onDragStart", {item, itemData: this.draggedItemData})
+    }
+  }
+
+  onDragEnd = () => {
+    const itemData = this.draggedItemData
+    const fromIndex = itemData.index
+    const fromPosition = digg(this, "draggedItemPosition")
+    const toPosition = this.draggedItemNewPosition
+    const fromItem = this.draggedItem
+    const toItem = this.draggedOverItem
+    const callbackArgs = {item: itemData.item, itemData, fromIndex, fromItem, fromPosition, toItem, toPosition}
+
+    this.draggedItemData.events.emit("resetPosition", {
+      callback: () => {
+        this.events.emit("onDragEndAnimation", callbackArgs)
+      }
+    })
+
+    this.draggedItem = null
+    this.draggedItemData = null
+    this.draggedItemNewPosition = null
+
+    this.draggedOverItem = null
+    this.draggedOverItemData = null
+
+    this.events.emit("onDragEnd", callbackArgs)
+  }
+
+  onItemLayout = ({events, index, item, layout}) => {
+    if (!(index in this.itemData)) throw new Error(`Item not found for index ${index}`)
+
+    const itemData = this.itemData[index]
+
+    itemData.layout = layout
+
+    if (!itemData.initialLayout) {
+      itemData.baseX = layout.x
+      itemData.events = events
+      itemData.initialLayout = layout
+      itemData.key = this.keyExtractor(item)
+    }
+  }
+
+  onMove = ({gestate}) => {
+    // Send move-event to the item being dragged so it will actually move around
+    this.draggedItemData?.events?.emit("move", {gestate})
+
+    const moveX = gestate.dx + this.initialDragPosition.x
+
+    for (const itemIndex in this.itemData) {
+      const itemData = this.getItemDataForIndex(itemIndex)
+      const baseX = digg(itemData, "baseX")
+      let smallestWidth = this.draggedItemData.layout.width
+
+      if (itemData.layout.width < smallestWidth) smallestWidth = itemData.layout.width
+
+      if (moveX > baseX && moveX < (baseX + smallestWidth) && itemIndex != this.draggedItemData.index) {
+        this.draggedOverItem = itemData.item
+        this.draggedOverItemData = itemData
+
+        const positionOfDraggedItem = this.currentOrder.indexOf(this.draggedItemData.item)
+        const positionOfOverItem = this.currentOrder.indexOf(this.draggedOverItemData.item)
+
+        this.currentOrder[positionOfDraggedItem] = this.draggedOverItemData.item
+        this.currentOrder[positionOfOverItem] = this.draggedItemData.item
+
+        this.draggedItemData.position = positionOfOverItem
+        this.draggedOverItemData.position = positionOfDraggedItem
+
+        this.updatePositionOfItems()
+        this.draggedItemNewPosition = positionOfOverItem
+      }
+    }
+  }
+
+  setInitialDragPosition = (initialDragPosition) => {
+    this.initialDragPosition = initialDragPosition
+  }
+
+  updatePositionOfItems() {
+    let currentPosition = 0
+
+    for (const item of this.currentOrder) {
+      const itemData = this.getItemDataForItem(item)
+
+      if (digg(itemData, "index") != digg(this, "draggedItemData", "index")) { // Dont animate dragged element to a new position because it is currently being dragged
+        itemData.events.emit("moveToPosition", {
+          x: currentPosition,
+          y: 0
+        })
+      }
+
+      itemData.baseX = currentPosition
+      currentPosition += digg(itemData, "layout", "width")
+    }
+  }
+}

package/src/draggable-sort/index.jsx

@@ -0,0 +1,108 @@
+import React, {useMemo} from "react"
+import {Animated, PanResponder} from "react-native"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+import Controller from "./controller"
+import DraggableSortItem from "./item"
+import EventEmitter from "events"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import useEventEmitter from "../use-event-emitter"
+
+export default memo(shapeComponent(class DraggableSort extends ShapeComponent {
+  static defaultProps = {
+    horizontal: false
+  }
+
+  static propTypes = propTypesExact({
+    cacheKeyExtractor: PropTypes.func,
+    data: PropTypes.array.isRequired,
+    dataSet: PropTypes.object,
+    events: PropTypes.instanceOf(EventEmitter),
+    horizontal: PropTypes.bool.isRequired,
+    keyExtractor: PropTypes.func.isRequired,
+    onDragItemEnd: PropTypes.func,
+    onDragItemStart: PropTypes.func,
+    onItemMoved: PropTypes.func,
+    onReordered: PropTypes.func.isRequired,
+    renderItem: PropTypes.func.isRequired
+  })
+
+  setup() {
+    const {data, keyExtractor} = this.p
+    const {events} = this.props
+
+    this.controller = useMemo(() => new Controller({data, events, keyExtractor}), [])
+    this.panResponder = useMemo(
+      () => PanResponder.create({
+        onStartShouldSetPanResponder: (e) => {
+          const initialDragPosition = {x: e.nativeEvent.locationX, y: e.nativeEvent.locationY}
+
+          this.controller.setInitialDragPosition(initialDragPosition)
+
+          if (this.controller.draggedItemData) {
+            return true
+          }
+        },
+        onPanResponderMove: (e, gestate) => {
+          this.tt.controller.onMove({gestate})
+        },
+        onPanResponderRelease: (e, gestate) => {
+          if (this.controller.draggedItem) {
+            this.tt.controller.onDragEnd()
+          }
+        }
+      }),
+      []
+    )
+
+    useEventEmitter(this.controller.getEvents(), "onDragStart", this.tt.onDragItemStart)
+    useEventEmitter(this.controller.getEvents(), "onDragEnd", this.tt.onDragItemEnd)
+  }
+
+  render() {
+    const {data, horizontal, keyExtractor, renderItem} = this.p
+    const {cacheKeyExtractor, dataSet} = this.props
+    const actualDataSet = useMemo(
+      () => Object.assign(
+        {
+          component: "draggable-sort"
+        },
+        dataSet
+      ),
+      [dataSet]
+    )
+
+    return (
+      <Animated.View dataSet={actualDataSet} style={{flexDirection: horizontal ? "row" : "column"}} {...this.tt.panResponder.panHandlers}>
+        {data.map((item, itemIndex) =>
+          <DraggableSortItem
+            cacheKey={cacheKeyExtractor ? cacheKeyExtractor(item) : undefined}
+            controller={this.tt.controller}
+            item={item}
+            itemIndex={itemIndex}
+            key={keyExtractor(item)}
+            onItemMoved={this.props.onItemMoved}
+            renderItem={renderItem}
+          />
+        )}
+      </Animated.View>
+    )
+  }
+
+  onDragItemStart = ({itemData}) => {
+    if (this.props.onDragItemStart) {
+      this.p.onDragItemStart({itemData})
+    }
+  }
+
+  onDragItemEnd = (args) => {
+    if (args.toPosition !== null) {
+      this.p.onReordered(args)
+    }
+
+    if (this.props.onDragItemEnd) {
+      this.p.onDragItemEnd(args)
+    }
+  }
+}))

package/src/draggable-sort/item.jsx

@@ -0,0 +1,174 @@
+import React, {useMemo} from "react"
+import {Animated, Easing, PanResponder} from "react-native"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+import EventEmitter from "events"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import useEventEmitter from "../use-event-emitter"
+
+export default memo(shapeComponent(class DraggableSortItem extends ShapeComponent {
+  static propTypes = propTypesExact({
+    cacheKey: PropTypes.string,
+    controller: PropTypes.object.isRequired,
+    item: PropTypes.any.isRequired,
+    itemIndex: PropTypes.number.isRequired,
+    onItemMoved: PropTypes.func,
+    renderItem: PropTypes.func.isRequired
+  })
+
+  initialLayout = null
+
+  setup() {
+    this.useStates({
+      active: false,
+      dragging: false
+    })
+
+    this.events = useMemo(() => new EventEmitter(), [])
+    this.position = useMemo(() => new Animated.ValueXY(), [])
+    this.panResponder = useMemo(
+      () => PanResponder.create({
+        onStartShouldSetPanResponder: (e, ) => {
+          this.setState({dragging: true})
+          this.p.controller.onDragStart({item: this.p.item, itemIndex: this.p.itemIndex})
+
+          return false
+        }
+      }),
+      []
+    )
+
+    useEventEmitter(this.p.controller.getEvents(), "onDragStart", this.tt.onDragStart)
+    useEventEmitter(this.p.controller.getEvents(), "onDragEndAnimation", this.tt.onDragEndAnimation)
+    useEventEmitter(this.tt.events, "move", this.tt.onMove)
+    useEventEmitter(this.tt.events, "moveToPosition", this.tt.onMoveToPosition)
+    useEventEmitter(this.tt.events, "resetPosition", this.tt.onResetPosition)
+  }
+
+  render() {
+    const {item, renderItem} = this.p
+    const {active} = this.s
+    const style = useMemo(
+      () => {
+        const style = {
+          transform: this.tt.position.getTranslateTransform()
+        }
+
+        if (active) {
+          style.backgroundColor = "#fff"
+          style.elevation = 2
+          style.zIndex = 99999
+        }
+
+        return style
+      },
+      [active]
+    )
+
+    return (
+      <Animated.View dataSet={{component: "draggable-sort/item"}} onLayout={this.tt.onLayout} style={style}>
+        {renderItem({isActive: active, item, touchProps: this.tt.panResponder.panHandlers})}
+      </Animated.View>
+    )
+  }
+
+  onDragStart = ({itemData}) => {
+    const newState = {dragging: true}
+
+    if (itemData.index == this.p.itemIndex) {
+      newState.active = true
+      this.baseXAtStartedDragging = this.getBaseX()
+    }
+
+    this.setState(newState)
+  }
+
+  onDragEndAnimation = () => this.setState({active: false, dragging: false})
+
+  onLayout = (e) => {
+    const {controller, item, itemIndex} = this.p
+
+    controller.onItemLayout({events: this.tt.events, index: itemIndex, item, layout: e.nativeEvent.layout})
+
+    if (!this.tt.initialLayout) {
+      this.initialLayout = e.nativeEvent.layout
+    }
+  }
+
+  onMove = ({gestate}) => {
+    const x = gestate.dx + this.tt.baseXAtStartedDragging - this.tt.initialLayout.x
+    const y = this.tt.initialLayout.y
+
+    this.tt.position.setValue({x, y})
+
+    if (this.props.onItemMoved) {
+      this.p.onItemMoved({itemIndex: this.p.itemIndex, x, y})
+    }
+  }
+
+  onMoveToPosition = ({x, y}) => {
+    const calculatedXFromStartingPosition = x - this.tt.initialLayout.x
+    const animationArgs = {
+      duration: 200,
+      easing: Easing.inOut(Easing.linear),
+      toValue: {
+        x: calculatedXFromStartingPosition,
+        y
+      },
+      useNativeDriver: true,
+    }
+    const animationEventArgs = {animationArgs, animationType: "moveToPosition", item: this.p.item}
+
+    this.p.controller.events.emit("onAnimationStart", animationEventArgs)
+
+    Animated
+      .timing(this.tt.position, animationArgs)
+      .start(() => {
+        this.p.controller.events.emit("onAnimationEnd", animationEventArgs)
+      })
+
+    if (this.props.onItemMoved) {
+      this.p.onItemMoved({
+        animationArgs,
+        itemIndex: this.p.itemIndex,
+        x: calculatedXFromStartingPosition,
+        y
+      })
+    }
+  }
+
+  getBaseX = () => this.p.controller.getItemDataForIndex(this.p.itemIndex).baseX
+
+  onResetPosition = (args) => {
+    const baseX = this.getBaseX() - this.tt.initialLayout.x
+    const animationArgs = {
+      duration: 200,
+      easing: Easing.inOut(Easing.linear),
+      toValue: {
+        x: baseX,
+        y: 0
+      },
+      useNativeDriver: true,
+    }
+    const animationEventArgs = {animationArgs, animationType: "resetPosition", item: this.p.item}
+
+    this.p.controller.events.emit("onAnimationStart", animationEventArgs)
+
+    Animated
+      .timing(this.tt.position, animationArgs)
+      .start(() => {
+        this.p.controller.events.emit("onAnimationEnd", animationEventArgs)
+        if (args?.callback) args.callback()
+      })
+
+    if (this.props.onItemMoved) {
+      this.p.onItemMoved({
+        animationArgs,
+        itemIndex: this.p.itemIndex,
+        x: baseX,
+        y: 0
+      })
+    }
+  }
+}))

package/src/{error-logger.mjs → error-logger.js}

@@ -1,9 +1,9 @@
 import {digg} from "diggerize"
-import SourceMapsLoader from "./source-maps-loader.mjs"
+import SourceMapsLoader from "./source-maps-loader"
 
 export default class ErrorLogger {
   constructor () {
-    this.debug = true
+    this.debugging = false
     this.errorOccurred = false
     this.errors = []
     this.isHandlingError = false
@@ -18,14 +18,17 @@ export default class ErrorLogger {
     })
   }
 
+  debug(...output) {
+    if (this.debugging) console.error(`ApiMaker ErrorLogger:`, ...output)
+  }
+
   enable () {
+    this.debug("Enable called")
     this.connectOnError()
     this.connectUnhandledRejection()
   }
 
-  getErrors () {
-    return this.errors
-  }
+  getErrors = () => this.errors
 
   hasErrorOccurred() {
     return digg(this, "errorOccurred")
@@ -40,7 +43,8 @@ export default class ErrorLogger {
   }
 
   connectOnError () {
-    globalThis.addEventListener("error", (event) => {
+    window.addEventListener("error", (event) => {
+      if (this.debugging) this.debug(`Error:`, event.message)
       this.errorOccurred = true
 
       if (!this.isHandlingError) {
@@ -53,7 +57,8 @@ export default class ErrorLogger {
   }
 
   connectUnhandledRejection () {
-    globalThis.addEventListener("unhandledrejection", (event) => {
+    window.addEventListener("unhandledrejection", (event) => {
+      if (this.debugging) this.debug(`Unhandled rejection:`, event.reason.message)
       this.errorOccurred = true
 
       if (!this.isHandlingError) {

package/src/{error-messages.mjs → error-messages.js}

@@ -1,4 +1,5 @@
 import {digg} from "diggerize"
+
 const errorMessages = (args) => {
   if (typeof args.response == "object") {
     return digg(args, "response", "errors").map((error) => {

package/src/event-connection.jsx

@@ -1,4 +1,4 @@
-import ModelEvents from "./model-events.mjs"
+import ModelEvents from "./model-events"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import React from "react"

package/src/event-emitter-listener.jsx

@@ -1,32 +1,13 @@
-import EventEmitter from "events"
-import PropTypes from "prop-types"
-import React from "react"
+import useEventEmitter from "./use-event-emitter"
 
-export default class ApiMakerEventEmitterListener extends React.PureComponent {
-  static propTypes = {
-    event: PropTypes.string.isRequired,
-    events: PropTypes.instanceOf(EventEmitter).isRequired,
-    onCalled: PropTypes.func.isRequired
-  }
-
-  constructor (props) {
-    super(props)
-    this.onCalled = this.onCalled.bind(this)
-  }
-
-  componentDidMount () {
-    this.props.events.addListener(this.props.event, this.onCalled)
-  }
+const EventEmitterListener = ({event, events, onCalled, ...restProps}) => {
+  const restPropsKeys = Object.keys(restProps)
 
-  componentWillUnmount () {
-    this.props.events.removeListener(this.props.event, this.onCalled)
+  if (restPropsKeys.length > 0) {
+    throw new Error(`Unexpected props: ${restPropsKeys}`)
   }
 
-  onCalled (...args) {
-    this.props.onCalled.apply(null, ...args)
-  }
-
-  render () {
-    return null
-  }
+  useEventEmitter(events, event, onCalled)
 }
+
+export default EventEmitterListener

package/src/event-model-class.jsx

@@ -1,4 +1,4 @@
-import ModelEvents from "./model-events.mjs"
+import ModelEvents from "./model-events"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import React from "react"
@@ -24,7 +24,5 @@ export default class ApiMakerEventModelClass extends React.PureComponent {
     this.connection = ModelEvents.connectModelClass(this.props.modelClass, this.props.event, this.props.onCall)
   }
 
-  render () {
-    return null
-  }
+  render = () => null
 }

package/src/events.js

@@ -0,0 +1,7 @@
+import EventEmitter from "events"
+
+const events = new EventEmitter()
+
+events.setMaxListeners(1000)
+
+export default events