Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#1] Feat: Implement Google sign in & Join Screen UI #24

Merged
merged 6 commits into from
Mar 7, 2022
Merged

[#1] Feat: Implement Google sign in & Join Screen UI #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a727d89
Merge pull request #20 from mori8/feature/search
hee-suh Mar 5, 2022
36cbe0b
Merge branch 'main' of https://github.com/dsc-sookmyung/2022-Answer-S…
hee-suh Mar 6, 2022
af395da
Merge branch 'main' of https://github.com/dsc-sookmyung/2022-Answer-S…
hee-suh Mar 6, 2022
9fe1a53
Remove: Forgot Password Screen
hee-suh Mar 6, 2022
c1ebad4
[#1] Feat: Implement Join Screen UI
hee-suh Mar 6, 2022
16c8bae
[#1] Feat: Implement Google sign in
hee-suh Mar 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions react-native/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,6 @@ web-build/

# macOS
.DS_Store

# react-native environment variables
.env
12 changes: 4 additions & 8 deletions react-native/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NativeBaseProvider } from 'native-base';
import { nativeBaseTheme } from './core/theme';
import AppLoading from 'expo-app-loading';
import useFonts from './hooks/useFonts'
import useFonts from './hooks/useFonts';
import { theme } from './core/theme';

import LoginScreen from './screens/LoginScreen';
import JoinScreen from './screens/JoinScreen';
import ForgotPasswordScreen from './screens/ForgotPasswordScreen';
import HomeScreen from './screens/HomeScreen';
import TranslateScreen from './screens/TranslateScreen';
import SearchScreen from './screens/SearchScreen';
Expand All @@ -20,7 +20,7 @@ import SearchResultScreen from './screens/SearchResultScreen';
const Stack = createNativeStackNavigator();

export default function App() {
const [fontsLoaded, SetFontsLoaded] = React.useState<boolean>(false);
const [fontsLoaded, SetFontsLoaded] = useState<boolean>(false);
const LoadFontsAndRestoreToken = async () => {
await useFonts();
};
Expand Down Expand Up @@ -50,15 +50,11 @@ export default function App() {
name="Join"
component={JoinScreen}
/>
<Stack.Screen
name="ForgotPassword"
component={ForgotPasswordScreen}
/>
hee-suh marked this conversation as resolved.
Show resolved Hide resolved
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
headerStyle: { backgroundColor: '#333D79' },
headerStyle: { backgroundColor: theme.colors.primary },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

어 이거 string이어야 한다고 빨간줄 안뜨나여?.?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

네넵! 왜 난 안 뜨고 수연이는 뜨지 ㅇ.ㅇ

title: "NotiNote",
headerBackVisible: false,
headerRight: () => <LogoutButton/>,
Expand Down
15 changes: 14 additions & 1 deletion react-native/babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,19 @@
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
presets: [
'babel-preset-expo',
'module:metro-react-native-babel-preset',
],
plugins: [
["module:react-native-dotenv", {
"moduleName": "@env",
"path": ".env",
"blacklist": null,
"whitelist": null,
"safe": false,
"allowUndefined": true
}]
]
};
};
4 changes: 4 additions & 0 deletions react-native/env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
declare module '@env' {
export const GOOGLE_CLIENT_ID_WEB: string;
export const ENV: 'dev' | 'prod';
};
7 changes: 7 additions & 0 deletions react-native/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,19 @@
"@react-navigation/native-stack": "^6.5.0",
"expo": "~44.0.0",
"expo-app-loading": "~1.3.0",
"expo-application": "^4.0.2",
"expo-auth-session": "~3.5.0",
"expo-camera": "^12.1.2",
"expo-font": "~10.0.4",
"expo-random": "~12.1.1",
"expo-status-bar": "~1.2.0",
"expo-web-browser": "~10.1.0",
"metro-react-native-babel-preset": "^0.69.0",
"native-base": "^3.3.7",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-dotenv": "^3.3.1",
"react-native-elements": "^3.4.2",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
Expand All @@ -39,6 +45,7 @@
"@babel/core": "^7.12.9",
"@types/react": "~17.0.21",
"@types/react-native": "~0.64.12",
"@types/react-native-dotenv": "^0.2.0",
"@types/react-redux": "^7.1.22",
"@types/redux": "^3.6.0",
"typescript": "~4.3.5"
Expand Down
11 changes: 0 additions & 11 deletions react-native/screens/ForgotPasswordScreen.tsx
View file
Open in desktop

This file was deleted.

173 changes: 166 additions & 7 deletions react-native/screens/JoinScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,170 @@
import * as React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import React, { useState } from 'react';
import { StyleSheet, View, KeyboardAvoidingView, Alert, Platform, ScrollView, Image, GestureResponderEvent } from 'react-native';
import { FormControl, Input, Button, VStack, Select, CheckIcon } from 'native-base';
import { nameValidator } from '../core/utils';
import type { Navigation } from '../types';
import { theme } from '../core/theme';

export default function JoinScreen({ navigation }: Navigation) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Join Screen</Text>
</View>
);
const [profileImg, setProfileImg] = useState<number>(1);
const [username, setUsername] = useState<string>('');
const [language, setLanguage] = useState<string>('');
const [childrenNumber, setChildrenNumber] = useState<string>('1');
const [childrenName, setChildrenName] = useState<string[]>([]);
const imgSource = [require(`../assets/images/profile-images/profile-1.png`), require(`../assets/images/profile-images/profile-2.png`), require(`../assets/images/profile-images/profile-3.png`),
require(`../assets/images/profile-images/profile-4.png`), require(`../assets/images/profile-images/profile-5.png`), require(`../assets/images/profile-images/profile-6.png`), require(`../assets/images/profile-images/profile-7.png`)];
const childrenColor = [theme.colors.primary, theme.colors.secondary, theme.colors.skyblue, theme.colors.coral, theme.colors.gray, '#000']

const errorAlert = (error: string) =>
Alert.alert(
"Join Failed",
error,
[
{ text: "OK", onPress: () => console.log("OK Pressed") }
]
);

const handleProfileImg = (profileType: number) => (event: GestureResponderEvent) => {
setProfileImg(profileType);
}

const handleChildName = (childNum: number, text: string) => {
let array = [...childrenName];
array[childNum] = text;
setChildrenName(array);
}

const onJoinPressed = () => {
const usernameError = nameValidator(username);
const childrenNameError = childrenName.length !== Number(childrenNumber);

if (usernameError || childrenNameError || !language) {
console.log(usernameError);
errorAlert("Please fill in all the blanks!");
return;
}

Alert.alert(
"Success",
"Congratulations, your account has been successfully created."
hee-suh marked this conversation as resolved.
Show resolved Hide resolved
)
navigation.navigate('Home');
};

return (
<KeyboardAvoidingView style={styles.container} behavior={Platform.OS === "ios" ? "padding" : "height"}>
<View style={styles.topView}>
<VStack space={4} style={{ flex: 1 }}>
<FormControl isRequired style={{ flex: 1.2 }}>
<FormControl.Label>Profile Image</FormControl.Label>
<ScrollView horizontal={true}>
{Array(7).fill(1).map((num, index) =>
<Button key={'b_'+index} variant="unstyled" onPress={handleProfileImg(index+1)}>
<Image style={[styles.profileImage, profileImg!==index+1 && styles.disabled]} source={imgSource[index]} />
</Button>
)}
</ScrollView>
</FormControl>
<FormControl isRequired style={{ flex: 1 }}>
<FormControl.Label>Username</FormControl.Label>
<Input
size="md"
value={username}
onChangeText={(text) => setUsername(text)}
autoFocus
autoCapitalize="none"
returnKeyType={"next"}
/>
</FormControl>
<FormControl isRequired style={{ flex: 1 }}>
<FormControl.Label>Select Your Language</FormControl.Label>
<Select selectedValue={language} size="md" minWidth={200} accessibilityLabel="Select your language" placeholder="Select your language" onValueChange={itemValue => {
setLanguage(itemValue);
}} _selectedItem={{
bg: "skyblue.500",
endIcon: <CheckIcon size={5} />
}} mt={1}>
{/* Country code 3 digit ISO */}
<Select.Item label="Armenian" value="arm" />
<Select.Item label="Chinese" value="chn" />
<Select.Item label="Japanese" value="jpn" />
<Select.Item label="Indonesian" value="idn" />
<Select.Item label="Korean" value="kor" />
<Select.Item label="Malay" value="mys" />
<Select.Item label="Ukrainian" value="ukr" />
<Select.Item label="Slovak" value="svk" />
<Select.Item label="Uzbek" value="uzb" />
<Select.Item label="Vietnamese" value="vnm" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

어떤 언어 지원할지도 얘기를 해봐야겠군

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

번역 잘 되는 언어 && 우리나라 다문화 가정 외국인 부모님의 출신 나라 비율 많은 순
으로 서치 해봐야할 듯!

</Select>
</FormControl>
<FormControl isRequired style={{ flex: 1 }}>
<FormControl.Label>Number of Children</FormControl.Label>
<Select selectedValue={childrenNumber} size="md" minWidth={200} accessibilityLabel="Select number of children" placeholder="Select number of children" onValueChange={itemValue => {
setChildrenNumber(itemValue);
}} _selectedItem={{
bg: "skyblue.500",
endIcon: <CheckIcon size={5} />
}} mt={1}>
<Select.Item label="1" value="1" />
<Select.Item label="2" value="2" />
<Select.Item label="3" value="3" />
<Select.Item label="4" value="4" />
<Select.Item label="5" value="5" />
<Select.Item label="6" value="6" />
</Select>
</FormControl>
<FormControl isRequired style={{ flex: 2 }}>
<FormControl.Label>Children name</FormControl.Label>
<ScrollView style={{height: '100%'}}>
{Array(Number(childrenNumber)).fill(1).map((child, index) =>
<Input
key={'i_'+index}
size="md"
variant="underlined"
value={childrenName[index]}
onChangeText={(text) => handleChildName(index, text)}
autoCapitalize="none"
mb={2}
InputRightElement={
<Button bg={childrenColor[index]} borderRadius="full" m={1} size="xs" height={childrenNumber==="1" ? "60%": "50%"}>
&nbsp;
</Button>
}
/>
)}
</ScrollView>
</FormControl>
</VStack>
</View>
<View style={styles.bottomView}>
<Button size="lg" onPress={onJoinPressed}>
Sign up
</Button>
</View>
</KeyboardAvoidingView>
);
}

const styles = StyleSheet.create({
container: {
paddingHorizontal: 25,
paddingVertical: 40,
backgroundColor: theme.colors.background,
flex: 1,
flexDirection: 'column',
},
topView: {
flex: 5,
},
bottomView: {
flex: 1
},
profileImage: {
width: 52,
height: 52,
},
disabled: {
opacity: 0.3
}
});

Loading