Merge pull request #6 from jjdcabasolo/post-testing

[v1] COVID-19 Tracker release

README.md

@@ -18,11 +18,10 @@ It is built using web components with the help from [LitElement](https://lit-ele
 For the data source, it uses the free [COVID-19 API](https://api-sports.io/documentation/covid-19) by [api-sports](https://rapidapi.com/user/api-sports) from [RapidAPI](https://rapidapi.com/).
 
 ## Main features
-- **Country search**: user can search a country via its *name*.
+- **Country search**: user can search a country via its **name**.
 - **Coverage filtering**: user can filter the coverage of the list, either **worldwide** or by **continent**. Total count per coverage is also displayed.
 - **Case count sorting**: user can sort the list via [case count category](#case-count-category) in **ascending** or **descending** (*default*) order.
 - **Country pinning**: users can pin a country that would **stay on top of the list**. It is saved via `localStorage`.
-  - **User location**: gets the user's country for default country pinned.
 
 ## Other features
 - **Dark mode**: the app's theme adapts to the device/browser's current theme.
@@ -35,7 +34,7 @@ This is a redesigned spin-off of once was the practice app for my current employ
 
 If you'll check the [initial commits](https://github.com/jjdcabasolo/covid-19-tracker-app/commit/f7705c4e68920899f2f0752c74a8840fe7756c12), there are a lot of initial files. The from-scratch commits can be found on a private repo.
 
-I asked permission to my boss if I can get that app and use it on my personal portfolio. And it was granted. Yay 🥳🎉
+I asked permission to my boss if I can use that app and put it on my personal portfolio. And it was granted. Yay 🥳🎉
 
 > [This is the original app](http://app-tracker-jourish.herokuapp.com/), the ones I used on our final presentation.
 
@@ -52,7 +51,7 @@ npm run start
 # Acknowledgements
 
 I want to thank you the following persons for being a part of the development of this app 😍🥰
-- **Boss Mikko, et. al**, for letting me use this app for my personal portfolio and the code review comments during the initial app development
-- **Kharisa**, **Blessy**, and **RC**, for acting as my user interface consultants, as well as providing the initial comments and suggestions interface-wise
-- **Jemil** and **Camille**, for testing the app, as well as providing suggestions for improvement
+- **Boss Mikko, Boss Niko, and Sammy**, for all the help, including lit-element basics, app structure, and code review during the initial app development
+- **Kharisa** and **RC**, for acting as my design consultants, as well as providing the initial comments and suggestions interface-wise
+- **Jemil**, **Camille**, and **Blessy** for testing the app, as well as providing suggestions for improvement
 - and you, for taking the time to read this long README.md 🤣

src/components/country-list-connected.js

@@ -4,7 +4,7 @@ import { formatCountryName, getCountryCode } from '../utils/country';
 
 import continents from '../constants/continents';
 
-import { apiHost, apiKey, apiUrl, apiPassphrase } from '../constants/api';
+import { apiHost, apiKey, apiPassphrase, apiUrl } from '../constants/api';
 
 export default class CountryListConnected extends CountryList {
   async fetchCountries() {
@@ -142,29 +142,6 @@ export default class CountryListConnected extends CountryList {
 
     if (userPref) {
       this.preference = [...this.preference, ...userPref.split(',')];
-      return;
-    }
-
-    try {
-      const response = await fetch('https://freegeoip.app/json/', {
-        method: 'GET',
-        headers: {
-          accept: 'application/json',
-          'content-type': 'application/json',
-        },
-      });
-
-      if (response.status !== 200) throw response;
-
-      const toJSON = await response.json();
-      const country = toJSON.country_name.toLowerCase();
-      const code = getCountryCode(country);
-
-      localStorage.setItem('preference', code);
-      this.preference = [...this.preference, code];
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.log(e);
     }
   }
 }

src/components/country-search-form.js

@@ -28,9 +28,16 @@ export default class CountrySearchForm extends LitElement {
         }
         .clear-icon,
         .search-icon {
-          position: absolute;
+          -khtml-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
+          -webkit-touch-callout: none;
+          -webkit-user-select: none;
+          cursor: pointer;
           cursor: pointer;
-          bottom: 13px;
+          position: absolute;
+          user-select: none;
+          bottom: 14px;
         }
         .search-icon {
           left: 8px;
@@ -52,12 +59,13 @@ export default class CountrySearchForm extends LitElement {
           .clear-icon,
           .search-icon {
             --mdc-icon-size: 20px;
-            bottom: 24px;
           }
           .search-icon {
+            bottom: 24px;
             left: 12px;
           }
           .clear-icon {
+            bottom: 25px;
             right: 12px;
           }
         }
@@ -130,12 +138,15 @@ export default class CountrySearchForm extends LitElement {
   handleClear() {
     const input = this.shadowRoot.getElementById('countrySearch');
 
-    input.value = '';
-    this.dispatchEvent(
-      new CustomEvent('handle-search-query', {
-        detail: { query: '' },
-      })
-    );
+    if (input.value.length > 0) {
+      input.value = '';
+
+      this.dispatchEvent(
+        new CustomEvent('handle-search-query', {
+          detail: { query: '' },
+        })
+      );
+    }
   }
 }
 

src/components/icon-button.js

@@ -16,11 +16,11 @@ export default class IconButton extends LitElement {
         }
         .icon {
           color: var(--light-theme-secondary-color);
-          --mdc-icon-size: 24px;
+          --mdc-icon-size: 20px;
         }
         @media screen and (max-width: 600px) {
           .icon {
-            --mdc-icon-size: 28px;
+            --mdc-icon-size: 24px;
           }
         }
         :host([inactive]) .icon-container .icon {

src/components/utility-panel.js

@@ -367,9 +367,9 @@ export default class UtilityPanel extends LitElement {
     return html`
       <div class="small-text primary-text">
         Data may not be 100% accurate.
-        <span class="secondary-text"
-          >It's a free API, so please bear with the API provider 😅</span
-        >
+        <span class="secondary-text">
+          It's a free API, so please bear with the API provider 😅
+        </span>
       </div>
     `;
   }
@@ -387,6 +387,8 @@ export default class UtilityPanel extends LitElement {
   handleSearchQuery({ detail }) {
     if (this.isMobile) {
       window.scrollTo({ top: 0, behavior: 'smooth' });
+      document.body.style.overflow = '';
+      this.open = false;
     }
 
     this.dispatchEvent(new CustomEvent('handle-search-query', { detail }));