Možnost hlasování o nových funkcích

client/src/components/Header.tsx

@@ -1,21 +1,34 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Navbar, Nav, NavDropdown } from "react-bootstrap";
 import { useAuth } from "../context/auth";
 import BankAccountModal from "./modals/BankAccountModal";
 import { useBank } from "../context/bank";
+import FeaturesVotingModal from "./modals/FeaturesVotingModal";
+import { FeatureRequest } from "../types";
+import { errorHandler, getFeatureVotes, updateFeatureVote } from "../Api";
 
 
 export default function Header() {
     const auth = useAuth();
     const bank = useBank();
-    const [modalOpen, setModalOpen] = useState<boolean>(false);
+    const [bankModalOpen, setBankModalOpen] = useState<boolean>(false);
+    const [votingModalOpen, setVotingModalOpen] = useState<boolean>(false);
+    const [featureVotes, setFeatureVotes] = useState<FeatureRequest[]>([]);
 
-    const openBankSettings = () => {
-        setModalOpen(true);
+    useEffect(() => {
+        if (auth?.login) {
+            getFeatureVotes().then(votes => {
+                setFeatureVotes(votes);
+            })
+        }
+    }, [auth?.login]);
+
+    const closeBankModal = () => {
+        setBankModalOpen(false);
     }
 
-    const closeModal = () => {
-        setModalOpen(false);
+    const closeVotingModal = () => {
+        setVotingModalOpen(false);
     }
 
     const isValidInteger = (str: string) => {
@@ -28,7 +41,7 @@ export default function Header() {
         return n !== Infinity && String(n) === str && n >= 0;
     }
 
-    const save = (bankAccountNumber?: string, bankAccountHolderName?: string) => {
+    const saveBankAccount = (bankAccountNumber?: string, bankAccountHolderName?: string) => {
         if (bankAccountNumber) {
             try {
                 // Validace kódu banky
@@ -72,7 +85,18 @@ export default function Header() {
         }
         bank?.setBankAccountNumber(bankAccountNumber);
         bank?.setBankAccountHolderName(bankAccountHolderName);
-        closeModal();
+        closeBankModal();
+    }
+
+    const saveFeatureVote = async (option: FeatureRequest, active: boolean) => {
+        await errorHandler(() => updateFeatureVote(option, active));
+        const votes = [...featureVotes];
+        if (active) {
+            votes.push(option);
+        } else {
+            votes.splice(votes.indexOf(option), 1);
+        }
+        setFeatureVotes(votes);
     }
 
     return <Navbar variant='dark' expand="lg">
@@ -81,11 +105,13 @@ export default function Header() {
         <Navbar.Collapse id="basic-navbar-nav">
             <Nav className="nav">
                 <NavDropdown align="end" title={auth?.login} id="basic-nav-dropdown">
-                    <NavDropdown.Item onClick={openBankSettings}>Nastavit číslo účtu</NavDropdown.Item>
+                    <NavDropdown.Item onClick={() => setBankModalOpen(true)}>Nastavit číslo účtu</NavDropdown.Item>
+                    <NavDropdown.Item onClick={() => setVotingModalOpen(true)}>Hlasovat o nových funkcích</NavDropdown.Item>
                     <NavDropdown.Item onClick={auth?.logout}>Odhlásit se</NavDropdown.Item>
                 </NavDropdown>
             </Nav>
         </Navbar.Collapse>
-        <BankAccountModal isOpen={modalOpen} onClose={closeModal} onSave={save} />
+        <BankAccountModal isOpen={bankModalOpen} onClose={closeBankModal} onSave={saveBankAccount} />
+        <FeaturesVotingModal isOpen={votingModalOpen} onClose={closeVotingModal} onChange={saveFeatureVote} initialValues={featureVotes} />
     </Navbar>
 }