From a3d663d3cc42da62bfb790ee9df7a19424a1efa2 Mon Sep 17 00:00:00 2001 From: JB Rubinovitz Date: Wed, 23 Jun 2021 20:04:03 -0700 Subject: [PATCH 1/4] initial example --- examples/typescript-supabase-todo/README.md | 20 ++ .../typescript-supabase-todo/package.json | 47 +++ .../public/favicon.ico | Bin 0 -> 3870 bytes .../public/index.html | 38 +++ examples/typescript-supabase-todo/src/App.js | 74 +++++ examples/typescript-supabase-todo/src/Auth.js | 138 ++++++++ .../typescript-supabase-todo/src/Todos.tsx | 304 ++++++++++++++++++ .../typescript-supabase-todo/src/index.tsx | 10 + .../src/supabaseClient.ts | 6 + 9 files changed, 637 insertions(+) create mode 100644 examples/typescript-supabase-todo/README.md create mode 100644 examples/typescript-supabase-todo/package.json create mode 100644 examples/typescript-supabase-todo/public/favicon.ico create mode 100644 examples/typescript-supabase-todo/public/index.html create mode 100644 examples/typescript-supabase-todo/src/App.js create mode 100644 examples/typescript-supabase-todo/src/Auth.js create mode 100644 examples/typescript-supabase-todo/src/Todos.tsx create mode 100644 examples/typescript-supabase-todo/src/index.tsx create mode 100644 examples/typescript-supabase-todo/src/supabaseClient.ts diff --git a/examples/typescript-supabase-todo/README.md b/examples/typescript-supabase-todo/README.md new file mode 100644 index 00000000..b39dd4e5 --- /dev/null +++ b/examples/typescript-supabase-todo/README.md @@ -0,0 +1,20 @@ +# Supabase todo example + +Heavily adopted from `create-react-app` bootstrapping, here's a our Todo example with a Firebase backend bundled in a Typescript React application. + +## Live demo +- https://homebase-example-ts-firebase-todo.vercel.app + +## Env vars +REACT_APP_SUPABASE_URL +supabaseAnonKey + +## Installation +``` +yarn install +``` + +## Run it +``` +yarn start +``` diff --git a/examples/typescript-supabase-todo/package.json b/examples/typescript-supabase-todo/package.json new file mode 100644 index 00000000..05d78bd6 --- /dev/null +++ b/examples/typescript-supabase-todo/package.json @@ -0,0 +1,47 @@ +{ + "name": "typescript-supabase-todo", + "version": "0.1.0", + "private": true, + "dependencies": { + "@supabase/supabase-js": "^1.15.1", + "@testing-library/jest-dom": "^5.11.4", + "@testing-library/react": "^11.1.0", + "@testing-library/user-event": "^12.1.10", + "@types/jest": "^26.0.15", + "@types/node": "^12.0.0", + "@types/react": "^16.9.53", + "@types/react-dom": "^16.9.8", + "firebase": "^8.1.1", + "firebaseui": "^4.7.1", + "homebase-react": "^0.7.0", + "react": "^17.0.1", + "react-dom": "^17.0.1", + "react-scripts": "4.0.0", + "typescript": "^4.0.3", + "web-vitals": "^0.2.4" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/examples/typescript-supabase-todo/public/favicon.ico b/examples/typescript-supabase-todo/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..a11777cc471a4344702741ab1c8a588998b1311a GIT binary patch literal 3870 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 baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ literal 0 HcmV?d00001 diff --git a/examples/typescript-supabase-todo/public/index.html b/examples/typescript-supabase-todo/public/index.html new file mode 100644 index 00000000..6bd9b202 --- /dev/null +++ b/examples/typescript-supabase-todo/public/index.html @@ -0,0 +1,38 @@ + + + + + + + + + + + React App + + + +
+ + + diff --git a/examples/typescript-supabase-todo/src/App.js b/examples/typescript-supabase-todo/src/App.js new file mode 100644 index 00000000..7ddcd5ce --- /dev/null +++ b/examples/typescript-supabase-todo/src/App.js @@ -0,0 +1,74 @@ +import { useState, useEffect } from 'react' +import { supabase } from './supabaseClient' +import Auth from './Auth' +import { HomebaseProvider, useClient, useTransact, useQuery, useEntity, Transaction, Entity} from 'homebase-react' +import Todos from './Todos' +export default function App() { + + const config = { + // Lookup helpers are used to enforce + // unique constraints and relationships. + lookupHelpers: { + user: { uid: { unique: 'identity' } }, + todo: { + // refs are relationships + project: { type: 'ref' }, + owner: { type: 'ref' } + } + }, + // Initial data let's you conveniently transact some + // starting data on DB creation to hydrate your components. + initialData: [ + + ] + } + + let [session, setSession] = useState(null) + + const AuthChanged = (session) => { + const [transact] = useTransact() + const [currentUser] = useEntity({ identity: 'currentUser' }) + const [client] = useClient() + setSession(session) + if (session){ + const user = supabase.auth.user(); + console.log(user) + transact([{ user: { uid: user.id, name: user.email} }]) + client.transactSilently([{ currentUser: { identity: 'currentUser', uid: user.id }}]) + } + } + + useEffect(() => { + setSession(supabase.auth.session()) + supabase.auth.onAuthStateChange((_event, session) => AuthChanged) + }, []) + + return ( + +
+ {!session ? ( +
+ +
+ ) : ( +
+ + +
+ )} + +
+ + ) +} diff --git a/examples/typescript-supabase-todo/src/Auth.js b/examples/typescript-supabase-todo/src/Auth.js new file mode 100644 index 00000000..d79d1a97 --- /dev/null +++ b/examples/typescript-supabase-todo/src/Auth.js @@ -0,0 +1,138 @@ +import {useState} from 'react' +import { supabase } from './supabaseClient' + +export default function Auth({}) { + const [email, setEmail] = useState('') + const [password, setPassword] = useState('') + + const handleLogin = async (type, email, password) => { + try { + const { error , user} = + type === 'LOGIN' + ? await supabase.auth.signIn({ email, password }) + : await supabase.auth.signUp({ email, password }) + if (!error && !user) alert('Check your email for the login link!') + if (error) console.log('Error returned:', error.message) + } catch (error) { + console.log('Error thrown:', error.message) + alert(error.error_description || error) + } + } + + async function handleOAuthLogin(provider) { + let { error } = await supabase.auth.signIn({ provider }) + if (error) console.log('Error: ', error.message) + } + + async function forgotPassword(e) { + e.preventDefault() + var email = prompt('Please enter your email:') + if (email === null || email === '') { + window.alert('You must enter your email.') + } else { + let { error } = await supabase.auth.api.resetPasswordForEmail(email) + if (error) { + console.log('Error: ', error.message) + } else { + alert('Password recovery email has been sent.') + } + } + } + + return ( +
+
+
+ + setEmail(e.target.value)} + /> +
+
+ + setPassword(e.target.value)} + /> +
+ +
+ { + e.preventDefault() + handleLogin('SIGNUP', email, password) + }} + href={'/channels'} + className="btn-black" + > + Sign up + + { + e.preventDefault() + handleLogin('LOGIN', email, password) + }} + href={'/channels'} + className="btn-black-outline" + > + {password.length ? 'Sign in' : 'Send magic link'} + +
+ +
+ {/* eslint-disable-next-line */} + + Forgot your password? + +
+ +
+
+
+
+
+
+ Or continue with +
+
+ +
+
+ + + +
+
+ + + +
+
+
+
+
+ ) +} diff --git a/examples/typescript-supabase-todo/src/Todos.tsx b/examples/typescript-supabase-todo/src/Todos.tsx new file mode 100644 index 00000000..91e7d9e3 --- /dev/null +++ b/examples/typescript-supabase-todo/src/Todos.tsx @@ -0,0 +1,304 @@ +import { HomebaseProvider, useClient, useTransact, useQuery, useEntity, Transaction, Entity} from 'homebase-react' +/* eslint-disable react-hooks/exhaustive-deps */ +import React from 'react' +import firebase from 'firebase/app' +import 'firebase/auth' +import 'firebase/database' +import { supabase } from './supabaseClient' +import Auth from './Auth'; + +// this is a hack around firebaseui breaking ts support recently +import * as firebaseui from 'firebaseui' +import 'firebaseui/dist/firebaseui.css' +export default function Todos(user) { + return( +
+ + + +
+ + +
) +} + +declare const window: any; +let subscription1 = null +let subscription2 = null + + +const DataSaver = (user) => { + + const [client] = useClient() + window.client = client; + const [currentUser] = useEntity({ identity: 'currentUser' }) + const userId = currentUser.get('uid') + + const transactListener = React.useCallback((changedDatoms) => { + const numDatomChanges = changedDatoms.reduce((acc : any, [id, attr] : [number, string]) => ( + {...acc, [id + attr]: (acc[id + attr] || 0) + 1} + ), {}) + console.log(changedDatoms) + const datomsForFirebase = changedDatoms.filter(([id, attr, _, __, isAdded]: [number, any, any, any, boolean]) => !(!isAdded && numDatomChanges[id + attr] > 1)) + + datomsForFirebase.forEach(([id, attr, v, tx, isAdded]: [number, string, any, Transaction, boolean]) => { + console.log(isAdded); + if (isAdded){ + supabase + .from('entities') + .insert({ "0": id, "1": attr, "2": v, "3":tx, "4": isAdded, "user_id": user.user.user.id }) + .single() + .then(_ => console.log('works')) + .then( null, err => console.log('err: ', err)); + } else { + supabase + .from('entities') + .delete() + .eq("E",id) + .then(_ => console.log('deleted')) + .then( null, err => console.log('err deleting: ', err)); + + } + }) + }, [userId]) + React.useEffect(() => { + //load in initial data + supabase.from('entities') + .select('0,1,2,3,4') + .order('id') + .then(function(res){ + console.log(res); + if (!res.error){ + console.log(res.data) + res.data.forEach(function(d){ + let entity_name = d[1].split('/')[0].slice(1) + console.log(entity_name) + if (entity_name !== "created_at"){ + let attr = d[1].split('/')[1] + let transaction = [{[entity_name]: {id: d[0], [attr]: d[2]}} ] + client.transactSilently(transaction) + } + }); + } + }); + //TK + console.log(client.transactSilently) + client.addTransactListener(transactListener) + const on = (action: any) => (ds: any) => client.transactSilently([[action, ...ds.val()]]) + subscription1 = supabase + .from('entities') + .on('UPDATE', (v) => on('add')) + .on('INSERT', (v) => on('add')) + .on('DELETE', (v) => on('retract') ) + .subscribe((change) => console.log('todos changed', change)) + /* + return () => { + client.removeTransactListener() + ref.off('child_added', on('add')) + ref.off('child_removed', on('retract')) + ref.off('child_changed', on('add')) + }*/ + }, [userId]) + return null +} + +const SignOut = () => { + const [client] = useClient() + return ( + + ) +} + +const NewTodo = () => { + const [transact] = useTransact() + return ( +
{ + e.preventDefault() + transact([{ + todo: { + name: e.target.elements['todo-name'].value, + createdAt: Date.now() + } + }]) + e.target.reset() + }}> + +   + +
+ ) +} + +const TodoList = () => { + const [filters] = useEntity({ identity: 'todoFilters' }) + const [todos] = useQuery({ + $find: 'todo', + $where: { todo: { name: '$any' } } + }) + return ( +
+ {todos.filter(todo => { + if (!filters.get('showCompleted') && todo.get('isCompleted')) return false + if (filters.get('project') && todo.get('project', 'id') !== filters.get('project')) return false + if (filters.get('owner') && todo.get('owner', 'id') !== filters.get('owner')) return false + return true + }).sort((a, b) => a.get('createdAt') > b.get('createdAt') ? -1 : 1) + .map(todo => )} +
+ ) +} + +// PERFORMANCE: By accepting an `id` prop instead of a whole `todo` entity +// this component stays disconnected from the useQuery in the parent TodoList. +// useEntity creates a separate scope for every Todo so changes to TodoList +// or sibling Todos don't trigger unnecessary re-renders. +const Todo = React.memo(({ id } : {id : number}) => { + const [todo] = useEntity(id) + return ( +
+
+ + +
+
+ +  ·  + +  ·  + +
+ + {new Date(parseInt(todo.get('createdAt'))).toLocaleString()} + +
+ ) +}) + +const TodoCheck = ({ todo } : {todo: Entity}) => { + const [transact] = useTransact() + return ( + transact([{ todo: { id: todo.get('id'), isCompleted: e.target.checked } }])} + /> + ) +} + +const TodoName = ({ todo } : {todo: Entity}) => { + const [transact] = useTransact() + return ( + transact([{ todo: { id: todo.get('id'), name: e.target.value }}])} + /> + ) +} + +const TodoProject = ({ todo } : {todo: Entity}) => { + const [transact] = useTransact() + return ( + transact([{ todo: { id: todo.get('id'), project }}])} + /> + ) +} + +const TodoOwner = ({ todo }: { todo: Entity}) => { + const [transact] = useTransact() + return ( + transact([{ todo: { id: todo.get('id'), owner }}])} + /> + ) +} + +const TodoDelete = ({ todo }: {todo: Entity}) => { + const [transact] = useTransact() + return ( + + ) +} + +const TodoFilters = () => { + const [filters] = useEntity({ identity: 'todoFilters' }) + const [client] = useClient() + return ( +
+ Filter by:   + +  ·  + client.transactSilently([{ todoFilter: { id: filters.get('id'), project }}])} + /> +  ·  + client.transactSilently([{ todoFilter: { id: filters.get('id'), owner }}])} + /> +
+ ) +} + +const EntitySelect = React.memo(({ label, entityType, value, onChange }: + {label: string, entityType: any, value: any, onChange:any}) => { + const [entities] = useQuery({ + $find: entityType, + $where: { [entityType]: { name: '$any' } } + }) + return ( + + ) +}) diff --git a/examples/typescript-supabase-todo/src/index.tsx b/examples/typescript-supabase-todo/src/index.tsx new file mode 100644 index 00000000..c1f31c5f --- /dev/null +++ b/examples/typescript-supabase-todo/src/index.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render( + + + , + document.getElementById('root') +); diff --git a/examples/typescript-supabase-todo/src/supabaseClient.ts b/examples/typescript-supabase-todo/src/supabaseClient.ts new file mode 100644 index 00000000..04d09fe8 --- /dev/null +++ b/examples/typescript-supabase-todo/src/supabaseClient.ts @@ -0,0 +1,6 @@ +import { createClient } from '@supabase/supabase-js' + +const supabaseUrl = process.env.REACT_APP_SUPABASE_URL +const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY + +export const supabase = createClient(supabaseUrl, supabaseAnonKey) From 23bc70d102d2ebd3dde68a3111e9bf49dd695379 Mon Sep 17 00:00:00 2001 From: JB Rubinovitz Date: Wed, 23 Jun 2021 20:11:06 -0700 Subject: [PATCH 2/4] add unsubscribe --- .../typescript-supabase-todo/src/Todos.tsx | 26 +++---------------- 1 file changed, 3 insertions(+), 23 deletions(-) diff --git a/examples/typescript-supabase-todo/src/Todos.tsx b/examples/typescript-supabase-todo/src/Todos.tsx index 91e7d9e3..54a86d5b 100644 --- a/examples/typescript-supabase-todo/src/Todos.tsx +++ b/examples/typescript-supabase-todo/src/Todos.tsx @@ -14,7 +14,6 @@ export default function Todos(user) { return(
-
@@ -81,9 +80,6 @@ const DataSaver = (user) => { }); } }); - //TK - console.log(client.transactSilently) - client.addTransactListener(transactListener) const on = (action: any) => (ds: any) => client.transactSilently([[action, ...ds.val()]]) subscription1 = supabase .from('entities') @@ -91,31 +87,15 @@ const DataSaver = (user) => { .on('INSERT', (v) => on('add')) .on('DELETE', (v) => on('retract') ) .subscribe((change) => console.log('todos changed', change)) - /* + return () => { client.removeTransactListener() - ref.off('child_added', on('add')) - ref.off('child_removed', on('retract')) - ref.off('child_changed', on('add')) - }*/ + supabase.removeSubscription(subscription1) + } }, [userId]) return null } -const SignOut = () => { - const [client] = useClient() - return ( - - ) -} - const NewTodo = () => { const [transact] = useTransact() return ( From 33535ac85ce97935c74e1ef488a85b342286e5c0 Mon Sep 17 00:00:00 2001 From: JB Rubinovitz Date: Wed, 23 Jun 2021 22:00:56 -0700 Subject: [PATCH 3/4] readd transact listener --- examples/typescript-supabase-todo/src/Todos.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/typescript-supabase-todo/src/Todos.tsx b/examples/typescript-supabase-todo/src/Todos.tsx index 54a86d5b..edb13b14 100644 --- a/examples/typescript-supabase-todo/src/Todos.tsx +++ b/examples/typescript-supabase-todo/src/Todos.tsx @@ -80,6 +80,7 @@ const DataSaver = (user) => { }); } }); + client.addTransactListener(transactListener) const on = (action: any) => (ds: any) => client.transactSilently([[action, ...ds.val()]]) subscription1 = supabase .from('entities') From fa81b86f210098cb779f51e3acab50adad34dae7 Mon Sep 17 00:00:00 2001 From: JB Rubinovitz Date: Wed, 23 Jun 2021 22:06:01 -0700 Subject: [PATCH 4/4] remove unneeded code --- examples/typescript-supabase-todo/src/Todos.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/examples/typescript-supabase-todo/src/Todos.tsx b/examples/typescript-supabase-todo/src/Todos.tsx index edb13b14..ce6bc1d8 100644 --- a/examples/typescript-supabase-todo/src/Todos.tsx +++ b/examples/typescript-supabase-todo/src/Todos.tsx @@ -71,12 +71,9 @@ const DataSaver = (user) => { console.log(res.data) res.data.forEach(function(d){ let entity_name = d[1].split('/')[0].slice(1) - console.log(entity_name) - if (entity_name !== "created_at"){ - let attr = d[1].split('/')[1] - let transaction = [{[entity_name]: {id: d[0], [attr]: d[2]}} ] - client.transactSilently(transaction) - } + let attr = d[1].split('/')[1] + let transaction = [{[entity_name]: {id: d[0], [attr]: d[2]}} ] + client.transactSilently(transaction) }); } });