fix: button config

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}

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;
+}

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>
     );
 };

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>
 }

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>
 }

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>
 }

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>
 

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>
     );

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>

frontend/src/utils/functions.ts

@@ -0,0 +1 @@
+export const clickDebug = (e: unknown): unknown => console.log(`Click at ${(e as Event).target}`)