From 72c7bfe80c558fba7320023f75d244ee66f51da6 Mon Sep 17 00:00:00 2001 From: Martin Berka Date: Wed, 24 Jan 2024 18:54:05 +0100 Subject: [PATCH] =?UTF-8?q?Mo=C5=BEnost=20skryt=C3=AD=20pol=C3=A9vek?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/App.tsx | 10 ++--- client/src/components/Header.tsx | 25 ++++++------ ...BankAccountModal.tsx => SettingsModal.tsx} | 25 +++++++----- client/src/context/{bank.tsx => settings.tsx} | 38 +++++++++++++++---- client/src/index.tsx | 6 +-- 5 files changed, 67 insertions(+), 37 deletions(-) rename client/src/components/modals/{BankAccountModal.tsx => SettingsModal.tsx} (56%) rename client/src/context/{bank.tsx => settings.tsx} (59%) diff --git a/client/src/App.tsx b/client/src/App.tsx index 8f492a8..a01474d 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -13,7 +13,7 @@ import 'react-select-search/style.css'; import './App.css'; import { SelectSearchOption } from 'react-select-search'; import { faCircleCheck, faTrashCan } from '@fortawesome/free-regular-svg-icons'; -import { useBank } from './context/bank'; +import { useSettings } from './context/settings'; import { ClientData, Restaurants, Food, Order, Locations, PizzaOrder, PizzaDayState, FoodChoices, DayMenu, DepartureTime } from './types'; import Footer from './components/Footer'; import { faChainBroken, faChevronLeft, faChevronRight, faGear, faSatelliteDish, faSearch } from '@fortawesome/free-solid-svg-icons'; @@ -26,7 +26,7 @@ const EVENT_CONNECT = "connect" function App() { const auth = useAuth(); - const bank = useBank(); + const settings = useSettings(); const [isConnected, setIsConnected] = useState(false); const [data, setData] = useState(); const [food, setFood] = useState<{ [key in Restaurants]?: DayMenu }>(); @@ -302,7 +302,7 @@ function App() { } else if (menu?.food?.length > 0) { content = - {menu.food.map((f: any, index: number) => + {menu.food.filter(f => (settings?.hideSoups ? !f.isSoup : true)).map((f: any, index: number) => @@ -360,7 +360,7 @@ function App() { Poslední změny:
    -
  • Základní pizza kalkulačka (v menu)
    • +
  • Možnost skrytí polévek
 {dayIndex != null && @@ -540,7 +540,7 @@ function App() { await lockPizzaDay(); }}>Vrátit do "uzamčeno" } diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx index 166f379..b526b50 100644 --- a/client/src/components/Header.tsx +++ b/client/src/components/Header.tsx @@ -1,8 +1,8 @@ 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 SettingsModal from "./modals/SettingsModal"; +import { useSettings } from "../context/settings"; import FeaturesVotingModal from "./modals/FeaturesVotingModal"; import { FeatureRequest } from "../types"; import { errorHandler } from "../api/Api"; @@ -12,8 +12,8 @@ import PizzaCalculatorModal from "./modals/PizzaCalculatorModal"; export default function Header() { const auth = useAuth(); - const bank = useBank(); - const [bankModalOpen, setBankModalOpen] = useState(false); + const settings = useSettings(); + const [settingsModalOpen, setSettingsModalOpen] = useState(false); const [votingModalOpen, setVotingModalOpen] = useState(false); const [pizzaModalOpen, setPizzaModalOpen] = useState(false); const [featureVotes, setFeatureVotes] = useState([]); @@ -26,8 +26,8 @@ export default function Header() { } }, [auth?.login]); - const closeBankModal = () => { - setBankModalOpen(false); + const closeSettingsModal = () => { + setSettingsModalOpen(false); } const closeVotingModal = () => { @@ -48,7 +48,7 @@ export default function Header() { return n !== Infinity && String(n) === str && n >= 0; } - const saveBankAccount = (bankAccountNumber?: string, bankAccountHolderName?: string) => { + const saveSettings = (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean) => { if (bankAccountNumber) { try { // Validace kódu banky @@ -90,9 +90,10 @@ export default function Header() { return } } - bank?.setBankAccountNumber(bankAccountNumber); - bank?.setBankAccountHolderName(bankAccountHolderName); - closeBankModal(); + settings?.setBankAccountNumber(bankAccountNumber); + settings?.setBankAccountHolderName(bankAccountHolderName); + settings?.setHideSoupsOption(hideSoupsOption); + closeSettingsModal(); } const saveFeatureVote = async (option: FeatureRequest, active: boolean) => { @@ -112,7 +113,7 @@ export default function Header() { - + diff --git a/client/src/components/modals/BankAccountModal.tsx b/client/src/components/modals/SettingsModal.tsx similarity index 56% rename from client/src/components/modals/BankAccountModal.tsx rename to client/src/components/modals/SettingsModal.tsx index 3d51723..f69227f 100644 --- a/client/src/components/modals/BankAccountModal.tsx +++ b/client/src/components/modals/SettingsModal.tsx @@ -1,33 +1,40 @@ import { useRef } from "react"; import { Modal, Button } from "react-bootstrap" -import { useBank } from "../../context/bank"; +import { useSettings } from "../../context/settings"; type Props = { isOpen: boolean, onClose: () => void, - onSave: (bankAccountNumber?: string, bankAccountHolderName?: string) => void, + onSave: (bankAccountNumber?: string, bankAccountHolderName?: string, hideSoupsOption?: boolean) => void, } -/** Modální dialog pro nastavení čísla účtu a jména majitele. */ -export default function BankAccountModal({ isOpen, onClose, onSave }: Props) { - const bank = useBank(); +/** Modální dialog pro uživatelská nastavení. */ +export default function SettingsModal({ isOpen, onClose, onSave }: Props) { + const settings = useSettings(); const bankAccountRef = useRef(null); const nameRef = useRef(null); + const hideSoupsRef = useRef(null); return - Bankovní účet +

Nastavení

 +

Obecné

+ + Skrýt polévky + +
+

Bankovní účet

Nastavením čísla účtu umožníte automatické generování QR kódů pro úhradu za vámi provedené objednávky v rámci Pizza day.
Pokud vaše číslo účtu neobsahuje předčíslí, je možné ho zcela vynechat.

Číslo účtu není ukládáno na serveru, posílá se na něj pouze za účelem vygenerování QR kódů.

- Číslo účtu:
- Název příjemce (jméno majitele účtu): + Číslo účtu:
+ Název příjemce (jméno majitele účtu): - diff --git a/client/src/context/bank.tsx b/client/src/context/settings.tsx similarity index 59% rename from client/src/context/bank.tsx rename to client/src/context/settings.tsx index 47859b2..13ea93e 100644 --- a/client/src/context/bank.tsx +++ b/client/src/context/settings.tsx @@ -3,32 +3,36 @@ import { useEffect } from "react" const BANK_ACCOUNT_NUMBER_KEY = 'bank_account_number'; const BANK_ACCOUNT_HOLDER_KEY = 'bank_account_holder_name'; +const HIDE_SOUPS_KEY = 'hide_soups'; -export type BankContextProps = { +export type SettingsContextProps = { bankAccount?: string, holderName?: string, + hideSoups?: boolean, setBankAccountNumber: (accountNumber?: string) => void, setBankAccountHolderName: (holderName?: string) => void, + setHideSoupsOption: (hideSoups?: boolean) => void, } type ContextProps = { children: ReactNode } -const bankContext = React.createContext(null); +const settingsContext = React.createContext(null); -export function ProvideBank(props: ContextProps) { - const bank = useProvideBank(); - return {props.children} +export function ProvideSettings(props: ContextProps) { + const settings = useProvideSettings(); + return {props.children} } -export const useBank = () => { - return useContext(bankContext); +export const useSettings = () => { + return useContext(settingsContext); } -function useProvideBank(): BankContextProps { +function useProvideSettings(): SettingsContextProps { const [bankAccount, setBankAccount] = useState(); const [holderName, setHolderName] = useState(); + const [hideSoups, setHideSoups] = useState(); useEffect(() => { const accountNumber = localStorage.getItem(BANK_ACCOUNT_NUMBER_KEY); @@ -39,6 +43,10 @@ function useProvideBank(): BankContextProps { if (holderName) { setHolderName(holderName); } + const hideSoups = localStorage.getItem(HIDE_SOUPS_KEY); + if (hideSoups !== null) { + setHideSoups(hideSoups === 'true' ? true : false); + } }, []) useEffect(() => { @@ -57,6 +65,14 @@ function useProvideBank(): BankContextProps { } }, [holderName]); + useEffect(() => { + if (hideSoups) { + localStorage.setItem(HIDE_SOUPS_KEY, hideSoups ? 'true' : 'false'); + } else { + localStorage.removeItem(HIDE_SOUPS_KEY); + } + }, [hideSoups]); + function setBankAccountNumber(bankAccount?: string) { setBankAccount(bankAccount); } @@ -65,10 +81,16 @@ function useProvideBank(): BankContextProps { setHolderName(holderName); } + function setHideSoupsOption(hideSoups?: boolean) { + setHideSoups(hideSoups); + } + return { bankAccount, holderName, + hideSoups, setBankAccountNumber, setBankAccountHolderName, + setHideSoupsOption, } } diff --git a/client/src/index.tsx b/client/src/index.tsx index 85e4ba2..fe39e8d 100644 --- a/client/src/index.tsx +++ b/client/src/index.tsx @@ -4,7 +4,7 @@ import App from './App'; import { SocketContext, socket } from './context/socket'; import { ProvideAuth } from './context/auth'; import { ToastContainer } from 'react-toastify'; -import { ProvideBank } from './context/bank'; +import { ProvideSettings } from './context/settings'; import 'react-toastify/dist/ReactToastify.css'; import './index.css'; @@ -14,12 +14,12 @@ const root = ReactDOM.createRoot( root.render( - + - + );
{f.amount} {f.name}