feat: adds Subscriptions

supabase · Sep 24, 2020 · 6d2ef91 · 6d2ef91
1 parent 05e6c25
commit 6d2ef91
Show file tree

Hide file tree

Showing 11 changed files with 251 additions and 140 deletions.
diff --git a/example/package.json b/example/package.json
@@ -18,7 +18,6 @@
     "prebuild": "npm run build:tailwind",
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

diff --git a/example/src/App.js b/example/src/App.js
@@ -6,28 +6,29 @@ const auth = new Client()
 
 function App() {
   let [session, setSession] = useState(null)
+  let [email, setEmail] = useState('')
+  let [password, setPassword] = useState('')
 
   useEffect(() => {
-    handleUrl()
-    checkForSession()
+    setSession(auth.currentSession)
+    auth.onAuthStateChange((event, session) => setSession(session))
   }, [])
 
-  const checkForSession = () => {
-    let store = localStorage.getItem('supabase.auth.token')
-    setSession(store)
+  async function handleGoogleLogin() {
+    let { error } = await auth.signIn({ provider: 'google' })
+    if (error) console.log('error', error.message)
   }
-  async function handleUrl() {
-    let { data, error } = await auth.getSessionFromUrl()
+  async function handleEmailSignIn() {
+    let { error } = await auth.signIn({ email, password })
+    if (error) console.log('error', error.message)
   }
-
-  async function handleGoogleLogin () {
-    let { data, error } = auth.signIn({ provider: 'google' })
-    if (error) console.log('error', error)
+  async function handleEmailSignUp() {
+    let { error } = await auth.signUp({ email, password })
+    if (error) console.log('error', error.message)
   }
-  async function handleSignOut () {
-    let { data, error } = auth.signOut()
-    if (error) console.log('error', error)
-    checkForSession()
+  async function handleSignOut() {
+    let { error } = await auth.signOut()
+    if (error) console.log('error', error.message)
   }
 
   return (
@@ -39,87 +40,98 @@ function App() {
             className="p-2 text-xs overflow-scroll bg-gray-200 max-h-100 rounded"
             style={{ maxHeight: 150 }}
           >
-            {!session ? 'None' : JSON.stringify(JSON.parse(session), null, 2)}
+            {!session ? 'None' : JSON.stringify(session, null, 2)}
           </pre>
-          <div className="mt-2">
-            <span className="block w-full rounded-md shadow-sm">
-              <button
-                onClick={() => handleSignOut()}
-                type="submit"
-                className="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-500 focus:outline-none focus:border-gray-700 focus:shadow-outline-gray active:bg-gray-700 transition duration-150 ease-in-out"
-              >
-                Sign out
-              </button>
-            </span>
-          </div>
+          {session && (
+            <div className="mt-2">
+              <span className="block w-full rounded-md shadow-sm">
+                <button
+                  onClick={() => handleSignOut()}
+                  type="submit"
+                  className="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-500 focus:outline-none focus:border-gray-700 focus:shadow-outline-gray active:bg-gray-700 transition duration-150 ease-in-out"
+                >
+                  Sign out
+                </button>
+              </span>
+            </div>
+          )}
         </div>
 
         <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
-          <form action="#" method="POST">
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium leading-5 text-gray-700">
-                Email address
-              </label>
-              <div className="mt-1 rounded-md shadow-sm">
-                <input
-                  id="email"
-                  type="email"
-                  required
-                  className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
-                />
-              </div>
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium leading-5 text-gray-700">
+              Email address
+            </label>
+            <div className="mt-1 rounded-md shadow-sm">
+              <input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
+              />
             </div>
+          </div>
 
-            <div className="mt-6">
-              <label
-                htmlFor="password"
-                className="block text-sm font-medium leading-5 text-gray-700"
-              >
-                Password
-              </label>
-              <div className="mt-1 rounded-md shadow-sm">
-                <input
-                  id="password"
-                  type="password"
-                  required
-                  className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
-                />
-              </div>
+          <div className="mt-6">
+            <label htmlFor="password" className="block text-sm font-medium leading-5 text-gray-700">
+              Password
+            </label>
+            <div className="mt-1 rounded-md shadow-sm">
+              <input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
+              />
             </div>
+          </div>
 
-            <div className="mt-6 flex items-center justify-between">
-              <div className="flex items-center">
-                <input
-                  id="remember_me"
-                  type="checkbox"
-                  className="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out"
-                />
-                <label htmlFor="remember_me" className="ml-2 block text-sm leading-5 text-gray-900">
-                  Remember me
-                </label>
-              </div>
-
-              <div className="text-sm leading-5">
-                <a
-                  href="#"
-                  className="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150"
-                >
-                  Forgot your password?
-                </a>
-              </div>
+          <div className="mt-6 flex items-center justify-between">
+            <div className="flex items-center">
+              <input
+                id="remember_me"
+                type="checkbox"
+                className="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out"
+              />
+              <label htmlFor="remember_me" className="ml-2 block text-sm leading-5 text-gray-900">
+                Remember me
+              </label>
             </div>
 
-            <div className="mt-6">
-              <span className="block w-full rounded-md shadow-sm">
-                <button
-                  type="submit"
-                  className="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out"
-                >
-                  Sign in
-                </button>
-              </span>
+            <div className="text-sm leading-5">
+              <a
+                href="#"
+                className="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150"
+              >
+                Forgot your password?
+              </a>
             </div>
-          </form>
+          </div>
+
+          <div className="mt-6 grid grid-cols-2 gap-2">
+            <span className="block w-full rounded-md shadow-sm">
+              <button
+                onClick={() => handleEmailSignIn()}
+                type="submit"
+                className="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out"
+              >
+                Sign In
+              </button>
+            </span>
+            <span className="block w-full rounded-md shadow-sm">
+              <button
+                onClick={() => handleEmailSignUp()}
+                type="submit"
+                className="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out"
+              >
+                Sign Up
+              </button>
+            </span>
+          </div>
 
           <div className="mt-6">
             <div className="relative">

diff --git a/example/src/App.test.js b/example/src/App.test.js
diff --git a/example/src/setupTests.js b/example/src/setupTests.js
diff --git a/src/Api.ts b/src/Api.ts
@@ -24,9 +24,11 @@ export default class Api {
         { email, password },
         { headers: this.headers }
       )
+      console.log('signUpWithEmail data', data)
       return { data, error: null }
     } catch (error) {
-      return { data: null, error: error.message }
+      console.log('signUpWithEmail error', error)
+      return { data: null, error }
     }
   }
 
@@ -42,9 +44,10 @@ export default class Api {
         { email, password },
         { headers: this.headers }
       )
+      console.log('signInWithEmaildata', data)
       return { data, error: null }
     } catch (error) {
-      return { data: null, error: error.message }
+      return { data: null, error }
     }
   }
 
@@ -57,7 +60,7 @@ export default class Api {
       let data: any = await post(`${this.url}/forgotPassword`, { email }, { headers: this.headers })
       return { data, error: null }
     } catch (error) {
-      return { data: null, error: error.message }
+      return { data: null, error }
     }
   }
 
@@ -72,7 +75,7 @@ export default class Api {
       let data = await post(`${this.url}/logout`, {}, { headers, noResolveJson: true })
       return { data, error: null }
     } catch (error) {
-      return { data: null, error: error.message }
+      return { data: null, error }
     }
   }
 
@@ -95,7 +98,7 @@ export default class Api {
       let data: any = await get(`${this.url}/user`, { headers })
       return { data, error: null }
     } catch (error) {
-      return { data: null, error: error.message }
+      return { data: null, error }
     }
   }
 
@@ -111,7 +114,7 @@ export default class Api {
       let data: any = await put(`${this.url}/user`, attributes, { headers })
       return { data, error: null }
     } catch (error) {
-      return { data: null, error: error.message }
+      return { data: null, error }
     }
   }
 
@@ -128,7 +131,7 @@ export default class Api {
       )
       return { data, error: null }
     } catch (error) {
-      return { data: null, error: error.message }
+      return { data: null, error }
     }
   }
 }