@carbonorm/carbonreact 3.6.2 → 4.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbonorm/carbonreact",
   "license": "MIT",
-  "version": "3.6.2",
+  "version": "4.0.1",
   "browser": "dist/index.umd.js",
   "module": "dist/index.esm.js",
   "main": "dist/index.cjs.js",

package/src/CarbonReact.tsx

@@ -2,15 +2,21 @@ import {clearCache} from "@carbonorm/carbonnode";
 import changed from "hoc/changed";
 import {GlobalHistory} from "hoc/GlobalHistory";
 import hexToRgb from "hoc/hexToRgb";
-import {Component, Context, createContext, useContext, ReactElement, ReactNode} from 'react';
+import {Component, Context, createContext, ReactElement, ReactNode} from 'react';
 import {ToastContainer} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.min.css';
 import BackendThrowable from 'components/Errors/BackendThrowable';
 import Nest from 'components/Nest/Nest';
 import {initialRestfulObjectsState, iRestfulObjectArrayTypes} from "variables/C6";
 import CarbonWebSocket, {iCarbonWebSocketProps} from "./components/WebSocket/CarbonWebSocket";
+import updateRestfulObjectArrays, {iUpdateRestfulObjectArrays} from "./hoc/updateRestfulObjectArrays";
+import deleteRestfulObjectArrays, {iDeleteRestfulObjectArrays} from "./hoc/deleteRestfulObjectArrays";
 
 
+export type tStatefulApiData<T extends {
+    [key: string]: any
+} = {}> = T[] | undefined | null;
+
 // our central container, single page application
 export interface iCarbonReactState {
     alertsWaiting: any[],
@@ -42,33 +48,33 @@ export function isJsonString(str: string) {
     return true;
 }
 
-
-// Create a context
-
 const persistentStateMap = new Map<string, iCarbonReactState>();
 
-abstract class CarbonReact<P = {}, S = {}> extends Component<{
+abstract class CarbonReact<P = {}, S extends { [key: string]: any; } = {}> extends Component<{
     children?: ReactNode | ReactNode[],
     instanceId?: string,
-    websocket?: iCarbonWebSocketProps | boolean
+    websocket?: Omit<iCarbonWebSocketProps, "instance"> | boolean
 } & P, S & iCarbonReactState> {
 
     context: Context<S & iCarbonReactState> = createContext(this.state);
 
     // Private static member
-    protected static instance:  CarbonReact & Component<{
-        children?: ReactNode | ReactNode[],
-    } & any, any & iCarbonReactState>;
+    // we actually implement this in the constructor todo - test this
+    protected static instance: CarbonReact;
 
-    protected static getState() {
-        return CarbonReact.instance.state;
-    }
+    protected target: typeof CarbonReact;
 
-    protected static useContext(){
-        return () => useContext(CarbonReact.instance.context);
-    }
+    protected updateRestfulObjectArrays = <ObjectType extends { [key: string]: any; } = {}>
+    (rest: Omit<iUpdateRestfulObjectArrays<ObjectType, S, P>, "instance">) => updateRestfulObjectArrays<ObjectType, S, P>({
+        instance: this,
+        ...rest
+    });
 
-    protected ;
+    protected deleteRestfulObjectArrays = <ObjectType extends { [key: string]: any } = {}>
+    (rest: Omit<iDeleteRestfulObjectArrays<ObjectType, S, P>, "instance">) => deleteRestfulObjectArrays<ObjectType, S, P>({
+        instance: this,
+        ...rest
+    });
 
     static lastLocation = window.location.pathname;
 
@@ -76,13 +82,22 @@ abstract class CarbonReact<P = {}, S = {}> extends Component<{
     // noinspection JSUnusedGlobalSymbols
     static whyDidYouRender = true;
 
-    protected constructor(props: { children?: ReactNode | ReactNode[]; shouldStatePersist?: boolean | undefined; websocket?: boolean | iCarbonWebSocketProps | undefined; } & P) {
+
+    protected constructor(props: {
+        children?: ReactNode | ReactNode[];
+        shouldStatePersist?: boolean | undefined;
+        websocket?: boolean | iCarbonWebSocketProps | undefined;
+    } & P) {
 
         super(props);
 
+        this.target = new.target;
+
         console.log('CarbonORM TSX CONSTRUCTOR');
 
-        Object.assign(this, {
+        // this is the magic that allows each class that's extends this to have a static instance - a singleton pattern
+        // new.target is a meta-property introduced in ES6 that references the constructor that was directly invoked with the new keyword.
+        Object.assign(new.target, {
             instance: this
         })
 
@@ -112,7 +127,6 @@ abstract class CarbonReact<P = {}, S = {}> extends Component<{
     }
 
 
-
     shouldComponentUpdate(
         nextProps: Readonly<any>,
         nextState: Readonly<iCarbonReactState>,
@@ -155,7 +169,7 @@ abstract class CarbonReact<P = {}, S = {}> extends Component<{
 
             return <>
                 {nest}
-                <BackendThrowable/>
+                <BackendThrowable instance={CarbonReact.instance}/>
             </>;
 
         }
@@ -165,7 +179,8 @@ abstract class CarbonReact<P = {}, S = {}> extends Component<{
         return <>
             <GlobalHistory/>
             {this.props.websocket &&
-                <CarbonWebSocket {...(true === this.props.websocket ? {} : this.props.websocket)} />}
+                <CarbonWebSocket {...(true === this.props.websocket ? {} : this.props.websocket)}
+                                 instance={CarbonReact.instance}/>}
             <Context value={this.state}>
                 {this.props.children}
             </Context>

package/src/components/Alert/Alert.tsx

@@ -2,7 +2,7 @@ import classNames from "classnames";
 import CarbonReact from "CarbonReact";
 import {ReactNode} from "react";
 import Popup from "components/Popup/Popup";
-import  getStyles from "hoc/getStyles";
+import getStyles from "hoc/getStyles";
 import {faClose} from "@fortawesome/free-solid-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import isProduction from "variables/isProduction";
@@ -21,6 +21,7 @@ export interface iAlertButtonOptions {
 export interface iAlert {
     title: string,
     text: string,
+    instance: CarbonReact,
     component?: ReactNode,
     icon?: "warning" | "error" | "success" | "info" | "question" | null,
     buttons?: (iAlertButtonOptions)[] | undefined, //['No thanks!', 'Yes, Delete it'],
@@ -34,7 +35,7 @@ export interface iAlert {
 
 export function addAlert(props: iAlert) {
 
-    CarbonReact.instance.setState(previousState => ({
+    props.instance.setState(previousState => ({
         alertsWaiting: previousState.alertsWaiting.length === 0
             ? [props]
             : [...previousState.alertsWaiting, props]
@@ -42,9 +43,11 @@ export function addAlert(props: iAlert) {
 
 }
 
-export default function Alert() {
+export default function Alert({
+                                  instance
+                              }: { instance:   CarbonReact }) {
 
-    const {alertsWaiting, backendThrowable} = CarbonReact.instance.state
+    const {alertsWaiting, backendThrowable} = instance.state
 
     let alert: iAlert | undefined = undefined;
 
@@ -66,9 +69,10 @@ export default function Alert() {
             })
         }
 
-        const backendThrowable = CarbonReact.instance.state.backendThrowable[0]
+        const backendThrowable = instance.state.backendThrowable[0]
 
         alert = {
+            instance: instance,
             title: "Oh no! An issue occurred!",
             text: backendThrowable?.['DropInGaming\\PHP\\Errors\\DropException'] ?? 'An unknown issue occurred. Please try again.',
             timeout: 0,
@@ -81,7 +85,7 @@ export default function Alert() {
 
                 if (value === 'Expand') {
 
-                    CarbonReact.instance.setState(previousState => {
+                    instance.setState(previousState => {
 
                         let backendThrowable = previousState.backendThrowable.pop()
 
@@ -99,7 +103,7 @@ export default function Alert() {
                     })
 
                 } else {
-                    CarbonReact.instance.setState(previousState => ({
+                    instance.setState(previousState => ({
                         backendThrowable: previousState.backendThrowable.slice(1)
                     }))
                 }
@@ -120,9 +124,7 @@ export default function Alert() {
 
     const timeout = alert?.timeout || 15000
 
-    const bootstrap = CarbonReact.instance
-
-    const dig = getStyles()
+    const styles = getStyles()
 
     let cancelTimeout: any = null
 
@@ -132,7 +134,7 @@ export default function Alert() {
         }
 
         if (alert?.backendThrowable === undefined) {
-            bootstrap.setState(previousState => ({
+            instance.setState(previousState => ({
                 alertsWaiting: previousState.alertsWaiting.slice(1)
             }))
         }
@@ -153,19 +155,19 @@ export default function Alert() {
     }
 
     return <Popup handleClose={handleClose}>
-        <div className={classNames("model-content", dig.rounded0, dig.border0)} style={{
+        <div className={classNames("model-content", styles.rounded0, styles.border0)} style={{
             maxWidth: '75vw',
             maxHeight: '75vh',
         }}>
-            <div className={classNames(dig.modalHeader, dig.rounded0, dig.border0, {
+            <div className={classNames(styles.modalHeader, styles.rounded0, styles.border0, {
                 // icon?: "warning" | "error" | "success" | "info" | "question"
-                [dig.bg_primary]: "info" === alert.icon || alert.icon === undefined || alert.icon === null,
-                [dig.bg_success]: "success" === alert.icon,
-                [dig.bg_warning]: "warning" === alert.icon,
-                [dig.bg_danger]: "error" === alert.icon, // TODO - change to red
-                [dig.bgPrimary]: "question" === alert.icon,
+                [styles.bg_primary]: "info" === alert.icon || alert.icon === undefined || alert.icon === null,
+                [styles.bg_success]: "success" === alert.icon,
+                [styles.bg_warning]: "warning" === alert.icon,
+                [styles.bg_danger]: "error" === alert.icon, // TODO - change to red
+                [styles.bgPrimary]: "question" === alert.icon,
             })}>
-                <h3 className={classNames(dig.modalTitle, dig.textDark)} id="staticBackdropLabel">
+                <h3 className={classNames(styles.modalTitle, styles.textDark)} id="staticBackdropLabel">
                     #{alertWaiting} {alert.title}
                 </h3>
                 <div onClick={handleClose}>
@@ -174,26 +176,27 @@ export default function Alert() {
                         size={'xl'}/>
                 </div>
             </div>
-            <div className={classNames(dig.modalBody, dig.border0, dig.textWhite)}>
-                <div className={dig.textCenter}>
+            <div className={classNames(styles.modalBody, styles.border0, styles.textWhite)}>
+                <div className={styles.textCenter}>
                     {alert.text}
                     {alert.component}
                 </div>
             </div>
             {undefined !== alert.buttons &&
-                <div className={classNames(dig.modalFooter, dig.border0, dig.rounded0)}>
-                    {alert.footerText && <div className={classNames(dig.textCenter, dig.textWhite)}>{alert.footerText}</div>}
+                <div className={classNames(styles.modalFooter, styles.border0, styles.rounded0)}>
+                    {alert.footerText &&
+                        <div className={classNames(styles.textCenter, styles.textWhite)}>{alert.footerText}</div>}
 
                     {alert.buttons?.map((button: iAlertButtonOptions, index: number) => {
 
                         return <button key={index}
-                                       className={classNames(dig.btn, dig.btnLg, {
+                                       className={classNames(styles.btn, styles.btnLg, {
                                            // todo - color: "default" | "primary" | "secondary" | "inherit" | "danger" | "info" | "success" | "warning" | undefined,
-                                           [dig.bg_success]: "success" === button.color,
-                                           [dig.bg_danger]: "danger" === button.color,
-                                           [dig.bg_primary]: "primary" === button.color,
-                                           [dig.bg_warning]: "warning" === button.color,
-                                       }, "btn-Yes", dig.rounded0)}
+                                           [styles.bg_success]: "success" === button.color,
+                                           [styles.bg_danger]: "danger" === button.color,
+                                           [styles.bg_primary]: "primary" === button.color,
+                                           [styles.bg_warning]: "warning" === button.color,
+                                       }, "btn-Yes", styles.rounded0)}
                                        onClick={() => {
                                            handleClose()
                                            alert?.then?.(button.value ?? button.text)

package/src/components/Errors/BackendThrowable.tsx

@@ -3,18 +3,20 @@ import OutsideClickHandler from 'react-outside-click-handler';
 import CarbonReact from "../../CarbonReact";
 import {ReactElement} from "react";
 
-export default () : ReactElement => {
+export default (props: {
+    instance: CarbonReact,
+}): ReactElement => {
 
-    const bootstrap = CarbonReact.instance;
+    const {instance} = props;
 
-    const currentThrowable = bootstrap.state.backendThrowable[0];
+    const currentThrowable = instance.state.backendThrowable[0];
 
-    console.log([bootstrap.state.backendThrowable, currentThrowable]);
+    console.log([instance.state.backendThrowable, currentThrowable]);
 
     return <div className={styles.maintenanceHero}>
         <h1 className={styles.httpStatusCode}>{currentThrowable?.status || 500}</h1>
         <OutsideClickHandler
-            onOutsideClick={() => bootstrap.setState(currentState => ({ backendThrowable: currentState.backendThrowable.slice(1) }))}>
+            onOutsideClick={() => instance.setState(currentState => ({backendThrowable: currentState.backendThrowable.slice(1)}))}>
             <div className={styles.centeredContainer}>
                 {Object.keys(currentThrowable).map((key, index) => {
 
@@ -26,14 +28,15 @@ export default () : ReactElement => {
                         <div className={styles.errorTextGeneral}> &gt; <span className={styles.errorKeys}>{key}</span>:
                             {valueIsString
                                 ? (valueIsCode ? <div
-                                        style={{ backgroundColor: 'black', fontSize: 'xx-small' }}
-                                        dangerouslySetInnerHTML={{ __html: currentThrowable[key] }} /> :
+                                        style={{backgroundColor: 'black', fontSize: 'xx-small'}}
+                                        dangerouslySetInnerHTML={{__html: currentThrowable[key]}}/> :
                                     <i className={styles.errorValues}>&quot;{currentThrowable[key]}&quot;</i>)
                                 : ''}
                         </div>
                         {valueIsString
                             ? ''
-                            : <pre className={styles.errorPre}>{JSON.stringify(currentThrowable[key], undefined, 4)}</pre>}
+                            : <pre
+                                className={styles.errorPre}>{JSON.stringify(currentThrowable[key], undefined, 4)}</pre>}
                     </div>;
                 })}
             </div>

package/src/components/WebSocket/CarbonWebSocket.tsx

@@ -1,4 +1,4 @@
-import CarbonReact, {isJsonString} from "CarbonReact";
+import  CarbonReact, {isJsonString} from "CarbonReact";
 import {addAlert} from "../Alert/Alert";
 import {useEffectOnce} from "../../api/hoc/useEffectOnce";
 import {tC6Tables, tC6RestApi} from "@carbonorm/carbonnode";
@@ -8,6 +8,7 @@ export interface iCarbonWebSocketProps {
     url?: string,
     timeoutSeconds?: number,
     heartbeatSeconds?: number,
+    instance: CarbonReact,
     TABLES?: tC6Tables,
     WsLiveUpdates?: tC6RestApi,
 }
@@ -16,15 +17,19 @@ export interface iCarbonWebSocketProps {
  * @function connect
  * This function establishes a connection with the websocket and also ensures constant reconnection if connection closes
  **/
-export function initiateWebsocket({
-                                      TABLES = undefined,
-                                      WsLiveUpdates = undefined,
-                                      url = 'ws' + (window.location.protocol === 'https:' ? 's' : '') + '://' + window.location.host + '/carbonorm/websocket',
-                                      timeoutSeconds = 250,
-                                      heartbeatSeconds = 60
-                                  }: iCarbonWebSocketProps = {}) {
+export function initiateWebsocket(props: iCarbonWebSocketProps) {
+
+    let {
+        instance,
+        TABLES = undefined,
+        WsLiveUpdates = undefined,
+        url = 'ws' + (window.location.protocol === 'https:' ? 's' : '') + '://' + window.location.host + '/carbonorm/websocket',
+        timeoutSeconds = 250,
+        heartbeatSeconds = 60
+    } = props;
+
+    const {websocket} = instance.state;
 
-    const {websocket} = CarbonReact.instance.state;
 
     if (!("WebSocket" in window)) {
 
@@ -33,6 +38,7 @@ export function initiateWebsocket({
             title: 'Browser does not support websockets, live updates will fail. You may need to refresh the page to see the newest content.',
             text: 'Please use a modern browser.',
             icon: 'warning',
+            instance
         })
 
     }
@@ -50,7 +56,7 @@ export function initiateWebsocket({
 
     console.log("Connecting websocket url", url);
 
-    CarbonReact.instance.setState({
+    instance.setState({
         websocket: connection
     }, () => {
 
@@ -62,7 +68,7 @@ export function initiateWebsocket({
 
             function heartbeat() {
 
-                const {websocket} = CarbonReact.instance.state;
+                const {websocket} = instance.state;
 
                 if (!websocket) return;
 
@@ -86,7 +92,7 @@ export function initiateWebsocket({
                 return;
             }
 
-            CarbonReact.instance.setState((prevState: Readonly<any>) => ({
+            instance.setState((prevState: Readonly<any>) => ({
                 websocketEvents: prevState.websocketEvents.concat(message),
                 websocketData: prevState.websocketData.concat(parsedData), // JSON.parse no good - base64?
             }), () => {
@@ -133,7 +139,7 @@ export function initiateWebsocket({
 
                     const TABLE_NAME_SHORT = TABLE_NAME.substring(TABLE_PREFIX.length);
 
-                    const currentCache: [] = CarbonReact.instance.state[TABLE_NAME_SHORT]
+                    const currentCache: [] = instance.state[TABLE_NAME_SHORT]
 
                     // just because we have a websocket update, doesn't mean we need the update
                     // check to see if the primary key is in the current cache
@@ -196,7 +202,7 @@ export function initiateWebsocket({
 
         };
 
-        window.addEventListener("focus", () => initiateWebsocket());
+        window.addEventListener("focus", () => initiateWebsocket(props));
 
         // websocket onclose event listener
         connection.addEventListener('close', event => {
@@ -215,7 +221,7 @@ export function initiateWebsocket({
 
                 console.log(`WebSocket reconnect will be attempted in ${retrySeconds} second(s).`)
 
-                connectInterval = setTimeout(() => initiateWebsocket(), retrySeconds);
+                connectInterval = setTimeout(() => initiateWebsocket(props), retrySeconds);
 
             }
 

package/src/hoc/KeysMatching.ts

@@ -1,2 +1,4 @@
-
-export type KeysMatching<T, V> = {[K in keyof T]-?: T[K] extends V ? K : never}[keyof T];
+// KeysMatching utility type
+export type KeysMatching<T, V> = {
+    [K in keyof T]: T[K] extends V ? K : never
+}[keyof T];

package/src/hoc/SubsetMatching.ts

@@ -0,0 +1,6 @@
+// Utility type to extract keys and corresponding values
+import {KeysMatching} from "./KeysMatching";
+
+export type SubsetMatching<T extends object, V> = {
+    [K in KeysMatching<T, V>]: T[K]
+};

package/src/hoc/deleteRestfulObjectArrays.tsx

@@ -1,36 +1,54 @@
-import CarbonReact from "CarbonReact";
-import {tRestfulObjectArrayValues, tStatefulApiData} from "variables/C6";
-import {KeysMatching} from "./KeysMatching";
-
+import CarbonReact, { iCarbonReactState, tStatefulApiData } from "CarbonReact";
+import { KeysMatching } from "./KeysMatching";
+
+export interface iDeleteRestfulObjectArrays<
+    ObjectType extends {
+        [key: string]: any
+    } = {},
+    S extends { [key: string]: any; } = CarbonReact['state'],
+    P = CarbonReact['props']
+> {
+    instance: CarbonReact<P, S>,
+    dataOrCallback: ObjectType[] | ((state: Readonly<S>, props: Readonly<P>) => ObjectType[] | null),
+    stateKey: KeysMatching<S, tStatefulApiData<ObjectType>>,
+    uniqueObjectId: keyof ObjectType | (keyof ObjectType)[],
+    callback?: () => void
+}
 
-//ObjectType, UniqueIdType extends keyof ObjectType
-// @link https://www.typescriptlang.org/docs/handbook/2/mapped-types.html
-export default function deleteRestfulObjectArrays<ObjectType = tRestfulObjectArrayValues, S = typeof CarbonReact.instance.state, P = typeof CarbonReact.instance.props>
-(dataOrCallback: ObjectType[] | (<K extends keyof S>(
-     state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
-     callback?: () => void
- ) => null|(ObjectType[])),
- stateKey: KeysMatching<S, tStatefulApiData<ObjectType>>,
- uniqueObjectId: (keyof ObjectType) | (keyof ObjectType)[],
- callback?: () => void): void {
+export default function deleteRestfulObjectArrays<
+    ObjectType extends {
+        [key: string]: any
+    } = {},
+    S extends { [key: string]: any; } = CarbonReact['state'],
+    P = CarbonReact['props']
+>({
+      instance,
+      dataOrCallback,
+      stateKey,
+      uniqueObjectId,
+      callback
+  }: iDeleteRestfulObjectArrays<ObjectType, S, P>): void {
 
-    const uniqueObjectIds = uniqueObjectId instanceof Array ? uniqueObjectId : [uniqueObjectId];
+    const uniqueObjectIds = Array.isArray(uniqueObjectId) ? uniqueObjectId : [uniqueObjectId];
 
-    return CarbonReact.instance.setState((previousBootstrapState, props) => {
+    instance.setState((
+        previousBootstrapState: Readonly<S & iCarbonReactState>,
+        props: Readonly<P>
+    ): Pick<S & iCarbonReactState, keyof S> | null => {
 
-        let newOrReplacementData: ObjectType[]  = [];
+        let newOrReplacementData: ObjectType[] = [];
 
-        if (dataOrCallback instanceof Array) {
+        if (Array.isArray(dataOrCallback)) {
 
-            newOrReplacementData = dataOrCallback
+            newOrReplacementData = dataOrCallback;
 
-        } else if (dataOrCallback instanceof Function) {
+        } else if (typeof dataOrCallback === 'function') {
 
-            let callbackReturn = dataOrCallback(previousBootstrapState, props);
+            const callbackReturn = dataOrCallback(previousBootstrapState, props);
 
-            if (null === callbackReturn) {
+            if (callbackReturn === null) {
 
-                return ;
+                return null; // No updates needed (noop)
 
             }
 
@@ -38,40 +56,21 @@ export default function deleteRestfulObjectArrays<ObjectType = tRestfulObjectArr
 
         } else {
 
-            throw Error('The dataOrCallback parameter was not an array or function')
+            throw new Error('The dataOrCallback parameter was not an array or function');
 
         }
 
-        const previousStateProperty : ObjectType[] = previousBootstrapState[stateKey];
-
-        return {
-            [stateKey]: [
-
-                ...previousStateProperty?.filter(item => false === (newOrReplacementData?.find(value => {
-
-                    let isMatch = true;
-
-                    uniqueObjectIds.find(uniqueObjectId => {
-
-                        if (value[uniqueObjectId] !== item[uniqueObjectId]) {
-
-                            isMatch = false;
+        const previousStateProperty: tStatefulApiData<ObjectType> = previousBootstrapState[stateKey] as tStatefulApiData<ObjectType>;
 
-                            return true;
+        const updatedStateProperty = previousStateProperty?.filter(item =>
+            !newOrReplacementData.some(value =>
+                uniqueObjectIds.every(uniqueId => value[uniqueId] === item[uniqueId])
+            )
+        ) ?? [];
 
-                        }
-
-                        return false;
-
-                    })
-
-                    return isMatch;
-
-                }) || false)) || []
+        return {
+            [stateKey]: updatedStateProperty
+        } as Pick<S & iCarbonReactState, keyof S>;
 
-            ]
-        }
     }, callback);
-
 }
-