update day, timeframes, and favorites UI

Author: iamsainikhil

public/weather/weather.svg

@@ -14,7 +14,12 @@ const imageOverlay = {
   borderTopRightRadius: '1rem'
 }
 
-const FavoriteComponent = ({favorite, favoriteSelected}) => {
+const FavoriteComponent = ({
+  favorite,
+  favoriteSelected,
+  index,
+  selectedIndex
+}) => {
   const {theme, colorTheme} = useContext(ThemeContext)
   return (
     <div className='relative w-full h-16'>
@@ -30,9 +35,17 @@ const FavoriteComponent = ({favorite, favoriteSelected}) => {
       <div
         className={`${
           imageExist(favorite.urbanArea)
-            ? 'absolute top-0 left-0 right-0 bottom-0 text-light'
-            : `h-16 text-${colorTheme} border border-${colorTheme} bg-${theme} text-${colorTheme} hover:bg-${colorTheme} hover:text-${theme}`
-        } pt-5 lg:pt-1/2 font-semibold rounded-2xl shadow-lg cursor-pointer text-center justify-center`}
+            ? `absolute top-0 left-0 right-0 bottom-0 text-light ${
+                index === selectedIndex
+                  ? 'sm:shadow-outline'
+                  : 'sm:outline-none'
+              }`
+            : `h-16 text-${colorTheme} bg-${theme} hover:bg-${colorTheme} hover:text-${theme} border ${
+                index === selectedIndex
+                  ? 'sm:border-teal-600'
+                  : `sm:border-${colorTheme}`
+              }`
+        } pt-5 lg:pt-1/2 font-semibold rounded-2xl cursor-pointer text-center justify-center`}
         style={imageExist(favorite.urbanArea) ? imageOverlay : null}
         onClick={favoriteSelected}>
         {favorite.address.cityName.split(', ')[0]}
@@ -45,5 +58,7 @@ export default FavoriteComponent
 
 FavoriteComponent.propTypes = {
   favorite: PropTypes.object,
-  favoriteSelected: PropTypes.func
+  favoriteSelected: PropTypes.func,
+  index: PropTypes.number,
+  selectedIndex: PropTypes.number
 }

src/components/favorite/FavoriteComponent.js

@@ -27,52 +27,56 @@ const DayComponent = props => {
 
   return (
     <div
-      className={`sm:border-t sm:border-r sm:border-b-0 sm:border-l-0 sm:border-${colorTheme} sm:hover:bg-${colorTheme} sm:hover:text-${theme} items-center text-center flex-1 py-1 pb-3 cursor-pointer ${
-        index === selectedIndex ? `sm:bg-${colorTheme} sm:text-${theme}` : ''
-      } transition-colors duration-1000 ease-in-out`}
+      className={`sm:border-t sm:border-r sm:border-b-0 sm:border-l-0 sm:border-${colorTheme} sm:hover:bg-${colorTheme} sm:hover:text-${theme} items-center text-center sm:flex-1 sm:py-1 sm:pb-3 cursor-pointer ${
+        index === selectedIndex ? `bg-${colorTheme} text-${theme}` : ''
+      } transition-all duration-1000 ease-in-out`}
       onClick={selectedDay}>
-      <p className='font-medium'>{FormatTime(day.time, day.timezone, 'ddd')}</p>
-      <div>
-        {getWeatherIcon(day).startsWith('wi') ? (
-          <i
-            title={day.summary}
-            className={`mt-1 mb-3 mx-auto text-2xl wi wi-${getWeatherIcon(
-              day
-            )}`}></i>
-        ) : (
-          <img
-            src={`./weather/${getWeatherIcon(day)}.svg`}
-            alt='icon'
-            title={day.summary}
-            className='-mt-3 -mb-1 mx-auto w-16 h-16 object-contain'
-          />
-        )}
-      </div>
-      <div className='flex flex-row justify-center items-center font-light'>
-        <p className='mx-2 text-sm'>
-          {computedTempValue('High')}
-          <sup>o</sup>
-        </p>
-        <p className='mx-2 text-xs'>
-          {computedTempValue('Low')}
-          <sup>o</sup>
+      <div className='flex flex-row flex-no-wrap sm:flex-col sm:flex-wrap justify-around items-center px-2'>
+        <p className='flex w-1/6 sm:w-full sm:justify-center text-base font-light sm:font-medium'>
+          {FormatTime(day.time, day.timezone, 'ddd')}
         </p>
-      </div>
-      <div className='flex flex-row justify-center sm:flex-col font-light mt-1'>
-        <div className='flex flex-row justify-center items-center mx-2 sm:my-1'>
-          <i
-            className='text-sm wi wi-sunrise text-sun mr-2'
-            title='sunrise'></i>
-          <p className='text-sm'>
-            {FormatTime(day.sunriseTime, day.timezone, 'h:mm')}
-          </p>
+        {/* icon */}
+        <div className='flex w-1/6 sm:w-full'>
+          {getWeatherIcon(day).startsWith('wi') ? (
+            <i
+              title={day.summary}
+              className={`sm:mt-1 sm:mb-3 mx-auto sm:text-2xl wi wi-${getWeatherIcon(
+                day
+              )}`}></i>
+          ) : (
+            <img
+              src={`./weather/${getWeatherIcon(day)}.svg`}
+              alt='icon'
+              title={day.summary}
+              className='sm:-mt-3 sm:-mb-1 mx-auto w-12 h-12 sm:w-16 sm:h-16 object-contain'
+            />
+          )}
         </div>
-        <div className='flex flex-row justify-center items-center mx-2 sm:my-1'>
-          <i className='text-sm wi wi-sunset text-sun mr-1' title='sunset'></i>
-          <p className='text-sm'>
-            {FormatTime(day.sunsetTime, day.timezone, 'HH:mm')}
+        {/* high & low */}
+        <div className='flex flex-row justify-center items-center font-light w-1/4 sm:w-full'>
+          <p className='mx-2 text-sm'>
+            {computedTempValue('High')}
+            <sup>o</sup>
+          </p>
+          <p className='mx-2 mt-1 text-xs'>
+            {computedTempValue('Low')}
+            <sup>o</sup>
           </p>
         </div>
+        {/* sunrise & sunset */}
+        <div
+          className={`${
+            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'>
+            <i className='wi wi-sunrise text-sun mr-2' title='sunrise'></i>
+            <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'>
+            <i className='wi wi-sunset text-sun mr-1' title='sunset'></i>
+            <p>{FormatTime(day.sunsetTime, day.timezone, 'HH:mm')}</p>
+          </div>
+        </div>
       </div>
     </div>
   )

src/components/weather/DayComponent.js

@@ -2,7 +2,7 @@ import React, {useState, useEffect, useContext, useRef, Fragment} from 'react'
 import {AddressContext} from '../../context/AddressContext'
 import {ThemeContext} from '../../context/ThemeContext'
 import {imageExist, getImageDetails} from '../../utils/ImageDetails'
-import {sortBy, isUndefined, isEmpty} from 'lodash-es'
+import {isUndefined, isEmpty} from 'lodash-es'
 import moment from 'moment-timezone'
 import {PropTypes} from 'prop-types'
 import {Event} from '../../utils/ReactAnalytics'
@@ -73,29 +73,26 @@ const InfoComponent = ({address, latlong, urbanArea, weatherCurrent}) => {
       })
     } else {
       const favorites = JSON.parse(localStorage.getItem('favorites'))
-      // sort favorites by cityName
-      const sortedFavorites = sortBy(
-        [...favorites, {address, latlong, urbanArea}],
-        ['address.cityName']
-      )
       const duplicates = favorites.filter(
         favorite => favorite.address.cityName === address.cityName
       )
       if (!duplicates.length) {
-        localStorage.setItem('favorites', JSON.stringify(sortedFavorites))
+        // add newly added favorite to old favorites
+        const updatedFavorites = [...favorites, {address, latlong, urbanArea}]
+        localStorage.setItem('favorites', JSON.stringify(updatedFavorites))
         emitFavoriteCityGA('add', address.cityName)
         updateFavorites({
-          favorites: sortedFavorites
+          favorites: updatedFavorites
         })
       } else {
+        // if already favorite is selected
         // remove it from favorites
         const removeIndex = favorites.findIndex(
           favorite =>
             favorite.address.cityName === duplicates[0].address.cityName
         )
         if (removeIndex !== -1) {
-          // sort the new favorites array by cityName
-          const newFavorites = sortBy([...favorites], ['address.cityName'])
+          const newFavorites = [...favorites]
           newFavorites.splice(removeIndex, 1)
           localStorage.setItem('favorites', JSON.stringify(newFavorites))
           emitFavoriteCityGA('remove', address.cityName)

src/components/weather/InfoComponent.js

@@ -40,22 +40,27 @@ const InfoDetailComponent = ({weatherCurrent}) => {
     <Fragment>
       <div className='sm:flex-col md:flex md:flex-row justify-between mt-5 mb-5 px-4'>
         <div className='flex-col sm:w-full lg:w-1/2'>
-          <div className='flex flex-row items-center'>
-            <div>
-              {getWeatherIcon(weatherCurrent).startsWith('wi') ? (
-                <i
-                  className={`${getWeatherIcon(
-                    weatherCurrent
-                  )} text-5xl mt-3 mr-2 mx-3`}
-                  title={weatherCurrent.summary}></i>
-              ) : (
-                <img
-                  src={`./weather/${getWeatherIcon(weatherCurrent)}.svg`}
-                  alt='icon'
-                  title={weatherCurrent.summary}
-                  className='w-20 h-20 object-contain'
-                />
-              )}
+          <div className='flex flex-row items-start'>
+            <div className='flex flex-col'>
+              <div>
+                {getWeatherIcon(weatherCurrent).startsWith('wi') ? (
+                  <i
+                    className={`${getWeatherIcon(
+                      weatherCurrent
+                    )} text-5xl mr-2 mx-3`}
+                    title={weatherCurrent.summary}></i>
+                ) : (
+                  <img
+                    src={`./weather/${getWeatherIcon(weatherCurrent)}.svg`}
+                    alt='icon'
+                    title={weatherCurrent.summary}
+                    className='-mt-2 w-20 h-20 object-contain'
+                  />
+                )}
+              </div>
+              <p className='font-medium ml-3 capitalize'>
+                {weatherCurrent.summary}
+              </p>
             </div>
             <div className='flex justify-start items-center ml-3'>
               <div>
@@ -84,11 +89,8 @@ const InfoDetailComponent = ({weatherCurrent}) => {
               </div>
             </div>
           </div>
-          <p className='font-medium ml-3 capitalize'>
-            {weatherCurrent.summary}
-          </p>
         </div>
-        <div className='mt-6 ml-3 sm:mt-1 sm:w-full lg:w-1/2'>
+        <div className='mt-6 ml-3 sm:mt-1 sm:w-full lg:w-1/2 text-sm sm:text-lg'>
           <p>
             <span className='font-light'>Humidity:</span>&nbsp;
             {Math.round(weatherCurrent.humidity)}%

src/components/weather/InfoDetailComponent.js

@@ -3,7 +3,7 @@ import {AddressContext} from '../../context/AddressContext'
 import CurrentWeatherContainer from '../current-weather/CurrentWeatherContainer'
 import ForecastContainer from '../forecast/ForecastContainer'
 import FetchWeatherData from './../../utils/FetchWeatherData'
-import {isUndefined, isEmpty} from 'lodash-es'
+import {isUndefined, isEmpty, find} from 'lodash-es'
 import Carousel from 'nuka-carousel'
 import CarouselSettings from '../../utils/CarouselSettings'
 import {ThemeContext} from '../../context/ThemeContext'
@@ -19,9 +19,12 @@ const FavoritesContainer = () => {
   const [selectedFavorite, setSelectedFavorite] = useState({})
   const [favoriteWeather, setFavoriteWeather] = useState({})
   const [isLoading, setIsLoading] = useState(false)
-  const [slideIndex, setSlideIndex] = useState(0)
+  const [slideIndex, setSlideIndex] = useState(null)
   const weatherRef = useRef(null)
 
+  // favorites data length
+  const favoritesLength = useRef(0)
+
   // scroll to weather component when selectedFavorite is set
   const scrollToRef = ref => window.scrollTo(0, ref.current.offsetTop)
 
@@ -67,16 +70,47 @@ const FavoritesContainer = () => {
     scrollToRef(weatherRef)
   }
 
+  const favoritesChecker = () => {
+    // check for deleted selectedFavorite scenario
+    // i.e. selectedFavorite is not in the favorites
+    // to update it with the favorite at current slideIndex
+    if (!isEmpty(selectedFavorite) && !isUndefined(selectedFavorite)) {
+      if (
+        isUndefined(
+          find(
+            favorites,
+            favorite =>
+              favorite.address.cityName === selectedFavorite.address.cityName
+          )
+        )
+      ) {
+        selectFavoriteHandler(slideIndex)
+      } else {
+        // if favorites get updated
+        // i.e. a new favorite is added (favorites.length > favoritesLength)
+        // set selectedFavorite and slideIndex to the newly added favorite
+        // i.e. last favorite in favorites
+        if (favorites.length > favoritesLength.current) {
+          selectFavoriteHandler(favorites.length - 1)
+        }
+      }
+    }
+  }
+
   useEffect(() => {
     fetchWeatherData()
+    /* important edge case scenarios checker for deleted selectedFavorite & newly added favorite */
+    favoritesChecker()
+    // update favoritesLength
+    favoritesLength.current = favorites.length
     const timer = setInterval(() => {
       fetchWeatherData()
     }, 3600000)
     return () => {
       clearInterval(timer)
     }
     // eslint-disable-next-line
-  }, [selectedFavorite])
+  }, [selectedFavorite, favorites])
 
   return (
     <Fragment>
@@ -96,6 +130,8 @@ const FavoritesContainer = () => {
                   <FavoriteComponent
                     key={favorite.latlong}
                     favorite={favorite}
+                    index={index}
+                    selectedIndex={slideIndex}
                     favoriteSelected={() => selectFavoriteHandler(index)}
                   />
                 )
@@ -114,6 +150,8 @@ const FavoritesContainer = () => {
                       <FavoriteComponent
                         key={favorite.latlong}
                         favorite={favorite}
+                        index={index}
+                        selectedIndex={slideIndex}
                         favoriteSelected={() => selectFavoriteHandler(index)}
                       />
                     </div>

src/containers/favorites/FavoritesContainer.js

@@ -82,33 +82,9 @@ const ForecastContainer = ({cityName, weatherCurrent, weatherForecast}) => {
               )}
             </div>
 
-            {/* mobile */}
-            <div className='sm:hidden py-3'>
-              <Carousel
-                {...CarouselSettings('day')}
-                slideIndex={Object.keys(weatherForecast.days).indexOf(
-                  selectedDay
-                )}
-                afterSlide={slideIndex =>
-                  daySelectHandler(
-                    Object.keys(weatherForecast.days)[slideIndex]
-                  )
-                }>
-                {Object.keys(weatherForecast.days).map((day, index) => {
-                  return (
-                    <DayComponent
-                      day={weatherForecast.days[day]}
-                      key={index}
-                      index={day}
-                      selectedIndex={selectedDay}
-                      selectedDay={() => daySelectHandler(day)}
-                    />
-                  )
-                })}
-              </Carousel>
-            </div>
-            {/* table and above devices */}
-            <div className={`hidden sm:flex w-full rounded sm:visible`}>
+            {/* day */}
+            <div
+              className={`flex flex-col mt-4 sm:mt-0 sm:flex-row w-full rounded`}>
               {Object.keys(weatherForecast.days).map((day, index) => {
                 // day is key in weatherForecast.days -> '02/28/2020'
                 // index is the position of key -> 0

src/containers/forecast/ForecastContainer.js

@@ -1,6 +1,6 @@
-// modify carousel settings for timeframe, day, and favorites components
+// modify carousel settings for timeframe and favorites component
 /**
- * time or day or favorite
+ * time or favorite
  * @param {String} type
  * resolution can be mobile or tablet
  * @param {*} resolution