@rpcbase/client 0.227.0 → 0.231.0

package/helpers/useStoredValue/batchedGetStoredValues.js

@@ -1,30 +0,0 @@
-/* @flow */
-import assert from "assert"
-import debug from "debug"
-
-import post from "../post"
-import createBatcher from "../createBatcher"
-
-const log = debug("useStoredValue:get")
-
-// we keep it just above the react rendering time, but it could even be a request animation frame
-const BATCH_TIMEOUT_MS = 4
-
-const batchedGetStoredValues = async(args) => {
-  log("batched call to args", args)
-
-  const keys = args.map((arg) => arg[0])
-
-  const res = await post("/rb-api/v1/stored-values/get", keys)
-  assert(res.status === "ok")
-
-  if (debug.enabled) {
-    for (let i = 0; i < args.length; i++) {
-      log(args[i][0], res.values[i])
-    }
-  }
-
-  return res.values
-}
-
-export default createBatcher(batchedGetStoredValues, BATCH_TIMEOUT_MS)

package/helpers/useStoredValue/index.js

@@ -1,107 +0,0 @@
-/* @flow */
-import {useEffect, useState, useRef, useCallback} from "react"
-import _throttle from "lodash/throttle"
-import isEqual from "fast-deep-equal/react"
-
-import getUid from "../../auth/getUid"
-import storage from "../../storage"
-
-import batchedGetStoredValues from "./batchedGetStoredValues"
-import setStoredValues from "./setStoredValues"
-
-
-const DEFAULT_REMOTE = true
-const UPDATE_THROTTLE_DELAY = 300
-
-export const useStoredValue = (_key, defaultValueOrFn = null, options = {}) => {
-  const uid = getUid()
-  const key = `${uid}.${_key}`
-
-  const hasRemote = typeof options.remote === "boolean" ? options.remote : DEFAULT_REMOTE
-
-  const previousKey = useRef()
-
-  const getInitialState = () => {
-    const defaultValue =
-      typeof defaultValueOrFn === "function" ? defaultValueOrFn() : defaultValueOrFn
-
-    if (!_key) return defaultValue
-
-    const val = storage.getItem(key)
-
-    return typeof val !== "undefined" && val !== null ? val : defaultValue
-  }
-
-  const [value, setValue] = useState(getInitialState())
-
-  // reload initial state when key changes
-  useEffect(() => {
-    const initialStateForKey = getInitialState()
-    if (!isEqual(initialStateForKey, value)) {
-      setValue(initialStateForKey)
-    }
-  }, [key])
-
-
-  const refresh = useCallback(async() => {
-    const nextVal = await batchedGetStoredValues(key)
-
-    // TODO: we check against null here because localStorage of a non existing key returns null, but this is wrong, it should be returning undefined, in case we want to be able to store a null value
-    if (typeof nextVal !== "undefined" && nextVal !== null && !isEqual(nextVal, value)) {
-      setValue(nextVal)
-      // add the value to local storage in case it wasn't present
-      storage.setItem(key, nextVal)
-    }
-  }, [key])
-
-
-  useEffect(() => {
-    if (!hasRemote) return
-    if (!key) return
-    // skip when value is still undefined -> it hasnt loaded from cache / default value
-    if (typeof value === "undefined") return
-
-    if (previousKey.current !== key) {
-      refresh()
-      previousKey.current = key
-    }
-  }, [hasRemote, key, value, setValue])
-
-  // TODO: are there several instances of this function that run for differents keys ?
-  const throttledUpdateRemote = useCallback(
-    _throttle(
-      async(newVal) => {
-        await setStoredValues({
-          values: [
-            {
-              key,
-              value: newVal,
-            },
-          ],
-        })
-      },
-      UPDATE_THROTTLE_DELAY,
-      {leading: false, trailing: true},
-    ),
-    [key],
-  )
-
-  const updateValue = async(newValOrFn) => {
-    const newVal = typeof newValOrFn === "function" ? newValOrFn(value) : newValOrFn
-
-    if (newVal !== value) {
-      setValue(newVal)
-    }
-    if (!_key) return
-
-    storage.setItem(key, newVal)
-
-    if (hasRemote) {
-      throttledUpdateRemote(newVal)
-    }
-  }
-
-  return [value, updateValue]
-}
-
-export default useStoredValue

package/helpers/useStoredValue/setStoredValues.js

@@ -1,14 +0,0 @@
-/* @flow */
-import assert from "assert"
-
-import post from "../post"
-
-
-const setStoredValue = async(payload) => {
-  const res = await post("/rb-api/v1/stored-values/set", payload)
-
-  assert(res.status === "ok")
-  return res
-}
-
-export default setStoredValue

package/i18n/en/rb.nav.json

@@ -1,13 +0,0 @@
-{
-  "toggle_notifications": "Toggle Notifications",
-  "notifications_settings": "Notifications Settings",
-  "search_anything": {
-    "placeholder": "Search Anything..."
-  },
-  "account_settings": "Account Settings",
-  "organization": "Oranization",
-  "billing": "Billing",
-  "switch_accounts": "Switch Accounts",
-  "add_account": "Add Account",
-  "sign_out": "Sign Out"
-}

package/i18n/en/rb.sign_in.json

@@ -1,11 +0,0 @@
-{
-  "title": "Sign In",
-  "dont_have_account": "Don't have an account?",
-  "sign_up_here": "Sign up here",
-  "or": "OR",
-  "email_address": "Email Address",
-  "email_placeholder": "name@example.com",
-  "password": "Password",
-  "forgot_password": "Forgot your password?",
-  "submit_btn": "Sign in"
-}

package/i18n/en/rb.sign_out.json

@@ -1,5 +0,0 @@
-{
-  "title": "Sign Out",
-  "click_here_signout": "Click here to sign out of your account:",
-  "success_text": "Signed out succesfully"
-}

package/i18n/fr/rb.sign_in.json

@@ -1,11 +0,0 @@
-{
-  "title": "Connexion",
-  "dont_have_account": "Vous n'avez pas de compte?",
-  "sign_up_here": "Créez un compte ici",
-  "or": "OU",
-  "email_address": "Addresse Email",
-  "email_placeholder": "nom@example.com",
-  "password": "Mot de passe",
-  "forgot_password": "Mot de passe oublié?",
-  "submit_btn": "Connexion"
-}

package/i18n/fr/rb.sign_out.json

@@ -1,5 +0,0 @@
-{
-  "title": "Déconnexion",
-  "click_here_signout": "Cliquez ici pour vous déconnecter:",
-  "success_text": "Opération complétée avec succès"
-}

package/i18n/index.js

@@ -1,63 +0,0 @@
-/* @flow */
-import i18next from "i18next"
-import {initReactI18next} from "react-i18next"
-import ChainedBackend from "i18next-chained-backend"
-import resourcesToBackend from "i18next-resources-to-backend"
-
-import {getLocaleFromCode} from "@rpcbase/std"
-
-import {RB_DEFAULT_LOCALE, RB_LOCALES} from "env"
-
-
-const RB_LOCALE_KEY = "rb.i18n_locale"
-
-const DEFAULT_LOCALE = RB_DEFAULT_LOCALE || "en"
-const SUPPORTED_LOCALES = RB_LOCALES
-  ? RB_LOCALES.split(",").map((l) => l.trim())
-  : ["en"]
-
-// https://github.com/i18next/i18next-browser-languageDetector
-
-// get stored locale or fallback to navigator
-let locale = localStorage.getItem(RB_LOCALE_KEY)
-if (!locale) {
-  locale = navigator.language
-}
-
-// DO NOT call this function directly, it is injected from babel-plugin-i18next-client by the bundler
-export const initializeI18N = async(backendFn) => {
-  i18next
-    .use(ChainedBackend)
-    .use(initReactI18next)
-    .init({
-      lng: locale,
-      fallbackLng: (code) => {
-        const val = getLocaleFromCode({
-          code,
-          supported_locales: SUPPORTED_LOCALES,
-          default_locale: DEFAULT_LOCALE,
-        })
-        return val
-      },
-      defaultNS: "common",
-      backend: {
-        backends: [
-          // rb internal i18n
-          resourcesToBackend(
-            (lng, ns) =>
-              import(/* webpackChunkName: "rb-i18n" */ `./${lng}/${ns}.json`),
-          ),
-          // users's i18n
-          resourcesToBackend(backendFn),
-        ],
-      },
-      interpolation: {
-        escapeValue: false,
-      },
-    })
-
-  // save preference to local storage so it works on reload
-  i18next.on("languageChanged", (lng) => {
-    localStorage.setItem(RB_LOCALE_KEY, lng)
-  })
-}

package/index.js

@@ -1,6 +0,0 @@
-/* @flow */
-import useRPC from "./helpers/useRPC"
-import useStoredValue from "./helpers/useStoredValue"
-import {getUid} from "./auth/getUid"
-
-export {useRPC, useStoredValue, getUid}

package/isEqualValues.js

@@ -1,47 +0,0 @@
-/* @flow */
-const isEqual = require("fast-deep-equal/react")
-
-
-const isPlainObject = (obj) => {
-  return Object.prototype.toString.call(obj) === "[object Object]"
-}
-
-const sortValuesConsideringObjects = (values) => {
-  return values
-    .map(val => (isPlainObject(val) ? sortValuesConsideringObjects(Object.values(val)) : val))
-    .sort()
-}
-
-const isEqualValues = (a, b) => {
-  // Extract values and sort them if they belong to plain objects
-  const valsA = isPlainObject(a) ? sortValuesConsideringObjects(Object.values(a)) : a
-  const valsB = isPlainObject(b) ? sortValuesConsideringObjects(Object.values(b)) : b
-
-  if (valsA === null && valsB === null) {
-    return true
-  }
-
-  if (Array.isArray(valsA) || Array.isArray(valsB)) {
-    return isEqual(valsA, valsB)
-  }
-
-  // Check value count
-  if (valsA.length !== valsB.length) return false
-
-  // Compare the sorted arrays of values
-  for (let i = 0; i < valsA.length; i++) {
-    if (typeof valsA[i] === "object" && typeof valsB[i] === "object") {
-      if (!isEqualValues(valsA[i], valsB[i])) {
-        return false
-      }
-    } else {
-        if (!isEqual(valsA[i], valsB[i])) {
-          return false
-        }
-    }
-  }
-  return true
-}
-
-
-module.exports = isEqualValues

package/jest.config.js

@@ -1,16 +0,0 @@
-module.exports = {
-  testEnvironment: "jsdom",
-  transform: {
-    "^.+\\.js$": ["babel-jest", {
-      presets: ["@babel/preset-react"],
-      plugins: [
-        "@babel/plugin-transform-runtime",
-        "@babel/plugin-transform-modules-commonjs",
-      ],
-    }],
-  },
-  moduleNameMapper: {
-    "^react-native$": "react-native-web",
-  },
-  moduleFileExtensions: ["jest.js", "web.js", "js", "json"],
-}

package/notifications/Notification/index.js

@@ -1,36 +0,0 @@
-/* @flow */
-import * as React from "react"
-import { useCallback } from "react";
-
-import type {Notification as NotificationType} from "types/notification"
-
-import "./notification.scss"
-
-type Props = {
-  notification: NotificationType,
-  onClick?: () => void,
-}
-
-const Notification = ({ ref, notification, onClick }: Props) => {
-  const handleClick = useCallback(() => {
-    if (onClick) {
-      onClick();
-    }
-  }, [onClick]);
-
-  return (
-    <a
-      className={cx(["dropdown-item", notification.ack && "disabled"])}
-      href="#"
-      ref={ref}
-      onClick={handleClick}
-    >
-      <span>{notification.title}</span>
-      <p className="text-secondary mb-0" style={{whiteSpace: "initial"}}>
-        {notification.description}
-      </p>
-    </a>
-  );
-}
-
-export default Notification

package/notifications/Notification/notification.scss

@@ -1 +0,0 @@
-@import "helpers";

package/notifications/NotificationItem/HeaderStatus.js

@@ -1,93 +0,0 @@
-/* @flow */
-import {motion} from "framer-motion"
-import {useEffect, useRef, useState} from "react"
-
-import ActivityIndicator from "../../ui/ActivityIndicator"
-import LottiePlayer from "../../ui/LottiePlayer"
-
-import {SPRING_BOUNCY} from "../../ui/springs"
-
-import checkmarkAnimation from "../../ui/animations/checkmark.json"
-
-// TODO: we should have a way to unmount loader when animation complete
-const HeaderStatus = ({isLoading, status}) => {
-  const playerRef = useRef()
-
-  const initiallyLoading = useRef(isLoading)
-
-  const [hasLoader, setHasLoader] = useState(isLoading)
-
-  const [statusAnimatedVals, setStatusAnimatedVals] = useState({})
-  const [loaderAnimatedVals, setLoaderAnimatedVals] = useState({})
-
-  useEffect(() => {
-    // set initial seeker position, TODO: this doesn't work without the animation frame
-    requestAnimationFrame(() => {
-      playerRef.current?.setSeeker(16, false)
-    })
-  }, [])
-
-  const runTransition = () => {
-    setStatusAnimatedVals({scale: 1, opacity: 1})
-    setLoaderAnimatedVals({scale: 0, opacity: 0})
-    requestAnimationFrame(() => {
-      playerRef.current?.play()
-    })
-  }
-
-  useEffect(() => {
-    // TODO: why was it checking on initiallyLoading.current ?
-    // if (!isLoading && initiallyLoading.current) {
-    if (!isLoading) {
-      runTransition()
-    }
-  }, [isLoading])
-
-  const onLoaderAnimationComplete = () => {
-    setHasLoader(false)
-  }
-
-  return (
-    <div style={{position: "relative", background: "red", width: 28}}>
-      <motion.div
-        className="status-icon"
-        style={{position: "absolute", top: -11}}
-        initial={{scale: 0.5, opacity: 0}}
-        // initial={{scale: 1, opacity: 1}}
-        transition={SPRING_BOUNCY}
-        animate={statusAnimatedVals}
-      >
-        <LottiePlayer
-          className={cx("", {})}
-          ref={playerRef}
-          autoplay={false}
-          loop={false}
-          speed={1}
-          keepLastFrame={true}
-          src={checkmarkAnimation}
-          style={{
-            height: `${23}px`,
-            width: `${23}px`,
-            // opacity: .15,
-          }}
-          // onEvent={this.onPlayerEvent}
-        />
-      </motion.div>
-
-      {hasLoader && (
-        <motion.div
-          style={{position: "absolute", left: 1, top: -9}}
-          initial={{scale: 1, opacity: 1}}
-          // initial={{scale: 1, opacity: 0}}
-          transition={SPRING_BOUNCY}
-          animate={loaderAnimatedVals}
-          onAnimationComplete={onLoaderAnimationComplete}
-        >
-          <ActivityIndicator size={19} />
-        </motion.div>
-      )}
-    </div>
-  )
-}
-
-export default HeaderStatus

package/notifications/NotificationItem/index.js

@@ -1,65 +0,0 @@
-/* @flow */
-import assert from "assert"
-import {useRef} from "react"
-import Toast from "react-bootstrap/Toast"
-
-import {useNotifications} from "../NotificationsContext"
-
-import HeaderStatus from "./HeaderStatus"
-
-// TODO: mv to rb server
-// import ack_notification from "rpc!server/notifications/ack_notification"
-
-import "./notification-item.scss"
-
-
-export const NotificationItem = ({ nodeRef, notification }) => {
-  const { setNotifications } = useNotifications()
-
-  const { isLoading = false, status = "success", zIndex = 999 } = notification
-
-  const onClick = () => {
-    console.log("onclicknotif", notification)
-  }
-
-  // remove notification on close
-  const onClose = async () => {
-    console.log("onClose!!!")
-    if (notification.id) {
-      console.warn("ACK NOTIFICATION not copied to rb-server yet")
-      // const res = await ack_notification({
-      //   notification_id: notification.id,
-      //   ack_at_ms: Date.now(),
-      // })
-      // assert(res.status === "ok")
-    }
-
-    setNotifications((current) => {
-      return current.filter((n) => n.id !== notification.id)
-    })
-  }
-
-  // no header when no body
-  const hasBody = !!notification.body
-
-  return (
-      <Toast
-        ref={nodeRef}
-        id={notification.id}
-        className={cx("notification-item mt-2 notification-toast", {"has-no-body": !hasBody})}
-        style={{position: "relative", zIndex}}
-        onClose={onClose}
-        animation={false}
-      >
-        <Toast.Header className="ps-2 py-2" closeButton={true}>
-          {notification.icon ? <div>{"<IC>"}</div> : <HeaderStatus isLoading={isLoading} status={status} />}
-
-          <div className="me-auto">{notification.title}</div>
-          {notification.type === "workflow" && <small>{notification.formatted_timestamp}</small>}
-          {notification.type === "intent" && <small>INTENT</small>}
-        </Toast.Header>
-
-        {hasBody && <Toast.Body onClick={onClick}>{notification.body}</Toast.Body>}
-      </Toast>
-  )
-}

package/notifications/NotificationItem/notification-item.scss

@@ -1,25 +0,0 @@
-@import "helpers";
-
-.notification-item.toast {
-  max-width: 260px;
-
-  .toast-header {
-    color: $gray-900;
-    font-weight: 600;
-  }
-
-  &.has-no-body {
-    background: $white !important;
-
-    .toast-header {
-      background: transparent !important;
-      border-bottom: none;
-    }
-  }
-
-  svg {
-    path {
-      fill: $green-500 !important;
-    }
-  }
-}

package/notifications/NotificationsContainer/index.js

@@ -1,37 +0,0 @@
-/* @flow */
-import {createRef} from "react"
-import {CSSTransition, TransitionGroup} from "react-transition-group"
-
-import ToastContainer from "react-bootstrap/ToastContainer"
-
-// import {useQuery} from "@rpcbase/client/rts"
-
-import {useNotifications} from "../NotificationsContext"
-import {NotificationItem} from "../NotificationItem"
-
-// import useLLTs from "./useLLTs"
-
-import "./notifications-container.scss"
-
-export const NotificationsContainer = () => {
-  const {notifications} = useNotifications()
-
-  const renderNotification = (notification, i) => {
-    const key = notification.id
-    const nodeRef = createRef()
-
-    return (
-      <CSSTransition key={notification.id} nodeRef={nodeRef} timeout={200} classNames="notification-item">
-        <NotificationItem key={key} nodeRef={nodeRef} notification={notification} />
-      </CSSTransition>
-    )
-  }
-
-  return (
-    <ToastContainer id="notifications-container" position="bottom-end" className="pb-4 pe-3 ps-4">
-      <TransitionGroup className="transition-list">
-        {notifications.map(renderNotification)}
-      </TransitionGroup>
-    </ToastContainer>
-  )
-}

package/notifications/NotificationsContainer/notifications-container.scss

@@ -1,38 +0,0 @@
-@import "helpers";
-
-$transition-duration: 200ms;
-
-#notifications-container {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  max-height: 100vh;
-  overflow-y: scroll;
-
-  .action-notification {
-    cursor: pointer;
-  }
-
-  .transition-list {
-    transition: max-height $transition-duration ease-in-out;
-  }
-
-  .notification-item-enter {
-    opacity: 0;
-  }
-
-  .notification-item-enter-active {
-    opacity: 1;
-    transition: opacity 400ms;
-  }
-
-  .notification-item-exit {
-    opacity: 1;
-  }
-
-  .notification-item-exit-active {
-    transform: translateX(390px);
-
-    transition: all $transition-duration ease-out;
-  }
-}

package/notifications/NotificationsContainer/useLLTs.js

@@ -1,28 +0,0 @@
-/* @flow */
-import assert from "assert"
-import {useEffect, useState} from "react"
-
-// TODO: fix ltts import to rb
-// import get_llts from "rpc!server/notifications/llt/get_llts"
-
-
-const useLLTs = () => {
-  const [llts, setLLTs] = useState([])
-
-  useEffect(() => {
-    const load = async() => {
-      // const res = await get_llts({
-      //   env_id: envContext.envId,
-      // })
-      const res =  {status: "ok", llts: []}
-      assert(res.status === "ok", "unable to retrieve llts")
-      setLLTs(res.llts)
-    }
-
-    load()
-  }, [])
-
-  return llts
-}
-
-export default useLLTs