Refaktor: Nálezy SonarQube

client/src/components/Header.tsx

@@ -78,7 +78,7 @@ export default function Header() {
                     cislo = cislo.padStart(16, '0');
                 }
                 let sum = 0;
-                for (var i = 0; i < cislo.length; i++) {
+                for (let i = 0; i < cislo.length; i++) {
                     const char = cislo.charAt(i);
                     const order = (cislo.length - 1) - i;
                     const weight = (2 ** order) % 11;

client/src/components/Loader.tsx

@@ -2,15 +2,15 @@ import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 type Props = {
-  title?: String,
+  title?: string,
   icon: IconDefinition,
-  description: String,
-  animation?: String,
+  description: string,
+  animation?: string,
 }
 
-function Loader(props: Props) {
+function Loader(props: Readonly<Props>) {
   return <div className='loader'>
-    <h1>{props.title || 'Prosím čekejte...'}</h1>
+    <h1>{props.title ?? 'Prosím čekejte...'}</h1>
     <FontAwesomeIcon icon={props.icon} className={`loader-icon mb-3 ` + (props.animation ?? '')} />
     <p>{props.description}</p>
   </div>

client/src/components/PizzaOrderList.tsx

@@ -10,7 +10,7 @@ type Props = {
     creator: string,
 }
 
-export default function PizzaOrderList({ state, orders, onDelete, creator }: Props) {
+export default function PizzaOrderList({ state, orders, onDelete, creator }: Readonly<Props>) {
     const saveFees = async (customer: string, text?: string, price?: number) => {
         await updatePizzaFee(customer, text, price);
     }
@@ -21,26 +21,24 @@ export default function PizzaOrderList({ state, orders, onDelete, creator }: Pro
 
     const total = orders.reduce((total, order) => total + order.totalPrice, 0);
 
-    return <>
-        <Table className="mt-3" striped bordered hover>
-            <thead>
-                <tr>
-                    <th>Jméno</th>
-                    <th>Objednávka</th>
-                    <th>Poznámka</th>
-                    <th>Příplatek</th>
-                    <th>Cena</th>
-                </tr>
-            </thead>
-            <tbody>
-                {orders.map(order => <tr key={order.customer}>
-                    <PizzaOrderRow creator={creator} state={state} order={order} onDelete={onDelete} onFeeModalSave={saveFees} />
-                </tr>)}
-                <tr style={{ fontWeight: 'bold' }}>
-                    <td colSpan={4}>Celkem</td>
-                    <td>{`${total} Kč`}</td>
-                </tr>
-            </tbody>
-        </Table>
-    </>
+    return <Table className="mt-3" striped bordered hover>
+        <thead>
+            <tr>
+                <th>Jméno</th>
+                <th>Objednávka</th>
+                <th>Poznámka</th>
+                <th>Příplatek</th>
+                <th>Cena</th>
+            </tr>
+        </thead>
+        <tbody>
+            {orders.map(order => <tr key={order.customer}>
+                <PizzaOrderRow creator={creator} state={state} order={order} onDelete={onDelete} onFeeModalSave={saveFees} />
+            </tr>)}
+            <tr style={{ fontWeight: 'bold' }}>
+                <td colSpan={4}>Celkem</td>
+                <td>{`${total} Kč`}</td>
+            </tr>
+        </tbody>
+    </Table>
 }

client/src/components/PizzaOrderRow.tsx

@@ -13,19 +13,19 @@ type Props = {
     onFeeModalSave: (customer: string, name?: string, price?: number) => void,
 }
 
-export default function PizzaOrderRow({ creator, order, state, onDelete, onFeeModalSave }: Props) {
+export default function PizzaOrderRow({ creator, order, state, onDelete, onFeeModalSave }: Readonly<Props>) {
     const auth = useAuth();
-    const [isFeeModalOpen, setFeeModalOpen] = useState<boolean>(false);
+    const [isFeeModalOpen, setIsFeeModalOpen] = useState<boolean>(false);
 
     const saveFees = (customer: string, text?: string, price?: number) => {
         onFeeModalSave(customer, text, price);
-        setFeeModalOpen(false);
+        setIsFeeModalOpen(false);
     }
 
     return <>
         <td>{order.customer}</td>
-        <td>{order.pizzaList!.map<React.ReactNode>((pizzaOrder, index) =>
-            <span key={index}>
+        <td>{order.pizzaList!.map<React.ReactNode>(pizzaOrder =>
+            <span key={pizzaOrder.name}>
                 {`${pizzaOrder.name}, ${pizzaOrder.size} (${pizzaOrder.price} Kč)`}
                 {auth?.login === order.customer && state === PizzaDayState.CREATED &&
                     <FontAwesomeIcon onClick={() => {
@@ -35,11 +35,11 @@ export default function PizzaOrderRow({ creator, order, state, onDelete, onFeeMo
             </span>)
             .reduce((prev, curr, index) => [prev, <br key={`br-${index}`} />, curr])}
         </td>
-        <td style={{ maxWidth: "200px" }}>{order.note || '-'}</td>
+        <td style={{ maxWidth: "200px" }}>{order.note ?? '-'}</td>
         <td style={{ maxWidth: "200px" }}>{order.fee?.price ? `${order.fee.price} Kč${order.fee.text ? ` (${order.fee.text})` : ''}` : '-'}</td>
         <td>
-            {order.totalPrice} Kč{auth?.login === creator && state === PizzaDayState.CREATED && <FontAwesomeIcon onClick={() => { setFeeModalOpen(true) }} title='Nastavit příplatek' className='action-icon' icon={faMoneyBill1} />}
+            {order.totalPrice} Kč{auth?.login === creator && state === PizzaDayState.CREATED && <FontAwesomeIcon onClick={() => { setIsFeeModalOpen(true) }} title='Nastavit příplatek' className='action-icon' icon={faMoneyBill1} />}
         </td>
-        <PizzaAdditionalFeeModal customerName={order.customer} isOpen={isFeeModalOpen} onClose={() => setFeeModalOpen(false)} onSave={saveFees} initialValues={{ text: order.fee?.text, price: order.fee?.price?.toString() }} />
+        <PizzaAdditionalFeeModal customerName={order.customer} isOpen={isFeeModalOpen} onClose={() => setIsFeeModalOpen(false)} onSave={saveFees} initialValues={{ text: order.fee?.text, price: order.fee?.price?.toString() }} />
     </>
 }

client/src/components/modals/FeaturesVotingModal.tsx

@@ -9,7 +9,7 @@ type Props = {
 }
 
 /** Modální dialog pro hlasování o nových funkcích. */
-export default function FeaturesVotingModal({ isOpen, onClose, onChange, initialValues }: Props) {
+export default function FeaturesVotingModal({ isOpen, onClose, onChange, initialValues }: Readonly<Props>) {
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         onChange(e.currentTarget.value as FeatureRequest, e.currentTarget.checked);
@@ -31,7 +31,7 @@ export default function FeaturesVotingModal({ isOpen, onClose, onChange, initial
                     label={FeatureRequest[key]}
                     onChange={handleChange}
                     value={key}
-                    defaultChecked={initialValues && initialValues.includes(key as FeatureRequest)}
+                    defaultChecked={initialValues?.includes(key as FeatureRequest)}
                 />
             })}
             <p className="mt-3" style={{ fontSize: '12px' }}>Něco jiného? Dejte vědět.</p>

client/src/components/modals/NoteModal.tsx

@@ -8,7 +8,7 @@ type Props = {
 }
 
 /** Modální dialog pro úpravu obecné poznámky. */
-export default function NoteModal({ isOpen, onClose, onSave }: Props) {
+export default function NoteModal({ isOpen, onClose, onSave }: Readonly<Props>) {
     const note = useRef<HTMLInputElement>(null);
 
     const save = () => {

client/src/components/modals/PizzaAdditionalFeeModal.tsx

@@ -10,17 +10,17 @@ type Props = {
 }
 
 /** Modální dialog pro nastavení příplatků za pizzu. */
-export default function PizzaAdditionalFeeModal({ customerName, isOpen, onClose, onSave, initialValues }: Props) {
+export default function PizzaAdditionalFeeModal({ customerName, isOpen, onClose, onSave, initialValues }: Readonly<Props>) {
     const textRef = useRef<HTMLInputElement>(null);
     const priceRef = useRef<HTMLInputElement>(null);
 
     const doSubmit = () => {
-        onSave(customerName, textRef.current?.value, parseInt(priceRef.current?.value || "0"));
+        onSave(customerName, textRef.current?.value, parseInt(priceRef.current?.value ?? "0"));
     }
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === 'Enter') {
-            onSave(customerName, textRef.current?.value, parseInt(priceRef.current?.value || "0"));
+            onSave(customerName, textRef.current?.value, parseInt(priceRef.current?.value ?? "0"));
         }
     }
 

client/src/components/modals/PizzaCalculatorModal.tsx

@@ -23,7 +23,7 @@ type Result = {
 }
 
 /** Modální dialog pro výpočet výhodnosti pizzy. */
-export default function PizzaCalculatorModal({ isOpen, onClose }: Props) {
+export default function PizzaCalculatorModal({ isOpen, onClose }: Readonly<Props>) {
     const diameter1Ref = useRef<HTMLInputElement>(null);
     const price1Ref = useRef<HTMLInputElement>(null);
     const diameter2Ref = useRef<HTMLInputElement>(null);

client/src/components/modals/SettingsModal.tsx

@@ -9,7 +9,7 @@ type Props = {
 }
 
 /** Modální dialog pro uživatelská nastavení. */
-export default function SettingsModal({ isOpen, onClose, onSave }: Props) {
+export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Props>) {
     const settings = useSettings();
     const bankAccountRef = useRef<HTMLInputElement>(null);
     const nameRef = useRef<HTMLInputElement>(null);