From d1300878420cb7fdc6eb9096a7c23ff1606ada78 Mon Sep 17 00:00:00 2001
From: Manuel Obregozo <obregozo.manuel@gmail.com>
Date: Sun, 5 Jul 2020 10:35:24 +0200
Subject: [PATCH] feat: add validation to current position field

---
 src/pages/CreateSalary/CreateSalary.scss |  7 +++++
 src/pages/CreateSalary/CreateSalary.tsx  | 34 +++++++++++++++++++++---
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/pages/CreateSalary/CreateSalary.scss b/src/pages/CreateSalary/CreateSalary.scss
index 452d013..dd89210 100644
--- a/src/pages/CreateSalary/CreateSalary.scss
+++ b/src/pages/CreateSalary/CreateSalary.scss
@@ -35,6 +35,13 @@ ion-content {
           margin: 0;
         }
       }
+      .input-options-list {
+        margin-top: 10px;
+        .input-options-list__item {
+          margin: 0 5px;
+          cursor: pointer;
+        }
+      }
     }
   }
 }
diff --git a/src/pages/CreateSalary/CreateSalary.tsx b/src/pages/CreateSalary/CreateSalary.tsx
index 05cc0fc..337363a 100644
--- a/src/pages/CreateSalary/CreateSalary.tsx
+++ b/src/pages/CreateSalary/CreateSalary.tsx
@@ -16,6 +16,7 @@ import {
   IonIcon,
   IonButtons,
   IonBackButton,
+  IonBadge,
 } from '@ionic/react';
 
 import { closeCircleOutline, arrowBack } from 'ionicons/icons';
@@ -38,11 +39,24 @@ const CreateSalary: React.FC = () => {
     weeklyHours: 0,
   });
   const [technology, setTechnology] = useState('');
+  const [availablePositions, setAvailablePositions] = useState([
+    'Developer',
+    'QA',
+  ]);
 
   const confirmSalary = () => {
     console.log(formNewSalary);
   };
 
+  const onCurrentPositionChange = (value: string) => {
+    // TODO: update list of available positions based on what the user typed
+    setAvailablePositions(['Scrum Master', 'CEO']);
+    setFormNewSalary({
+      ...formNewSalary,
+      position: value,
+    });
+  };
+
   const addNewTechnology = () => {
     if (!technology || formNewSalary.technologies.includes(technology)) return;
     setFormNewSalary({
@@ -93,15 +107,27 @@ const CreateSalary: React.FC = () => {
               <IonLabel class="label">Current Position</IonLabel>
               <IonInput
                 onIonChange={(e) =>
-                  setFormNewSalary({
-                    ...formNewSalary,
-                    position: e.detail.value! as string,
-                  })
+                  onCurrentPositionChange(e.detail.value! as string)
                 }
                 type="text"
                 className="input ion-margin-top"
                 value={formNewSalary.position}
               ></IonInput>
+              <div className="input-options-list">
+                {availablePositions.map((position: string) => (
+                  <IonBadge
+                    onClick={() =>
+                      setFormNewSalary({
+                        ...formNewSalary,
+                        position,
+                      })
+                    }
+                    className="input-options-list__item"
+                  >
+                    {position}
+                  </IonBadge>
+                ))}
+              </div>
             </div>
             <div className="input-wrapper">
               <IonLabel class="label">Role</IonLabel>