@raclettejs/core 0.0.1

package/services/frontend/src/core/setup/socketEvents.ts

@@ -0,0 +1,279 @@
+/**
+ * listen to socket events received from the backend
+ *
+ * @param {object} $socket - a socketClient instance
+ * @param {object} $store - a minirx-store instance, so we can dispatch actions
+ * @param {object} $eventbus - instance of our custom eventbus
+ */
+import type { Composition } from "@shared/types/core/Composition.types"
+import type { InteractionLink } from "@shared/types/core/InteractionLink.types"
+import log from "@racletteCore/lib/logger"
+import { setupSpace } from "@racletteCore/lib/projectDataHelper"
+import { handleServerItem } from "@racletteCore/lib/data/dataApi"
+import * as userNotifier from "@racletteCore/lib/userNotifier"
+import type { ProjectConfiguration } from "../store/types"
+const registerSocketEvents = ($socket, $store, $eventbus) => {
+  /**
+   * connect
+   * fired every time we have a new connection established
+   */
+  $socket.on("connect", (data) => {
+    log.socket("onConnect", "Socket connection established")
+    $store.dispatch({
+      type: "backend/socket/status",
+      payload: { status: 1 },
+    })
+    // @TODO if we re-connect after a drop out we need to subscribe to our project without
+    // completely setting up the project up, e.g. only re-join project room.
+  })
+  /**
+   * disconnect
+   */
+  $socket.on("disconnect", () => {
+    log.socket(
+      "onDisconnect",
+      "Socket disconnected, Enable offline mode here if project conf disabled it",
+    )
+    userNotifier.setServerDisconnected()
+  })
+  $socket.on("connect_error", (err) => {
+    log.socket("onConnectError", err)
+    userNotifier.setServerDisconnected()
+  })
+  /**
+   * close
+   */
+  $socket.on("close", () => {
+    log.socket("onClose", "socket connection lost")
+    userNotifier.setServerDisconnected()
+  })
+  /**
+   * reconnect
+   */
+  $socket.on("reconnect", () => {
+    console.error("not properly tested yet")
+    log.socket("onReconnect", "Socket reconnect")
+    $store.dispatch({
+      type: "backend/socket/status",
+      payload: { status: 2 },
+    })
+  })
+
+  /**
+   * hello
+   * const data = { id: 'you'session'id' }
+   */
+  $socket.on("socketEstablished", (data) => {
+    log.socket("onSocketEstablished", data)
+    $store.dispatch({
+      type: "backend/socket/status",
+      payload: { socketId: data.id },
+    })
+  })
+
+  /**
+   * tagDeleted
+   */
+  $socket.on("tagDeleted", (payload) => {
+    const { appSessionId, body, type } = payload
+
+    log.socket("onTagDeleted", {
+      body,
+      type,
+      isOwnRequest: appSessionId === $socket.appSessionId,
+    })
+    handleServerItem(payload, true, false)
+    $eventbus.emit("socket_deletedTag", {
+      offline: false,
+      hard: true,
+      body,
+    })
+  })
+  /**
+   * tagCreated
+   */
+  $socket.on("tagCreated", (payload) => {
+    const { appSessionId, body, type } = payload
+
+    log.socket("onTagCreated", {
+      body,
+      type,
+      isOwnRequest: appSessionId === $socket.appSessionId,
+    })
+    handleServerItem(payload, true, false)
+    $eventbus.emit("socket_createdTag", {
+      offline: false,
+      hard: true,
+      body,
+    })
+  })
+  /**
+   * userCreated
+   */
+  $socket.on("userCreated", (payload) => {
+    const { appSessionId, body, type } = payload
+
+    log.socket("onUserCreated", {
+      body,
+      type,
+      isOwnRequest: appSessionId === $socket.appSessionId,
+    })
+    $eventbus.emit("socket_createdUser", { offline: false, body })
+  })
+  /**
+   * userDeleted
+   */
+  $socket.on("userDeleted", (payload) => {
+    const { appSessionId, body, type } = payload
+    log.socket("onUserDeleted", {
+      body,
+      type,
+      isOwnRequest: appSessionId === $socket.appSessionId,
+    })
+    $eventbus.emit("socket_deletedUser", { offline: false, body })
+  })
+  /**
+   * projectUpdated
+   */
+  $socket.on("projectUpdated", (payload) => {
+    const { appSessionId, body, type } = payload
+
+    log.socket("onProjectUpdated", {
+      body,
+      type,
+      isOwnRequest: appSessionId === $socket.appSessionId,
+    })
+    handleServerItem(payload, true, false)
+  })
+  $socket.on("projectConfigUpdated", (payload) => {
+    const { appSessionId, body, type } = payload
+
+    log.socket("onProjectConfigUpdated", {
+      body,
+      type,
+      isOwnRequest: appSessionId === $socket.appSessionId,
+    })
+    handleServerItem(payload, true, false)
+  })
+
+  /**
+   * project/list
+   * Reports or updates the list of available projects
+   * This usually gets called after we requested a list of all projects which the user has access too
+   */
+  $socket.on("getProjectList", (data) => {
+    if (!data || data.length < 1) {
+      return
+    }
+    log.socket("onGetProjectList", data)
+    $store.dispatch({ type: "projects/add", payload: data })
+  })
+
+  /**
+   * on joinConfirmation this means that we entered a new project with a new scope!
+   */
+  $socket.on(
+    "joinConfirmation",
+    (payload: {
+      project: { _id: string; account: string }
+      projectConfig: ProjectConfiguration
+      compositions: Composition[]
+      interactionLinks: InteractionLink[]
+    }) => {
+      const { project, projectConfig, compositions, interactionLinks } = payload
+
+      const roomId = project._id
+
+      if (!project) {
+        log.socket("onJoinConfirmation", "no Room")
+
+        return
+      }
+      log.socket("onJoinConfirmation", payload)
+
+      const resolveId = "join_" + roomId
+
+      $eventbus.once("store_actionResolved_" + resolveId, async (action) => {
+        // start bootstraping of project
+        // this event will be fired once the projectInit is finished which gets triggered down there
+        $store.dispatch({
+          type: "project/set",
+          payload: project,
+        })
+        $store.dispatch({
+          type: "ui/update",
+          payload: { loading: true },
+        })
+        await setupSpace(compositions, interactionLinks, projectConfig)
+
+        $eventbus.emit("ui_setupProject", roomId)
+      })
+      // Reset all store states which are project dependent.
+      $store.dispatch({
+        type: "projectInit",
+        resolveId,
+      })
+    },
+  )
+
+  /*
+   * leaveConfirm
+   * the backend reports when we leave a room, be it a resonse for our own
+   * request or forcefully.
+   */
+  $socket.on("leaveConfirmation", (data) => {
+    log.socket("onLeaveConfirmation", data)
+  })
+
+  /* login event
+   * the backend has approved our token
+   */
+  $socket.on("login", (data) =>
+    log.socket("onLogin", "Socket connection successfully authenticated"),
+  )
+  $socket.on("dataCreated", (payload) => {
+    const { body, appSessionId } = payload
+
+    log.socket("dataCreated", {
+      payload,
+      isOwnRequest: appSessionId === $socket.appSessionId,
+    })
+    handleServerItem(payload, true, false)
+    $eventbus.emit("socket_dataCreated", body)
+  })
+  $socket.on("dataDeleted", (payload) => {
+    const { body, appSessionId } = payload
+
+    log.socket("dataDeleted", {
+      payload,
+      isOwnRequest: appSessionId === $socket.appSessionId,
+    })
+    handleServerItem(payload, true, false)
+    $eventbus.emit("socket_dataDeleted", body)
+  })
+  /**
+   * data
+   * We received a data object from the backend
+   */
+  $socket.on("data", (payload) => {
+    const { body, appSessionId } = payload
+
+    log.socket("onData", {
+      payload,
+      isOwnRequest: appSessionId === $socket.appSessionId,
+    })
+    handleServerItem(payload, true, false)
+    $eventbus.emit("socket_dataUpdated", { offline: false, body })
+  })
+
+  /**
+   * New deployed frontend version available
+   */
+  $socket.on("newVersionAvailable", () => {
+    log.socket("onNewVersionAvailable", {})
+    userNotifier.newVersionAvailable()
+  })
+}
+
+export default registerSocketEvents
+export { registerSocketEvents }

package/services/frontend/src/core/store/index.ts

@@ -0,0 +1,185 @@
+/**
+ * Configure and build application store
+ *
+ * The application store is the single source of truth for any data living
+ * outside the scope and lifecycle of a component.
+ */
+import {
+  configureStore,
+  LoggerExtension,
+  ReduxDevtoolsExtension,
+  UndoExtension,
+  ImmutableStateExtension,
+} from "mini-rx-store"
+import {
+  getItemFromLookup,
+  getItemsFromLookup,
+  getValueFromLookupItem,
+  getValueFromLookup,
+  deepFreeze,
+} from "../lib/dataHelper"
+import getEnvVariable from "../lib/getEnvVariable"
+import { applicationState } from "./state"
+/* import feature reducers */
+import metaReducers from "./reducers/metaReducer"
+/* applications reducers */
+import { widgetsReducers, widgetEffects } from "./reducers/widgets"
+import projectsReducers from "./reducers/projects"
+import uiReducers from "./reducers/ui"
+import notificationsReducers from "./reducers/notifications"
+import { dataReducers } from "./reducers/data"
+import userReducers from "./reducers/user"
+import { projectReducers } from "./reducers/project"
+import {
+  interactionLinksReducers,
+  interactionLinksEffects,
+} from "./reducers/interactionLinks"
+import {
+  compositionsReducers,
+  compositionsEffects,
+} from "./reducers/compositions"
+import backendReducers from "./reducers/backend"
+import { queriesEffects, queriesReducers } from "./reducers/queries"
+import { queriesCacheReducers } from "./reducers/queriesCache"
+import log from "@racletteCore/lib/logger"
+import type { RacletteStore, StoreHelperGetState } from "@racletteCore"
+
+/* Apply different extensions depending on the environment */
+const extensions =
+  getEnvVariable("RACLETTE_DEBUG_MODE") === "true" ||
+  !getEnvVariable("RACLETTE_DEBUG_MODE")
+    ? [
+        new LoggerExtension(),
+        new ReduxDevtoolsExtension({
+          name: "Raclette",
+          trace: true,
+          traceLimit: 25,
+        }),
+
+        new UndoExtension(),
+        new ImmutableStateExtension(),
+      ]
+    : [new ImmutableStateExtension()]
+
+let store: RacletteStore
+
+const createStore = (eventbus, appSessionId: string): RacletteStore => {
+  if (store) {
+    return store
+  }
+  /* register application reducers */
+  const applicationReducers = {
+    compositions: compositionsReducers,
+    interactionLinks: interactionLinksReducers,
+    widgets: widgetsReducers,
+    ui: uiReducers,
+    notifications: notificationsReducers,
+    user: userReducers,
+    project: projectReducers,
+    projects: projectsReducers,
+    backend: backendReducers,
+    data: dataReducers,
+    queries: queriesReducers,
+    queriesCache: queriesCacheReducers,
+  }
+
+  /* create and configure the store */
+  const dispatchHook = (store) => {
+    const originalDispatch = store.dispatch
+
+    store.dispatch = async (action) => {
+      // Before action handling
+      originalDispatch(action)
+      // After action handling
+      if (action.resolveId) {
+        log.event(`store_actionResolved_${action.resolveId} is emitted`, action)
+        // if we have a resolveId given we will emit the action to this eventname so that we can trigger post action processing
+        eventbus.emit("store_actionResolved_" + action.resolveId, action)
+      }
+      if (action.actionResult) {
+        const actionResult = action.actionResult
+        if (actionResult.relationships.resolved.length) {
+          // if we have additional resolveId's to serve, lets do it!
+          actionResult.relationships.resolved.forEach((resolveId) => {
+            log.event(`store_actionResolved_${resolveId} is emitted`, action)
+            eventbus.emit("store_actionResolved_" + resolveId, action)
+          })
+        }
+      }
+    }
+
+    return store
+  }
+  const baseStore = configureStore({
+    extensions,
+    reducers: applicationReducers,
+    initialState: applicationState,
+    metaReducers,
+  })
+  dispatchHook(baseStore)
+  /* create and register events */
+  let stateLookup = {}
+  baseStore
+    .select((state) => state)
+    .subscribe((state) => {
+      stateLookup = state
+    })
+
+  store = Object.assign(baseStore, {
+    appSessionId,
+    hasChanges: (oldVal: string, newVal: string): boolean =>
+      JSON.stringify(oldVal) !== JSON.stringify(newVal),
+    getState: (params: string | any[] | StoreHelperGetState = {}): object => {
+      // Default values
+      let stateKey = ""
+      let attributeArr: any[] = []
+      let valueArr: any[] = []
+
+      if (typeof params === "string") {
+        stateKey = params
+      } else if (Array.isArray(params)) {
+        attributeArr = params
+      } else if (params && typeof params === "object") {
+        stateKey = params.stateKey || ""
+        attributeArr = params.attributeArr || []
+        valueArr = params.valueArr || []
+      }
+
+      let result
+
+      if (!stateKey && !attributeArr.length && !valueArr.length) {
+        result = stateLookup
+      } else if (stateKey && !attributeArr.length && !valueArr.length) {
+        result = getItemFromLookup(stateLookup, stateKey)
+      } else if (attributeArr.length && !stateKey && !valueArr.length) {
+        result = getValueFromLookup(stateLookup, attributeArr)
+      } else if (stateKey && attributeArr.length && !valueArr.length) {
+        result = getValueFromLookupItem(stateLookup, stateKey, attributeArr)
+      } else if (attributeArr.length && valueArr.length && !stateKey) {
+        result = getItemsFromLookup(stateLookup, attributeArr, valueArr)
+      }
+
+      if (result && typeof result === "object" && !Array.isArray(result)) {
+        result = deepFreeze(result)
+      }
+
+      return result
+    },
+  })
+
+  return store
+}
+
+const registerStoreEffects = (store) => {
+  const effects = []
+
+  widgetEffects(store).forEach((effect) => effects.push(effect))
+  compositionsEffects(store).forEach((effect) => effects.push(effect))
+  interactionLinksEffects(store).forEach((effect) => effects.push(effect))
+  queriesEffects(store).forEach((effect) => effects.push(effect))
+
+  effects.forEach((effect) => store.effect(effect))
+}
+
+export default createStore
+export { createStore, registerStoreEffects }

package/services/frontend/src/core/store/reducers/backend/index.ts

@@ -0,0 +1,36 @@
+/**
+ * socket reducer
+ */
+import { applicationState } from "../../state"
+import { clone } from "ramda"
+import reducerFromMap from "@racletteCore/lib/reducerFromMap"
+
+/**
+ * set socket status
+ */
+const statusSocket = (state, action) => {
+  const newState = clone(state)
+
+  newState.socket = { ...newState.socket, ...action.payload }
+  if (newState.socket.status === 1) {
+    newState.socket.health = 1
+  }
+
+  return newState
+}
+
+const statusSearch = (state, action) => {
+  const newState = clone(state)
+
+  newState.search = { ...newState.search, ...action.payload }
+
+  return newState
+}
+// map instead of switch statement
+const reducerMap = {
+  init: () => applicationState.backend,
+  "backend/socket/status": statusSocket,
+  "backend/search/status": statusSearch,
+}
+
+export default reducerFromMap(reducerMap)

package/services/frontend/src/core/store/reducers/compositionSlots/reducers.ts

@@ -0,0 +1,39 @@
+/**
+ * pages reducers
+ */
+import { applicationState } from "../../state"
+import { clone } from "ramda"
+
+/**
+ * project init
+ */
+const projectInit = (state, action) => applicationState.compositionSlots
+
+const addCompositionSlot = (state, action) => {
+  const newState = clone(state)
+
+  action.payload.forEach((composition) => {
+    newState[composition._id] = composition
+  })
+
+  return newState
+}
+
+const compositionsSet = (state, action) => {
+  const newState = {}
+
+  action.payload.forEach((composition) => {
+    newState[composition._id] = composition
+  })
+
+  return newState
+}
+
+/* update page */
+const compositionsUpdate = (state, action) => {
+  console.warn("Implement: compositionsUpdate()")
+
+  return state
+}
+
+export { addCompositionSlot, compositionsUpdate, projectInit, compositionsSet }

package/services/frontend/src/core/store/reducers/compositions/index.ts

@@ -0,0 +1,85 @@
+/**
+ * pages reducer
+ */
+import * as reducer from "./reducers"
+import reducerFromMap from "@racletteCore/lib/reducerFromMap"
+import { applicationState } from "@racletteCore/store/state"
+import { tap, distinctUntilChanged, ignoreElements } from "rxjs/operators"
+import { actions$, ofType } from "mini-rx-store"
+import type { Composition } from "@shared/types/core/Composition.types"
+import type { WidgetBase } from "../../types"
+import { v4 as uuidv4 } from "uuid"
+import { $store } from "@racletteCore"
+import log from "@racletteCore/lib/logger"
+
+const reducerMap = {
+  init: () => applicationState.pages,
+  projectInit: reducer.projectInit,
+  "compositions/add": reducer.compositionsAdd,
+  "compositions/set": reducer.compositionsSet,
+  "compositions/update": reducer.compositionsUpdate,
+}
+
+const makeWidget = (
+  widget: Partial<WidgetBase>,
+  widgets: WidgetBase[] = [],
+) => {
+  if (!widget) {
+    return widgets
+  }
+
+  if (!widget.uuid) {
+    widget.uuid = uuidv4()
+  }
+  const widgetsInState = $store.getState("widgets")
+  if (!widgetsInState[widget.uuid]) {
+    // make a generic widget state map
+    widgets.push({
+      uuid: widget.uuid,
+      name: widget.name,
+      pluginKey: widget.pluginKey,
+      author: widget.author,
+      version: widget.version,
+      config: widget.config || {},
+      public: widget.public || {},
+    })
+  } else {
+    log.store("pages/add effect, widget already defined", widget)
+  }
+
+  return widgets
+}
+
+const compositionsEffects = (store) => {
+  const add = actions$.pipe(
+    ofType("compositions/set", "compositions/add"),
+    distinctUntilChanged((prev, curr) => !store.hasChanges(prev, curr)),
+
+    tap((action) => {
+      const compositions: Composition[] = action.payload
+
+      compositions.forEach((composition) => {
+        let widgets: WidgetBase[] = []
+
+        composition.widgetsLayout.forEach((column) =>
+          column.forEach((slot) => {
+            widgets = makeWidget(slot.widget, widgets)
+          }),
+        )
+        // add page specific widget configs to state
+        if (widgets.length > 0) {
+          store.dispatch({
+            type: "widgets/add",
+            payload: widgets,
+          })
+        }
+      })
+    }),
+    ignoreElements(),
+  )
+
+  return [add]
+}
+const compositionsReducers = reducerFromMap(reducerMap)
+
+export { compositionsEffects, compositionsReducers }

package/services/frontend/src/core/store/reducers/compositions/reducers.ts

@@ -0,0 +1,52 @@
+/**
+ * pages reducers
+ */
+import { applicationState } from "../../state"
+
+/**
+ * project init
+ */
+const projectInit = (state, action) => applicationState.compositions
+
+const compositionsAdd = (state, action) => {
+  const newState = structuredClone(state)
+
+  action.payload.forEach((composition) => {
+    newState[composition._id] = composition
+  })
+
+  return newState
+}
+
+const compositionsSet = (state, action) => {
+  const newState = {}
+
+  action.payload.forEach((composition) => {
+    newState[composition._id] = composition
+  })
+
+  return newState
+}
+
+/* update page */
+const compositionsUpdate = (
+  state,
+  action: {
+    payload: {
+      compositionId: string
+      compositionParams: Record<string, string>
+    }
+  },
+) => {
+  const { compositionId, compositionParams } = action.payload
+  const newState = structuredClone(state)
+
+  newState[compositionId].data = {
+    ...(newState[compositionId].data || {}),
+    ...compositionParams,
+  }
+
+  return newState
+}
+
+export { compositionsAdd, compositionsUpdate, projectInit, compositionsSet }