added functionality for user subscriptions

client/src/components/ui/Checkbox.tsx

@@ -0,0 +1,16 @@
+import { v4 } from 'uuid';
+import { CheckboxType } from '../../util/types';
+
+// designed to be consumed by the Form class
+const Checkbox = () => {
+    return ( <></>
+        // <div id={rowid} key={v4()}>
+        //     <label>{label}</label>
+        //     <input
+        //         type="checkbox"
+        //         id={id}
+        //         onChange={(e) => FormElement.update(e, idx)}>
+        //     </input>
+        // </div>
+    )
+}

client/src/components/ui/Form.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent } from "react";
+import { ChangeEvent, ChangeEventHandler } from "react";
 import { v4 } from 'uuid';
 
 /**
@@ -35,9 +35,15 @@ export default class Form<T>{
     }
 
     update(e: ChangeEvent<HTMLElement>, idx: number) {
-        let newState = {
-            ...this.state,
-            [this.keys[idx]]: e.target['value' as keyof EventTarget]
+        let newState;
+
+        if (this.dataTypes[idx] == 'checkbox') {
+            newState = { ...this.state }
+        } else {
+            newState = {
+                ...this.state,
+                [this.keys[idx]]: e.target['value' as keyof EventTarget]
+            }
         }
 
         this.state = newState;

client/src/util/types.ts

@@ -1,5 +1,6 @@
-import { Dispatch, FC, ReactNode, SetStateAction } from "react";
+import { ChangeEvent, ChangeEventHandler, Dispatch, FC, ReactNode, SetStateAction } from "react";
 import { useNavigate } from "react-router-dom";
+import { Form } from "../components/ui";
 import { IUser } from "../schemas";
 
 interface PortalBase {
@@ -25,9 +26,20 @@ interface NavbarProps {
     liftChange?: (newValue: IUser | undefined) => void
 }
 
+interface CheckboxProps {
+    rowid: string
+    id: string
+    idx: number
+    label: string
+    value: string
+    onChange: (e: ChangeEvent<HTMLElement>, idx: number) => void
+    FormElement: typeof Form
+}
+
 export type PageComponent = FC<PortalBase>
 export type PanelComponent = FC<PortalBase>
 export type ButtonComponent = FC<ButtonParams>
 export type ProtectPortal = FC<MultiChildPortal>
 export type UserCardType = FC<UserCardProps>
-export type NavbarType = FC<NavbarProps>
+export type NavbarType = FC<NavbarProps>
+export type CheckboxType = FC<CheckboxProps>