Skip to content

Commit 70abdf8

Browse files
DanDaManTranDanDaManTran
authored
syncing demo with the academy (#57)
* syncing demo with the academy * syncing services
1 parent 967571b commit 70abdf8

12 files changed

Lines changed: 94 additions & 74 deletions

File tree

‎src/shared/components/FormSwitch/FormSwitch.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,11 @@ import Typography from "../../design/Typography"
77

88
export interface FormSwitchProps {
99
label: string
10-
hint?: string
1110
value: boolean
1211
onChange: (value: boolean) => void
1312
}
1413

15-
const FormSwitch: React.FC<FormSwitchProps> = ({
16-
label,
17-
hint,
18-
value,
19-
onChange,
20-
}) => {
14+
const FormSwitch: React.FC<FormSwitchProps> = ({ label, value, onChange }) => {
2115
const theme = useTheme()
2216
const id = useId()
2317

@@ -37,7 +31,6 @@ const FormSwitch: React.FC<FormSwitchProps> = ({
3731
<Switch
3832
accessibilityLabel={label}
3933
accessibilityLabelledBy={id}
40-
accessibilityHint={hint}
4134
onValueChange={onChange}
4235
value={value}
4336
thumbColor={theme.palette.primary.contrast}

‎src/shared/components/FormTextField/FormTextField.test.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { fireEvent, render, screen } from "@testing-library/react-native"
1+
import { render, screen, userEvent } from "@testing-library/react-native"
22

33
import FormTextField from "./FormTextField"
44

55
describe("FormTextField component", () => {
6-
it("renders label", () => {
6+
it("renders label", async () => {
77
const handleChangeMock = jest.fn()
88

99
render(
@@ -14,9 +14,15 @@ describe("FormTextField component", () => {
1414
></FormTextField>,
1515
)
1616

17-
expect(screen.getByText(/Hello/)).toBeOnTheScreen()
17+
const user = userEvent.setup()
18+
expect(screen.getByText(/Hello/)).toBeTruthy()
1819

19-
fireEvent.changeText(screen.getByLabelText(/Hello/i), "test")
20-
expect(handleChangeMock).toHaveBeenCalledWith("test")
20+
await user.type(screen.getByLabelText(/Hello/i), "test")
21+
22+
expect(handleChangeMock).toHaveBeenCalledTimes(4)
23+
expect(handleChangeMock).toHaveBeenNthCalledWith(1, "responset")
24+
expect(handleChangeMock).toHaveBeenNthCalledWith(2, "responsee")
25+
expect(handleChangeMock).toHaveBeenNthCalledWith(3, "responses")
26+
expect(handleChangeMock).toHaveBeenNthCalledWith(4, "responset")
2127
})
2228
})

‎src/shared/components/FormTextField/FormTextField.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,12 @@ import Typography from "../../design/Typography"
88
export interface FormTextFieldProps {
99
type?: "text"
1010
label: string
11-
hint?: string
12-
placeholder?: string
1311
value: string
1412
onChange?: (value: string) => void
1513
}
1614

1715
const FormTextField: React.FC<FormTextFieldProps> = ({
1816
label,
19-
hint,
20-
placeholder,
2117
value,
2218
onChange,
2319
}) => {
@@ -32,10 +28,8 @@ const FormTextField: React.FC<FormTextFieldProps> = ({
3228
<TextInput
3329
accessibilityLabel={label}
3430
accessibilityLabelledBy={id}
35-
accessibilityHint={hint}
3631
onChangeText={onChange}
3732
value={value}
38-
placeholder={placeholder}
3933
style={{
4034
flex: 1,
4135
paddingVertical: 0,

‎src/shared/components/RestaurantHeader/RestaurantHeader.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,10 @@ function getStyles(theme: Theme): {
5555
} {
5656
return StyleSheet.create({
5757
heroBackground: {
58+
width: "100%",
59+
maxWidth: 768,
5860
height: 180,
61+
margin: "auto",
5962
justifyContent: "flex-end",
6063
alignItems: "flex-start",
6164
},

‎src/shared/design/Box/Box.tsx‎

Lines changed: 10 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -53,43 +53,16 @@ function getStyles(
5353
{
5454
display: "flex",
5555
},
56-
margin && spacingToStyles(theme, "margin", margin),
57-
padding && spacingToStyles(theme, "padding", padding),
56+
typeof margin === "string" && { margin: theme.spacing[margin] },
57+
Array.isArray(margin) && {
58+
marginVertical: theme.spacing[margin[0]],
59+
marginHorizontal: theme.spacing[margin[1]],
60+
},
61+
typeof padding === "string" && { padding: theme.spacing[padding] },
62+
Array.isArray(padding) && {
63+
paddingVertical: theme.spacing[padding[0]],
64+
paddingHorizontal: theme.spacing[padding[1]],
65+
},
5866
]),
5967
})
6068
}
61-
62-
function spacingToStyles(
63-
theme: Theme,
64-
property: "margin" | "padding",
65-
value: ThemeMargin | ThemePadding,
66-
): ViewStyle {
67-
if (typeof value === "string") {
68-
return {
69-
[property]: theme.spacing[value],
70-
}
71-
}
72-
73-
if (value.length === 1) {
74-
return {
75-
[property]: theme.spacing[value[0]],
76-
}
77-
}
78-
79-
if (value.length === 2) {
80-
return {
81-
[`${property}Vertical`]: theme.spacing[value[0]],
82-
[`${property}Horizontal`]: theme.spacing[value[1]],
83-
}
84-
}
85-
86-
if (value.length === 3) {
87-
return {
88-
[`${property}Top`]: theme.spacing[value[0]],
89-
[`${property}Horizontal`]: theme.spacing[value[1]],
90-
[`${property}Bottom`]: theme.spacing[value[2]],
91-
}
92-
}
93-
94-
throw new Error(`Invalid spacing value: ${value}`)
95-
}

‎src/shared/design/Button/Button.tsx‎

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,41 +6,58 @@ import {
66
StyleSheet,
77
Pressable,
88
View,
9+
Text,
910
} from "react-native"
1011

1112
import { Theme, useTheme } from "../theme"
12-
import Typography from "../Typography"
1313

1414
type Variant = "primary" | "secondary" | "outline"
1515

1616
export interface ButtonProps extends PressableProps {
1717
variant?: Variant
18+
margin?: keyof Theme["spacing"]
19+
padding?: keyof Theme["spacing"]
20+
fontSize?: TextStyle["fontSize"]
21+
fontWeight?: TextStyle["fontWeight"]
1822
disabled?: boolean
1923
children: string
2024
}
2125

2226
const Button: React.ForwardRefRenderFunction<View, ButtonProps> = (
23-
{ variant = "primary", disabled, children, ...props },
27+
{
28+
variant = "primary",
29+
margin,
30+
padding,
31+
fontSize = 20,
32+
fontWeight = "400",
33+
disabled,
34+
children,
35+
...props
36+
},
2437
ref,
2538
) => {
2639
const theme = useTheme()
2740
const styles = getStyles(theme, variant)
2841

2942
return (
3043
<Pressable
31-
ref={ref}
3244
{...props}
45+
ref={ref}
46+
style={StyleSheet.compose(styles.pressable, {
47+
...(margin ? { margin: theme.spacing[margin] } : {}),
48+
...(padding ? { padding: theme.spacing[padding] } : {}),
49+
opacity: disabled ? 0.5 : 1,
50+
})}
3351
disabled={disabled}
34-
style={[
35-
styles.pressable,
36-
{
37-
opacity: disabled ? 0.5 : 1,
38-
},
39-
]}
4052
>
41-
<Typography variant="button" style={styles.text}>
53+
<Text
54+
style={StyleSheet.compose(styles.text, {
55+
fontSize,
56+
fontWeight,
57+
})}
58+
>
4259
{children}
43-
</Typography>
60+
</Text>
4461
</Pressable>
4562
)
4663
}

‎src/shared/design/Card/Card.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ function getStyles(theme: Theme): {
3333
} {
3434
return StyleSheet.create({
3535
container: {
36+
width: "100%",
3637
shadowOffset: { width: 0, height: 2 },
3738
shadowOpacity: 0.25,
3839

‎src/shared/design/Typography/Typography.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const Typography: React.FC<TypographyProps> = ({
1616
const styles = getStyles(theme, variant)
1717

1818
return (
19-
<Text {...props} style={[styles.text, style]}>
19+
<Text {...props} style={StyleSheet.compose(styles.text, style)}>
2020
{children}
2121
</Text>
2222
)

‎src/shared/design/theme/theme.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,10 @@ export interface Theme {
3232

3333
export type ThemeMargin =
3434
| keyof Theme["spacing"]
35-
| [keyof Theme["spacing"]]
3635
| [keyof Theme["spacing"], keyof Theme["spacing"]]
37-
| [keyof Theme["spacing"], keyof Theme["spacing"], keyof Theme["spacing"]]
3836
export type ThemePadding =
3937
| keyof Theme["spacing"]
40-
| [keyof Theme["spacing"]]
4138
| [keyof Theme["spacing"], keyof Theme["spacing"]]
42-
| [keyof Theme["spacing"], keyof Theme["spacing"], keyof Theme["spacing"]]
4339

4440
const light: Theme = {
4541
palette: {

‎src/shared/services/auth/AuthProvider.tsx‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,35 +19,65 @@ GoogleSignin.configure({
1919
const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
2020
children,
2121
}) => {
22+
const [error, setError] = useState<Error | undefined>()
23+
const [isPending, setIsPending] = useState<boolean>(true)
2224
const [userInfo, setUserInfo] = useState<UserInfo | null>()
2325

2426
const signIn = useCallback(async () => {
2527
try {
28+
setError(undefined)
29+
setIsPending(true)
2630
const userInfo = await GoogleSignin.signIn()
31+
setIsPending(false)
2732
setUserInfo(userInfo)
2833
return userInfo.user
2934
} catch (error) {
3035
setUserInfo(null)
3136
console.error("GoogleSignin.signIn() error", error)
37+
setError(error as Error)
38+
setIsPending(false)
39+
setUserInfo(null)
3240
return false
3341
}
3442
}, [])
3543

3644
const signOut = useCallback(async () => {
3745
try {
46+
setError(undefined)
47+
setIsPending(true)
48+
3849
await GoogleSignin.signOut()
50+
setIsPending(false)
3951
setUserInfo(null)
52+
4053
return true
4154
} catch (error) {
4255
console.error("GoogleSignin.signOut() error", error)
56+
setError(error as Error)
57+
4358
return false
4459
}
4560
}, [])
4661

4762
useEffect(() => {
4863
async function run() {
49-
const userInfo = await GoogleSignin.getCurrentUser()
50-
setUserInfo(userInfo)
64+
try {
65+
setError(undefined)
66+
setIsPending(true)
67+
68+
const userInfo = await GoogleSignin.getCurrentUser()
69+
70+
setIsPending(false)
71+
setUserInfo(userInfo || undefined)
72+
} catch (error) {
73+
console.error(
74+
"Call to GoogleSignin.getCurrentUser() failed with error:",
75+
error,
76+
)
77+
78+
setError(error as Error)
79+
setIsPending(false)
80+
}
5181
}
5282

5383
run()
@@ -57,7 +87,9 @@ const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
5787
() => ({
5888
signIn,
5989
signOut,
90+
error,
6091
isAuthenticated: userInfo ? true : userInfo === null ? false : undefined,
92+
isPending,
6193
user: userInfo?.user,
6294
scopes: userInfo?.scopes,
6395
idToken: userInfo?.idToken,

0 commit comments

Comments
 (0)