Classes hub

client/classes/Hub.tsx

@@ -0,0 +1,127 @@
+import { TierT, HubT, StorageStateE, StatusE, LastErrorE } from 'types/General';
+import {
+  validateHubSubdomain as validateSubdomain,
+  validationResponseT,
+  updateHub,
+} from 'services/hub.service';
+
+export const loadingHub: HubT = {
+  ccuLimit: 0,
+  currentCcu: 0,
+  currentStorageMb: 0,
+  domain: '',
+  hubId: '',
+  name: 'Untitled Hub',
+  status: StatusE.CREATING,
+  lastError: null,
+  storageLimitMb: 0,
+  subdomain: '',
+  tier: 'p0',
+};
+
+export default class Hub {
+  ccuLimit: number;
+  currentCcu: number | null;
+  currentStorageMb: number | null;
+  hubId: string;
+  name: string;
+  status: StatusE;
+  lastError: LastErrorE | null;
+  storageLimitMb: number;
+  subdomain: string;
+  domain: string;
+  fullDomain: string;
+  tier: TierT;
+
+  constructor({
+    ccuLimit,
+    currentCcu,
+    currentStorageMb,
+    hubId,
+    name,
+    status,
+    lastError,
+    storageLimitMb,
+    subdomain,
+    domain,
+    tier,
+  }: HubT) {
+    this.ccuLimit = ccuLimit;
+    this.currentCcu = currentCcu;
+    this.currentStorageMb = currentStorageMb;
+    this.hubId = hubId;
+    this.name = name;
+    this.status = status;
+    this.lastError = lastError;
+    this.storageLimitMb = storageLimitMb;
+    this.subdomain = subdomain;
+    this.domain = domain;
+    this.fullDomain = `https://${subdomain}.${domain}`;
+    this.tier = tier;
+  }
+
+  /**
+   * Round Storage MB
+   * @returns string
+   */
+  roundedCurrentStorageMb(): string {
+    if (this.currentStorageMb == null) return 'Configuring';
+    // TODO - In the future, I guess we'd use i18n routing and useRouter to get the current
+    // locale, but for now default to "en-US".
+    return new Intl.NumberFormat('en-US', {
+      maximumFractionDigits: 2,
+    }).format(this.currentStorageMb);
+  }
+
+  /**
+   * Storage Percentage
+   * @returns number
+   */
+  getStoragePercent(): number {
+    if (this.currentStorageMb === 0 || this.currentStorageMb === null) return 0;
+    return Math.min(100, this.currentStorageMb / this.storageLimitMb) * 100;
+  }
+
+  /**
+   * Storage State
+   * @returns StorageStateE
+   */
+  getStorageState(): StorageStateE {
+    const storagePercent = this.getStoragePercent();
+    const warningThreshold = 75;
+    const criticalThreshold = 100;
+    let status = StorageStateE.DEFAULT;
+
+    storagePercent > warningThreshold && (status = StorageStateE.WARNING);
+    storagePercent >= criticalThreshold && (status = StorageStateE.CRITICAL);
+
+    return status;
+  }
+
+  /**
+   * Validate subdomain for bad words or already in use
+   * @param value
+   * @returns Promise<validationResponseT>
+   */
+  async validateHubSubdomain(value: string): Promise<validationResponseT> {
+    return await validateSubdomain(this.hubId, value);
+  }
+
+  /**
+   * Update Hub Subdomain
+   * @param value
+   * @returns response status
+   */
+  async updateSubdomain(
+    value: string
+  ): Promise<{ status: number | undefined }> {
+    const response = await updateHub(this.hubId, {
+      ...this,
+      subdomain: value,
+    });
+
+    return {
+      status: response?.status,
+    };
+  }
+}

client/components/modules/hubs/HubCard/HubCard.tsx

@@ -1,116 +1,81 @@
-import { useContext, useMemo, useState } from 'react';
+import { useContext, useState, useMemo } from 'react';
 import styles from './HubCard.module.scss';
-import { HubT, UpdateHubT, LastErrorE, StatusE } from 'types/General';
+import { HubT, LastErrorE, StatusE } from 'types/General';
 import { Message } from './Message';
 import { StoreContext } from 'contexts/StoreProvider';
-import { updateHub } from 'services/hub.service';
 import ErrorBox from './ErrorBox';
 import HubLink from './HubLink';
 import HubLoading from './HubLoading';
 import HubCardHeader from './HubCardHeader';
 import HubCardFooter from './HubCardFooter';
+import Hub from 'classes/Hub';
 
 type HubCardPropsT = {
   hub: HubT;
   refreshHubData?: Function;
   classProp?: string;
 };
 
-const HubCard = ({ hub, refreshHubData, classProp = '' }: HubCardPropsT) => {
+const HubCard = ({ hub: _hub, refreshHubData, classProp }: HubCardPropsT) => {
   const storeContext = useContext(StoreContext);
-  const { domain, hubId, status, subdomain, lastError } = hub;
+  const hub = useMemo(() => new Hub(_hub), [_hub]);
   const [showRevertError, setShowRevertError] = useState<boolean>(
-    lastError === LastErrorE.SUBDOMAIN_REVERTED
+    hub.lastError === LastErrorE.SUBDOMAIN_REVERTED
   );
 
   /**
-   * Submit Update Hub
-   * @param updatedHub
-   * @param callback
+   * Updating Hub has failed - try again
    */
-  const submit = async (updatedHub: UpdateHubT, callback: Function) => {
+  const onTryReupdate = async () => {
+    /**
+     * Note: use session data 'storeContext.lastSubmittedSubdomain' and
+     * try and updates the Hub again.
+     */
     try {
-      const resp = await updateHub(hub.hubId, updatedHub);
+      const resp = await hub.updateSubdomain(
+        storeContext.lastSubmittedSubdomain.subdomain
+      );
+      // Refresh data after update.
       if (resp?.status === 200) {
-        callback();
+        refreshHubData && refreshHubData();
       } else {
-        handleError();
+        console.error('Sorry, there was an error updating this Hub.');
       }
     } catch (error) {
       console.error(error);
     }
   };
 
-  /**
-   * Updating Hub has failed - try again
-   */
-  const onTryReupdate = () => {
-    /**
-     * Note: use session data 'storeContext.lastSubmittedSubdomain' and
-     * try and updates the Hub again.
-     */
-    const updatedHub: UpdateHubT = {
-      ...hub,
-      subdomain: storeContext.lastSubmittedSubdomain.subdomain,
-    };
-
-    submit(updatedHub, () => refreshHubData && refreshHubData());
-  };
-
-  /**
-   * Submit hub no longer needs to be in reverted state.
-   */
-  const handleOnCloseError = () => {
-    // patch the hub with lastError =  '' to clear out the error.
-    const updatedHub: UpdateHubT = {
-      ...hub,
-      lastError: '',
-    };
-    submit(updatedHub, () => setShowRevertError(false));
-  };
-
-  const handleError = () => {
-    console.error('Sorry, there was an error updating this Hub.');
-  };
-
   /**
    * Check if session data is still holding last submitted domain
    * to display 'try again button'
    * @returns Boolean
    */
   const canTryAgain = (): boolean => {
-    const { subdomain: _subdomain, hubId: _hubId } =
-      storeContext.lastSubmittedSubdomain;
-    if (_subdomain === '' || _hubId !== hubId) return false;
+    const { subdomain, hubId } = storeContext.lastSubmittedSubdomain;
+    if (subdomain === '' || hubId !== hub.hubId) return false;
 
     return true;
   };
 
-  /**
-   * Hide / Show Card Footer
-   */
-  const footerVisible = useMemo(() => {
-    return status === StatusE.READY;
-  }, [status]);
-
   /**
    * Hide / Show Loader
    */
-  const loadingVisible = useMemo(() => {
-    return status === StatusE.CREATING || status === StatusE.UPDATING;
-  }, [status]);
+  const loadingVisible = () => {
+    return hub.status === StatusE.CREATING || hub.status === StatusE.UPDATING;
+  };
 
   return (
     <div className={`${styles.card_wrapper} ${classProp}`}>
       <div className={styles.card_container}>
         {/* HEADER  */}
-        <HubCardHeader status={status} hubId={hubId} />
+        <HubCardHeader status={hub.status} hubId={hub.hubId} />
 
         {/* BODY  */}
         <div className={styles.card_body}>
           {/* TODO - figure out if a name is applied to a hub off the bat before we put "untitled hub"
           here statically, might be able to just pull w/e through  */}
-          <div className={`${styles.card_name} ${styles[status]}`}>Hub</div>
+          <div className={`${styles.card_name} ${styles[hub.status]}`}>Hub</div>
 
           {/* Did Revert Error  */}
           {showRevertError && (
@@ -119,56 +84,54 @@ const HubCard = ({ hub, refreshHubData, classProp = '' }: HubCardPropsT) => {
               message={Message.updateSubdomainErrorMessage}
               onTryAgainClick={onTryReupdate}
               canTryAgain={canTryAgain()}
-              onClose={handleOnCloseError}
+              onClose={() => setShowRevertError(false)}
             />
           )}
 
           {/* Critical Error
             The user can not try aagin on critical error
             have the only contact button.
           */}
-          {lastError === LastErrorE.SUBDOMAIN_ERROR && (
+          {hub.lastError === LastErrorE.SUBDOMAIN_ERROR && (
             <ErrorBox message={Message.criticalFailMessage} />
           )}
 
           {/* Create Error
             This error takes place when the hub first tries to build
             and fails to do so.
           */}
-          {lastError === LastErrorE.CREATING_ERROR && (
+          {hub.lastError === LastErrorE.CREATING_ERROR && (
             <ErrorBox message={Message.createFailMessage} />
           )}
 
           {/* Default Error
             This error takes place if the communication with the server fails (http server error)
             and we need a "catch all" error status to show the user.
           */}
-          {lastError === LastErrorE.ERROR && (
+          {hub.lastError === LastErrorE.ERROR && (
             <ErrorBox message={Message.errorMessage} />
           )}
 
           {/* Loading Subdomain Updates  */}
-          {loadingVisible && (
+          {loadingVisible() && (
             <HubLoading
               loadingMessage={
-                status === StatusE.CREATING
+                hub.status === StatusE.CREATING
                   ? Message.creatingMessage
                   : Message.updatingMessage
               }
             />
           )}
 
           {/* Subdomain is ready and available  */}
-          {status === StatusE.READY && (
-            <HubLink domain={domain} subdomain={subdomain} />
-          )}
+          {hub.status === StatusE.READY && <HubLink url={hub.fullDomain} />}
         </div>
 
         {/* FOOTER  */}
-        {footerVisible && (
+        {hub.status === StatusE.READY && (
           <>
             <hr className={styles.card_hr} />
-            <HubCardFooter hub={hub} />
+            <HubCardFooter hub={_hub} />
           </>
         )}
       </div>