max items for settings and login refactor (#16)

Author: mikevelko

src/api/api.ts

@@ -6,8 +6,7 @@ const BASE_URL = process.env.REACT_APP_SERVER_URL;
 const axiosInstance = axios.create({
   baseURL: BASE_URL,
   headers: {
-    'Content-Type': 'application/json',
-    'Origin': window.location.origin
+    'Content-Type': 'application/json'
   },
 });
 
@@ -32,7 +31,6 @@ axiosInstance.interceptors.response.use(
   (error) => {
     if (error.response && error.response.status === 401) {
       localStorage.removeItem('authToken');
-      return Promise.reject((window.location.href = ROUTES.login));
     }
     return Promise.reject(error);
   },
@@ -53,7 +51,6 @@ export const axiosRequestHandler = async ({ path, method, body }: AxiosRequestCo
     });
     return response.data;
   } catch (error) {
-    console.error('api request error', error);
     throw error;
   }
 };

src/api/settings.ts

@@ -8,6 +8,7 @@ import {
     SetShipmentCarrierPriceResponse,
     SetSiteAvailabilityRequest,
     SetSiteAvailabilityResponse,
+    SetMaxOrderItemsRequest,
 } from './proto-http/admin';
 
 export function setShipmentCarrier(
@@ -33,3 +34,9 @@ export function setSiteAvailability(
 ): Promise<SetSiteAvailabilityResponse> {
     return adminService.SetSiteAvailability(request);
 }
+
+export function setMaxOrderItems(
+    request: SetMaxOrderItemsRequest,
+): Promise<SetSiteAvailabilityResponse> {
+    return adminService.SetMaxOrderItems(request);
+}

src/components/login/login.tsx

@@ -18,7 +18,7 @@ export const LoginBlock: FC = () => {
     }
   }, [navigate]);
 
-  const handlePasswordSubmit = async (e: FormEvent<HTMLFormElement>) => {
+  const handleLoginSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     try {
@@ -38,24 +38,26 @@ export const LoginBlock: FC = () => {
 
       navigate({ to: ROUTES.main, replace: true });
     } catch (error) {
-      console.error(error);
+      setErrorMessage('error occured during login process');
     }
   };
 
   const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
     setPassword(e.target.value);
+    setErrorMessage('');
   };
 
   const handleUsernameChange = (e: ChangeEvent<HTMLInputElement>) => {
     setUsername(e.target.value);
+    setErrorMessage('');
   };
 
   return (
     <div className={styles.login_wrapper}>
       <div className={styles.logo}></div>
       <div className={styles.card_body}>
         {errorMessage && <p className={styles.error}>{errorMessage}</p>}
-        <form className={styles.form} onSubmit={handlePasswordSubmit}>
+        <form className={styles.form} onSubmit={handleLoginSubmit}>
           <div className={styles.user_container}>
             <input
               className={styles.input}
@@ -74,7 +76,7 @@ export const LoginBlock: FC = () => {
               placeholder='PASSWORD'
             />
           </div>
-          <button type='submit'>Login</button>
+          <button type='submit' disabled={!username || !password}>Login</button>
         </form>
       </div>
     </div>

src/components/managers/media/mediaManager.tsx

@@ -56,7 +56,6 @@ export const MediaManager: FC = () => {
       const authToken = localStorage.getItem('authToken');
 
       if (!authToken) {
-        console.log('fuck off');
         alert('Authentication token not found');
         return;
       }

src/components/managers/settings/settings.tsx

@@ -7,18 +7,24 @@ import {
   common_ShipmentCarrierInsert,
 } from 'api/proto-http/admin';
 import {
+  setMaxOrderItems,
   setPaymentMethod,
   setShipmentCarrier,
   setShipmentCarrierPrice,
   setSiteAvailability,
 } from 'api/settings';
 import styles from 'styles/settings.scss';
+import { useNavigate } from '@tanstack/react-location';
+import { ROUTES } from 'constants/routes';
+
 
 export const Settings: FC = () => {
   const [payment, setPayment] = useState<common_PaymentMethod[] | undefined>([]);
   const [carrier, setCarrier] = useState<common_ShipmentCarrierInsert[]>([]);
   const [price, setPrice] = useState<{ [name: string]: string }>({});
+  const [maxItems, setMaxItems] = useState<number>();
   const [siteEnabled, setSiteEnabled] = useState<boolean>();
+  const navigate = useNavigate();
 
   useEffect(() => {
     const fetchDictionary = async () => {
@@ -30,6 +36,7 @@ export const Settings: FC = () => {
         ).filter((c): c is common_ShipmentCarrierInsert => c !== undefined);
 
         setCarrier(carrierData);
+        setMaxItems(response.dictionary?.maxOrderItems)
         setSiteEnabled(response.dictionary?.siteEnabled);
       } catch (error) {
         console.error(error);
@@ -39,12 +46,21 @@ export const Settings: FC = () => {
   }, []);
 
   const handlerPaymentMethod = async (paymentMethod: string | undefined, allow: boolean) => {
+    if (paymentMethod) {
+      setPayment(prevPayment => {
+        return prevPayment?.map(method => {
+          if (method.name === paymentMethod) {
+            return { ...method, allowed: allow };
+          }
+          return method;
+        });
+      });
+    }
     try {
-      const response = await setPaymentMethod({
+      await setPaymentMethod({
         paymentMethod: paymentMethod as common_PaymentMethodNameEnum,
         allow,
       });
-      console.log(response);
     } catch (error) {
       console.error(error);
     }
@@ -70,11 +86,10 @@ export const Settings: FC = () => {
     const newPrice = price[carrier];
     if (newPrice) {
       try {
-        const response = await setShipmentCarrierPrice({
+        await setShipmentCarrierPrice({
           carrier: carrier,
           price: { value: newPrice },
         });
-        console.log(response);
       } catch (error) {
         console.error(error);
       }
@@ -89,12 +104,25 @@ export const Settings: FC = () => {
     }
   };
 
+  const handlerMaxOrderItems = async (e: string) => {
+    const maxOrderItemsParsed = parseInt(e, 10);
+    setMaxItems(maxOrderItemsParsed);
+
+    try {
+      await setMaxOrderItems({ maxOrderItems: maxItems });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+
+
   const handleSiteAvailability = async (available: boolean) => {
+    setSiteEnabled(available);
     try {
-      const response = await setSiteAvailability({
+      await setSiteAvailability({
         available,
       });
-      console.log(response);
     } catch (error) {
       console.error(error);
     }
@@ -113,6 +141,7 @@ export const Settings: FC = () => {
               <h3>{cutUnusedPartOfPaymentName(m.name)}</h3>
               <input
                 type='checkbox'
+                checked={m.allowed}
                 onChange={(e) => handlerPaymentMethod(m.name, e.target.checked)}
               />
             </div>
@@ -138,13 +167,22 @@ export const Settings: FC = () => {
                   onChange={(e) => handlePriceChange(c.carrier, e.target.value)}
                 />
                 <button type='button' onClick={() => handleShipmentCarrierPrice(c.carrier)}>
-                  upload
+                  update price
                 </button>
               </div>
             </div>
           ))}
         </div>
 
+        <div className={styles.max_items_container}>
+          <h2>max items</h2>
+          <input
+            type='number'
+            defaultValue={maxItems}
+            onChange={(e) => handlerMaxOrderItems(e.target.value)}
+          />
+        </div>
+
         <div className={styles.site}>
           <h2>site available</h2>
           <input

src/styles/settings.scss

@@ -76,6 +76,18 @@
         }
     }
 
+    .max_items_container {
+        display: grid;
+        gap: 10px;
+
+        input {
+            width: 100px;
+            font-size: 20px;
+            font-weight: bold;
+            border: 2px solid black;
+        }
+    }
+
     .site {
         display: flex;
         align-items: center;