diff --git a/README.md b/README.md new file mode 100644 index 0000000..a254d03 --- /dev/null +++ b/README.md @@ -0,0 +1,86 @@ +Logo + +# Currency Converter (react-native) + + +## How to run +- Install nodejs +- Install react-native globally (npm i -g react-native) +- Install XCode or Android Studio +- cd appFolder +- npm i +- npm run ios or npm i android + + + +This project contains react-native application to convert currencies with following features: + +## Screens: + +### Splash Screen + +This page is shown for a very short duration before loading app state like saved auth state, theme, favorite currencies. + +### Login +This screen contains username and password inputs and a button. When login button is pressed, credentials are matched and if valid credentials are provided, it will navigate to Home screen. +Credentials: +username: Admin +password: Admin + +Login Screen Keyboard Closed +Login Screen Keyboard Open + +### Home +Home screen contains an animated logo showing base currency and target currency and two currency fields. +Writing in one input, 2nd input shows converted value for target currency. User can switch base and target currencies either by clicking on animated logo icon or a conversion icon between two inputs. Every input field has a addon which shows selecetd currency. On clicking/toching addOn, Currencies List screen is shown. + +Home Screen + +### Currencies List +Currencies List screen contains all currencies supported by the currency api to fetch currencies exchange rates. +Api url: https://api.exchangeratesapi.io + +Currencies Screen + +### Themes +Themes screen contains a FlatList which shows Theme item which contains name and color in every row. On clicking color circle/icon, app theme gets changed and applied all over app. + +*Red* + +*Volcano* + +*Orange* + +*Gold* + +*Lime* + +*Green* + +*Cyan* + +*Blue* + +*Geekblue* + +*Purple* + +*Magenta* + +*Grey* + +Themes Screen + +### Options +This screen contains links to other pages in app like Themes, Favorties, an external link to Api being used for currency conversion and logout button which removes auth state and moves users to Login screen. + +Options Screen + +### Favorites +This page contains user's favorite currencies which user can mark favorite from Currency List screen. + +Favorties Screen + + +## Testing & Code Coverage +This is a work in progress. diff --git a/assets/currencies.png b/assets/currencies.png new file mode 100644 index 0000000..7a5956c Binary files /dev/null and b/assets/currencies.png differ diff --git a/assets/favorites.png b/assets/favorites.png new file mode 100644 index 0000000..a74504d Binary files /dev/null and b/assets/favorites.png differ diff --git a/assets/home.png b/assets/home.png new file mode 100644 index 0000000..d96e07a Binary files /dev/null and b/assets/home.png differ diff --git a/assets/login1.png b/assets/login1.png new file mode 100644 index 0000000..257634c Binary files /dev/null and b/assets/login1.png differ diff --git a/assets/login2.png b/assets/login2.png new file mode 100644 index 0000000..a032c55 Binary files /dev/null and b/assets/login2.png differ diff --git a/assets/options.png b/assets/options.png new file mode 100644 index 0000000..30c57ae Binary files /dev/null and b/assets/options.png differ diff --git a/assets/themes.png b/assets/themes.png new file mode 100644 index 0000000..14de8c4 Binary files /dev/null and b/assets/themes.png differ diff --git a/components/App.js b/components/App.js index ea8ab73..6c4c321 100644 --- a/components/App.js +++ b/components/App.js @@ -3,7 +3,7 @@ */ import 'react-native-gesture-handler'; import React, { useEffect, useCallback } from 'react'; -import { Platform } from 'react-native'; +import { Keyboard } from 'react-native'; import { createStackNavigator } from '@react-navigation/stack'; import { NavigationContainer, DefaultTheme } from '@react-navigation/native'; import { Provider, useSelector, useDispatch } from 'react-redux'; @@ -82,6 +82,7 @@ function App() { underlayColor="#fff" onPress={() => { navigation.navigate(SCREENS.OPTIONS); + Keyboard.dismiss(); }}> @@ -129,7 +130,6 @@ function App() { export default () => ( } persistor={persistor}> - {/* {Platform.OS === 'ios' && } */} diff --git a/components/SvgLogo.js b/components/SvgLogo.js index cddd3d6..e4fa41a 100644 --- a/components/SvgLogo.js +++ b/components/SvgLogo.js @@ -85,7 +85,7 @@ function SvgLogo({ fill, width, height, showInfo, style }) { fontWeight="bold" textAnchor="middle" transform={inverted ? 'rotate(180, 120, 135)' : 'rotate(0)'}> - {baseCurrency} + {inverted ? targetCurrency : baseCurrency} )} @@ -110,7 +110,7 @@ function SvgLogo({ fill, width, height, showInfo, style }) { fontSize="30" fontWeight="bold" transform={inverted ? 'rotate(180, 375, 379)' : 'rotate(0)'}> - {targetCurrency} + {inverted ? baseCurrency : targetCurrency} )} diff --git a/ios/Podfile b/ios/Podfile index 366d772..c71c0ab 100644 --- a/ios/Podfile +++ b/ios/Podfile @@ -77,7 +77,6 @@ target 'CurrencyConverter' do pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec' pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' - pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage' target 'CurrencyConverterTests' do inherit! :complete diff --git a/ios/Podfile.lock b/ios/Podfile.lock index bb32524..c767859 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -499,6 +499,6 @@ SPEC CHECKSUMS: Yoga: 3ebccbdd559724312790e7742142d062476b698e YogaKit: f782866e155069a2cca2517aafea43200b01fd5a -PODFILE CHECKSUM: 1c7922a464f8c0e43ff6399d23bb349e56201d70 +PODFILE CHECKSUM: bc10d8d8dbd7687d7dc57d1130e5c52393a36c49 COCOAPODS: 1.9.3 diff --git a/sagas/app.sagas.js b/sagas/app.sagas.js index dab9141..bc8aa91 100644 --- a/sagas/app.sagas.js +++ b/sagas/app.sagas.js @@ -9,7 +9,6 @@ import { setAuthState, LOGIN, LOGOUT, - SET_THEME, INITIALIZE_APP_STATE, } from '../actions/app.actions'; import { AUTH_STATES, THEMES_MAP, PRIMARY_INDEX } from '../constants'; @@ -42,38 +41,8 @@ function* watchLogout() { yield put(logout.error()); } } -// TODO: Need to remove this in redux-persist will perform well without issues -function* watchInitializeAppState() { - try { - let appTheme = THEMES_MAP.Blue; - try { - authState = yield call(AsyncStorage.getItem, 'authState'); - } catch (error) { - authState = AUTH_STATES.LOGGED_OUT; - } - try { - appTheme = yield call(AsyncStorage.getItem, 'appTheme'); - appTheme = JSON.parse(appTheme); - } catch (error) { - appTheme = THEMES_MAP.Blue; - } - yield call(sleep, 500); - yield put(setAuthState(authState || AUTH_STATES.LOGGED_OUT)); - let selectedTheme = appTheme || THEMES_MAP.Blue; - selectedTheme = { - ...selectedTheme, - get color() { - return selectedTheme.shades[PRIMARY_INDEX]; - }, - }; - yield put(setTheme(selectedTheme)); - } catch (e) { - console.log('Error', e); - } -} export default [ takeLatest(LOGIN.PENDING, watchLogin), takeLatest(LOGOUT.PENDING, watchLogout), - takeLatest(INITIALIZE_APP_STATE, watchInitializeAppState), ];