Refaktor: Nálezy SonarQube

client/src/App.tsx

@@ -24,7 +24,7 @@ import { useEasterEgg } from './context/eggs';
 import { getImage } from './api/EasterEggApi';
 import { Link } from 'react-router';
 import { STATS_URL } from './AppRoutes';
-import { ClientData, Food, PizzaOrder, DepartureTime, PizzaDayState, Restaurant, RestaurantDayMenu, RestaurantDayMenuMap, LunchChoice, LunchChoices, UserLunchChoice, PizzaVariant } from '../../types';
+import { ClientData, Food, PizzaOrder, DepartureTime, PizzaDayState, Restaurant, RestaurantDayMenu, RestaurantDayMenuMap, LunchChoice, UserLunchChoice, PizzaVariant } from '../../types';
 
 const EVENT_CONNECT = "connect"
 
@@ -41,7 +41,7 @@ const EASTER_EGG_DEFAULT_DURATION = 0.75;
 function App() {
   const auth = useAuth();
   const settings = useSettings();
-  const [easterEgg, easterEggLoading] = useEasterEgg(auth);
+  const [easterEgg, _] = useEasterEgg(auth);
   const [isConnected, setIsConnected] = useState<boolean>(false);
   const [data, setData] = useState<ClientData>();
   const [food, setFood] = useState<RestaurantDayMenuMap>();
@@ -65,7 +65,7 @@ function App() {
 
   // Načtení dat po přihlášení
   useEffect(() => {
-    if (!auth || !auth.login) {
+    if (!auth?.login) {
       return
     }
     getData().then(({ data }) => {
@@ -82,7 +82,7 @@ function App() {
 
   // Přenačtení pro zvolený den
   useEffect(() => {
-    if (!auth || !auth.login) {
+    if (!auth?.login) {
       return
     }
     getData(dayIndex).then((data: ClientData) => {
@@ -96,11 +96,9 @@ function App() {
   // Registrace socket eventů
   useEffect(() => {
     socket.on(EVENT_CONNECT, () => {
-      // console.log("Connected!");
       setIsConnected(true);
     });
     socket.on(EVENT_DISCONNECT, () => {
-      // console.log("Disconnected!");
       setIsConnected(false);
     });
     socket.on(EVENT_MESSAGE, (newData: ClientData) => {
@@ -119,7 +117,7 @@ function App() {
   }, [socket]);
 
   useEffect(() => {
-    if (!auth || !auth.login) {
+    if (!auth?.login) {
       return
     }
     // TODO tohle občas náhodně nezafunguje, nutno přepsat, viz https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
@@ -277,7 +275,7 @@ function App() {
 
   const handlePizzaChange = async (value: SelectedOptionValue | SelectedOptionValue[]) => {
     if (auth?.login && data?.pizzaList) {
-      if (!(typeof value === 'string')) {
+      if (typeof value !== 'string') {
         throw Error('Nepodporovaný typ hodnoty');
       }
       const s = value.split('|');
@@ -365,13 +363,13 @@ function App() {
       content = <h3>Chyba načtení dat</h3>
     }
     return <Col md={12} lg={3} className='mt-3'>
-      <h3 style={{ cursor: 'pointer' }} onClick={() => doAddClickFoodChoice(location, undefined)}>{location}</h3>
+      <h3 style={{ cursor: 'pointer' }} onClick={() => doAddClickFoodChoice(location)}>{location}</h3>
       {menu?.lastUpdate && <small>Poslední aktualizace: {getHumanDateTime(new Date(menu.lastUpdate))}</small>}
       {content}
     </Col>
   }
 
-  if (!auth || !auth.login) {
+  if (!auth?.login) {
     return <Login />;
   }
 
@@ -411,8 +409,8 @@ function App() {
       <div className='wrapper'>
         {data.isWeekend ? <h4>Užívejte víkend :)</h4> : <>
           <Alert variant={'primary'}>
-            <img src='hat.png' style={{ position: "absolute", width: "70px", rotate: "-45deg", left: -40, top: -58 }} />
-            <img src='snowman.png' style={{ position: "absolute", height: "110px", right: 10, top: 5 }} />
+            <img alt="" src='hat.png' style={{ position: "absolute", width: "70px", rotate: "-45deg", left: -40, top: -58 }} />
+            <img alt="" src='snowman.png' style={{ position: "absolute", height: "110px", right: 10, top: 5 }} />
             Poslední změny:
             <ul>
               <li>Možnost výběru restaurace a jídel kliknutím v tabulce</li>
@@ -429,7 +427,6 @@ function App() {
           <Row className='food-tables'>
             {/* TODO zjednodušit, stačí iterovat klíče typu Restaurant */}
             {food['SLADOVNICKA'] && renderFoodTable('SLADOVNICKA', food['SLADOVNICKA'])}
-            {/* {food['UMOTLIKU'] && renderFoodTable('UMOTLIKU', food['UMOTLIKU'])} */}
             {food['TECHTOWER'] && renderFoodTable('TECHTOWER', food['TECHTOWER'])}
             {food['ZASTAVKAUMICHALA'] && renderFoodTable('ZASTAVKAUMICHALA', food['ZASTAVKAUMICHALA'])}
             {food['SENKSERIKOVA'] && renderFoodTable('SENKSERIKOVA', food['SENKSERIKOVA'])}
@@ -452,7 +449,7 @@ function App() {
                   <p style={{ marginTop: "10px" }}>Na co dobrého? <small>(nepovinné)</small></p>
                   <Form.Select ref={foodChoiceRef} onChange={doAddFoodChoice}>
                     <option></option>
-                    {foodChoiceList.map((food, index) => <option key={index} value={index}>{food.name}</option>)}
+                    {foodChoiceList.map((food, index) => <option key={food.name} value={index}>{food.name}</option>)}
                   </Form.Select>
                 </>}
                 {foodChoiceList && !closed && <>
@@ -491,7 +488,7 @@ function App() {
                                   const userPayload = entry[1];
                                   const userChoices = userPayload?.selectedFoods;
                                   const trusted = userPayload?.trusted || false;
-                                  return <tr key={index}>
+                                  return <tr key={entry[0]}>
                                     <td>
                                       {trusted && <span className='trusted-icon'>
                                         <FontAwesomeIcon title='Uživatel ověřený doménovým přihlášením' icon={faCircleCheck} style={{ cursor: "help" }} />
@@ -587,9 +584,6 @@ function App() {
                               <Button className='danger mb-3' title="Umožní znovu editovat objednávky." onClick={async () => {
                                 await unlockPizzaDay();
                               }}>Odemknout</Button>
-                              {/* <Button className='danger mb-3' style={{ marginLeft: '20px' }} onClick={async () => {
-                          await addToCart();
-                        }}>Přidat vše do košíku</Button> */}
                               <Button className='danger mb-3' style={{ marginLeft: '20px' }} title={noOrders ? "Nelze objednat - neexistuje žádná objednávka" : "Použij po objednání. Objednávky zůstanou zamčeny."} disabled={noOrders} onClick={async () => {
                                 await finishOrder();
                               }}>Objednáno</Button>

client/src/Login.tsx

@@ -25,9 +25,8 @@ export default function Login() {
   }, [auth]);
 
   const doLogin = useCallback(async () => {
-    const length = loginRef?.current?.value && loginRef?.current?.value.length && loginRef.current.value.replace(/\s/g, '').length
+    const length = loginRef?.current?.value.length && loginRef.current.value.replace(/\s/g, '').length
     if (length) {
-      // TODO odchytávat cokoliv mimo 200
       const token = await login(loginRef.current?.value);
       if (token) {
         auth?.setToken(token);
@@ -35,7 +34,7 @@ export default function Login() {
     }
   }, [auth]);
 
-  if (!auth || !auth.login) {
+  if (!auth?.login) {
     return <div className='login'>
       <h1>Luncher</h1>
       <h4 style={{ marginBottom: "50px" }}>Aplikace pro profesionální management obědů</h4>

client/src/Utils.tsx

@@ -93,7 +93,7 @@ export function formatDate(date: Date, format?: string) {
     let month = String(date.getMonth() + 1).padStart(2, "0");
     let year = String(date.getFullYear());
 
-    const f = (format === undefined) ? 'YYYY-MM-DD' : format;
+    const f = format ?? 'YYYY-MM-DD';
     return f.replace('DD', day).replace('MM', month).replace('YYYY', year);
 }
 

client/src/api/FoodApi.ts

@@ -1,5 +1,4 @@
-import { AddChoiceRequest, ChangeDepartureTimeRequest, RemoveChoiceRequest, RemoveChoicesRequest, UpdateNoteRequest } from "../../../types";
-import { LunchChoice } from "../../../types";
+import { AddChoiceRequest, ChangeDepartureTimeRequest, LunchChoice, RemoveChoiceRequest, RemoveChoicesRequest, UpdateNoteRequest } from "../../../types";
 import { api } from "./Api";
 
 const FOOD_API_PREFIX = '/api/food';

client/src/api/PizzaDayApi.ts

@@ -1,5 +1,4 @@
-import { AddPizzaRequest, FinishDeliveryRequest, RemovePizzaRequest, UpdatePizzaDayNoteRequest, UpdatePizzaFeeRequest } from "../../../types";
-import { PizzaVariant } from "../../../types";
+import { AddPizzaRequest, FinishDeliveryRequest, PizzaVariant, RemovePizzaRequest, UpdatePizzaDayNoteRequest, UpdatePizzaFeeRequest } from "../../../types";
 import { api } from "./Api";
 
 const PIZZADAY_API_PREFIX = '/api/pizzaDay';

client/src/api/VotingApi.ts

@@ -1,5 +1,4 @@
-import { UpdateFeatureVoteRequest } from "../../../types";
-import { FeatureRequest } from "../../../types";
+import { FeatureRequest, UpdateFeatureVoteRequest } from "../../../types";
 import { api } from "./Api";
 
 const VOTING_API_PREFIX = '/api/voting';

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);

client/src/context/auth.tsx

@@ -1,5 +1,4 @@
-import React, { ReactNode, useContext, useState } from "react"
-import { useEffect } from "react"
+import React, { ReactNode, useContext, useEffect, useState } from "react"
 import { useJwt } from "react-jwt";
 import { deleteToken, getToken, storeToken } from "../Utils";
 
@@ -16,7 +15,7 @@ type ContextProps = {
 
 const authContext = React.createContext<AuthContextProps | null>(null);
 
-export function ProvideAuth(props: ContextProps) {
+export function ProvideAuth(props: Readonly<ContextProps>) {
   const auth = useProvideAuth();
   return <authContext.Provider value={auth}>{props.children}</authContext.Provider>
 }
@@ -29,7 +28,7 @@ function useProvideAuth(): AuthContextProps {
   const [loginName, setLoginName] = useState<string | undefined>();
   const [trusted, setTrusted] = useState<boolean | undefined>();
   const [token, setToken] = useState<string | undefined>(getToken());
-  const { decodedToken } = useJwt(token || '');
+  const { decodedToken } = useJwt(token ?? '');
 
   useEffect(() => {
     if (token && token.length > 0) {

client/src/context/settings.tsx

@@ -1,5 +1,4 @@
-import React, { ReactNode, useContext, useState } from "react"
-import { useEffect } from "react"
+import React, { ReactNode, useContext, useEffect, useState } from "react"
 
 const BANK_ACCOUNT_NUMBER_KEY = 'bank_account_number';
 const BANK_ACCOUNT_HOLDER_KEY = 'bank_account_holder_name';
@@ -20,7 +19,7 @@ type ContextProps = {
 
 const settingsContext = React.createContext<SettingsContextProps | null>(null);
 
-export function ProvideSettings(props: ContextProps) {
+export function ProvideSettings(props: Readonly<ContextProps>) {
   const settings = useProvideSettings();
   return <settingsContext.Provider value={settings}>{props.children}</settingsContext.Provider>
 }
@@ -45,7 +44,7 @@ function useProvideSettings(): SettingsContextProps {
     }
     const hideSoups = localStorage.getItem(HIDE_SOUPS_KEY);
     if (hideSoups !== null) {
-      setHideSoups(hideSoups === 'true' ? true : false);
+      setHideSoups(hideSoups === 'true');
     }
   }, [])
 

client/src/context/socket.js

@@ -18,8 +18,3 @@ export const SocketContext = React.createContext();
 export const EVENT_CONNECT = 'connect';
 export const EVENT_DISCONNECT = 'disconnect';
 export const EVENT_MESSAGE = 'message';
-// export const EVENT_CONFIG = 'config';
-// export const EVENT_TOASTER = 'toaster';
-// export const EVENT_VOTING = 'voting';
-// export const EVENT_VOTE_CONFIG = 'voteSettings';
-// export const EVENT_ADMIN = 'admin';