From 377a9e421087bcefb28a0f905764848bef5d1a84 Mon Sep 17 00:00:00 2001 From: Shubham Jaswal Date: Mon, 28 Dec 2020 19:36:17 +0530 Subject: [PATCH] storage themes optiization --- App.js | 6 +- src/components/Day.jsx | 44 +++++----- src/components/DropDownSettings.jsx | 87 ++++++++++++++------ src/components/Error.jsx | 11 +-- src/components/Footer.jsx | 28 ++++--- src/components/LiveTime.jsx | 10 ++- src/components/Today.jsx | 11 ++- src/components/WeekDays.jsx | 13 ++- src/containers/StackNavigation.jsx | 47 +++++++++-- src/containers/Theme.jsx | 42 +++++++--- src/pages/DayDetails.jsx | 122 +++++++++++++++++++++++++++- src/pages/Home.jsx | 78 ++++++++++-------- src/utils/index.js | 2 + src/utils/storage.js | 103 +++++++++++++++++++++++ src/utils/store.js | 39 +++++++++ src/utils/useLocation.js | 4 +- src/utils/useWeather.js | 55 +++++++------ 17 files changed, 539 insertions(+), 163 deletions(-) create mode 100644 src/utils/storage.js diff --git a/App.js b/App.js index ca27d6c..db30b83 100644 --- a/App.js +++ b/App.js @@ -19,9 +19,9 @@ const App: () => React$Node = () => { return ( - - - + {/* */} + + {/* */} ); diff --git a/src/components/Day.jsx b/src/components/Day.jsx index 0ebc112..e176195 100644 --- 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 ( - rootNavigation.navigate('DayDetails')}> - - - - {day} - - - {forecast.weather[0].main} - - {round(forecast.temp.max)}° / {round(forecast.temp.min)}° - - - - + + + + {day} + + + {forecast.weather[0].main} + + {round(forecast.temp.max)}° / {round(forecast.temp.min)}° + + + ); }; @@ -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 index 50b27be..dcc1a14 100644 --- 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 () => { <> - Temperature Unit + Units 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')} /> @@ -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 index b972c63..11e5313 100644 --- 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 ( - Something Went Wrong at our End + {error} getWeather()} android_ripple={{ diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index b737e49..9a212a4 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -1,9 +1,10 @@ -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'; @@ -11,14 +12,15 @@ const INSTAGRAM = 'https://www.instagram.com/hashinclude72/'; const MAIL = 'mailto:hashinclude72@gmail.com?subject=Weather app&body='; export default () => { + const themeContext = useContext(ThemeContext); return (