prettier pass

components/Form/components/CountrySelect.js

@@ -8,32 +8,35 @@ const ItemTemplate = ({ item }) => {
   const secondaryName = item.names.length > 1 ? item.names[0] : '';
   return (
     <div className={styles.item}>
-      <div>{primaryName}<span className={styles.secondaryNames}>{secondaryName}</span></div>
-    </div >
+      <div>
+        {primaryName}
+        <span className={styles.secondaryNames}>{secondaryName}</span>
+      </div>
+    </div>
   );
 };
 
 const buildCountryLookup = (countries = []) => {
   return countries.map((country) => ({
-    ...country, search: country.names
-      .join('||')
-      .toLowerCase()
-
+    ...country,
+    search: country.names.join('||').toLowerCase(),
   }));
 };
 
-const compareByName = (country = {}, query = '') => country.search.includes(query);
+const compareByName = (country = {}, query = '') =>
+  country.search.includes(query);
 
 export default function CountrySelect({ value, countries, onChange }) {
   const [selectedCountry, setSelectedCountry] = useState(null);
-  const [countriesLookup] = useState((buildCountryLookup(countries)));
+  const [countriesLookup] = useState(buildCountryLookup(countries));
   const [filteredCountries, setFilteredCountries] = useState([]);
 
   const searchCountry = (event) => {
     const query = event.query.trim().toLowerCase();
 
-    const result = query ?
-      countriesLookup.filter((country) => compareByName(country, query)) : [...countriesLookup];
+    const result = query
+      ? countriesLookup.filter((country) => compareByName(country, query))
+      : [...countriesLookup];
     setFilteredCountries(result);
   };
 
@@ -48,7 +51,7 @@ export default function CountrySelect({ value, countries, onChange }) {
   }, [selectedCountry]);
 
   return (
-    <div >
+    <div>
       <label htmlFor='countryPicker'>Country</label>
       <AutoComplete
         id='countryPicker'
@@ -60,10 +63,15 @@ export default function CountrySelect({ value, countries, onChange }) {
         dropdownAutoFocus
         onBlur={(event) => {
           const value = event.target.value;
-          if (!value) { setSelectedCountry(null); return; };
+          if (!value) {
+            setSelectedCountry(null);
+            return;
+          }
           if (!selectedCountry?.code && typeof value === 'string') {
             const query = value.trim().toLowerCase();
-            const maybeCountry = countriesLookup.find((country) => compareByName(country, query));
+            const maybeCountry = countriesLookup.find((country) =>
+              compareByName(country, query)
+            );
             setSelectedCountry(maybeCountry);
           }
         }}

components/Form/components/DateSelect.js

@@ -1,26 +1,26 @@
 import { Calendar } from 'primereact/calendar';
 
 export default function DateSelect({
-    firstDate,
-    setDate,
-    selectedDate,
-    disabled = true,
+  firstDate,
+  setDate,
+  selectedDate,
+  disabled = true,
 }) {
-    return (
-        <div>
-            <label htmlFor='monthPicker'>Starting Date</label>
-            <Calendar
-                inputId='monthPicker'
-                value={selectedDate}
-                disabled={disabled}
-                onChange={(e) => setDate(e.value)}
-                view='month'
-                minDate={new Date(`${firstDate[0]}-${firstDate[1]}-15`)}
-                maxDate={new Date()}
-                dateFormat='mm/yy'
-                tooltipOptions={{ position: 'mouse' }}
-                tooltip="Since when do you have that income?"
-            />
-        </div>
-    );
+  return (
+    <div>
+      <label htmlFor='monthPicker'>Starting Date</label>
+      <Calendar
+        inputId='monthPicker'
+        value={selectedDate}
+        disabled={disabled}
+        onChange={(e) => setDate(e.value)}
+        view='month'
+        minDate={new Date(`${firstDate[0]}-${firstDate[1]}-15`)}
+        maxDate={new Date()}
+        dateFormat='mm/yy'
+        tooltipOptions={{ position: 'mouse' }}
+        tooltip='Since when do you have that income?'
+      />
+    </div>
+  );
 }

components/Form/components/SalaryInput.js

@@ -1,23 +1,19 @@
 import { InputNumber } from 'primereact/inputnumber';
 
-export default function SalaryInput({
-    salary,
-    setSalary,
-    selectedCountry,
-}) {
-    return (
-        <div>
-            <label htmlFor='salaryInput'>Monthly Income</label>
-            <InputNumber
-                inputId="salaryInput"
-                value={salary}
-                onValueChange={(e) => setSalary(e.value)}
-                mode="currency"
-                currency={selectedCountry?.currencyCode || 'USD'}
-                disabled={!selectedCountry}
-                tooltipOptions={{ position: 'bottom', appendTo: 'self' }}
-                tooltip="What&apos;s your monthly income, in the selected country currency?"
-            />
-        </div>
-    );
+export default function SalaryInput({ salary, setSalary, selectedCountry }) {
+  return (
+    <div>
+      <label htmlFor='salaryInput'>Monthly Income</label>
+      <InputNumber
+        inputId='salaryInput'
+        value={salary}
+        onValueChange={(e) => setSalary(e.value)}
+        mode='currency'
+        currency={selectedCountry?.currencyCode || 'USD'}
+        disabled={!selectedCountry}
+        tooltipOptions={{ position: 'bottom', appendTo: 'self' }}
+        tooltip="What's your monthly income, in the selected country currency?"
+      />
+    </div>
+  );
 }

components/Form/index.js

@@ -8,8 +8,16 @@ import DateSelect from './components/DateSelect.js';
 import SalaryInput from './components/SalaryInput.js';
 
 export default function Form({ countries }) {
-  const { salary, setSalary, setCountry, setDate, firstDate, selectedCountry, selectedDate, showResults } =
-    useFormData(countries);
+  const {
+    salary,
+    setSalary,
+    setCountry,
+    setDate,
+    firstDate,
+    selectedCountry,
+    selectedDate,
+    showResults,
+  } = useFormData(countries);
 
   return (
     <form className='p-fluid'>
@@ -36,10 +44,8 @@ export default function Form({ countries }) {
             disabled={!selectedCountry}
           />
         </div>
-        <Button onClick={showResults}>
-          Show me my buying power evolution
-        </Button>
-      </div >
+        <Button onClick={showResults}>Show me my buying power evolution</Button>
+      </div>
     </form>
   );
 }

components/Form/useFormData.js

@@ -7,7 +7,10 @@ export default function useFormData(countries) {
   const query = useSearchParams();
 
   const [selectedCountry, setSelectedCountry] = useState(null);
-  const [firstDate, setSelectedCountryFirstDate] = useState([new Date().getFullYear(), '01']);
+  const [firstDate, setSelectedCountryFirstDate] = useState([
+    new Date().getFullYear(),
+    '01',
+  ]);
   const [selectedDate, setDate] = useState(null);
   const [salary, setSalary] = useState(null);
   const [loading, setLoading] = useState(false);
@@ -31,15 +34,27 @@ export default function useFormData(countries) {
 
   const setCountry = (country) => {
     setSelectedCountry(country);
-    setSelectedCountryFirstDate(country ? country.first.split('-') : [new Date().getFullYear(), '01']);
+    setSelectedCountryFirstDate(
+      country ? country.first.split('-') : [new Date().getFullYear(), '01']
+    );
   };
 
   const showResults = async (e) => {
     e.preventDefault();
-    const [year, month] = [selectedDate.getFullYear(), selectedDate.getMonth() + 1];
+    const [year, month] = [
+      selectedDate.getFullYear(),
+      selectedDate.getMonth() + 1,
+    ];
     const code = selectedCountry.code;
     setLoading(true);
-    router.push(`/results?${new URLSearchParams({ code, year, month, salary }).toString()}`);
+    router.push(
+      `/results?${new URLSearchParams({
+        code,
+        year,
+        month,
+        salary,
+      }).toString()}`
+    );
   };
 
   return {