cleanup and refactoring

client/src/components/pages/AddRecipe.tsx

@@ -6,7 +6,7 @@ import { Button, Divider, Form, Page, Panel } from "../ui"
 const AddRecipe = () => {
     const authContext = useAuthContext();
     const [input, setInput] = useState<IRecipe>({ name: '', preptime: '', description: '', authoruserid: '', ingredients: [] })
-    const [form, setForm] = useState<JSX.Element[]>();
+    const [form, setForm] = useState<JSX.Element>();
 
     const getFormState = useCallback((data: IRecipe) => {
         setInput(data);
@@ -33,9 +33,9 @@ const AddRecipe = () => {
         input.authoruserid && setForm(
             new Form<IRecipe>({
                 parent: "AddRecipe",
-                keys: ["name", "preptime", "ingredients", "description"],
-                labels: ["Recipe Name:", "Prep Time:", "Ingredients:", "Description:"],
-                dataTypes: ['text', 'text', 'custom picker', 'TINYMCE'],
+                keys: ["name", "preptime", "course", "cuisine", "ingredients", "description"],
+                labels: ["Recipe Name:", "Prep Time:", "Course:", "Cuisine:", "Ingredients:", "Description:"],
+                dataTypes: ['text', 'text', 'custom picker', 'custom picker', 'custom picker', 'TINYMCE'],
                 initialState: input,
                 getState: getFormState,
                 richTextInitialValue: "<p>Enter recipe details here!</p>"
@@ -53,7 +53,7 @@ const AddRecipe = () => {
             <Divider />
 
             <Panel>
-                { form }
+                { form || <h2>Loading...</h2> }
                 <Button onClick={handleCreate}>Create Recipe!</Button>
             </Panel>
         </Page>

client/src/components/pages/Login.tsx

@@ -9,7 +9,7 @@ export default function Login() {
     // setup and local state
     const authContext = useAuthContext();
     const navigate = useNavigate();
-    const [form, setForm] = useState<JSX.Element[]>();
+    const [form, setForm] = useState<JSX.Element>();
     const [input, setInput] = useState<IUserAuth>({ email: '', password: '' });
 
     // retrieve and store state from form
@@ -45,7 +45,7 @@ export default function Login() {
             <h1>Hello! Nice to see you again.</h1>
 
             <Panel extraStyles="form-panel">
-                { form }
+                { form || <h2>Loading...</h2> }
                 <Button onClick={handleLogin}>Log In</Button>
             </Panel>
 

client/src/components/pages/Register/aboutyou.tsx

@@ -22,7 +22,7 @@ const blankUser: IUser = {
 const AboutYou: RegisterVariantType = ({ transitionDisplay }) => {
     const navigate = useNavigate();
     const authContext = useAuthContext();
-    const [form, setForm] = useState<JSX.Element[]>([<p key={v4()}>Loading content...</p>]);
+    const [form, setForm] = useState<JSX.Element>(<p key={v4()}>Loading content...</p>);
     const [input, setInput] = useState<IUser>(blankUser);
     const [regSuccess, setRegSuccess] = useState<any>();
 
@@ -34,15 +34,6 @@ const AboutYou: RegisterVariantType = ({ transitionDisplay }) => {
         if (authContext.user) navigate('/');
     }, [authContext]);
 
-    const formConfig: FormConfig<IUser> = {
-        parent: "register",
-        keys: ['firstname', 'lastname', 'handle', 'email', 'password'],
-        initialState: input,
-        labels: ['First Name', 'Last Name', 'Handle', 'Email', "Password"],
-        dataTypes: ['text', 'text', 'text', 'email', 'password'],
-        getState: getFormState
-    }
-
     async function handleRegister() {
         const res = await attemptRegister(input);
         if (res.ok) {
@@ -60,7 +51,14 @@ const AboutYou: RegisterVariantType = ({ transitionDisplay }) => {
     }
 
     useEffect(() => {
-        setForm(new Form<IUser>(formConfig).mount());
+        setForm(new Form<IUser>({
+            parent: "register",
+            keys: ['firstname', 'lastname', 'handle', 'email', 'password'],
+            initialState: input,
+            labels: ['First Name', 'Last Name', 'Handle', 'Email', "Password"],
+            dataTypes: ['text', 'text', 'text', 'email', 'password'],
+            getState: getFormState
+        }).mount());
     }, [])
 
     useEffect(() => {
@@ -76,7 +74,7 @@ const AboutYou: RegisterVariantType = ({ transitionDisplay }) => {
             <h2>Tell us a bit about yourself:</h2>
 
             <Panel extraStyles="form-panel two-columns">
-                { form }
+                { form || <h2>Loading...</h2> }
                 <Button onClick={handleRegister}>Register</Button>
             </Panel>
         </Page>

client/src/components/ui/Form.tsx

@@ -17,6 +17,7 @@ export interface FormConfig<T> {
     labels?: string[]
     dataTypes?: string[]
     richTextInitialValue?: string
+    extraStyles?: string
 }
 
 export default class Form<T>{
@@ -27,6 +28,7 @@ export default class Form<T>{
     private state: T;
     private getState: (received: T) => void
     private richTextInitialValue?: string;
+    private extraStyles?: string
 
     constructor(config: FormConfig<T>){
         this.parent = config.parent;
@@ -36,6 +38,7 @@ export default class Form<T>{
         this.state = config.initialState;
         this.getState = config.getState;
         this.richTextInitialValue = config.richTextInitialValue;
+        this.extraStyles = config.extraStyles;
     }
 
     update(e: ChangeEvent<HTMLElement>, idx: number) {
@@ -92,6 +95,6 @@ export default class Form<T>{
             output.push(input);
         }
 
-        return output;
+        return <div className={`ui-form-component ${this.extraStyles}`}>{output}</div>;
     }
 }

client/src/components/ui/index.ts

@@ -6,11 +6,10 @@ import Form from "./Form";
 import Navbar from "./Navbar";
 import Page from "./Page";
 import Panel from "./Panel";
-import Quill from "./Quill";
 import TextField from "./TextField";
 import Tooltip from "./Tooltip";
 import UserCard from "./UserCard";
 
 export {
-    Button, Card, Dropdown, Divider, Form, Navbar, Page, Panel, Quill, TextField, Tooltip, UserCard
+    Button, Card, Dropdown, Divider, Form, Navbar, Page, Panel, TextField, Tooltip, UserCard
 }