Merge pull request #363 from vaskocuturilo/dv000301_refactoring_main_…

…fe_class

DV-000301: refactoring main FE class.

frontend/src/api/http-common.js

@@ -0,0 +1,38 @@
+import axios from "axios";
+
+const apiToken = process.env.REACT_APP_TOKEN;
+if (!apiToken) {
+    console.error("REACT_APP_TOKEN is not defined.");
+}
+
+const apiClient = axios.create({
+    baseURL: "/api/v1",
+    headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiToken,
+    },
+    timeout: 5000,
+});
+
+
+apiClient.interceptors.request.use(
+    (config) => {
+        return config;
+    },
+    (error) => {
+        return Promise.reject(error);
+    }
+);
+
+apiClient.interceptors.response.use(
+    (response) => {
+        // Handle successful responses
+        return response;
+    },
+    (error) => {
+        console.error("API Error: ", error);
+        return Promise.reject(error);
+    }
+);
+
+export default apiClient;

frontend/src/components/CountrySelect.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+function CountrySelect({countries, value, onChange, id, selectRef}) {
+    return (
+        <div className="country-select-container">
+            <select value={value} id={id} onChange={onChange} className="form__input center" ref={selectRef}>
+                <option value="None">Choose country</option>
+                {countries.map(country => (
+                    <option key={country.value} value={country.value}>
+                        {country.flag}&emsp;{country.label}
+                    </option>
+                ))}
+            </select>
+        </div>
+    );
+}
+
+export default CountrySelect;

frontend/src/components/ImageManager.js

@@ -18,7 +18,7 @@ class ImageManager {
             "ireland": "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Revised_format_Republic_of_Ireland_numberplate_%282013-%29.svg/1920px-Revised_format_Republic_of_Ireland_numberplate_%282013-%29.svg.png",
             "italian": "https://cdn.skoda-storyboard.com/2019/06/Italy-license-plate-english.jpg",
             "kazakhstan": "https://upload.wikimedia.org/wikipedia/commons/f/fe/License_plate_Kazakhstan_2012.png",
-            "kosovo": "https://upload.wikimedia.org/wikipedia/en/thumb/a/a9/Kosovo_car_registration_plate_labels.svg/320px-Kosovo_car_registration_plate_labels.svg.png",
+            "kosovo": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Kosovar_license_plate.svg/640px-Kosovar_license_plate.svg.png",
             "kyrgyzstan": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Plak_shakhsi-KG.png/800px-Plak_shakhsi-KG.png",
             "lithuania": "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Lithuanian_license_plate.svg/1280px-Lithuanian_license_plate.svg.png",
             "malaysia": "https://en.m.wikipedia.org/wiki/Vehicle_registration_plates_of_Malaysia#/media/File%3AMalaysia_penang_license_plate_front.JPG",

frontend/src/components/Timer.js

@@ -0,0 +1,32 @@
+import React, {useEffect, useState} from "react";
+
+const Timer = ({initialMinutes = 5, initialSeconds = 0}) => {
+    const [minutes, setMinutes] = useState(initialMinutes);
+    const [seconds, setSeconds] = useState(initialSeconds);
+
+    useEffect(() => {
+        const updateTime = () => {
+            if (minutes === 0 && seconds === 0) {
+                setMinutes(initialMinutes); // Reset to initial values when time is up
+                setSeconds(0);
+            } else if (seconds === 0) {
+                setMinutes(minutes - 1);
+                setSeconds(59);
+            } else {
+                setSeconds(seconds - 1);
+            }
+        };
+
+        const timeoutId = setTimeout(updateTime, 1000);
+
+        return () => clearTimeout(timeoutId);
+    }, [minutes, seconds, initialMinutes]);
+
+    return (
+        <div>
+            Time Remaining: {minutes}:{seconds < 10 ? `0${seconds}` : seconds}
+        </div>
+    );
+};
+
+export default Timer;

frontend/src/countries/countriesForDiplomaticPlates.js

@@ -0,0 +1,21 @@
+const countriesForDiplomaticPlates = [
+    { value: 'austria', flag: '🇦🇹', label: 'Austria' },
+    { value: 'croatia', flag: '🇭🇷', label: 'Croatia' },
+    { value: 'estonia', flag: '🇪🇪', label: 'Estonia' },
+    { value: 'france', flag: '🇫🇷', label: 'France' },
+    { value: 'germany', flag: '🇩🇪', label: 'Germany' },
+    { value: 'italian', flag: '🇮🇹', label: 'Italy' },
+    { value: 'kyrgyzstan', flag: '🇰🇬', label: 'Kyrgyzstan' },
+    { value: 'lithuania', flag: '🇱🇹', label: 'Lithuania' },
+    { value: 'malaysia', flag: '🇲🇾', label: 'Malaysia' },
+    { value: 'montenegro', flag: '🇲🇪', label: 'Montenegro' },
+    { value: 'norway', flag: '🇳🇴', label: 'Norway' },
+    { value: 'poland', flag: '🇵🇱', label: 'Poland' },
+    { value: 'romania', flag: '🇷🇴', label: 'Romania' },
+    { value: 'portugal', flag: '🇵🇹', label: 'Portugal' },
+    { value: 'russia', flag: '🇷🇺', label: 'Russia' },
+    { value: 'sweden', flag: '🇸🇪', label: 'Sweden' },
+    { value: 'switzerland', flag: '🇨🇭', label: 'Switzerland' },
+];
+
+export default countriesForDiplomaticPlates;

frontend/src/countries/countriesForPlates.js

@@ -0,0 +1,40 @@
+const countriesForPlates = [
+    { value: 'armenia', flag: '🇦🇲', label: 'Armenia' },
+    { value: 'austria', flag: '🇦🇹', label: 'Austria' },
+    { value: 'azerbaijan', flag: '🇦🇿', label: 'Azerbaijan' },
+    { value: 'belarus', flag: '🇧🇾', label: 'Belarus' },
+    { value: 'british', flag: '🇻🇬', label: 'Great Britain' },
+    { value: 'bulgaria', flag: '🇧🇬', label: 'Bulgaria' },
+    { value: 'croatia', flag: '🇭🇷', label: 'Croatia' },
+    { value: 'czech', flag: '🇨🇿', label: 'Czech Republic' },
+    { value: 'estonia', flag: '🇪🇪', label: 'Estonia' },
+    { value: 'france', flag: '🇫🇷', label: 'France' },
+    { value: 'germany', flag: '🇩🇪', label: 'Germany' },
+    { value: 'greece', flag: '🇬🇷', label: 'Greece' },
+    { value: 'hungary', flag: '🇭🇺', label: 'Hungary' },
+    { value: 'ireland', flag: '🇮🇪', label: 'Ireland' },
+    { value: 'italian', flag: '🇮🇹', label: 'Italy' },
+    { value: 'kazakhstan', flag: '🇰🇿', label: 'Kazakhstan' },
+    { value: 'kosovo', flag: '🇽🇰', label: 'Kosovo' },
+    { value: 'kyrgyzstan', flag: '🇰🇬', label: 'Kyrgyzstan' },
+    { value: 'lithuania', flag: '🇱🇹', label: 'Lithuania' },
+    { value: 'malaysia', flag: '🇲🇾', label: 'Malaysia' },
+    { value: 'moldova', flag: '🇲🇩', label: 'Moldova' },
+    { value: 'montenegro', flag: '🇲🇪', label: 'Montenegro' },
+    { value: 'norway', flag: '🇳🇴', label: 'Norway' },
+    { value: 'macedonia', flag: '🇲🇰', label: 'North Macedonia' },
+    { value: 'poland', flag: '🇵🇱', label: 'Poland' },
+    { value: 'romania', flag: '🇷🇴', label: 'Romania' },
+    { value: 'russia', flag: '🇷🇺', label: 'Russia' },
+    { value: 'serbia', flag: '🇷🇸', label: 'Serbia' },
+    { value: 'slovakia', flag: '🇸🇰', label: 'Slovakia' },
+    { value: 'slovenia', flag: '🇸🇮', label: 'Slovenia' },
+    { value: 'sweden', flag: '🇸🇪', label: 'Sweden' },
+    { value: 'switzerland', flag: '🇨🇭', label: 'Switzerland' },
+    { value: 'turkey', flag: '🇹🇷', label: 'Turkey' },
+    { value: 'ukraine', flag: '🇺🇦', label: 'Ukraine' },
+    { value: 'uzbekistan', flag: '🇺🇿', label: 'Uzbekistan' },
+];
+
+export default countriesForPlates;
+

frontend/src/service/DiplomaticPlateService.js

@@ -0,0 +1,11 @@
+import {PlateService} from './PlateService';
+
+export class DiplomaticPlateService extends PlateService {
+    async getPlatesByRegion(diplomatic) {
+        await this.getPlates(`/${diplomatic}/diplomatic/plates/region/${this.getRegionRef.current.value}`);
+    }
+
+    async getPlatesByDescription(diplomatic) {
+        await this.getPlates(`/${diplomatic}/diplomatic/plates/description/${this.getRegionRef.current.value}`);
+    }
+}

frontend/src/service/PlateService.js

@@ -0,0 +1,44 @@
+export class PlateService {
+    constructor(apiClient, getRegionRef, setGetResult, setIsShown, regionRef) {
+        this.apiClient = apiClient;
+        this.getRegionRef = getRegionRef;
+        this.setGetResult = setGetResult;
+        this.setIsShown = setIsShown;
+        this.regionRef = regionRef;
+    }
+
+    // Template method
+    async getPlates(endpoint) {
+        const regionValue = this.getRegionRef.current.value;
+        const selectValue = this.regionRef.current.value;
+
+        if (selectValue === 'None') {
+            alert('Choose any country first');
+            return;
+        }
+
+        if (regionValue === '') {
+            alert('Choose region first');
+            return;
+        }
+
+        try {
+            const res = await this.apiClient.get(endpoint);
+            const result = { information: res.data };
+            this.setGetResult(this.formatResponse(result));
+            this.getRegionRef.current.value = '';
+            this.setIsShown(true);
+        } catch (err) {
+            if (!err?.response) {
+                alert("No Server Response");
+                return;
+            }
+            this.setGetResult(this.formatResponse(err.response?.data || err));
+            this.getRegionRef.current.value = '';
+        }
+    }
+
+    formatResponse(res) {
+        return JSON.stringify(res, null, 2);
+    }
+}

frontend/src/service/RegularPlateService.js

@@ -0,0 +1,11 @@
+import {PlateService} from './PlateService';
+
+export class RegularPlateService extends PlateService {
+    async getPlatesByRegion(plates) {
+        await this.getPlates(`/${plates}/plates/region/${this.getRegionRef.current.value}`);
+    }
+
+    async getPlatesByDescription(plates) {
+        await this.getPlates(`/${plates}/plates/description/${this.getRegionRef.current.value}`);
+    }
+}