Fix oraganisation dropdown in create recruitment form and refactor to…

… React hook form (#1502) * use react hook form for recruitment form * add optional removal of seconds from utcTimestampToLocale
Samfundet · Oct 10, 2024 · cb0ac78 · cb0ac78
1 parent 71efc24
commit cb0ac78
Show file tree

Hide file tree

Showing 8 changed files with 272 additions and 156 deletions.
diff --git a/frontend/src/Components/Input/Input.tsx b/frontend/src/Components/Input/Input.tsx
@@ -2,19 +2,23 @@ import classNames from 'classnames';
 import * as React from 'react';
 import styles from './Input.module.scss';
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  onChange: (...event: unknown[]) => void;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+  onChange: (value: string | number | readonly string[] | null) => void;
+  value: string | number | readonly string[] | null | undefined;
 }
 
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, onChange, ...props }, ref) => {
-  return (
-    <input
-      type={type}
-      className={classNames(styles.input_field, type === 'number' && styles.number_input, className)}
-      onChange={(event) => (type === 'number' ? onChange?.(+event.target.value) : onChange?.(event.target.value))}
-      ref={ref}
-      {...props}
-    />
-  );
-});
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, onChange, value, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={classNames(styles.input_field, type === 'number' && styles.number_input, className)}
+        onChange={(event) => (type === 'number' ? onChange?.(+event.target.value) : onChange?.(event.target.value))}
+        ref={ref}
+        value={value === null ? '' : value}
+        {...props}
+      />
+    );
+  },
+);
 Input.displayName = 'Input';
diff --git a/frontend/src/PagesAdmin/RecruitmentFormAdminPage/RecruitmentFormAdminPage.module.scss b/frontend/src/PagesAdmin/RecruitmentFormAdminPage/RecruitmentFormAdminPage.module.scss
@@ -7,12 +7,12 @@
   width: 100%;
   display: flex;
   flex-direction: column;
+  gap: 1rem;
 }
 
 .row {
   display: flex;
   flex-direction: column;
-  margin-top: 1em;
   gap: 1em;
   @include for-tablet-up {
     flex-direction: row;
@@ -24,3 +24,8 @@
   justify-content: center;
   margin-top: 20%;
 }
+
+.item {
+  flex-grow: 1;
+  max-width: calc(50% - 0.5em);
+}