feat(create-instrument): refactor to css modules and add image field

client/src/pages/create-instrument/api/loader.ts

@@ -9,11 +9,13 @@ import type {
 import { GetInstrumentBasicMaterialsApi } from "generated/api/get-instrument-basic-materials-api";
 import { GetCountriesApi } from "generated/api/get-countries-api";
 import { GetManufacturersApi } from "generated/api/get-manufacturers-api";
+import { GetInstrumentPhotoApi } from "generated/api/get-instrument-photo-api";
 
 const getInstrumentTypes = new GetInstrumentTypesApi();
 const getInstrumentBasicMaterials = new GetInstrumentBasicMaterialsApi();
 const getCountries = new GetCountriesApi();
 const getManufacturers = new GetManufacturersApi();
+const getInstrumentPhoto = new GetInstrumentPhotoApi();
 
 export interface CreateInstrumentLoader {
   instrumentTypes: InstrumentType[];

client/src/pages/create-instrument/ui/CreateInstrumentPage.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import "./styles/CreateInstrumentPage.css";
+import React, { useEffect } from "react";
+import styles from "./styles/CreateInstrumentPage.module.css";
 import { HeaderWidget } from "widgets/header";
 import { FooterWidget } from "widgets/footer";
 import { Form, useActionData, useLoaderData } from "react-router-dom";
@@ -13,16 +13,39 @@ export const CreateInstrumentPage = () => {
   return (
     <>
       <HeaderWidget />
-      <h1>Instrument Creation</h1>
-      <Form method="POST" id="create-instrument">
-        <div className="create-instrument-field">
-          <label htmlFor="instrument-name">Instrument Name</label>
-          <input type="text" name="instrument-name" required />
+
+      <h1>Create Instrument</h1>
+
+      <Form method="POST" className={styles.create_instrument__form}>
+        <div className={styles.create_instrument__form__field}>
+          <label
+            htmlFor="instrument-name"
+            className={styles.create_instrument__form__field__key}
+          >
+            Instrument name
+          </label>
+
+          <input
+            type="text"
+            name="instrument-name"
+            className={styles.create_instrument__form__field__value}
+            required
+          />
         </div>
 
-        <div className="create-instrument-field">
-          <label htmlFor="instrument-type">Instrument Type</label>
-          <select name="instrument-type" required>
+        <div className={styles.create_instrument__form__field}>
+          <label
+            htmlFor="instrument-type"
+            className={styles.create_instrument__form__field__key}
+          >
+            Instrument Type
+          </label>
+
+          <select
+            name="instrument-type"
+            className={styles.create_instrument__form__field__value}
+            required
+          >
             {loader.instrumentTypes.map((instrumentType) => (
               <option
                 key={instrumentType.instrument_type}
@@ -34,9 +57,18 @@ export const CreateInstrumentPage = () => {
           </select>
         </div>
 
-        <div className="create-instrument-field">
-          <label htmlFor="manufacturer-name">Manufacturer name</label>
-          <select name="manufacturer-name" required>
+        <div className={styles.create_instrument__form__field}>
+          <label
+            htmlFor="manufacturer-name"
+            className={styles.create_instrument__form__field__key}
+          >
+            Manufacturer name
+          </label>
+          <select
+            name="manufacturer-name"
+            className={styles.create_instrument__form__field__value}
+            required
+          >
             {loader.manufacturers.map((manufacturer) => (
               <option
                 key={manufacturer.manufacturer}
@@ -48,31 +80,55 @@ export const CreateInstrumentPage = () => {
           </select>
         </div>
 
-        <div className="create-instrument-field">
-          <label htmlFor="manufacturer-date">Manufacturer date</label>
+        <div className={styles.create_instrument__form__field}>
+          <label
+            htmlFor="manufacturer-date"
+            className={styles.create_instrument__form__field__key}
+          >
+            Manufacturer date
+          </label>
+
           <input
             type="date"
             name="manufacturer-date"
             min="0001-01-01"
             max="9999-12-31"
+            className={styles.create_instrument__form__field__value}
             required
           />
         </div>
 
-        <div className="create-instrument-field">
-          <label htmlFor="release-date">Release date</label>
+        <div className={styles.create_instrument__form__field}>
+          <label
+            htmlFor="release-date"
+            className={styles.create_instrument__form__field__key}
+          >
+            Release date
+          </label>
+
           <input
             type="date"
             name="release-date"
             min="0001-01-01"
             max="9999-12-31"
+            className={styles.create_instrument__form__field__value}
             required
           />
         </div>
 
-        <div className="create-instrument-field">
-          <label htmlFor="country">Country</label>
-          <select name="country" required>
+        <div className={styles.create_instrument__form__field}>
+          <label
+            htmlFor="country"
+            className={styles.create_instrument__form__field__key}
+          >
+            Country
+          </label>
+
+          <select
+            name="country"
+            className={styles.create_instrument__form__field__value}
+            required
+          >
             {loader.countries.map((country) => (
               <option key={country.country} value={country.country}>
                 {country.country}
@@ -81,9 +137,18 @@ export const CreateInstrumentPage = () => {
           </select>
         </div>
 
-        <div className="create-instrument-field">
-          <label htmlFor="material">Basic Material</label>
-          <select name="material" required>
+        <div className={styles.create_instrument__form__field}>
+          <label
+            htmlFor="material"
+            className={styles.create_instrument__form__field__key}
+          >
+            Basic Material
+          </label>
+
+          <select
+            name="material" className={styles.create_instrument__form__field__value}
+            required
+          >
             {loader.materials.map((material) => (
               <option
                 key={material.basic_material}
@@ -95,8 +160,20 @@ export const CreateInstrumentPage = () => {
           </select>
         </div>
 
+        <div className={styles.create_instrument__form__field}>
+          <label htmlFor={"instrument-image"} className={styles.create_instrument__form__field__key}>Image Photo</label>
+
+          <input
+            type={"file"}
+            name={"instrument-photo"}
+            accept={"image/*"}
+            className={styles.create_instrument__form__field__value}
+            required={true} />
+        </div>
+
         <input type="submit" value="Create Instrument" />
       </Form>
+
       {actionData?.errors &&
         actionData?.errors.map((error) => <div key={error}>{error}</div>)}
       <FooterWidget />

client/src/pages/create-instrument/ui/styles/CreateInstrumentPage.module.css

@@ -0,0 +1,23 @@
+.create_instrument__img {
+  flex: 1;
+}
+
+.create_instrument__form {
+  flex: 4;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.create_instrument__form__field {
+  display: flex;
+  flex-direction: row;
+}
+
+.create_instrument__form__field__key {
+  flex-basis: 30%;
+}
+
+.create_instrument__form__field__value {
+  flex-basis: 70%;
+}

client/src/pages/edit-instrument/ui/EditInstrumentPage.tsx

@@ -151,7 +151,7 @@ export const EditInstrumentPage = () => {
           />
 
           <div className={styles.edit_instrument__form__field}>
-            <label htmlFor={"instrument-image"} className={styles.edit_instrument__form__field__key}>Image</label>
+            <label htmlFor={"instrument-image"} className={styles.edit_instrument__form__field__key}>Image Photo</label>
 
             <input
               type={"file"}