Možnost odebrání volby ikonou

client/src/App.tsx

@@ -7,6 +7,8 @@ import Login from './Login';
 import { Locations, ClientData } from './Types';
 import { Alert, Col, Form, Row, Table } from 'react-bootstrap';
 import Header from './components/Header';
+import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import './App.css';
 
 const EVENT_CONNECT = "connect"
@@ -77,6 +79,15 @@ function App() {
     }
   }
 
+  const removeChoice = async (key: string) => {
+    if (auth?.login) {
+      await updateChoice(auth.login, null);
+      if (choiceRef?.current?.value) {
+        choiceRef.current.value = "";
+      }
+    }
+  }
+
   const renderFoodTable = (name, food) => {
     return <Col md={12} lg={4}>
       <h3>{name}</h3>
@@ -133,7 +144,7 @@ function App() {
                 <option value={Locations.NEOBEDVAM}>Nebudu obědvat</option>
               </Form.Select>
               <p style={{ fontSize: "12px", marginTop: "5px" }}>
-                Aktuálně je možné vybrat pouze jednu variantu. Vyber prázdnou položku pro odstranění.
+                Aktuálně je možné vybrat pouze jednu variantu.
               </p>
               {Object.keys(data.choices).length > 0 ?
                 <Table striped bordered hover className='results-table mt-5'>
@@ -143,7 +154,11 @@ function App() {
                         <td>{Object.values(Locations)[Number(key)]}</td>
                         <td>
                           <ul>
-                            {data.choices[Number(key)].map((p: string, index: number) => <li key={index}>{p}</li>)}
+                            {data.choices[Number(key)].map((p: string, index: number) =>
+                              <li key={index}>{p} {p === auth.login && <FontAwesomeIcon onClick={() => {
+                                removeChoice(key);
+                              }} title='Odstranit' className='trash-icon' icon={icon({ name: 'trash-can', style: 'regular' })} />}</li>
+                            )}
                           </ul>
                         </td>
                       </tr>