v0.5 - fix minor bugs and update UI

Author: iamsainikhil

public/index.html

@@ -56,7 +56,7 @@
     <meta property="og:title" content="Weather React" />
     <meta
       property="og:description"
-      content="A robust weather application to provide current and 24 hour 7 day weather forecast for any city in the world. Weather forecast data is powered by Dark Sky and city search data is powered by Teleport."
+      content="A robust weather application to provide current and 24 hour 7 day weather forecast for any city in the world built with ❤️ using React. Weather forecast data is powered by Dark Sky and city search data is powered by Teleport."
     />
     <meta property="og:image" content="%PUBLIC_URL%/weather-react-app.png" />
 
@@ -69,7 +69,7 @@
     <meta property="twitter:title" content="Weather React" />
     <meta
       property="twitter:description"
-      content="A robust weather application to provide current and 24 hour 7 day weather forecast for any city in the world. Weather forecast data is powered by Dark Sky and city search data is powered by Teleport."
+      content="A robust weather application to provide current and 24 hour 7 day weather forecast for any city in the world built with ❤️ using React. Weather forecast data is powered by Dark Sky and city search data is powered by Teleport."
     />
     <meta
       property="twitter:image"

src/components/search/SearchComponent.js

@@ -26,14 +26,14 @@ const SearchComponent = props => {
             backgroundColor: `${theme === 'dark' ? '#3a3a3a' : '#e2e8f0'}`,
             letterSpacing: '0.05em'
           }}
-          className={`data-hj-whitelist block appearance-none w-full border-none rounded-full shadow py-3 pl-12 pr-4 mb-3 leading-tight focus:outline-none focus:bg-gray-200 truncate text-${colorTheme}`}
+          className={`data-hj-whitelist block appearance-none w-full border-none rounded-full shadow py-3 pl-12 pr-6 mb-3 leading-tight focus:outline-none focus:bg-gray-200 truncate text-${colorTheme}`}
           id='grid-first-name'
           type='text'
           placeholder='Type city name to find weather forecast'
           onChange={props.citySearch}
           value={props.city}
         />
-        {props.showCaret && props.city.trim() ? (
+        {props.showCaret ? (
           <div
             className='flex right-0 absolute top-0 mr-4 mt-3 cursor-pointer'
             onClick={props.caretClicked}>

src/components/weather/DayComponent.js

@@ -80,13 +80,17 @@ const DayComponent = props => {
             index === selectedIndex ? 'flex' : 'flex'
           } flex-row justify-around sm:justify-center sm:flex sm:flex-col w-5/12 sm:w-full font-light mt-1`}>
           <div className='flex flex-row justify-center items-center mx-2 sm:my-1 text-xs sm:text-sm'>
-            <p className='text-xl text-sun mr-2' title='sunrise'>
+            <p
+              className='text-xl lg:text-2xl text-sun mr-2 md:mr-3'
+              title='sunrise'>
               <WeatherIconComponent type='sunrise' />
             </p>
             <p>{FormatTime(day.sunriseTime, day.timezone, 'h:mm')}</p>
           </div>
           <div className='flex flex-row justify-center items-center mx-2 sm:my-1 text-xs sm:text-sm'>
-            <p className='text-xl text-sun mr-1' title='sunset'>
+            <p
+              className='text-xl lg:text-2xl text-sun mr-2 md:mr-1'
+              title='sunset'>
               <WeatherIconComponent type='sunset' />
             </p>
             <p>{FormatTime(day.sunsetTime, day.timezone, 'HH:mm')}</p>

src/components/weather/InfoDetailComponent.js

@@ -11,7 +11,8 @@ import WeatherIconComponent from './WeatherIconComponent'
 
 const InfoDetailComponent = ({weatherCurrent}) => {
   const {weatherUnit, updateWeatherUnit} = useContext(WeatherUnitContext)
-
+  const weatherUnitTitle = weatherUnit === 'C' ? 'Celsius' : 'Fahrenheit'
+  const unselectedWeatherUnit = weatherUnit === 'C' ? 'F' : 'C'
   const unitClick = unit => {
     // track event to GA
     Event({
@@ -78,22 +79,20 @@ const InfoDetailComponent = ({weatherCurrent}) => {
                 <sup>o</sup>
               </p>
               <div className='-mt-10 mx-2 text-xl'>
+                {/* selected weatherUnit */}
                 <span
-                  className={`cursor-pointer ${
-                    weatherUnit === 'F' ? 'font-bold' : 'font-light opacity-75'
-                  }`}
-                  title='Fahrenheit'
-                  onClick={() => unitClick('F')}>
-                  F
+                  className='cursor-pointer font-bold'
+                  title={weatherUnitTitle}
+                  onClick={() => unitClick(weatherUnit)}>
+                  {weatherUnit}
                 </span>
                 <span className='mx-1 opacity-25'>|</span>
+                {/* unselected weatherUnit */}
                 <span
-                  className={`cursor-pointer ${
-                    weatherUnit === 'C' ? 'font-bold' : 'font-light opacity-75'
-                  }`}
-                  title='celsius'
-                  onClick={() => unitClick('C')}>
-                  C
+                  className='cursor-pointer font-light opacity-75'
+                  title={weatherUnitTitle}
+                  onClick={() => unitClick(unselectedWeatherUnit)}>
+                  {unselectedWeatherUnit}
                 </span>
               </div>
             </div>
@@ -107,15 +106,17 @@ const InfoDetailComponent = ({weatherCurrent}) => {
           <div className='text-sm sm:text-lg ml-8'>
             <div className='flex flex-row sm:my-2'>
               <p className='font-light'>Humidity:</p>&nbsp;
-              <p className='mx-1'>{Math.round(weatherCurrent.humidity)}</p>
+              <p className='mx-1 font-bold'>
+                {Math.round(weatherCurrent.humidity)}
+              </p>
               <p className='text-sm mt-1'>
                 <FiPercent />
               </p>
             </div>
             <div className='flex items-center sm:my-2'>
               <p>
                 <span className='font-light'>Wind:</span>&nbsp;
-                {computedSpeedValue()}{' '}
+                <span className='font-bold'>{computedSpeedValue()} </span>
               </p>
               <p className='text-3xl'>
                 {
@@ -127,7 +128,9 @@ const InfoDetailComponent = ({weatherCurrent}) => {
             </div>
             <p>
               <span className='font-light sm:my-2'>Feels like:</span>&nbsp;
-              {computedTempValue('apparentTemperature')}
+              <span className='font-bold'>
+                {computedTempValue('apparentTemperature')}
+              </span>
               <sup>o</sup>
             </p>
           </div>

src/containers/autocomplete/AutoCompleteContainer.js

@@ -35,47 +35,49 @@ class AutoCompleteContainer extends Component {
   debounceAddress = debounce(this.getAddresses, 1000)
 
   searchCity = event => {
-    this.setState({city: event.target.value})
-    if (event.target.value.trim()) {
-      this.setState({errorMessage: ''})
-      this.debounceAddress()
-    } else {
-      this.clearState()
-    }
+    this.setState({city: event.target.value, errorMessage: ''})
+    this.debounceAddress()
   }
 
   // fetch valid matched addresses for searched city
   async getAddresses() {
-    try {
-      this.setState({showLoader: true})
-      const {data} = await axios.get(
-        `https://api.teleport.org/api/cities/?search=${this.state.city}`
-      )
-
-      // populate addresses and show them if matching cities exist
-      if (!isEmpty(data) && !isUndefined(data) && data.count > 0) {
-        const results = data._embedded['city:search-results'].map(result => ({
-          cityName: result.matching_full_name,
-          cityId: result._links['city:item'].href.split('/')[5]
-        }))
-        // results is an array of `address` objects with cityName and cityId properties
-        this.setState({
-          addresses: results,
-          showCaret: true,
-          showAddresses: true,
-          errorMessage: ''
-        })
-      } else {
-        this.setState({showAddresses: false})
-        this.handleError(
-          'No matching cities found. Try searching with a valid city name!'
+    // check for empty city value since deleting city value character by character will trigger the debounceAddress
+    // city value could be empty when this function run
+    // so this extra check will fix the bug of showing addresses list when there is no city name
+    if (this.state.city.trim()) {
+      try {
+        this.setState({showLoader: true})
+        const {data} = await axios.get(
+          `https://api.teleport.org/api/cities/?search=${this.state.city}`
         )
+
+        // populate addresses and show them if matching cities exist
+        if (!isEmpty(data) && !isUndefined(data) && data.count > 0) {
+          const results = data._embedded['city:search-results'].map(result => ({
+            cityName: result.matching_full_name,
+            cityId: result._links['city:item'].href.split('/')[5]
+          }))
+          // results is an array of `address` objects with cityName and cityId properties
+          this.setState({
+            addresses: results,
+            showCaret: true,
+            showAddresses: true,
+            errorMessage: ''
+          })
+        } else {
+          this.setState({showAddresses: false})
+          this.handleError(
+            'No matching cities found. Try searching with a valid city name!'
+          )
+        }
+      } catch (error) {
+        this.handleError(error)
+        Sentry.captureException(error)
+      } finally {
+        this.setState({showLoader: false})
       }
-    } catch (error) {
-      this.handleError(error)
-      Sentry.captureException(error)
-    } finally {
-      this.setState({showLoader: false})
+    } else {
+      this.clearState()
     }
   }
 

src/context/WeatherUnitContext.js

@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react'
 const WeatherUnitContext = React.createContext({
-  weatherUnit: 'F'
+  weatherUnit: 'C'
 })
 
 const WeatherUnitContextProvider = ({children}) => {

src/index.js

@@ -9,19 +9,22 @@ import * as Sentry from '@sentry/browser'
 import LogRocket from 'logrocket'
 import setupLogRocketReact from 'logrocket-react'
 
-const LOGROCKET_PROJECT_ID = process.env.REACT_APP_LOGROCKET_PROJECT_ID
-LogRocket.init(`${LOGROCKET_PROJECT_ID}`)
-setupLogRocketReact(LogRocket)
-
 const SENTRY_DSN = process.env.REACT_APP_SENTRY_DSN
 Sentry.init({dsn: `${SENTRY_DSN}`})
 
-// LogRocket and Sentry
-LogRocket.getSessionURL(sessionURL => {
-  Sentry.configureScope(scope => {
-    scope.setExtra('sessionURL', sessionURL)
+// track logrocket sessions only in the prod env
+if (process.env.NODE_ENV !== 'development') {
+  const LOGROCKET_PROJECT_ID = process.env.REACT_APP_LOGROCKET_PROJECT_ID
+  LogRocket.init(`${LOGROCKET_PROJECT_ID}`)
+  setupLogRocketReact(LogRocket)
+
+  // LogRocket and Sentry
+  LogRocket.getSessionURL(sessionURL => {
+    Sentry.configureScope(scope => {
+      scope.setExtra('sessionURL', sessionURL)
+    })
   })
-})
+}
 
 const app = (
   <Router basename={process.env.PUBLIC_URL}>