use context for settings, move up getting the settings

Author: sw-yx

.size-snapshot.json

@@ -1,35 +1,35 @@
 {
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.cjs.development.js": {
-    "bundled": 11704,
-    "minified": 7561,
-    "gzipped": 1911
+    "bundled": 12002,
+    "minified": 7629,
+    "gzipped": 1929
   },
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.cjs.production.js": {
-    "bundled": 11704,
-    "minified": 7561,
-    "gzipped": 1911
+    "bundled": 12002,
+    "minified": 7629,
+    "gzipped": 1929
   },
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.umd.development.js": {
-    "bundled": 12627,
-    "minified": 6621,
-    "gzipped": 1878
+    "bundled": 12935,
+    "minified": 6636,
+    "gzipped": 1884
   },
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.umd.production.js": {
-    "bundled": 12627,
-    "minified": 6621,
-    "gzipped": 1878
+    "bundled": 12935,
+    "minified": 6636,
+    "gzipped": 1884
   },
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.es.production.js": {
-    "bundled": 11469,
-    "minified": 7372,
-    "gzipped": 1860,
+    "bundled": 11767,
+    "minified": 7397,
+    "gzipped": 1869,
     "treeshaked": {
       "rollup": {
-        "code": 524,
+        "code": 548,
         "import_statements": 125
       },
       "webpack": {
-        "code": 1683
+        "code": 1709
       }
     }
   }

src/app.tsx

@@ -4,14 +4,9 @@ import { Logout } from "./components/logout"
 import { Signup } from "./components/signup"
 import { useIdentityContext } from "./context"
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@reach/tabs"
-import { Settings } from "react-netlify-identity"
+
 import { Providers } from "./components/providers"
 function LoggedOutScreen() {
-  const { settings } = useIdentityContext()
-  const [setting, setSetting] = React.useState<Settings | null>(null)
-  React.useEffect(() => {
-    settings().then(x => setSetting(x))
-  }, [settings])
   return (
     <div>
       <Tabs defaultIndex={0}>
@@ -29,7 +24,7 @@ function LoggedOutScreen() {
           </TabPanel>
         </TabPanels>
       </Tabs>
-      <Providers setting={setting} />
+      <Providers />
     </div>
   )
 }
@@ -40,7 +35,6 @@ function LoggedInScreen() {
 
 function Gate({  }: { onCloseDialog: Function }) {
   const identity = useIdentityContext()
-  console.log({ identity })
   const isLoggedIn = Boolean(identity && identity.user)
   return isLoggedIn ? <LoggedInScreen /> : <LoggedOutScreen />
 }

src/components/providers.tsx

@@ -1,13 +1,13 @@
 import React from "react"
-import { useIdentityContext } from "../context"
+import { useIdentityContext, SettingContext } from "../context"
 import { Settings } from "react-netlify-identity"
-export function Providers({ setting }: { setting: Settings | null }) {
+export function Providers() {
+  const setting = React.useContext(SettingContext)
   const hasProviders =
     setting &&
     setting.external &&
     Object.entries(setting.external).some(([k, v]) => ["github", "gitlab", "bitbucket", "google"].includes(k) && v)
   if (!hasProviders) return null
-  console.log({ setting })
   return (
     <div className="providersGroup">
       <hr className="hr" />

src/context.tsx

@@ -1,10 +1,12 @@
 import React from "react"
 import { useNetlifyIdentity } from "react-netlify-identity"
-
+import { Settings } from "react-netlify-identity"
 export const [useIdentityContext, IdentityContextProvider, IdentityContext] = createUsableCtx<
   ReturnType<typeof useNetlifyIdentity>
 >()
 
+export const SettingContext = React.createContext<Settings | null>(null)
+
 export const [FormStateContext, FormStateContextProvider] = createMutableCtx<"login" | "signup">("login")
 
 // utils

src/index.tsx

@@ -5,9 +5,9 @@ import {
 } from "@reach/dialog"
 import VisuallyHidden from "@reach/visually-hidden"
 import { Widget } from "./app"
-import { FormStateContextProvider } from "./context"
+import { FormStateContextProvider, SettingContext } from "./context"
 
-import { useNetlifyIdentity as _useNetlifyIdentity } from "react-netlify-identity"
+import { Settings, useNetlifyIdentity as _useNetlifyIdentity } from "react-netlify-identity"
 
 /** URL of your Netlify Instance with Identity enabled e.g. https://netlify-gotrue-in-react.netlify.com */
 
@@ -29,33 +29,30 @@ export const useNetlifyIdentity = _useNetlifyIdentity
 export const IdentityContext = _IdentityContext
 export const useIdentityContext = _useIdentityContext
 export function IdentityModal({ showDialog, onCloseDialog }: ModalProps) {
+  const { settings } = useIdentityContext()
+  const [setting, setSetting] = React.useState<Settings | null>(null)
+  React.useEffect(() => {
+    settings().then(x => setSetting(x))
+  }, [settings])
   return (
-    // <DialogOverlay isOpen={showDialog}>
-    <Dialog
-      isOpen={showDialog}
-      onDismiss={() => void console.log("hi") || onCloseDialog()}
-      style={{
-        border: "solid 5px hsla(0, 0%, 0%, 0.5)",
-        borderRadius: "10px",
-        position: "relative",
-        maxWidth: 400
-      }}
-    >
-      {/* <DialogContent
+    <SettingContext.Provider value={setting}>
+      <Dialog
+        isOpen={showDialog}
+        onDismiss={() => void console.log("hi") || onCloseDialog()}
         style={{
           border: "solid 5px hsla(0, 0%, 0%, 0.5)",
           borderRadius: "10px",
           position: "relative",
           maxWidth: 400
         }}
-      > */}
-      <button className="btn btnClose" onClick={onCloseDialog}>
-        <VisuallyHidden>Close</VisuallyHidden>
-      </button>
-      <FormStateContextProvider>
-        <Widget onCloseDialog={onCloseDialog} />
-      </FormStateContextProvider>
-      {/* </DialogContent> */}
-    </Dialog>
+      >
+        <button className="btn btnClose" onClick={onCloseDialog}>
+          <VisuallyHidden>Close</VisuallyHidden>
+        </button>
+        <FormStateContextProvider>
+          <Widget onCloseDialog={onCloseDialog} />
+        </FormStateContextProvider>
+      </Dialog>
+    </SettingContext.Provider>
   )
 }