Fakultas Ilmu Komputer UI

Commit d4dc9533 authored by Ahmad Izzudin Alifyandra's avatar Ahmad Izzudin Alifyandra
Browse files

Merge branch 'auth-screen' into 'dev'

Fixing some bugs in RegisterScreen

See merge request !48
parents cb722a03 5d32057c
import { render } from "@testing-library/react-native";
import Register from "../../../screens/auth/RegisterScreen";
import React from "react";
describe("Register Screen Test", () => {
it("Renders Form", () => {
const { getAllByPlaceholderText } = render(
<Register navigation={null} route={null} />
);
expect(getAllByPlaceholderText("Masukkan Nama Depan"));
expect(getAllByPlaceholderText("Masukkan Nama Belakang"));
expect(getAllByPlaceholderText("Masukkan Email"));
expect(getAllByPlaceholderText("Masukkan Password"));
expect(getAllByPlaceholderText("Masukkan No. Handphone"));
});
});
import firebase from "firebase";
import { ICategory } from "../types/firestore";
export const getCategories = async (): Promise<ICategory[]> => {
const db = firebase.firestore();
// We dont need to do a .where() method since we just want to get all the documents in the collection
const snap = await db.collection("categories").get();
const categories: ICategory[] = [];
snap.docs.forEach((doc) => {
const data: ICategory = { ...(doc.data() as ICategory), id: doc.id };
categories.push({ name: data.name, id: doc.id });
});
return categories;
};
import { IDD } from "../types/firestore";
export const ddConverter = <T,>(
label: string,
value: string,
list: T[]
): IDD[] => {
const newIdd: IDD[] = [];
list.forEach((e) => {
newIdd.push({
label: e[label],
value: e[value],
});
});
return newIdd;
};
import { Text, View } from "../../components/Themed";
import * as React from "react";
import { useState } from "react";
import { useEffect, useState } from "react";
import { ScrollView, StyleSheet } from "react-native";
import PlainForm from "../../components/Forms/PlainForm";
import Spacer from "../../components/Spacer/Spacer";
import MainButton from "../../components/button/MainButton";
import Colors from "../../constants/Colors";
import DropdownForm from "../../components/Forms/DropdownForm";
import { getCategories } from "../../db/categories";
import { ddConverter } from "../../helpers/ddConverter";
import { ICategory, IDD } from "../../types/firestore";
import { RootTabScreenProps } from "../../types/navigation";
import { useNavigation } from "@react-navigation/core";
......@@ -18,71 +21,87 @@ const RegisterGoogleFacebookScreen = ({
const [lastName, setLastName] = useState("");
const [phoneNo, setPhoneNo] = useState("");
const [picked, setPicked] = useState("");
const [list, setList] = useState();
const [categories, setCategories] = useState([
{ label: "Agrikultur", value: "B" },
{ label: "Pertanian", value: "D" },
{ label: "Pertambangan", value: "E" },
{ label: "Perikanan", value: "F" },
{ label: "Real Estat", value: "G" },
]);
// const [categories, setCategories] = useState<IDD[]>();
//
// useEffect(() => {
// getCategories().then((res) =>
// setCategories(ddConverter<ICategory>("name", "id", res))
// );
// }, []);
return (
<ScrollView style={styles.container}>
<View>
<Text style={styles.titleText}>Selamat Datang!</Text>
</View>
<Spacer variant={"xl"} />
<View>
<Text style={styles.description}>
Silakan isi formulir berikut untuk membuat akun Click
</Text>
</View>
<Spacer variant={"xl"} />
<View>
<PlainForm
formTitle={"Nama Depan"}
text={firstName}
setText={setFirstName}
placeholder={"Masukkan Nama Depan"}
disabled
/>
</View>
<Spacer variant={"l"} />
<View>
<PlainForm
formTitle={"Nama Belakang"}
text={lastName}
setText={setLastName}
placeholder={"Masukkan Nama Belakang"}
disabled
/>
</View>
<Spacer variant={"l"} />
<View>
<PlainForm
formTitle={"No. Handphone"}
text={phoneNo}
setText={setPhoneNo}
placeholder={"Masukkan No. Handphone"}
phone
/>
</View>
<Spacer variant={"l"} />
<View>
<DropdownForm
formPlaceholder={"Kategori Bisnis"}
searchPlaceholder={"Cari Kategori Bisnis"}
value={picked}
setValue={setPicked}
items={list}
setItems={setList}
/>
</View>
<Spacer variant={"l"} />
<View>
<Text style={styles.textView}>
Dengan membuat akun Click, saya telah setuju dengan Syarat & Ketentuan
serta Kebijakan Privasi yang telah ditetapkan oleh Click.
</Text>
</View>
<Spacer variant={"l"} />
<View style={styles.button}>
<MainButton text="Daftar" colors="primary" onPress={() => {}} />
<ScrollView nestedScrollEnabled={true}>
<View style={styles.container}>
<View>
<Text style={styles.titleText}>Selamat Datang!</Text>
</View>
<Spacer variant={"xl"} />
<View>
<Text style={styles.description}>
Silakan isi formulir berikut untuk membuat akun Click
</Text>
</View>
<Spacer variant={"xl"} />
<View>
<PlainForm
formTitle={"Nama Depan"}
text={firstName}
setText={setFirstName}
placeholder={"Masukkan Nama Depan"}
disabled
/>
</View>
<Spacer variant={"l"} />
<View>
<PlainForm
formTitle={"Nama Belakang"}
text={lastName}
setText={setLastName}
placeholder={"Masukkan Nama Belakang"}
disabled
/>
</View>
<Spacer variant={"l"} />
<View>
<PlainForm
formTitle={"No. Handphone"}
text={phoneNo}
setText={setPhoneNo}
placeholder={"Masukkan No. Handphone"}
phone
/>
</View>
<Spacer variant={"l"} />
<View>
<DropdownForm
formPlaceholder={"Kategori Bisnis"}
searchPlaceholder={"Cari Kategori Bisnis"}
value={picked}
setValue={setPicked}
items={categories}
setItems={setCategories}
/>
</View>
<Spacer variant={"l"} />
<View>
<Text style={styles.textView}>
Dengan membuat akun Click, saya telah setuju dengan Syarat &
Ketentuan serta Kebijakan Privasi yang telah ditetapkan oleh Click.
</Text>
</View>
<Spacer variant={"l"} />
<View style={styles.button}>
<MainButton text="Daftar" colors="primary" onPress={() => {}} />
</View>
<Spacer variant={"xl"} />
</View>
<Spacer variant={"xl"} />
</ScrollView>
);
};
......@@ -96,7 +115,6 @@ const styles = StyleSheet.create({
paddingHorizontal: 24,
},
titleText: {
fontFamily: "HelveticaNeue",
fontSize: 32,
fontStyle: "normal",
fontWeight: "400",
......@@ -105,7 +123,6 @@ const styles = StyleSheet.create({
paddingTop: 50,
},
description: {
fontFamily: "HelveticaNeue",
fontSize: 20,
fontStyle: "normal",
fontWeight: "300",
......@@ -113,7 +130,6 @@ const styles = StyleSheet.create({
textAlign: "left",
},
textView: {
fontFamily: "HelveticaNeue",
fontSize: 14,
fontStyle: "normal",
fontWeight: "300",
......
import { Text, View } from "../../components/Themed";
import * as React from "react";
import { useState } from "react";
import { useEffect, useState } from "react";
import { ScrollView, StyleSheet } from "react-native";
import Colors from "../../constants/Colors";
import PlainForm from "../../components/Forms/PlainForm";
......@@ -8,8 +8,12 @@ import IconForm from "../../components/Forms/IconForm";
import Spacer from "../../components/Spacer/Spacer";
import MainButton from "../../components/button/MainButton";
import DropdownForm from "../../components/Forms/DropdownForm";
import { getCategories } from "../../db/categories";
import { ICategory, IDD } from "../../types/firestore";
import { ddConverter } from "../../helpers/ddConverter";
import { RootTabScreenProps } from "../../types/navigation";
import { useNavigation } from "@react-navigation/core";
import RegisterGoogleFacebookScreen from "./RegisterGoogleFacebookScreen";
const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
const nav = useNavigation();
......@@ -19,93 +23,110 @@ const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
const [password, setPassword] = useState("");
const [phoneNo, setPhoneNo] = useState("");
const [picked, setPicked] = useState("");
const [list, setList] = useState();
// const [categories, setCategories] = useState<IDD[]>();
const [categories, setCategories] = useState([
{ label: "Agrikultur", value: "B" },
{ label: "Pertanian", value: "D" },
]);
// useEffect(() => {
// getCategories().then((res) =>
// setCategories(ddConverter<ICategory>("name", "id", res))
// );
// }, []);
return (
<ScrollView style={styles.container}>
<View>
<Text style={styles.titleText}>Selamat Datang!</Text>
</View>
<Spacer variant={"xl"} />
<View style={styles.button}>
<MainButton
text="Daftar Menggunakan Google"
colors="secondary"
onPress={() => {}}
/>
</View>
<View style={styles.container}>
<ScrollView>
<View>
<Text style={styles.titleText}>Selamat Datang!</Text>
</View>
<Spacer variant={"xl"} />
<View style={styles.button}>
<MainButton
text="Daftar Menggunakan Google"
colors="secondary"
onPress={() => nav.navigate("Auth", { screen: "RegisterGoogle" })}
/>
</View>
<Spacer variant={"l"} />
<View style={styles.button}>
<MainButton
text="Daftar Menggunakan Facebook"
colors="secondary"
onPress={() => nav.navigate("Auth", { screen: "RegisterGoogle" })}
/>
</View>
<Spacer variant={"xl"} />
<View>
<Text style={styles.description}>
Silakan isi formulir berikut untuk membuat akun Click
</Text>
</View>
<Spacer variant={"xl"} />
<View>
<PlainForm
formTitle={"Nama Depan"}
text={firstName}
setText={setFirstName}
placeholder={"Masukkan Nama Depan"}
/>
</View>
<Spacer variant={"l"} />
<View>
<PlainForm
formTitle={"Nama Belakang"}
text={lastName}
setText={setLastName}
placeholder={"Masukkan Nama Belakang"}
/>
</View>
<Spacer variant={"l"} />
<View>
<PlainForm
formTitle={"Email"}
text={email}
setText={setEmail}
placeholder={"Masukkan Email"}
/>
</View>
<Spacer variant={"l"} />
<View>
<IconForm
formTitle={"Password"}
text={password}
setText={setPassword}
placeholder={"Masukkan Password"}
iconType={"10k"}
password
/>
</View>
<Spacer variant={"l"} />
<View>
<PlainForm
formTitle={"No. Handphone"}
text={phoneNo}
setText={setPhoneNo}
placeholder={"Masukkan No. Handphone"}
phone
/>
</View>
</ScrollView>
<Spacer variant={"l"} />
<View style={styles.button}>
<MainButton
text="Daftar Menggunakan Facebook"
colors="secondary"
onPress={() => {}}
/>
</View>
<Spacer variant={"xl"} />
<View>
<Text style={styles.description}>
Silakan isi formulir berikut untuk membuat akun Click
<View style={styles.titleContainer} testID="TitleContainer">
<Text style={styles.formTitle} testID="Title">
Kategori Bisnis
</Text>
</View>
<Spacer variant={"xl"} />
<View>
<PlainForm
formTitle={"Nama Depan"}
text={firstName}
setText={setFirstName}
placeholder={"Masukkan Nama Depan"}
/>
</View>
<Spacer variant={"l"} />
<View>
<PlainForm
formTitle={"Nama Belakang"}
text={lastName}
setText={setLastName}
placeholder={"Masukkan Nama Belakang"}
/>
</View>
<Spacer variant={"l"} />
<View>
<PlainForm
formTitle={"Email"}
text={email}
setText={setEmail}
placeholder={"Masukkan Email"}
/>
</View>
<Spacer variant={"l"} />
<View>
<IconForm
formTitle={"Password"}
text={password}
setText={setPassword}
placeholder={"Masukkan Password"}
iconType={"10k"}
password
/>
</View>
<Spacer variant={"l"} />
<View>
<PlainForm
formTitle={"No. Handphone"}
text={phoneNo}
setText={setPhoneNo}
placeholder={"Masukkan No. Handphone"}
phone
/>
</View>
<Spacer variant={"l"} />
<View>
<DropdownForm
formPlaceholder={"Kategori Bisnis"}
searchPlaceholder={"Cari Kategori Bisnis"}
value={picked}
setValue={setPicked}
items={list}
setItems={setList}
/>
</View>
<Spacer variant={"m"} />
<DropdownForm
formPlaceholder={"Kategori Bisnis"}
searchPlaceholder={"Cari Kategori Bisnis"}
value={picked}
setValue={setPicked}
items={categories}
setItems={setCategories}
/>
<Spacer variant={"l"} />
<View>
<Text style={styles.textView}>
......@@ -118,7 +139,7 @@ const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
<MainButton text="Daftar" colors="primary" onPress={() => {}} />
</View>
<Spacer variant={"xl"} />
</ScrollView>
</View>
);
};
......@@ -131,16 +152,14 @@ const styles = StyleSheet.create({
paddingHorizontal: 24,
},
titleText: {
fontFamily: "HelveticaNeue",
fontSize: 32,
fontStyle: "normal",
fontWeight: "400",
letterSpacing: 0,
textAlign: "left",
paddingTop: 50,
paddingTop: 24,
},
description: {
fontFamily: "HelveticaNeue",
fontSize: 20,
fontStyle: "normal",
fontWeight: "300",
......@@ -148,16 +167,26 @@ const styles = StyleSheet.create({
textAlign: "left",
},
textView: {
fontFamily: "HelveticaNeue",
fontSize: 14,
fontStyle: "normal",
fontWeight: "300",
letterSpacing: 0,
textAlign: "left",
},
titleContainer: {
paddingBottom: 8,
},
formTitle: {
fontSize: 14,
width: "100%",
color: Colors.text.subtitle,
},
button: {
width: "100%",
},
dropdownOpen: {
paddingBottom: 100,
},
});
export default RegisterScreen;
export type ICategory = {
id?: string;
name: string;
};
export * from "./categories";
export type IDD = {
label: string;
value: string;
};
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment