Skip to content

Commit 3437d1c

Browse files
thiendangitthiendangit
committed
add product details
1 parent 75d0a13 commit 3437d1c

File tree

32 files changed

+596
-198
lines changed

32 files changed

+596
-198
lines changed

‎.eslintrc.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
],
2121
"object-curly-spacing": [
2222
"error",
23-
"always"
23+
"never"
2424
],
2525
"comma-dangle": [
2626
"error",

‎ios/Podfile.lock‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -310,8 +310,8 @@ PODS:
310310
- React-Core
311311
- RNSVG (12.1.1):
312312
- React
313-
- RNVectorIcons (7.1.0):
314-
- React
313+
- RNVectorIcons (8.1.0):
314+
- React-Core
315315
- Yoga (1.14.0)
316316

317317
DEPENDENCIES:
@@ -452,7 +452,7 @@ SPEC CHECKSUMS:
452452
React-jsi: 5de8204706bd872b78ea646aee5d2561ca1214b6
453453
React-jsiexecutor: 124e8f99992490d0d13e0649d950d3e1aae06fe9
454454
React-jsinspector: 500a59626037be5b3b3d89c5151bc3baa9abf1a9
455-
react-native-safe-area-context: e471852c5ed67eea4b10c5d9d43c1cebae3b231d
455+
react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
456456
React-perflogger: aad6d4b4a267936b3667260d1f649b6f6069a675
457457
React-RCTActionSheet: fc376be462c9c8d6ad82c0905442fd77f82a9d2a
458458
React-RCTAnimation: ba0a1c3a2738be224a08092fa7f1b444ab77d309
@@ -465,14 +465,14 @@ SPEC CHECKSUMS:
465465
React-RCTVibration: 4b99a7f5c6c0abbc5256410cc5425fb8531986e1
466466
React-runtimeexecutor: ff951a0c241bfaefc4940a3f1f1a229e7cb32fa6
467467
ReactCommon: bedc99ed4dae329c4fcf128d0c31b9115e5365ca
468-
RNBootSplash: 5d4eaad77c938b6a4ced872587ffab8d057fc043
469-
RNCAsyncStorage: b17c417b356114699a486715adfa5829a5d6d8b9
470-
RNCMaskedView: f127cd9652acfa31b91dcff613e07ba18b774db6
468+
RNBootSplash: 9e99559e892b1cb621321f04969149a25a44c5a5
469+
RNCAsyncStorage: f47a7e8f927f7c9da947491fc55752eb9ce17f2d
470+
RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
471471
RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
472472
RNReanimated: b8c8004b43446e3c2709fe64b2b41072f87428ad
473473
RNScreens: bd1523c3bde7069b8e958e5a16e1fc7722ad0bdd
474474
RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f
475-
RNVectorIcons: bc69e6a278b14842063605de32bec61f0b251a59
475+
RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
476476
Yoga: a7de31c64fe738607e7a3803e3f591a4b1df7393
477477

478478
PODFILE CHECKSUM: f02ccba779c5f90148bca0c16c327c54cf2276cf

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
"react-native-svg": "^12.1.1",
5858
"react-native-vector-icons": "^8.1.0",
5959
"react-redux": "^7.2.4",
60+
"reanimated-bottom-sheet": "^1.0.0-alpha.22",
6061
"redux": "^4.1.0",
6162
"redux-logger": "^3.0.6",
6263
"redux-persist": "^6.0.0",

‎scripts/generatePossibleTypes.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const fs = require('fs');
44

55
fetch('https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/graphql', {
66
method: 'POST',
7-
headers: { 'Content-Type': 'application/json' },
7+
headers: {'Content-Type': 'application/json'},
88
body: JSON.stringify({
99
variables: {},
1010
query: `

‎src/App.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import React, { useEffect, useState } from 'react';
2-
import { I18nextProvider } from 'react-i18next';
3-
import { Provider } from 'react-redux';
4-
import { ApolloClient, ApolloProvider } from '@apollo/client';
5-
import { getApolloClient } from '@lib/apollo/client';
1+
import React, {useEffect, useState} from 'react';
2+
import {I18nextProvider} from 'react-i18next';
3+
import {Provider} from 'react-redux';
4+
import {ApolloClient, ApolloProvider} from '@apollo/client';
5+
import {getApolloClient} from '@lib/apollo/client';
66
import storeConfig from '@store/store';
77
import I18n from '@utils/i18n/i18n';
8-
import { Root, Spinner } from 'native-base';
9-
import { PersistGate } from 'redux-persist/integration/react';
8+
import {Root, Spinner} from 'native-base';
9+
import {PersistGate} from 'redux-persist/integration/react';
1010
import 'react-native-gesture-handler';
1111
import AppNavigation from './navigation';
1212
import ThemeManager from '@themes/index';
@@ -20,7 +20,7 @@ const App: React.FC = () => {
2020
.catch((e) => console.log(e));
2121
}, []);
2222

23-
const { store, persist } = storeConfig();
23+
const {store, persist} = storeConfig();
2424

2525
if (client) {
2626
return (

‎src/containers/index.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Launches } from './launches';
2-
import { Login } from './login';
3-
import { Register } from './register';
1+
import {Launches} from './launches';
2+
import {Login} from './login';
3+
import {Register} from './register';
4+
import {ProductDetails} from './productDetails';
45

5-
export { Launches, Login, Register };
6+
export {Launches, Login, Register, ProductDetails};

‎src/containers/launches/index.tsx‎

Lines changed: 70 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,30 @@
1-
import React, { memo } from 'react';
1+
import React, {memo, useCallback} from 'react';
22
import isEqual from 'react-fast-compare';
3-
import { useTranslation } from 'react-i18next';
4-
import { FlatList, RefreshControl, SafeAreaView, View } from 'react-native';
5-
import { dispatch } from '@common/redux';
6-
import { scale } from '@common/scale';
7-
import { actionsApp } from '@store/app_reducer';
8-
import { Button, Spinner, Text, Thumbnail } from 'native-base';
9-
import { useCategoryProducts } from '@lib/logic/product/useCategoryProducts';
10-
import { removeCustomerToken } from '@lib/utils';
11-
import { formatMoney } from '@utils/money/money';
12-
import { useTheme } from '@react-navigation/native';
3+
import {useTranslation} from 'react-i18next';
4+
import {
5+
Alert,
6+
FlatList,
7+
RefreshControl,
8+
SafeAreaView,
9+
View,
10+
} from 'react-native';
11+
import {dispatch} from '@common/redux';
12+
import {scale} from '@common/scale';
13+
import {actionsApp} from '@store/app_reducer';
14+
import {Button, Icon, Spinner, Text, Thumbnail} from 'native-base';
15+
import {useCategoryProducts} from '@lib/logic/product/useCategoryProducts';
16+
import {removeCustomerToken} from '@lib/utils';
17+
import {formatMoney} from '@utils/money/money';
18+
import {useTheme} from '@react-navigation/native';
1319
import GenericTemplate from '@lib/components/GenericTemplate/GenericTemplate';
14-
import { styles } from '@containers/launches/style';
15-
import { NetworkStatus } from '@apollo/client';
20+
import {styles} from '@containers/launches/style';
21+
import {NetworkStatus} from '@apollo/client';
22+
import {NavigationService} from '@navigation/navigationService';
23+
import {APP_SCREEN} from '@navigation/screenTypes';
24+
import {ProductInListType} from '@lib/apollo/queries/productsFragment';
1625

1726
const LaunchesScreen: React.FC = () => {
18-
const { t } = useTranslation();
27+
const {t} = useTranslation();
1928
const theme = useTheme();
2029

2130
const {
@@ -26,13 +35,31 @@ const LaunchesScreen: React.FC = () => {
2635
loadMore,
2736
networkStatus,
2837
isLoadMore,
29-
} = useCategoryProducts({ categoryId: '2' });
38+
} = useCategoryProducts({categoryId: '2'});
3039

31-
const onLogout = async () => {
32-
await removeCustomerToken();
33-
dispatch(actionsApp.onLogout());
40+
const onLogout = () => {
41+
Alert.alert('Logout', t('question:are_you_sure'), [
42+
{
43+
text: 'Cancel',
44+
onPress: () => {},
45+
style: 'destructive',
46+
},
47+
{
48+
text: 'OK',
49+
onPress: async () => {
50+
await removeCustomerToken();
51+
dispatch(actionsApp.onLogout());
52+
},
53+
},
54+
]);
3455
};
3556

57+
const goToProductDetails = useCallback((item: ProductInListType) => {
58+
NavigationService.navigate(APP_SCREEN.PRODUCT_DETAILS, {
59+
sku: item?.sku,
60+
});
61+
}, []);
62+
3663
const renderFooterComponent = () => {
3764
return (
3865
(networkStatus === NetworkStatus.fetchMore && isLoadMore && (
@@ -43,11 +70,13 @@ const LaunchesScreen: React.FC = () => {
4370
);
4471
};
4572

46-
const renderItem = ({ item }: { item: any; index: number }) => {
73+
const renderItem = ({item}: { item: any; index: number }) => {
4774
return (
48-
<View style={styles(theme).itemContainer}>
75+
<Button
76+
style={styles(theme).itemContainer}
77+
onPress={() => goToProductDetails(item)}>
4978
<Thumbnail
50-
source={{ uri: item.image.url }}
79+
source={{uri: item.image.url}}
5180
style={{
5281
marginLeft: scale(10),
5382
marginTop: scale(5),
@@ -72,14 +101,14 @@ const LaunchesScreen: React.FC = () => {
72101
{formatMoney(item?.price_range?.minimum_price?.regular_price.value)}
73102
</Text>
74103
</View>
75-
</View>
104+
</Button>
76105
);
77106
};
78107

79108
return (
80109
<SafeAreaView style={styles(theme).container}>
81110
<GenericTemplate
82-
style={{ alignItems: 'center' }}
111+
style={{alignItems: 'center'}}
83112
loading={loading && !refreshing && !isLoadMore}>
84113
<Text style={styles().header}>RN Graphql Boilerplate</Text>
85114
<FlatList
@@ -100,12 +129,25 @@ const LaunchesScreen: React.FC = () => {
100129
}}
101130
ListFooterComponent={renderFooterComponent}
102131
/>
132+
<Button
133+
style={{
134+
position: 'absolute',
135+
right: scale(10),
136+
height: scale(30),
137+
alignItems: 'center',
138+
width: scale(40),
139+
borderRadius: scale(10),
140+
}}
141+
onPress={onLogout}>
142+
<Icon
143+
name={'log-out'}
144+
style={{
145+
height: scale(25),
146+
width: scale(25),
147+
}}
148+
/>
149+
</Button>
103150
</GenericTemplate>
104-
<Button
105-
style={{ alignSelf: 'center', marginVertical: scale(10) }}
106-
onPress={onLogout}>
107-
<Text style={{ color: 'white' }}> {t('logout')} </Text>
108-
</Button>
109151
</SafeAreaView>
110152
);
111153
};

‎src/containers/launches/style.ts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { StyleSheet } from 'react-native';
2-
import { STYLES } from '@common/style';
3-
import { Theme } from '@react-navigation/native';
4-
import { scale } from '@common/scale';
5-
import { deviceWidth } from '@lib/utils';
6-
import { FontSizeDefault } from '@themes/fontSize';
7-
import { SpacingDefault } from '@themes/spacing';
1+
import {StyleSheet} from 'react-native';
2+
import {STYLES} from '@common/style';
3+
import {Theme} from '@react-navigation/native';
4+
import {scale} from '@common/scale';
5+
import {deviceWidth} from '@lib/utils';
6+
import {FontSizeDefault} from '@themes/fontSize';
7+
import {SpacingDefault} from '@themes/spacing';
88

99
export const styles = (theme?: Theme) => {
1010
return StyleSheet.create({
@@ -18,6 +18,7 @@ export const styles = (theme?: Theme) => {
1818
marginTop: scale(10),
1919
width: deviceWidth - scale(20),
2020
flexDirection: 'row',
21+
justifyContent: 'flex-start',
2122
marginHorizontal: scale(10),
2223
shadowColor: theme?.colors.text,
2324
shadowOffset: {

‎src/containers/login/index.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
1-
import React, { memo, useEffect } from 'react';
1+
import React, {memo, useEffect} from 'react';
22
import isEqual from 'react-fast-compare';
3-
import { useTranslation } from 'react-i18next';
3+
import {useTranslation} from 'react-i18next';
44
import {
55
ActivityIndicator,
66
Image,
77
Platform,
88
SafeAreaView,
99
StatusBar,
1010
} from 'react-native';
11-
import { images } from '@assets/image';
12-
import { scale } from '@common/scale';
13-
import { useLogin } from '@lib/logic/auth/useLogin';
14-
import { Button, Container, Form, Input, Item, Text, View } from 'native-base';
15-
import { Switch } from 'react-native-gesture-handler';
16-
import { actionsApp } from '@store/app_reducer';
17-
import { useSelector, useToast } from '@common/hooks';
18-
import { dispatch } from '@common/redux';
19-
import { useTheme } from '@react-navigation/native';
20-
import { NavigationService } from '@navigation/navigationService';
21-
import { APP_SCREEN } from '@navigation/screenTypes';
11+
import {images} from '@assets/image';
12+
import {scale} from '@common/scale';
13+
import {useLogin} from '@lib/logic/auth/useLogin';
14+
import {Button, Container, Form, Input, Item, Text, View} from 'native-base';
15+
import {Switch} from 'react-native-gesture-handler';
16+
import {actionsApp} from '@store/app_reducer';
17+
import {useSelector, useToast} from '@common/hooks';
18+
import {dispatch} from '@common/redux';
19+
import {useTheme} from '@react-navigation/native';
20+
import {NavigationService} from '@navigation/navigationService';
21+
import {APP_SCREEN} from '@navigation/screenTypes';
2222

2323
const LoginContainer = ({}) => {
2424
const theme = useTheme();
2525
const {
26-
theme: { dark },
26+
theme: {dark},
2727
} = useSelector((x) => x.app);
28-
const { t } = useTranslation();
28+
const {t} = useTranslation();
2929
const toast = useToast();
3030
const {
3131
values,
@@ -87,7 +87,7 @@ const LoginContainer = ({}) => {
8787
}}>
8888
{t('dialog:darkModeReview')}
8989
</Text>
90-
<View style={{ height: scale(100) }}>
90+
<View style={{height: scale(100)}}>
9191
<Form>
9292
<Item
9393
style={{
@@ -139,7 +139,7 @@ const LoginContainer = ({}) => {
139139
}}
140140
onPress={handleSubmit}>
141141
{(loading && <ActivityIndicator size="small" color={'white'} />) || (
142-
<Text style={{ color: 'white' }}> Login </Text>
142+
<Text style={{color: 'white'}}> Login </Text>
143143
)}
144144
</Button>
145145
<Text

0 commit comments

Comments
 (0)