diff --git a/.gitignore b/.gitignore index 7005be7..2dbe075 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,9 @@ node_modules build dist .rpt2_cache +.rts2_cache_cjs +.rts2_cache_es +.rts2_cache_umd # misc .DS_Store diff --git a/CHANGELOG.md b/CHANGELOG.md index 243ab2b..49d91af 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). +## [v0.1.0](https://github.com/sw-yx/react-netlify-identity/compare/v0.0.16...v0.1.0) - 2019-05-30 + +### Commits + +- working contextapi [`149fccf`](https://github.com/sw-yx/react-netlify-identity/commit/149fccf91317ffade6b5468c19cdfcc333cf245d) +- update version [`013e1fd`](https://github.com/sw-yx/react-netlify-identity/commit/013e1fdf8fe2a74c5844af5b87221d224e51f3be) + ## [v0.0.16](https://github.com/sw-yx/react-netlify-identity/compare/v0.0.15...v0.0.16) - 2019-05-22 ### Commits diff --git a/README.md b/README.md index 3afc658..cc988b8 100644 --- a/README.md +++ b/README.md @@ -81,25 +81,25 @@ function Login() { const email = formRef.current.email.value const password = formRef.current.password.value signupUser(email, password) - .then(user => { + .then((user) => { console.log("Success! Signed up", user) navigate("/dashboard") }) - .catch(err => console.error(err) || setMsg("Error: " + err.message)) + .catch((err) => console.error(err) || setMsg("Error: " + err.message)) } return (
{ + onSubmit={(e) => { e.preventDefault() const email = e.target.email.value const password = e.target.password.value load(loginUser(email, password, true)) - .then(user => { + .then((user) => { console.log("Success! Logged in", user) navigate("/dashboard") }) - .catch(err => console.error(err) || setMsg("Error: " + err.message)) + .catch((err) => console.error(err) || setMsg("Error: " + err.message)) }} >
@@ -174,16 +174,6 @@ function Dashboard() { -**As a render prop**: This is also exported as a render prop component, `NetlifyIdentity`, but we're not quite sure if its that useful if you can already use hooks in your app: - -```tsx - - {({ loginUser, signupUser }) => { - // use it - }} - -``` - ## License MIT © [sw-yx](https://github.com/sw-yx) diff --git a/example/.gitignore b/example/.gitignore index 4d29575..8f9b412 100644 --- a/example/.gitignore +++ b/example/.gitignore @@ -4,7 +4,7 @@ /node_modules /.pnp .pnp.js - +.cache # testing /coverage diff --git a/example/index.html b/example/index.html new file mode 100644 index 0000000..b54da92 --- /dev/null +++ b/example/index.html @@ -0,0 +1,13 @@ + + + + + + Playground + + + +
+ + + diff --git a/example/package.json b/example/package.json index 3ec29ca..9194535 100644 --- a/example/package.json +++ b/example/package.json @@ -1,41 +1,29 @@ { "name": "example", - "version": "0.1.0", - "private": true, + "version": "1.0.0", + "main": "index.js", + "license": "MIT", + "scripts": { + "start": "parcel index.html", + "build": "parcel build index.html" + }, "dependencies": { "@reach/router": "^1.2.1", + "react-app-polyfill": "^1.0.1", "react-netlify-identity": "latest", - "react-scripts": "3.0.0", + "react": "latest", + "react-dom": "latest", "typescript": "3.4.5" }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" - }, - "eslintConfig": { - "extends": "react-app" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, "devDependencies": { - "@types/jest": "24.0.11", - "@types/node": "11.13.8", "@types/reach__router": "^1.2.4", - "@types/react": "16.8.14", - "@types/react-dom": "16.8.4", - "react": "^16.8.6", - "react-dom": "^16.8.6" - } + "@types/react": "^16.8.15", + "@types/react-dom": "^16.8.4", + "parcel": "^1.12.3", + "typescript": "^3.4.5" + }, + "browserslist": [ + "last 1 chrome version", + "not dead" + ] } diff --git a/example/src/App.tsx b/example/src/App.tsx index 02b46c0..d25d295 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -1,14 +1,17 @@ -import React from "react" -import { Router, Link, navigate } from "@reach/router" -import "./App.css" -import { useNetlifyIdentity, Settings } from "react-netlify-identity" -import useLoading from "./useLoading" +import React from 'react'; +import { Router, Link, navigate } from '@reach/router'; +import './App.css'; +import { useIdentityCtx, IdentityContextProvider, Settings } from '../../src'; +import useLoading from './useLoading'; -let IdentityContext = React.createContext>(undefined!) -type MaybePathProps = { path?: string } -function PrivateRoute(props: React.PropsWithoutRef }>) { - const identity = React.useContext(IdentityContext) - let { as: Comp } = props +type MaybePathProps = { path?: string }; +function PrivateRoute( + props: React.PropsWithoutRef< + MaybePathProps & { as: React.ComponentType } + > +) { + const identity = useIdentityCtx(); + let { as: Comp } = props; return identity.user ? ( ) : ( @@ -16,41 +19,47 @@ function PrivateRoute(props: React.PropsWithoutRefYou are trying to view a protected page. Please log in
- ) + ); } function Login({ }: MaybePathProps) { - const { loginUser, signupUser, settings, loginProvider } = React.useContext(IdentityContext) - const formRef = React.useRef(null!) - const [msg, setMsg] = React.useState("") - const [isLoading, load] = useLoading() - const [setting, setSetting] = React.useState(null) + const { loginUser, signupUser, settings, loginProvider } = useIdentityCtx(); + const formRef = React.useRef(null!); + const [msg, setMsg] = React.useState(''); + const [isLoading, load] = useLoading(); + const [setting, setSetting] = React.useState(null); React.useEffect(() => { - settings().then(x => setSetting(x)) - }, [settings]) + settings().then(x => setSetting(x)); + }, [settings]); const signup = () => { - const email = formRef.current.email.value - const password = formRef.current.password.value - load(signupUser(email, password, { data: "signed up thru react-netlify-identity" })) + const email = formRef.current.email.value; + const password = formRef.current.password.value; + load( + signupUser(email, password, { + data: 'signed up thru react-netlify-identity', + }) + ) .then(user => { - console.log("Success! Signed up", user) - navigate("/dashboard") + console.log('Success! Signed up', user); + navigate('/dashboard'); }) - .catch(err => void console.error(err) || setMsg("Error: " + err.message)) - } + .catch(err => void console.error(err) || setMsg('Error: ' + err.message)); + }; return ( { - e.preventDefault() - const email = formRef.current.email.value - const password = formRef.current.password.value + e.preventDefault(); + const email = formRef.current.email.value; + const password = formRef.current.password.value; load(loginUser(email, password)) .then(user => { - console.log("Success! Logged in", user) - navigate("/dashboard") + console.log('Success! Logged in', user); + navigate('/dashboard'); }) - .catch(err => void console.error(err) || setMsg("Error: " + err.message)) + .catch( + err => void console.error(err) || setMsg('Error: ' + err.message) + ); }} >
@@ -76,27 +85,39 @@ function Login({ }: MaybePathProps) { )} {setting && 
{JSON.stringify(setting, null, 2)}
} {setting && setting.external.bitbucket && ( - )} {setting && setting.external.github && ( - )} {setting && setting.external.gitlab && ( - )} {setting && setting.external.google && ( - )} - ) + ); } function Home({ }: MaybePathProps) { @@ -106,50 +127,58 @@ function Home({ }: MaybePathProps) {

this is a Public Page, not behind an authentication wall

-
+
- This demo is{" "} - Open Source.{" "} + This demo is{' '} + + Open Source. + {' '}
- ) + ); } function About({ }: MaybePathProps) { - return
About
+ return
About
; } function Dashboard({ }: MaybePathProps) { - const props = React.useContext(IdentityContext) - const { isConfirmedUser, authedFetch } = props - const [isLoading, load] = useLoading() - const [msg, setMsg] = React.useState("Click to load something") + const props = useIdentityCtx(); + const { isConfirmedUser, authedFetch } = props; + const [isLoading, load] = useLoading(); + const [msg, setMsg] = React.useState('Click to load something'); const handler = () => { - load(authedFetch.get("/.netlify/functions/authEndPoint")).then(setMsg) - } + load(authedFetch.get('/.netlify/functions/authEndPoint')).then(setMsg); + }; return (

This is a Protected Dashboard!

{!isConfirmedUser && ( - 
-          You have not confirmed your email. Please confirm it before you ping the API.
+        
+          You have not confirmed your email. Please confirm it before you ping
+          the API.
         

       )}
       

       

         
You can try pinging our authenticated API here.

-        
If you are logged in, you should be able to see a `user` info here.

+        

+          If you are logged in, you should be able to see a `user` info here.
+        

         
         {isLoading ?  : 
{JSON.stringify(msg, null, 2)}
}
- ) + ); } function Spinner() { @@ -160,35 +189,35 @@ function Spinner() {
- ) + ); } function Nav() { - const { isLoggedIn } = React.useContext(IdentityContext) + const { isLoggedIn } = useIdentityCtx(); return ( - ) + ); } function Logout() { - const { logoutUser } = React.useContext(IdentityContext) - return + const { logoutUser } = useIdentityCtx(); + return ; } function App() { // TODO: SUPPLY A URL EITHER FROM ENVIRONMENT VARIABLES OR SOME OTHER STRATEGY // e.g. 'https://unruffled-roentgen-04c3b8.netlify.com' const domainToUse = - new URL(window.location.origin).hostname === "localhost" - ? "http://react-netlify-identity.netlify.com" - : window.location.origin - const [url, setUrl] = React.useState(domainToUse) - const identity = useNetlifyIdentity(url) - console.log({ identity, url }) + new URL(window.location.origin).hostname === 'localhost' + ? 'http://react-netlify-identity.netlify.com' + : window.location.origin; + const [url, setUrl] = React.useState(domainToUse); return ( - +

@@ -196,7 +225,10 @@ function App() { & Reach Router