From d483be05a68ff0b847d85205de70162dc1a767eb Mon Sep 17 00:00:00 2001 From: Loewy Date: Wed, 7 Feb 2024 21:03:55 -0800 Subject: [PATCH 1/8] sketch out profile screen so we have a logout, minor clean up --- src/navigation/tab-navigator.tsx | 14 ++++++++++++-- src/screens/profile.tsx | 26 ++++++++++++++++++++++++++ src/screens/session.tsx | 2 -- src/styles.ts | 5 +++++ 4 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 src/screens/profile.tsx diff --git a/src/navigation/tab-navigator.tsx b/src/navigation/tab-navigator.tsx index dc1bcf3..21a6c88 100644 --- a/src/navigation/tab-navigator.tsx +++ b/src/navigation/tab-navigator.tsx @@ -4,6 +4,8 @@ import { Image } from "react-native"; import CameraScreen from "../component/video/camera"; import Session from "../screens/session"; import RecordScreen from "../screens/video-stack/record"; +import Profile from "../screens/profile"; +import { tabIconColors } from "../styles"; // TODO: add ts support for assets folder to use imports const Icon = require("../assets/favicon.png"); @@ -15,6 +17,7 @@ const RecordStack = createNativeStackNavigator(); const tabIcons = { Session: , VideoStack: , + Profile: , }; function VideoTabStack() { @@ -39,13 +42,15 @@ export default function Tabs(): React.JSX.Element { ({ headerShown: false, - tabBarActiveTintColor: "tomato", - tabBarInactiveTintColor: "gray", + tabBarActiveTintColor: tabIconColors.selected, + tabBarInactiveTintColor: tabIconColors.default, tabBarIcon: () => { return tabIcons[route.name]; }, })} > + + + ); } diff --git a/src/screens/profile.tsx b/src/screens/profile.tsx new file mode 100644 index 0000000..b0506b0 --- /dev/null +++ b/src/screens/profile.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import { StyleSheet, Text, View } from "react-native"; +import SignOutButton from "../component/buttons/sign-out"; +import { useAuth } from "../context"; + +// Session Mock - can be used for session summary screen using a query handler component +// BarGraph component using mocked data currently +export default function ProfileScreen() { + const { user } = useAuth(); + + + return ( + + + {user && ( + <> + + Display name: {user?.displayName} + + Phone number: {user?.phoneNumber} + + )} + + + ); +} diff --git a/src/screens/session.tsx b/src/screens/session.tsx index 797c0e4..e44b554 100644 --- a/src/screens/session.tsx +++ b/src/screens/session.tsx @@ -1,7 +1,6 @@ import React from "react"; import { StyleSheet, View } from "react-native"; import { graph_data_two_measures } from "../../test/mock/charts/mock-data"; -import SignOutButton from "../component/buttons/sign-out"; import BarGraph from "../component/charts/bar-graph/bar-graph"; // Session Mock - can be used for session summary screen using a query handler component @@ -10,7 +9,6 @@ export default function SessionScreen() { return ( - ); } diff --git a/src/styles.ts b/src/styles.ts index 31985f7..558b7b5 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -12,6 +12,11 @@ export const colors = { textWhite: "#ffffff", }; +export const tabIconColors = { + default: '#1D1B20', + selected: '#598EBB', +} + export const shadows = { standard: { shadowColor: "#000000", From 37004a1f6e1c92bcd4614c6706e951faaa39de99 Mon Sep 17 00:00:00 2001 From: Loewy Date: Wed, 7 Feb 2024 21:17:23 -0800 Subject: [PATCH 2/8] minor changes --- src/navigation/tab-navigator.tsx | 4 +--- src/screens/profile.tsx | 39 ++++++++++++++++++++++++-------- src/styles.ts | 6 ++--- 3 files changed, 33 insertions(+), 16 deletions(-) diff --git a/src/navigation/tab-navigator.tsx b/src/navigation/tab-navigator.tsx index 21a6c88..28fd8ca 100644 --- a/src/navigation/tab-navigator.tsx +++ b/src/navigation/tab-navigator.tsx @@ -2,9 +2,9 @@ import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import { Image } from "react-native"; import CameraScreen from "../component/video/camera"; +import Profile from "../screens/profile"; import Session from "../screens/session"; import RecordScreen from "../screens/video-stack/record"; -import Profile from "../screens/profile"; import { tabIconColors } from "../styles"; // TODO: add ts support for assets folder to use imports @@ -49,8 +49,6 @@ export default function Tabs(): React.JSX.Element { }, })} > - - - + {user && ( <> - - Display name: {user?.displayName} - - Phone number: {user?.phoneNumber} + + + Display name: {user?.displayName} + + + Phone number: {user?.phoneNumber} + + + + + )} - ); } + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: "space-between", + }, + userInfo: { + marginTop: 10, + paddingHorizontal: 10, + }, + signOutButton: { + paddingBottom: "5%", + paddingHorizontal: "25%" + }, +}); diff --git a/src/styles.ts b/src/styles.ts index 558b7b5..6bc4d06 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -13,9 +13,9 @@ export const colors = { }; export const tabIconColors = { - default: '#1D1B20', - selected: '#598EBB', -} + default: "#1D1B20", + selected: "#598EBB", +}; export const shadows = { standard: { From f849780aac95169b89f4ba6b42a1e8bcdbceb83f Mon Sep 17 00:00:00 2001 From: Loewy Date: Wed, 7 Feb 2024 22:06:19 -0800 Subject: [PATCH 3/8] some stuff --- src/context/auth-context.tsx | 38 ++++++++++++++++++++++-------------- src/screens/login.tsx | 1 - src/screens/profile.tsx | 10 +++------- 3 files changed, 26 insertions(+), 23 deletions(-) diff --git a/src/context/auth-context.tsx b/src/context/auth-context.tsx index d8c6b53..e86fa79 100644 --- a/src/context/auth-context.tsx +++ b/src/context/auth-context.tsx @@ -1,6 +1,12 @@ import { DEV_USER_ID } from "@env"; import { FirebaseAuthTypes } from "@react-native-firebase/auth"; -import React, { createContext, useContext, useEffect, useState } from "react"; +import React, { + createContext, + useCallback, + useContext, + useEffect, + useState, +} from "react"; import { handleSignOut, onAuthStateChanged } from "../auth"; import { useAuthHeader } from "../graphql/client"; @@ -24,16 +30,20 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ const [isLoggedIn, setIsLoggedIn] = useState(false); const [isLoading, setIsLoading] = useState(true); // this is for a LoadingContext (auth, app reloads, foreground etc) - const _completeAuthentication = ( - user: FirebaseAuthTypes.User, - token: string, - isLoggedIn: boolean, - ) => { - setAuthHeader({ key: "Authorization", value: token }); - setContextUser(user); - setIsLoggedIn(isLoggedIn); - setIsLoading(false); - }; + const _completeAuthentication = useCallback( + ( + user: FirebaseAuthTypes.User, + token: string, + isLoggedIn: boolean, + tokenType: "user_id" | "Authorization" = "Authorization", + ) => { + setAuthHeader({ key: tokenType, value: token }); + setContextUser(user); + setIsLoggedIn(isLoggedIn); + setIsLoading(false); + }, + [setAuthHeader], + ); const authStateChangeCallback = async (user: FirebaseAuthTypes.User) => { if (user) { @@ -61,13 +71,11 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ const setAuthAsync = async () => { if (DEV_USER_ID) { console.log("Setting fake authorization user to: ", DEV_USER_ID); - setAuthHeader({ key: "user_id", value: DEV_USER_ID }); - setIsLoggedIn(true); - setIsLoading(false); + _completeAuthentication(null, DEV_USER_ID, true, "user_id"); } }; setAuthAsync(); - }, [setAuthHeader]); + }, [_completeAuthentication]); const logOut = async () => { await handleSignOut(); diff --git a/src/screens/login.tsx b/src/screens/login.tsx index b67246b..612aad7 100644 --- a/src/screens/login.tsx +++ b/src/screens/login.tsx @@ -1,4 +1,3 @@ -// Login.tsx import { FirebaseAuthTypes } from "@react-native-firebase/auth"; import React, { useState } from "react"; import { diff --git a/src/screens/profile.tsx b/src/screens/profile.tsx index 9e73b38..d0cbb65 100644 --- a/src/screens/profile.tsx +++ b/src/screens/profile.tsx @@ -13,12 +13,8 @@ export default function ProfileScreen() { {user && ( <> - - Display name: {user?.displayName} - - - Phone number: {user?.phoneNumber} - + Display name: {user?.displayName} + Phone number: {user?.phoneNumber} @@ -40,6 +36,6 @@ const styles = StyleSheet.create({ }, signOutButton: { paddingBottom: "5%", - paddingHorizontal: "25%" + paddingHorizontal: "25%", }, }); From e2bde3bd012082b7485848c5dbb83955625d3e42 Mon Sep 17 00:00:00 2001 From: Loewy Date: Thu, 8 Feb 2024 10:21:23 -0800 Subject: [PATCH 4/8] wip, ui toggle mocked --- package.json | 1 + src/auth/firebase-auth.tsx | 10 --- src/auth/index.ts | 2 - src/screens/login.tsx | 151 +++++++++++++++++++++++++++---------- yarn.lock | 5 ++ 5 files changed, 118 insertions(+), 51 deletions(-) diff --git a/package.json b/package.json index d0119c9..dcc8d00 100644 --- a/package.json +++ b/package.json @@ -73,6 +73,7 @@ "@types/react-native-svg-charts": "^5.0.16", "eslint-config-prettier": "^9.1.0", "metro-react-native-babel-preset": "^0.77.0", + "prettier": "^3.2.5", "prettier-plugin-organize-imports": "^3.2.4", "typescript": "^5.3.3" }, diff --git a/src/auth/firebase-auth.tsx b/src/auth/firebase-auth.tsx index d545816..ea49c31 100644 --- a/src/auth/firebase-auth.tsx +++ b/src/auth/firebase-auth.tsx @@ -38,16 +38,6 @@ export const onAuthStateChanged = ( return auth().onAuthStateChanged(callback); }; -export const currentUser = () => auth().currentUser; - -export const getCurrentUserToken = async (): Promise => { - const user = auth().currentUser; - if (user) { - return await user.getIdToken(); - } - return null; -}; - export const handleSignOut = (): Promise => { return auth().signOut(); }; diff --git a/src/auth/index.ts b/src/auth/index.ts index e766cfb..deee33a 100644 --- a/src/auth/index.ts +++ b/src/auth/index.ts @@ -1,6 +1,5 @@ import { confirmCode, - currentUser, handleSignInWithPhoneNumber, handleSignOut, onAuthStateChanged, @@ -8,7 +7,6 @@ import { export { confirmCode, - currentUser, handleSignInWithPhoneNumber, handleSignOut, onAuthStateChanged, diff --git a/src/screens/login.tsx b/src/screens/login.tsx index 612aad7..fa37c4b 100644 --- a/src/screens/login.tsx +++ b/src/screens/login.tsx @@ -3,6 +3,9 @@ import React, { useState } from "react"; import { Button, Keyboard, + StyleSheet, + Switch, + Text, TextInput, TouchableWithoutFeedback, View, @@ -10,55 +13,125 @@ import { import { confirmCode, handleSignInWithPhoneNumber } from "../auth"; export default function Login() { + const [isEmailLogin, setIsEmailLogin] = useState(false); const [phoneNumber, setPhoneNumber] = useState(""); const [code, setCode] = useState(""); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); const [confirm, setConfirm] = useState(null); + const toggleSwitch = () => setIsEmailLogin((previousState) => !previousState); + + // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars + const handleSignInWithEmail = (email: string, password: string) => + console.log("signingInWithEmail"); + return ( Keyboard.dismiss()}> - - setPhoneNumber(value)} - /> - {confirm && ( - setCode(value)} + + + Use email + + + + {!isEmailLogin ? ( + <> + + {confirm && ( + + )} + + +