storage themes optiization

hashinclude72 · Dec 28, 2020 · 377a9e4 · 377a9e4
1 parent 9cd4b41
commit 377a9e4
Show file tree

Hide file tree

Showing 17 changed files with 539 additions and 163 deletions.
diff --git a/App.js b/App.js
@@ -19,9 +19,9 @@ const App: () => React$Node = () => {
   return (
     <Provider store={store}>
       <Theme>
-        <SafeAreaProvider>
-          <StackNavigation />
-        </SafeAreaProvider>
+        {/* <SafeAreaProvider> */}
+        <StackNavigation />
+        {/* </SafeAreaProvider> */}
       </Theme>
     </Provider>
   );

diff --git a/src/components/Day.jsx b/src/components/Day.jsx
@@ -5,31 +5,28 @@ import styled, { css } from 'styled-components/native';
 import { RFValue } from 'react-native-responsive-fontsize';
 import LottieView from 'lottie-react-native';
 
-import { StyledTouchableScale } from './StyledComponents';
-import { round, weatherIcons, rootNavigation } from '../utils';
+import { round, weatherIcons } from '../utils';
 
 export default ({ day, forecast }) => {
   return (
-    <StyledTouchableScale onPress={() => rootNavigation.navigate('DayDetails')}>
-      <Container>
-        <DayIcon>
-          <WeatherIcon
-            source={weatherIcons[forecast.weather[0].icon]}
-            loop={true}
-            autoPlay={true}
-            progress={0}
-            speed={1}
-          />
-          <DayText>{day}</DayText>
-        </DayIcon>
-        <View>
-          <WeatherText>{forecast.weather[0].main}</WeatherText>
-          <TempText>
-            {round(forecast.temp.max)}&deg; / {round(forecast.temp.min)}&deg;
-          </TempText>
-        </View>
-      </Container>
-    </StyledTouchableScale>
+    <Container>
+      <DayIcon>
+        <WeatherIcon
+          source={weatherIcons[forecast.weather[0].icon]}
+          loop={true}
+          autoPlay={true}
+          progress={0}
+          speed={1}
+        />
+        <DayText>{day}</DayText>
+      </DayIcon>
+      <View>
+        <WeatherText>{forecast.weather[0].main}</WeatherText>
+        <TempText>
+          {round(forecast.temp.max)}&deg; / {round(forecast.temp.min)}&deg;
+        </TempText>
+      </View>
+    </Container>
   );
 };
 
@@ -38,7 +35,8 @@ const Container = styled.View`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  border-radius: 7px;
+  border-radius: ${RFValue(10)}px;
+  border: 1px ${({ theme }) => theme.colors.border};
   margin-bottom: ${RFValue(7)}px;
   padding-horizontal: ${RFValue(10)}px;
   background-color: ${({ theme }) => theme.colors.backgroundAlt};

diff --git a/src/components/DropDownSettings.jsx b/src/components/DropDownSettings.jsx
@@ -1,24 +1,32 @@
 import React, { useState } from 'react';
+import { View } from 'react-native';
 
 import styled from 'styled-components/native';
 import DropDownPicker from 'react-native-dropdown-picker';
 import { RFValue } from 'react-native-responsive-fontsize';
+import { useSelector, useDispatch } from 'react-redux';
 
 export default () => {
-  const [tempUnit, setTempUnit] = useState('c');
-  const [timeFormat, setTimeFormat] = useState('24');
-  const [theme, setTheme] = useState('black');
+  const {
+    units: myUnits,
+    timeFormat: myTimeFormat,
+    theme: myTheme,
+  } = useSelector((state) => state);
+  const dispatch = useDispatch();
+
+  const [units, setUnits] = useState(myUnits);
+  const [timeFormat, setTimeFormat] = useState(myTimeFormat);
+  const [theme, setTheme] = useState(myTheme);
 
   const allClose = {
-    temp: false,
+    units: false,
     time: false,
     theme: false,
   };
 
   const tempOptions = [
-    { label: '⁰C', value: 'c' },
-    { label: '⁰F', value: 'f' },
-    { label: '⁰K', value: 'k' },
+    { label: 'Metric', value: 'metric' },
+    { label: 'Imperial', value: 'imperial' },
   ];
 
   const timeOptions = [
@@ -46,15 +54,21 @@ export default () => {
     <>
       <DropSetting>
         <SettingHeader>
-          <SettingText>Temperature Unit</SettingText>
+          <SettingText>Units</SettingText>
         </SettingHeader>
         <StyledDropDownPicker
           zIndex={5000}
           items={tempOptions}
-          defaultValue={tempUnit}
-          onChangeItem={(item) => setTempUnit(item.value)}
-          isVisible={visible.temp}
-          onOpen={() => changeVisibility('temp')}
+          defaultValue={units}
+          onChangeItem={(item) => {
+            dispatch({
+              type: 'units',
+              payload: item.value,
+            });
+            setUnits(item.value);
+          }}
+          isVisible={visible.units}
+          onOpen={() => changeVisibility('units')}
           onClose={() => changeVisibility('close')}
         />
       </DropSetting>
@@ -66,7 +80,13 @@ export default () => {
           zIndex={4000}
           items={timeOptions}
           defaultValue={timeFormat}
-          onChangeItem={(item) => setTimeFormat(item.value)}
+          onChangeItem={(item) => {
+            dispatch({
+              type: 'timeFormat',
+              payload: item.value,
+            });
+            setTimeFormat(item.value);
+          }}
           isVisible={visible.time}
           onOpen={() => changeVisibility('time')}
           onClose={() => changeVisibility('close')}
@@ -80,7 +100,13 @@ export default () => {
           zIndex={3000}
           items={themeOptions}
           defaultValue={theme}
-          onChangeItem={(item) => setTheme(item.value)}
+          onChangeItem={(item) => {
+            dispatch({
+              type: 'theme',
+              payload: item.value,
+            });
+            setTheme(item.value);
+          }}
           isVisible={visible.theme}
           onOpen={() => changeVisibility('theme')}
           onClose={() => changeVisibility('close')}
@@ -95,8 +121,8 @@ const DropSetting = styled.View`
   justify-content: space-between;
   align-items: center;
   height: ${RFValue(45)}px;
-  margin-bottom: ${RFValue(10)}px;
-  border-radius: ${RFValue(7)}px;
+  margin-bottom: ${RFValue(5)}px;
+  border-radius: 30px;
 `;
 
 const SettingHeader = styled.View`
@@ -110,27 +136,32 @@ const SettingText = styled.Text`
   padding: 5px;
   color: ${({ theme }) => theme.colors.text};
   justify-content: center;
-  font-size: ${RFValue(18)}px;
+  font-size: ${RFValue(17)}px;
 `;
 
 const StyledDropDownPicker = styled(DropDownPicker).attrs((props) => ({
-  arrowColor: props.theme.colors.text,
+  arrowColor: props.theme.colors.icon,
+  arrowSize: RFValue(15),
   containerStyle: {
     flex: 1,
   },
   itemStyle: { justifyContent: 'center' },
   dropDownStyle: {
     right: 0,
-    top: 100,
+    marginTop: RFValue(-35),
     width: RFValue(75),
-    borderBottomLeftRadius: 10,
-    borderBottomRightRadius: 10,
-    borderTopLeftRadius: 10,
-    borderTopRightRadius: 10,
-    borderColor: props.theme.colors.border,
+    borderBottomLeftRadius: RFValue(10),
+    borderBottomRightRadius: RFValue(10),
+    borderTopLeftRadius: RFValue(10),
+    borderTopRightRadius: RFValue(10),
+    borderColor: props.theme.colors.borderAlt,
     backgroundColor: props.theme.colors.backgroundAlt,
   },
-  labelStyle: { color: props.theme.colors.text, textAlign: 'right' },
+  labelStyle: {
+    color: props.theme.colors.text,
+    textAlign: 'right',
+    fontSize: RFValue(13),
+  },
   selectedLabelStyle: {
     color: props.theme.colors.primary,
     flex: 1,
@@ -139,4 +170,10 @@ const StyledDropDownPicker = styled(DropDownPicker).attrs((props) => ({
 }))`
   border-color: ${({ theme }) => theme.colors.backgroundAlt};
   background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  border: 1px ${({ theme }) => theme.colors.border};
+  border-radius: 30px;
+  border-bottom-left-radius: ${RFValue(10)}px;
+  border-bottom-right-radius: ${RFValue(10)}px;
+  border-top-left-radius: ${RFValue(10)}px;
+  border-top-right-radius: ${RFValue(10)}px;
 `;
diff --git a/src/components/Error.jsx b/src/components/Error.jsx
@@ -1,7 +1,6 @@
-import React, { useEffect, useContext } from 'react';
+import React, { useContext } from 'react';
 
 import styled from 'styled-components/native';
-import Toast from 'react-native-simple-toast';
 import { RFValue } from 'react-native-responsive-fontsize';
 import { useSelector } from 'react-redux';
 import { ThemeContext } from 'styled-components';
@@ -10,15 +9,9 @@ export default ({ getWeather }) => {
   const error = useSelector((state) => state.error);
   const themeContext = useContext(ThemeContext);
 
-  useEffect(() => {
-    if (error) {
-      Toast.show(error, Toast.SHORT);
-    }
-  }, [error]);
-
   return (
     <Container>
-      <ErrorText>Something Went Wrong at our End</ErrorText>
+      <ErrorText>{error}</ErrorText>
       <RetryButton
         onPress={() => getWeather()}
         android_ripple={{

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -1,24 +1,26 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Linking } from 'react-native';
 
 import styled from 'styled-components/native';
 import { RFValue } from 'react-native-responsive-fontsize';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import { ThemeContext } from 'styled-components';
 
 const GITHUB = 'https://github.com/hashinclude72/weatherApp';
 const TWITTER = 'https://twitter.com/hashinclude72';
 const INSTAGRAM = 'https://www.instagram.com/hashinclude72/';
 const MAIL = 'mailto:hashinclude72@gmail.com?subject=Weather app&body=';
 
 export default () => {
+  const themeContext = useContext(ThemeContext);
   return (
     <Footer>
       <FooterText>hashinclude72</FooterText>
       <FooterIcons>
         <AntDesign
           name="github"
-          size={RFValue(30)}
-          color="white"
+          size={RFValue(25)}
+          color={themeContext.colors.icon}
           onPress={() => {
             Linking.openURL(GITHUB).catch((err) => {
               console.error('Failed opening page because: ', err);
@@ -27,8 +29,8 @@ export default () => {
         />
         <AntDesign
           name="twitter"
-          size={RFValue(30)}
-          color="white"
+          size={RFValue(25)}
+          color={themeContext.colors.icon}
           onPress={() => {
             Linking.openURL(TWITTER).catch((err) => {
               console.error('Failed opening page because: ', err);
@@ -37,8 +39,8 @@ export default () => {
         />
         <AntDesign
           name="instagram"
-          size={RFValue(30)}
-          color="white"
+          size={RFValue(25)}
+          color={themeContext.colors.icon}
           onPress={() => {
             Linking.openURL(INSTAGRAM).catch((err) => {
               console.error('Failed opening page because: ', err);
@@ -47,8 +49,8 @@ export default () => {
         />
         <AntDesign
           name="mail"
-          size={RFValue(30)}
-          color="white"
+          size={RFValue(25)}
+          color={themeContext.colors.icon}
           onPress={() => {
             Linking.openURL(MAIL).catch((err) => {
               console.error('Failed opening page because: ', err);
@@ -64,19 +66,19 @@ const Footer = styled.View`
   flex-grow: 1;
   justify-content: flex-end;
   align-items: stretch;
-  margin-bottom: ${RFValue(30)}px;
+  margin-bottom: ${RFValue(20)}px;
 `;
 
 const FooterText = styled.Text`
   justify-content: center;
   align-self: center;
-  padding: ${RFValue(20)}px;
+  margin-bottom: ${RFValue(10)}px;
   color: ${({ theme }) => theme.colors.text};
-  font-size: ${RFValue(20)}px;
+  font-size: ${RFValue(17)}px;
 `;
 
 const FooterIcons = styled.View`
   flex-direction: row;
   justify-content: space-around;
-  padding-horizontal: ${RFValue(60)}px;
+  padding-horizontal: 90px;
 `;
diff --git a/src/components/LiveTime.jsx b/src/components/LiveTime.jsx
@@ -3,8 +3,10 @@ import React, { useState, useEffect } from 'react';
 import styled from 'styled-components/native';
 import moment from 'moment';
 import { RFValue } from 'react-native-responsive-fontsize';
+import { useSelector } from 'react-redux';
 
 export default () => {
+  const timeFormat = useSelector((state) => state.timeFormat);
   const [currTime, setCurrTime] = useState(moment());
 
   useEffect(() => {
@@ -14,7 +16,13 @@ export default () => {
     return () => clearInterval(interval);
   }, []);
 
-  return <Time>{moment(currTime).format('dddd, D MMM h:m a')}</Time>;
+  return (
+    <Time>
+      {timeFormat === '24'
+        ? moment(currTime).format('dddd, D MMM HH:mm')
+        : moment(currTime).format('dddd, D MMM h:m a')}
+    </Time>
+  );
 };
 
 const Time = styled.Text`