From 999f77046991fd001e4927ac2cc681737b32c0b2 Mon Sep 17 00:00:00 2001
From: rocky_balboa <168601600+jsR1der@users.noreply.github.com>
Date: Thu, 31 Oct 2024 22:06:15 +0200
Subject: [PATCH] fix: button config

---
 frontend/src/components/button/Button.tsx     |  7 ++++---
 .../src/components/button/buttonConfig.ts     | 11 ++++++++++
 .../errors/errorDialog/errorDialog.tsx        |  2 +-
 .../GlobalErrorBoundary.tsx                   |  2 +-
 .../routeErrorBoundary/RouteErrorBoundary.tsx |  2 +-
 frontend/src/components/form/Form.tsx         |  8 ++++---
 frontend/src/components/header/Header.tsx     |  2 +-
 frontend/src/models/button.config.ts          |  9 --------
 frontend/src/pages/404/NotFound.tsx           |  2 +-
 frontend/src/pages/settings/Settings.tsx      | 21 ++++++++++++-------
 frontend/src/utils/functions.ts               |  1 +
 11 files changed, 40 insertions(+), 27 deletions(-)
 create mode 100644 frontend/src/components/button/buttonConfig.ts
 delete mode 100644 frontend/src/models/button.config.ts
 create mode 100644 frontend/src/utils/functions.ts

diff --git a/frontend/src/components/button/Button.tsx b/frontend/src/components/button/Button.tsx
index 8d4ed0b..c8cdb0b 100644
--- a/frontend/src/components/button/Button.tsx
+++ b/frontend/src/components/button/Button.tsx
@@ -1,8 +1,9 @@
 import './Button.scss';
-import {ButtonConfig} from "../../models/button.config.ts";
+import {ReactElement} from "react";
+import {ButtonComponent} from "./buttonConfig.ts";
 
-function Button(config: ButtonConfig) {
-    const buttonStyles = config.disabled ? 'button--disabled' : `button--hover ${config.colorClass}`
+const Button: ButtonComponent = (config): ReactElement => {
+    const buttonStyles = config?.disabled ? 'button--disabled' : `button--hover ${config.classes.color}`
 
     return <button
         className={'button ' + buttonStyles}
diff --git a/frontend/src/components/button/buttonConfig.ts b/frontend/src/components/button/buttonConfig.ts
new file mode 100644
index 0000000..0365f27
--- /dev/null
+++ b/frontend/src/components/button/buttonConfig.ts
@@ -0,0 +1,11 @@
+import {ReactElement} from "react";
+
+export type ButtonComponent = (props: ButtonConfig) => ReactElement
+
+export interface ButtonConfig {
+    text: string;
+    classes: Record<string, string>
+    action?: (...params: unknown[]) => unknown;
+    type?: 'button' | 'submit' | 'reset' | undefined;
+    disabled?: boolean;
+}
\ No newline at end of file
diff --git a/frontend/src/components/errors/errorDialog/errorDialog.tsx b/frontend/src/components/errors/errorDialog/errorDialog.tsx
index d8c42e1..e5719db 100644
--- a/frontend/src/components/errors/errorDialog/errorDialog.tsx
+++ b/frontend/src/components/errors/errorDialog/errorDialog.tsx
@@ -11,7 +11,7 @@ export const ErrorDialog = ({resetErrorCallback, open, error}: ErrorDialogProps)
     return (
         <Dialog open={open}>
             <div>{error.message}</div>
-            <Button colorClass={Color.primary} text="Retry" action={handleClose}></Button>
+            <Button classes={{color: Color.primary}} text="Retry" action={handleClose}></Button>
         </Dialog>
     );
 };
\ No newline at end of file
diff --git a/frontend/src/components/errors/globalErrorBoundary/GlobalErrorBoundary.tsx b/frontend/src/components/errors/globalErrorBoundary/GlobalErrorBoundary.tsx
index ab60f36..1aba6c0 100644
--- a/frontend/src/components/errors/globalErrorBoundary/GlobalErrorBoundary.tsx
+++ b/frontend/src/components/errors/globalErrorBoundary/GlobalErrorBoundary.tsx
@@ -6,6 +6,6 @@ import {FunctionComponent} from "react";
 export const GlobalErrorBoundary: FunctionComponent<FallbackProps> = ({error, resetErrorBoundary}) => {
     return <div className={"abt-center flex flex-col items-center"}>
         <div>I don't know what to do, but you got an error: {error?.message}</div>
-        <Button colorClass={Color.primary} text="Retry" action={resetErrorBoundary}></Button>
+        <Button classes={{color: Color.primary}} text="Retry" action={resetErrorBoundary}></Button>
     </div>
 }
\ No newline at end of file
diff --git a/frontend/src/components/errors/routeErrorBoundary/RouteErrorBoundary.tsx b/frontend/src/components/errors/routeErrorBoundary/RouteErrorBoundary.tsx
index d3e6c31..f4767b6 100644
--- a/frontend/src/components/errors/routeErrorBoundary/RouteErrorBoundary.tsx
+++ b/frontend/src/components/errors/routeErrorBoundary/RouteErrorBoundary.tsx
@@ -9,6 +9,6 @@ export function RouteErrorBoundary() {
     }
     return <div className={"abt-center flex flex-col items-center"}>
         <div>I don't know what to do, but you got an error: {(error as Error)?.message}</div>
-        <Button colorClass={Color.primary} text="Return" action={returnBack}></Button>
+        <Button classes={{color: Color.primary}} text="Return" action={returnBack}></Button>
     </div>
 }
\ No newline at end of file
diff --git a/frontend/src/components/form/Form.tsx b/frontend/src/components/form/Form.tsx
index 3a27275..b48362c 100644
--- a/frontend/src/components/form/Form.tsx
+++ b/frontend/src/components/form/Form.tsx
@@ -26,11 +26,13 @@ function Form() {
     })
 
     const submit: SubmitHandler<User> = (data: User) => {
+        console.log(data)
         if (!Object.entries(errors).length) {
-                // mutation.mutate({...data, phone: `+38${data.phone}`})
+            // mutation.mutate({...data, phone: `+38${data.phone}`})
         }
     }
     const radioChange = (e: ChangeEvent<HTMLInputElement>) => {
+        console.log(e)
         // const target = e.target;
         // setValue('position_id', +target.value, {shouldDirty: true, shouldTouch: true})
     }
@@ -105,8 +107,8 @@ function Form() {
             <Input config={inputConfigs.email} placeholder="Email" error={errors.email}></Input>
             <Input config={inputConfigs.phone} placeholder="Phone" error={errors.phone}></Input>
             <RadioInput config={inputConfigs.position_id} onChange={radioChange}></RadioInput>
-            <Upload  onChange={fileChange} ></Upload>
-            <Button colorClass={Color.primary} type="submit" text="Sign Up"></Button>
+            <Upload onChange={fileChange}></Upload>
+            <Button classes={{color: Color.primary}} type="submit" text="Sign Up"></Button>
         </form>
     </section>
 }
diff --git a/frontend/src/components/header/Header.tsx b/frontend/src/components/header/Header.tsx
index 0b11e13..b737da1 100644
--- a/frontend/src/components/header/Header.tsx
+++ b/frontend/src/components/header/Header.tsx
@@ -28,7 +28,7 @@ function Header(props: { user: UserModel }) {
                 //!todo make it smooth
                 props.user && <User user={props.user} logout={logout}></User>
                 :
-                <Button colorClass={Color.primary} action={login} text="Login"></Button>
+                <Button classes={{color: Color.primary}} action={login} text="Login"></Button>
             }
         </div>
 
diff --git a/frontend/src/models/button.config.ts b/frontend/src/models/button.config.ts
deleted file mode 100644
index 76b93f6..0000000
--- a/frontend/src/models/button.config.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {Color} from "../utils/types.ts";
-
-export interface ButtonConfig {
-    text: string;
-    colorClass: Color;
-    action?: (...params: any[]) => any;
-    type?: 'button' | 'submit' | 'reset' | undefined;
-    disabled?: boolean;
-}
\ No newline at end of file
diff --git a/frontend/src/pages/404/NotFound.tsx b/frontend/src/pages/404/NotFound.tsx
index a421401..e871187 100644
--- a/frontend/src/pages/404/NotFound.tsx
+++ b/frontend/src/pages/404/NotFound.tsx
@@ -9,7 +9,7 @@ export const NotFound = () => {
         <div className={styles['not-found'] + ' flex flex-col items-center'}>
             Page not found!!!
             <Link to="/">
-                <Button colorClass={Color.primary} text="Return"></Button>
+                <Button classes={{color: Color.primary}} text="Return"></Button>
             </Link>
         </div>
     );
diff --git a/frontend/src/pages/settings/Settings.tsx b/frontend/src/pages/settings/Settings.tsx
index 84c0adc..9df0db8 100644
--- a/frontend/src/pages/settings/Settings.tsx
+++ b/frontend/src/pages/settings/Settings.tsx
@@ -12,24 +12,25 @@ import {CompanyModel, UserToCompanyAdapter} from "../../models/company.model.ts"
 import {UserModel} from "../../models/user.model.ts";
 import {Suspense, useEffect} from "react";
 import Jobs from "../../components/jobs/Jobs.tsx";
+import Button from "../../components/button/Button.tsx";
+import {Color} from "../../utils/types.ts";
+import {clickDebug} from "../../utils/functions.ts";
 
 export const Settings = () => {
     const {state: user} = useLocation()
-    const {data: company, error, isFetching, refetch} = useCompanyQuery(user?.email);
+    const {data: company, isFetching} = useCompanyQuery(user?.email);
     const {isAuthenticated, isLoading} = useAuth0();
     const createMutation = useCreateCompanyMutation();
     const editMutation = useEditCompanyMutation();
     const {
         register,
         handleSubmit,
-        setValue,
-        errors,
         reset
     } = useCompanyForm(company ? company : new UserToCompanyAdapter(user as UserModel).company);
 
     useEffect(() => {
         reset(company ? company : new UserToCompanyAdapter(user as UserModel).company)
-    }, [company])
+    }, [company, reset, user])
     const inputs: Record<string,
         UseFormRegisterReturn> = {
         name: {
@@ -65,9 +66,9 @@ export const Settings = () => {
     }
     // !todo find out how to replace this with some thing better
 
-    const createCompany = () => {
-        // mutation.mutate()
-    }
+    // const createCompany = () => {
+    //     // mutation.mutate()
+    // }
 
 
     const submit: SubmitHandler<Partial<CompanyModel>> = (data: Partial<CompanyModel>) => {
@@ -96,6 +97,12 @@ export const Settings = () => {
                 <input {...inputs.linkedIn} placeholder={"LinkedIn"} className={"border-4"}/>
                 <input {...inputs.dou} placeholder={"Dou"} className={"border-4"}/>
                 <button type={"submit"} className={"border-4"}>Submit</button>
+                <Button
+                    classes={{color: Color.primary}}
+                    text={'test'}
+                    action={clickDebug}
+                >
+                </Button>
             </form>
             <Suspense fallback={<div>loading...</div>}>
                 <Jobs companyId={company!.id}></Jobs>
diff --git a/frontend/src/utils/functions.ts b/frontend/src/utils/functions.ts
new file mode 100644
index 0000000..34aeaa2
--- /dev/null
+++ b/frontend/src/utils/functions.ts
@@ -0,0 +1 @@
+export const clickDebug = (e: unknown): unknown => console.log(`Click at ${(e as Event).target}`)
\ No newline at end of file