From 11edcc1ab8b902167620dd28ad82e640e3ce2a84 Mon Sep 17 00:00:00 2001 From: Saihajpreet Singh Date: Mon, 28 Dec 2020 10:36:57 -0600 Subject: [PATCH 01/16] build: sync podfile --- ios/Podfile.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index d7366605..06a260eb 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -408,4 +408,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 6e9396fa3f617dd06d3083a586de30fc1336a5cf -COCOAPODS: 1.9.3 +COCOAPODS: 1.10.0 From e1f3eca32a1478af744a2ed88f2d2b89671e8f95 Mon Sep 17 00:00:00 2001 From: Saihajpreet Singh Date: Sun, 29 Nov 2020 23:35:23 -0600 Subject: [PATCH 02/16] refactor: move search bar to search dir --- src/components/{Search.spec.tsx => Search/Bar.spec.tsx} | 2 +- src/components/{Search.tsx => Search/Bar.tsx} | 8 ++++---- src/components/Search/index.ts | 1 + src/screens/SearchScreen.tsx | 2 +- 4 files changed, 7 insertions(+), 6 deletions(-) rename src/components/{Search.spec.tsx => Search/Bar.spec.tsx} (97%) rename src/components/{Search.tsx => Search/Bar.tsx} (90%) create mode 100644 src/components/Search/index.ts diff --git a/src/components/Search.spec.tsx b/src/components/Search/Bar.spec.tsx similarity index 97% rename from src/components/Search.spec.tsx rename to src/components/Search/Bar.spec.tsx index 55f7818c..317427f6 100644 --- a/src/components/Search.spec.tsx +++ b/src/components/Search/Bar.spec.tsx @@ -2,7 +2,7 @@ import 'react-native' import React from 'react' import { render, fireEvent } from '@testing-library/react-native' -import SearchBar from './Search' +import SearchBar from './Bar' describe( '', () => { it( 'should handle user text input', () => { diff --git a/src/components/Search.tsx b/src/components/Search/Bar.tsx similarity index 90% rename from src/components/Search.tsx rename to src/components/Search/Bar.tsx index cda3c135..59937ad2 100644 --- a/src/components/Search.tsx +++ b/src/components/Search/Bar.tsx @@ -3,10 +3,10 @@ import { View, StyleSheet, TextInput, Button } from 'react-native' import Icon from 'react-native-vector-icons/MaterialCommunityIcons' import { useTranslation } from 'react-i18next' -import { OS } from '../lib/consts' -import Colours from '../themes/colours' -import { mx } from '../themes/utils' -import { Language, registerTranslations } from '../lib/i18n' +import { OS } from '../../lib/consts' +import Colours from '../../themes/colours' +import { mx } from '../../themes/utils' +import { Language, registerTranslations } from '../../lib/i18n' const phrases = registerTranslations( 'Search', { searchPlaceholder: { diff --git a/src/components/Search/index.ts b/src/components/Search/index.ts new file mode 100644 index 00000000..28c236ab --- /dev/null +++ b/src/components/Search/index.ts @@ -0,0 +1 @@ +export { default as SearchBar } from './Bar' diff --git a/src/screens/SearchScreen.tsx b/src/screens/SearchScreen.tsx index 76a43c3c..6cbf5e8d 100644 --- a/src/screens/SearchScreen.tsx +++ b/src/screens/SearchScreen.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react' import { StyleSheet, View } from 'react-native' -import SearchBar from '../components/Search' +import { SearchBar } from '../components/Search' import BackButton from '../components/BackButton' import Container from '../components/Container' import Colours from '../themes/colours' From afbbf5c9ee5ddb8cf77a4f1e6e0435b3fb991bd2 Mon Sep 17 00:00:00 2001 From: Saihajpreet Singh Date: Mon, 30 Nov 2020 16:44:45 -0600 Subject: [PATCH 03/16] feat: utilities for padding --- src/themes/utils.spec.ts | 19 +++++++++++++++++++ src/themes/utils.ts | 19 +++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 src/themes/utils.spec.ts diff --git a/src/themes/utils.spec.ts b/src/themes/utils.spec.ts new file mode 100644 index 00000000..c230af79 --- /dev/null +++ b/src/themes/utils.spec.ts @@ -0,0 +1,19 @@ +import { px, py } from './utils' + +describe( 'Styling Utilities', () => { + it( 'should have paddingBottom and paddingTop set to auto', () => { + expect( px() ).toStrictEqual( { paddingTop: 'auto', paddingBottom: 'auto' } ) + } ) + + it( 'should have paddingBottom and paddingTop set to 10', () => { + expect( px( 10 ) ).toStrictEqual( { paddingTop: 10, paddingBottom: 10 } ) + } ) + + it( 'should have paddingLeft and paddingRight set to auto', () => { + expect( py() ).toStrictEqual( { paddingLeft: 'auto', paddingRight: 'auto' } ) + } ) + + it( 'should have paddingLeft and paddingRight set to 10', () => { + expect( py( 10 ) ).toStrictEqual( { paddingLeft: 10, paddingRight: 10 } ) + } ) +} ) diff --git a/src/themes/utils.ts b/src/themes/utils.ts index c89095e0..8e148962 100644 --- a/src/themes/utils.ts +++ b/src/themes/utils.ts @@ -5,3 +5,22 @@ export const mx = { marginTop: 'auto', marginBottom: 'auto', } + +/** + * Set Top and Bottom padding to given value. + * Default: 'auto' + */ +export const px = ( value: number|string = 'auto' ) => ( { + paddingTop: value, + paddingBottom: value, +} ) + +/** + * Set Left and Right padding to given value. + * Default: 'auto' + */ +export const py = ( value: number|string = 'auto' ) => ( { + paddingLeft: value, + paddingRight: value, +} ) + From 0b96451f0a3699fd7598521bb03e5b1a7e06f966 Mon Sep 17 00:00:00 2001 From: Saihajpreet Singh Date: Sat, 26 Dec 2020 12:51:03 -0600 Subject: [PATCH 04/16] fix: rename {p,m}x to {p,m}y It was a typo since mx should mean changing left to right and not top and bottom same applies for padding --- src/components/Search/Bar.tsx | 6 +++--- src/screens/SearchScreen.tsx | 4 ++-- src/themes/utils.spec.ts | 8 ++++---- src/themes/utils.ts | 14 +++++++------- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/components/Search/Bar.tsx b/src/components/Search/Bar.tsx index 59937ad2..2d5a4f14 100644 --- a/src/components/Search/Bar.tsx +++ b/src/components/Search/Bar.tsx @@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next' import { OS } from '../../lib/consts' import Colours from '../../themes/colours' -import { mx } from '../../themes/utils' +import { my } from '../../themes/utils' import { Language, registerTranslations } from '../../lib/i18n' const phrases = registerTranslations( 'Search', { @@ -24,13 +24,13 @@ const styles = StyleSheet.create( { backgroundColor: Colours.DarkGray, }, searchIcon: { - ...mx, + ...my, }, searchInputBox: { flex: 1, fontSize: 22, marginLeft: 5, - ...mx, + ...my, }, } ) diff --git a/src/screens/SearchScreen.tsx b/src/screens/SearchScreen.tsx index 6cbf5e8d..5f35c43e 100644 --- a/src/screens/SearchScreen.tsx +++ b/src/screens/SearchScreen.tsx @@ -5,11 +5,11 @@ import { SearchBar } from '../components/Search' import BackButton from '../components/BackButton' import Container from '../components/Container' import Colours from '../themes/colours' -import { mx } from '../themes/utils' +import { my } from '../themes/utils' const styles = StyleSheet.create( { backButton: { - ...mx, + ...my, }, searchBar: { flex: 0.95, diff --git a/src/themes/utils.spec.ts b/src/themes/utils.spec.ts index c230af79..8f39be54 100644 --- a/src/themes/utils.spec.ts +++ b/src/themes/utils.spec.ts @@ -2,18 +2,18 @@ import { px, py } from './utils' describe( 'Styling Utilities', () => { it( 'should have paddingBottom and paddingTop set to auto', () => { - expect( px() ).toStrictEqual( { paddingTop: 'auto', paddingBottom: 'auto' } ) + expect( py() ).toStrictEqual( { paddingTop: 'auto', paddingBottom: 'auto' } ) } ) it( 'should have paddingBottom and paddingTop set to 10', () => { - expect( px( 10 ) ).toStrictEqual( { paddingTop: 10, paddingBottom: 10 } ) + expect( py( 10 ) ).toStrictEqual( { paddingTop: 10, paddingBottom: 10 } ) } ) it( 'should have paddingLeft and paddingRight set to auto', () => { - expect( py() ).toStrictEqual( { paddingLeft: 'auto', paddingRight: 'auto' } ) + expect( px() ).toStrictEqual( { paddingLeft: 'auto', paddingRight: 'auto' } ) } ) it( 'should have paddingLeft and paddingRight set to 10', () => { - expect( py( 10 ) ).toStrictEqual( { paddingLeft: 10, paddingRight: 10 } ) + expect( px( 10 ) ).toStrictEqual( { paddingLeft: 10, paddingRight: 10 } ) } ) } ) diff --git a/src/themes/utils.ts b/src/themes/utils.ts index 8e148962..035392dc 100644 --- a/src/themes/utils.ts +++ b/src/themes/utils.ts @@ -1,26 +1,26 @@ /** * Set Top and Bottom margin to auto */ -export const mx = { +export const my = { marginTop: 'auto', marginBottom: 'auto', } /** - * Set Top and Bottom padding to given value. + * Set Left and Right padding to given value. * Default: 'auto' */ export const px = ( value: number|string = 'auto' ) => ( { - paddingTop: value, - paddingBottom: value, + paddingLeft: value, + paddingRight: value, } ) /** - * Set Left and Right padding to given value. + * Set Top and Bottom padding to given value. * Default: 'auto' */ export const py = ( value: number|string = 'auto' ) => ( { - paddingLeft: value, - paddingRight: value, + paddingTop: value, + paddingBottom: value, } ) From 7e53b2a3173167e4a815908fb5aaced33d3fe66c Mon Sep 17 00:00:00 2001 From: Saihajpreet Singh Date: Mon, 28 Dec 2020 10:58:57 -0600 Subject: [PATCH 05/16] feat: remove language switcher buttons --- src/components/Search/Bar.spec.tsx | 26 -------------- src/components/Search/Bar.tsx | 56 ++++++++---------------------- 2 files changed, 14 insertions(+), 68 deletions(-) diff --git a/src/components/Search/Bar.spec.tsx b/src/components/Search/Bar.spec.tsx index 317427f6..1845edbe 100644 --- a/src/components/Search/Bar.spec.tsx +++ b/src/components/Search/Bar.spec.tsx @@ -16,30 +16,4 @@ describe( '', () => { expect( onEventMock ).toHaveBeenCalledWith( 'Test Input' ) } ) - - it( 'should change language to Punjabi, when the language button is pressed', async () => { - const { - getByText, - getByPlaceholderText, - findByPlaceholderText, - } = render( ) - - expect( getByPlaceholderText( 'Search' ) ).toBeTruthy() - fireEvent.press( getByText( 'PA' ) ) - - expect( await findByPlaceholderText( 'ਖੌਜ' ) ).toBeTruthy() - } ) - - it( 'should change language to English, when the EN language button is pressed', async () => { - const { - getByText, - getByPlaceholderText, - findByPlaceholderText, - } = render( ) - - expect( getByPlaceholderText( 'ਖੌਜ' ) ).toBeTruthy() - fireEvent.press( getByText( 'EN' ) ) - - expect( await findByPlaceholderText( 'Search' ) ).toBeTruthy() - } ) } ) diff --git a/src/components/Search/Bar.tsx b/src/components/Search/Bar.tsx index 2d5a4f14..b6dfe0df 100644 --- a/src/components/Search/Bar.tsx +++ b/src/components/Search/Bar.tsx @@ -1,19 +1,10 @@ import React from 'react' -import { View, StyleSheet, TextInput, Button } from 'react-native' +import { View, StyleSheet, TextInput } from 'react-native' import Icon from 'react-native-vector-icons/MaterialCommunityIcons' -import { useTranslation } from 'react-i18next' import { OS } from '../../lib/consts' import Colours from '../../themes/colours' import { my } from '../../themes/utils' -import { Language, registerTranslations } from '../../lib/i18n' - -const phrases = registerTranslations( 'Search', { - searchPlaceholder: { - [ Language.EnUS ]: 'Search', - [ Language.Pa ]: 'ਖੌਜ', - }, -} ) const styles = StyleSheet.create( { searchBar: { @@ -38,37 +29,18 @@ type SearchBarProps = { onChangeText: ( t: string ) => void, } -const SearchBar = ( { onChangeText }: SearchBarProps ) => { - const { t, i18n } = useTranslation() - - const changeLanguage = ( lng: string ) => { - // TODO @harjot1singh handle catch properly with sentry - i18n.changeLanguage( lng ).catch( console.error ) - } - return ( - - - - {/* // TODO move changeLanguage buttons to 'more' menu */} -