Actually respect prettier configuration

This commit is contained in:
2024-02-03 20:23:31 -07:00
parent a6883a624a
commit 2276605e6d
37 changed files with 1629 additions and 1497 deletions

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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,
},
});