Folasade/imp 5 supabase client #6
Conversation
IMP-5 Supabase Client
Description Set up supabase client and write queries to create, fetch. update, delete cases.
Useful Links https://supabase.com/docs/reference/javascript/typescript-support Related PRs |
lib/supabase.ts
Outdated
|
|
||
| const supabaseUrl = 'https://kvfpmjezholwvgdmabhr.supabase.co'; | ||
| const supabaseAnonKey = | ||
| 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imt2ZnBtamV6aG9sd3ZnZG1hYmhyIiwicm9sZSI6ImFub24iLCJpYXQiOjE2OTUwNzAzMDIsImV4cCI6MjAxMDY0NjMwMn0.e6CFmLq4kjNnoGzHDd_hVSUZI6gHaDU-dWu_1Uhd6Mk'; |
There was a problem hiding this comment.
We don't want to expose the keys. Using the react-native-dotenv package allows us to do this
src/app/index.tsx
Outdated
| import styles from './styles'; | ||
|
|
||
| function StartScreen() { | ||
| const [session, setSession] = useState<Session | null>(null); |
There was a problem hiding this comment.
eslint is complaining about eslint[@typescript-eslint/no-shadow](https://typescript-eslint.io/rules/no-shadow) and we can resolve this by renaming the state variable session.
There was a problem hiding this comment.
Also eslint will complain if we do not use this variable so for now, we can either remove it or get the session user in order to use the variable.
There was a problem hiding this comment.
Let's keep it because we will use it shortly!
src/app/index.tsx
Outdated
| return ( | ||
| <View style={styles.container}> | ||
| <Link href="/Welcome" asChild> | ||
| <TouchableOpacity style={styles.button}> | ||
| <Text>Welcome Screen</Text> | ||
| </TouchableOpacity> | ||
| </Link> | ||
| <Link href="/SignUp" asChild> |
There was a problem hiding this comment.
Remove SignUp link. This is in the auth flow from the Welcome page!
src/app/index.tsx
Outdated
| supabase.auth.onAuthStateChange((_event, session) => { | ||
| setSession(session); | ||
| }); | ||
| }, []); |
There was a problem hiding this comment.
We should add a clean-up function on return (unsubscribe from the session) using something like authListener.subscription.unsubscribe();
src/app/index.tsx
Outdated
| import styles from './styles'; | ||
|
|
||
| function StartScreen() { | ||
| const [session, setSession] = useState<Session | null>(null); |
There was a problem hiding this comment.
Let's keep it because we will use it shortly!
lib/DummyQueries.tsx
Outdated
|
|
||
| return ( | ||
| <View> | ||
| <Button title="Get Case Data" onPress={() => allCases()} /> |
There was a problem hiding this comment.
Very minor but let's use TouchableOpacity instead of Button and make texts specific to queries! Can you also add a little bit of styling or copy over from the other buttons above? Besides that, everything looks good!
lib/DummyQueries.tsx
Outdated
| @@ -0,0 +1,63 @@ | |||
| import { View } from 'react-native'; | |||
| import { Text } from 'react-native-elements'; | |||
| import { TouchableOpacity } from 'react-native-gesture-handler'; | |||
There was a problem hiding this comment.
Let's use TouchableOpacity from react-native instead!
This reverts commit 26bb1be.
What's new in this PR
Description
In this PR, I have initialized the supabase, and created some dummy queries to test if the client is working properly.
Screenshots
How to review
To test queries, a user must go to impact fund supabase -> click authentication tab -> disable rls for cases table -> add console.logs displaying data in impact-fund/lib/DummyQueries.tsx -> run app -> click Get Case Data button
(sorry that it's kinda hard to test, didn't want to push console logs!)
First a user should add console.logs to the DummyQueries file, then change function within onPress to test out various queries. This should just be reviewed all at once. Edge cases should mainly be tested out when retool app is up and functioning.
Next steps
This PR is mainly to test out some queries on the database, however the real testing will come when it is connected to retool and user auth is set up.
Relevant Links
Online sources
Related PRs
CC: @stephaniewong2