Fakultas Ilmu Komputer UI

Commit 5d32057c authored by Mohammad Faraz Abisha Mirza's avatar Mohammad Faraz Abisha Mirza Committed by Ahmad Izzudin Alifyandra
Browse files

Fixing some bugs in RegisterScreen

parent cb722a03
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