Actually respect prettier configuration
This commit is contained in:
@@ -1,12 +1,12 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableWithoutFeedback,
|
||||
Keyboard,
|
||||
Alert,
|
||||
Button,
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableWithoutFeedback,
|
||||
Keyboard,
|
||||
} from "react-native";
|
||||
import auth, { FirebaseAuthTypes } from "@react-native-firebase/auth";
|
||||
|
||||
@@ -15,105 +15,105 @@ import auth, { FirebaseAuthTypes } from "@react-native-firebase/auth";
|
||||
// Currently working for Android builds, iOS has open issue #56
|
||||
|
||||
export default function Login() {
|
||||
const [phoneNumber, setPhoneNumber] = useState<string>("");
|
||||
const [code, setCode] = useState<string>("");
|
||||
const [phoneNumber, setPhoneNumber] = useState<string>("");
|
||||
const [code, setCode] = useState<string>("");
|
||||
|
||||
const [user, setUser] = useState(null);
|
||||
const [confirm, setConfirm] =
|
||||
useState<FirebaseAuthTypes.ConfirmationResult | null>(null);
|
||||
const [user, setUser] = useState(null);
|
||||
const [confirm, setConfirm] =
|
||||
useState<FirebaseAuthTypes.ConfirmationResult | null>(null);
|
||||
|
||||
async function onAuthStateChanged(user: any) {
|
||||
setUser(user);
|
||||
if (user) {
|
||||
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
|
||||
const token = await auth().currentUser?.getIdToken();
|
||||
// To debug/check token & user return, use these logs
|
||||
// console.log(token) // token log
|
||||
// console.log(user) // user log
|
||||
}
|
||||
}
|
||||
async function onAuthStateChanged(user: any) {
|
||||
setUser(user);
|
||||
if (user) {
|
||||
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
|
||||
const token = await auth().currentUser?.getIdToken();
|
||||
// To debug/check token & user return, use these logs
|
||||
// console.log(token) // token log
|
||||
// console.log(user) // user log
|
||||
}
|
||||
}
|
||||
|
||||
async function signInWithPhoneNumber(phoneNumber: string) {
|
||||
if (!phoneNumber) {
|
||||
return Alert.alert(
|
||||
"Please enter a valid phone number with a country code",
|
||||
);
|
||||
}
|
||||
try {
|
||||
const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
|
||||
setConfirm(confirmation);
|
||||
} catch (err) {
|
||||
// TODO: implement more robust error handling by parsing err message
|
||||
console.warn(err);
|
||||
Alert.alert(
|
||||
"There was an error. Make sure you are using a country code (ex: +1 for US)",
|
||||
);
|
||||
}
|
||||
}
|
||||
async function signInWithPhoneNumber(phoneNumber: string) {
|
||||
if (!phoneNumber) {
|
||||
return Alert.alert(
|
||||
"Please enter a valid phone number with a country code",
|
||||
);
|
||||
}
|
||||
try {
|
||||
const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
|
||||
setConfirm(confirmation);
|
||||
} catch (err) {
|
||||
// TODO: implement more robust error handling by parsing err message
|
||||
console.warn(err);
|
||||
Alert.alert(
|
||||
"There was an error. Make sure you are using a country code (ex: +1 for US)",
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmCode() {
|
||||
try {
|
||||
await confirm?.confirm(code);
|
||||
} catch {
|
||||
Alert.alert("Invalid code, please try again.");
|
||||
}
|
||||
}
|
||||
async function confirmCode() {
|
||||
try {
|
||||
await confirm?.confirm(code);
|
||||
} catch {
|
||||
Alert.alert("Invalid code, please try again.");
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
|
||||
return subscriber;
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
|
||||
return subscriber;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
|
||||
<View style={{ alignItems: "center" }}>
|
||||
<TextInput
|
||||
style={{
|
||||
width: "50%",
|
||||
height: 30,
|
||||
borderWidth: 1,
|
||||
borderColor: "black",
|
||||
marginBottom: 20,
|
||||
}}
|
||||
placeholder="Phone"
|
||||
textContentType="telephoneNumber"
|
||||
keyboardType="phone-pad"
|
||||
autoCapitalize="none"
|
||||
value={phoneNumber}
|
||||
onChangeText={(value) => setPhoneNumber(value)}
|
||||
/>
|
||||
{confirm && (
|
||||
<TextInput
|
||||
style={{
|
||||
width: "50%",
|
||||
height: 30,
|
||||
borderWidth: 1,
|
||||
borderColor: "black",
|
||||
marginBottom: 20,
|
||||
}}
|
||||
placeholder="Code"
|
||||
keyboardType="number-pad"
|
||||
textContentType="oneTimeCode"
|
||||
autoCapitalize="none"
|
||||
value={code}
|
||||
onChangeText={(value) => setCode(value)}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
title={!confirm ? "Receive code" : "Confirm code"}
|
||||
onPress={() =>
|
||||
!confirm ? signInWithPhoneNumber(phoneNumber) : confirmCode()
|
||||
}
|
||||
/>
|
||||
{user && (
|
||||
<>
|
||||
<Text style={{ marginTop: 10 }}>
|
||||
Display name: {user?.displayName}
|
||||
</Text>
|
||||
<Text>Phone number: {user?.phoneNumber}</Text>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
);
|
||||
return (
|
||||
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
|
||||
<View style={{ alignItems: "center" }}>
|
||||
<TextInput
|
||||
style={{
|
||||
width: "50%",
|
||||
height: 30,
|
||||
borderWidth: 1,
|
||||
borderColor: "black",
|
||||
marginBottom: 20,
|
||||
}}
|
||||
placeholder="Phone"
|
||||
textContentType="telephoneNumber"
|
||||
keyboardType="phone-pad"
|
||||
autoCapitalize="none"
|
||||
value={phoneNumber}
|
||||
onChangeText={(value) => setPhoneNumber(value)}
|
||||
/>
|
||||
{confirm && (
|
||||
<TextInput
|
||||
style={{
|
||||
width: "50%",
|
||||
height: 30,
|
||||
borderWidth: 1,
|
||||
borderColor: "black",
|
||||
marginBottom: 20,
|
||||
}}
|
||||
placeholder="Code"
|
||||
keyboardType="number-pad"
|
||||
textContentType="oneTimeCode"
|
||||
autoCapitalize="none"
|
||||
value={code}
|
||||
onChangeText={(value) => setCode(value)}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
title={!confirm ? "Receive code" : "Confirm code"}
|
||||
onPress={() =>
|
||||
!confirm ? signInWithPhoneNumber(phoneNumber) : confirmCode()
|
||||
}
|
||||
/>
|
||||
{user && (
|
||||
<>
|
||||
<Text style={{ marginTop: 10 }}>
|
||||
Display name: {user?.displayName}
|
||||
</Text>
|
||||
<Text>Phone number: {user?.phoneNumber}</Text>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
);
|
||||
}
|
||||
|
@@ -1,15 +1,14 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
import { View, StyleSheet } from "react-native";
|
||||
import BarGraph from '../component/charts/bar-graph/bar-graph';
|
||||
import { graph_data_two_measures } from '../mock/charts/mock-data';
|
||||
import BarGraph from "../component/charts/bar-graph/bar-graph";
|
||||
import { graph_data_two_measures } from "../mock/charts/mock-data";
|
||||
|
||||
// Session Mock - can be used for session summary screen using a query handler component
|
||||
// BarGraph component using mocked data currently
|
||||
export default function SessionScreen() {
|
||||
return (
|
||||
|
||||
<View style={StyleSheet.absoluteFill}>
|
||||
<BarGraph data={graph_data_two_measures} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<View style={StyleSheet.absoluteFill}>
|
||||
<BarGraph data={graph_data_two_measures} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
@@ -1,145 +1,150 @@
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import { View, TextInput, TouchableWithoutFeedback, Text, TouchableOpacity, Keyboard } from 'react-native';
|
||||
import DropDownPicker from 'react-native-dropdown-picker';
|
||||
import { recordStyles as styles } from './styles';
|
||||
import React, { useCallback, useState } from "react";
|
||||
import {
|
||||
View,
|
||||
TextInput,
|
||||
TouchableWithoutFeedback,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
Keyboard,
|
||||
} from "react-native";
|
||||
import DropDownPicker from "react-native-dropdown-picker";
|
||||
import { recordStyles as styles } from "./styles";
|
||||
|
||||
interface CameraScreenParams {
|
||||
gameType: string;
|
||||
tableSize: string;
|
||||
tags: Array<string>;
|
||||
location: string;
|
||||
gameType: string;
|
||||
tableSize: string;
|
||||
tags: Array<string>;
|
||||
location: string;
|
||||
}
|
||||
|
||||
// Record Screen
|
||||
// Precedes Camera.tsx
|
||||
// Can be made into Modal when ready
|
||||
export default function RecordScreen({ navigation }): React.JSX.Element {
|
||||
// Game type dropdown
|
||||
const [gameTypeOpen, setGameTypeOpen] = useState<boolean>(false);
|
||||
const [gameType, setGameType] = useState<string | null>(null); // This is a dropdown
|
||||
const [gameTypes, setGameTypes] = useState([
|
||||
{ label: "Free Play", value: "freePlay" },
|
||||
{ label: "Straight Pool", value: "straightPool" },
|
||||
{ label: "Nine Ball", value: "nineBall" },
|
||||
]);
|
||||
const onGameTypeOpen = useCallback(() => {
|
||||
setTableSizeOpen(false);
|
||||
setTagsOpen(false);
|
||||
}, []);
|
||||
|
||||
// Game type dropdown
|
||||
const [gameTypeOpen, setGameTypeOpen] = useState<boolean>(false)
|
||||
const [gameType, setGameType] = useState<string | null>(null) // This is a dropdown
|
||||
const [gameTypes, setGameTypes] = useState([
|
||||
{ label: 'Free Play', value: 'freePlay' },
|
||||
{ label: 'Straight Pool', value: 'straightPool' },
|
||||
{ label: 'Nine Ball', value: 'nineBall' }
|
||||
]);
|
||||
const onGameTypeOpen = useCallback(() => {
|
||||
setTableSizeOpen(false);
|
||||
setTagsOpen(false);
|
||||
}, []);
|
||||
// Table size dropdown
|
||||
const [tableSizeOpen, setTableSizeOpen] = useState<boolean>(false);
|
||||
const [tableSize, setTableSize] = useState<string>("");
|
||||
const [tableSizes, setTableSizes] = useState([
|
||||
{ label: `9'`, value: "nineFoot" },
|
||||
{ label: `8'`, value: "eightFoot" },
|
||||
{ label: "7", value: "sevenFoot" },
|
||||
]);
|
||||
const onTableSizeOpen = useCallback(() => {
|
||||
setGameTypeOpen(false);
|
||||
setTagsOpen(false);
|
||||
}, []);
|
||||
|
||||
// Table size dropdown
|
||||
const [tableSizeOpen, setTableSizeOpen] = useState<boolean>(false)
|
||||
const [tableSize, setTableSize] = useState<string>('')
|
||||
const [tableSizes, setTableSizes] = useState([
|
||||
{ label: `9'`, value: 'nineFoot' },
|
||||
{ label: `8'`, value: 'eightFoot' },
|
||||
{ label: '7', value: 'sevenFoot' }
|
||||
]);
|
||||
const onTableSizeOpen = useCallback(() => {
|
||||
setGameTypeOpen(false);
|
||||
setTagsOpen(false);
|
||||
}, []);
|
||||
// Tags multi-select dropdown
|
||||
const [tagsOpen, setTagsOpen] = useState<boolean>(false);
|
||||
const [tags, setTags] = useState<Array<string>>([]);
|
||||
const [tagsList, setTagsList] = useState([
|
||||
{ label: `Tag1`, value: "tag1" },
|
||||
{ label: `Tag2`, value: "tag2" },
|
||||
{ label: "Tag3", value: "tag3" },
|
||||
]);
|
||||
const onTagsOpen = useCallback(() => {
|
||||
setTableSizeOpen(false);
|
||||
setGameTypeOpen(false);
|
||||
}, []);
|
||||
|
||||
// Tags multi-select dropdown
|
||||
const [tagsOpen, setTagsOpen] = useState<boolean>(false)
|
||||
const [tags, setTags] = useState<Array<string>>([])
|
||||
const [tagsList, setTagsList] = useState([
|
||||
{ label: `Tag1`, value: 'tag1' },
|
||||
{ label: `Tag2`, value: 'tag2' },
|
||||
{ label: 'Tag3', value: 'tag3' }
|
||||
]);
|
||||
const onTagsOpen = useCallback(() => {
|
||||
setTableSizeOpen(false);
|
||||
setGameTypeOpen(false);
|
||||
}, []);
|
||||
// Location
|
||||
const [location, setLocation] = useState<string>("");
|
||||
|
||||
// Location
|
||||
const [location, setLocation] = useState<string>('')
|
||||
const handleSubmit = () => {
|
||||
// needs to pass info as params or store in a context/state provider
|
||||
const params: CameraScreenParams = {
|
||||
gameType: gameType,
|
||||
tableSize: tableSize,
|
||||
tags: tags,
|
||||
location: location,
|
||||
};
|
||||
navigation.push("Camera", params);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
// needs to pass info as params or store in a context/state provider
|
||||
const params: CameraScreenParams = {
|
||||
gameType: gameType,
|
||||
tableSize: tableSize,
|
||||
tags: tags,
|
||||
location: location
|
||||
};
|
||||
navigation.push('Camera', params)
|
||||
}
|
||||
const dropDownStyles = {
|
||||
style: styles.dropdownStyle,
|
||||
};
|
||||
|
||||
const dropDownStyles = {
|
||||
style: styles.dropdownStyle,
|
||||
};
|
||||
return (
|
||||
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
|
||||
<View style={styles.container}>
|
||||
<View style={styles.dropdownContainer}>
|
||||
<Text style={styles.dropdownTitle}>Game Type</Text>
|
||||
<DropDownPicker
|
||||
zIndex={3000}
|
||||
zIndexInverse={1000}
|
||||
open={gameTypeOpen}
|
||||
value={gameType}
|
||||
items={gameTypes}
|
||||
setOpen={setGameTypeOpen}
|
||||
setValue={setGameType}
|
||||
setItems={setGameTypes}
|
||||
onOpen={onGameTypeOpen}
|
||||
{...dropDownStyles}
|
||||
/>
|
||||
<Text style={styles.dropdownTitle}>Table size</Text>
|
||||
<DropDownPicker
|
||||
zIndex={2000}
|
||||
zIndexInverse={2000}
|
||||
open={tableSizeOpen}
|
||||
value={tableSize}
|
||||
items={tableSizes}
|
||||
setOpen={setTableSizeOpen}
|
||||
setValue={setTableSize}
|
||||
setItems={setTableSizes}
|
||||
onOpen={onTableSizeOpen}
|
||||
{...dropDownStyles}
|
||||
/>
|
||||
<Text style={styles.dropdownTitle}>Tags</Text>
|
||||
<DropDownPicker
|
||||
zIndex={1000}
|
||||
zIndexInverse={3000}
|
||||
multiple
|
||||
min={0}
|
||||
max={5}
|
||||
open={tagsOpen}
|
||||
value={tags}
|
||||
items={tagsList}
|
||||
setOpen={setTagsOpen}
|
||||
setValue={setTags}
|
||||
setItems={setTagsList}
|
||||
onOpen={onTagsOpen}
|
||||
{...dropDownStyles}
|
||||
/>
|
||||
</View>
|
||||
<Text style={styles.dropdownTitle}>Location</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Location"
|
||||
value={location}
|
||||
onChangeText={(value) => setLocation(value)}
|
||||
/>
|
||||
|
||||
return (
|
||||
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
|
||||
<View style={styles.container}>
|
||||
|
||||
<View style={styles.dropdownContainer}>
|
||||
<Text style={styles.dropdownTitle}>Game Type</Text>
|
||||
<DropDownPicker
|
||||
zIndex={3000}
|
||||
zIndexInverse={1000}
|
||||
open={gameTypeOpen}
|
||||
value={gameType}
|
||||
items={gameTypes}
|
||||
setOpen={setGameTypeOpen}
|
||||
setValue={setGameType}
|
||||
setItems={setGameTypes}
|
||||
onOpen={onGameTypeOpen}
|
||||
{...dropDownStyles}
|
||||
/>
|
||||
<Text style={styles.dropdownTitle}>Table size</Text>
|
||||
<DropDownPicker
|
||||
zIndex={2000}
|
||||
zIndexInverse={2000}
|
||||
open={tableSizeOpen}
|
||||
value={tableSize}
|
||||
items={tableSizes}
|
||||
setOpen={setTableSizeOpen}
|
||||
setValue={setTableSize}
|
||||
setItems={setTableSizes}
|
||||
onOpen={onTableSizeOpen}
|
||||
{...dropDownStyles}
|
||||
|
||||
/>
|
||||
<Text style={styles.dropdownTitle}>Tags</Text>
|
||||
<DropDownPicker
|
||||
zIndex={1000}
|
||||
zIndexInverse={3000}
|
||||
multiple
|
||||
min={0}
|
||||
max={5}
|
||||
open={tagsOpen}
|
||||
value={tags}
|
||||
items={tagsList}
|
||||
setOpen={setTagsOpen}
|
||||
setValue={setTags}
|
||||
setItems={setTagsList}
|
||||
onOpen={onTagsOpen}
|
||||
{...dropDownStyles}
|
||||
|
||||
/>
|
||||
</View>
|
||||
<Text style={styles.dropdownTitle}>Location</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder='Location'
|
||||
value={location}
|
||||
onChangeText={(value) => setLocation(value)}
|
||||
/>
|
||||
|
||||
<View style={styles.buttonContainer}>
|
||||
<TouchableOpacity style={styles.buttonStyle} onPress={() => navigation.goBack()}>
|
||||
<Text style={styles.buttonText}>Back</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.buttonStyle} onPress={handleSubmit}>
|
||||
<Text style={styles.buttonText}>Next</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
)
|
||||
<View style={styles.buttonContainer}>
|
||||
<TouchableOpacity
|
||||
style={styles.buttonStyle}
|
||||
onPress={() => navigation.goBack()}
|
||||
>
|
||||
<Text style={styles.buttonText}>Back</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.buttonStyle} onPress={handleSubmit}>
|
||||
<Text style={styles.buttonText}>Next</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
);
|
||||
}
|
||||
|
||||
|
@@ -1,57 +1,57 @@
|
||||
import { StyleSheet } from 'react-native'
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
export const recordStyles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 20,
|
||||
},
|
||||
dropdownContainer: {
|
||||
width: '100%',
|
||||
marginBottom: 20,
|
||||
zIndex: 50
|
||||
},
|
||||
dropdownTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
marginBottom: 5,
|
||||
alignSelf: 'flex-start'
|
||||
},
|
||||
input: {
|
||||
width: '100%',
|
||||
marginBottom: 20,
|
||||
borderWidth: 1,
|
||||
borderColor: 'grey',
|
||||
borderRadius: 5,
|
||||
padding: 10,
|
||||
},
|
||||
buttonContainer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
},
|
||||
buttonStyle: {
|
||||
backgroundColor: 'lightblue',
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 20,
|
||||
borderRadius: 20,
|
||||
margin: 10,
|
||||
},
|
||||
buttonText: {
|
||||
color: 'white',
|
||||
textAlign: 'center',
|
||||
},
|
||||
dropdownStyle: {
|
||||
backgroundColor: '#ffffff',
|
||||
borderColor: '#D1D1D1',
|
||||
borderWidth: 1,
|
||||
borderRadius: 4,
|
||||
},
|
||||
dropdownContainerStyle: {
|
||||
marginBottom: 10,
|
||||
borderColor: '#D1D1D1',
|
||||
borderWidth: 1,
|
||||
borderRadius: 4,
|
||||
},
|
||||
});
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: 20,
|
||||
},
|
||||
dropdownContainer: {
|
||||
width: "100%",
|
||||
marginBottom: 20,
|
||||
zIndex: 50,
|
||||
},
|
||||
dropdownTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: "500",
|
||||
marginBottom: 5,
|
||||
alignSelf: "flex-start",
|
||||
},
|
||||
input: {
|
||||
width: "100%",
|
||||
marginBottom: 20,
|
||||
borderWidth: 1,
|
||||
borderColor: "grey",
|
||||
borderRadius: 5,
|
||||
padding: 10,
|
||||
},
|
||||
buttonContainer: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
},
|
||||
buttonStyle: {
|
||||
backgroundColor: "lightblue",
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 20,
|
||||
borderRadius: 20,
|
||||
margin: 10,
|
||||
},
|
||||
buttonText: {
|
||||
color: "white",
|
||||
textAlign: "center",
|
||||
},
|
||||
dropdownStyle: {
|
||||
backgroundColor: "#ffffff",
|
||||
borderColor: "#D1D1D1",
|
||||
borderWidth: 1,
|
||||
borderRadius: 4,
|
||||
},
|
||||
dropdownContainerStyle: {
|
||||
marginBottom: 10,
|
||||
borderColor: "#D1D1D1",
|
||||
borderWidth: 1,
|
||||
borderRadius: 4,
|
||||
},
|
||||
});
|
||||
|
Reference in New Issue
Block a user