miolo-react 3.0.0-beta.12 → 3.0.0-beta.13

package/dist/miolo-react.mjs

@@ -1,5 +1,5 @@
 /**
- * miolo-react v3.0.0-beta.12
+ * miolo-react v3.0.0-beta.13
  *
  * https://www.afialapis.com/os/miolo
  *

package/dist/miolo-react.umd.js

@@ -1,5 +1,5 @@
 /**
- * miolo-react v3.0.0-beta.12
+ * miolo-react v3.0.0-beta.13
  *
  * https://www.afialapis.com/os/miolo
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "miolo-react",
-  "version": "3.0.0-beta.12",
+  "version": "3.0.0-beta.13",
   "description": "React utils for miolo",
   "author": "Donato Lorenzo <donato@afialapis.com>",
   "contributors": [
@@ -24,7 +24,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "scripts": {
     "reset": "rm -fr package-lock.json npm-lock.yaml dist/* && npm i",
@@ -32,7 +33,6 @@
     "bundle": "npx xeira bundle --target=browser --source_index=./src/index.mjs --bundle_folder=./dist --bundle_name=miolo-react --bundle_node_polyfill=true --bundle_extension=umd,mjs",
     "dist": "npm run clean && npm run bundle"
   },
-
   "dependencies": {
     "miolo-cli": "../miolo-cli"
   },  

package/src/AppBrowser.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import MioloContextProvider from './context/MioloContextProvider.jsx'
+
+const AppBrowser = ({ children }) => {
+  const context = typeof window !== 'undefined' && window.__CONTEXT ? window.__CONTEXT : {};
+
+  return (
+    <MioloContextProvider context={context}>
+      {children}
+    </MioloContextProvider>
+  )  
+}
+
+export default AppBrowser

package/src/AppServer.jsx

@@ -0,0 +1,17 @@
+
+import React from 'react'
+import MioloContextProvider from './context/MioloContextProvider.jsx'
+
+
+const AppServer = ({context, children}) => {
+
+  return (
+    <MioloContextProvider 
+        context= {context || {}}>
+      {children}
+    </MioloContextProvider>
+  )
+}
+
+export default AppServer
+

package/src/context/MioloContext.mjs

@@ -0,0 +1,5 @@
+import React from 'react'
+
+const MioloContext = React.createContext()
+
+export default MioloContext

package/src/context/MioloContextProvider.jsx

@@ -0,0 +1,95 @@
+import React , {useState, useEffect, useCallback} from 'react'
+import Context from './MioloContext.mjs'
+import { miolo_client } from 'miolo-cli'
+import { useSsrDataOrReload } from '../ssr/useSsrDataOrReload.mjs'
+
+
+const MioloContextProvider = ({context, children}) => {
+  const [innerContext, setInnerContext]= useState(context)
+  const [mioloObj, setMioloObj]= useState(miolo_client(context))
+    
+  useEffect(() => {
+    setInnerContext(context)
+    setMioloObj(miolo_client(context))
+  }, [context])
+  
+  const login = useCallback(async (credentials) => {
+    const { fetcher } = mioloObj
+    const { config } = innerContext
+
+    const url = config.login_url || '/login'
+    const resp = await fetcher.login(url, credentials)
+
+    if (resp?.data) {
+      if (resp?.data?.authenticated) {
+        setInnerContext(current => {
+          return {
+            ...current,
+            ...resp?.data,
+          }
+        })
+      }
+
+      return resp?.data
+    }
+
+    return {}
+  }, [innerContext, mioloObj])
+
+  const logout = useCallback(async () => {
+    const { fetcher } = mioloObj
+    const { config } = innerContext
+
+    const url = config.logout_url || '/logout'
+    const _resp = await fetcher.logout(url)
+    // resp.redirected= true
+
+    setInnerContext(current => {
+      return {
+        ...current,
+        user: undefined,
+        authenticated: false,
+      }
+    })
+
+    return {
+      user: undefined,
+      authenticated: false,
+    }
+  }, [innerContext, mioloObj])
+
+  const updateUser = useCallback((user) => {
+    setInnerContext((current) => {
+      return {
+        ...current,
+        user,
+      }
+    })
+  }, [])
+
+  const useSsrData = (name, defval, loader, modifier) => {
+    return useSsrDataOrReload(innerContext, mioloObj, name, defval, loader, modifier)
+  }  
+  
+  return (
+    <Context.Provider 
+      value={{
+        //context: innerContext, 
+        //setContext: setInnerContext,
+        //miolo: mioloObj,
+        user: innerContext.user,
+        updateUser,
+        authenticated: innerContext.authenticated,
+        fetcher: mioloObj.fetcher,
+        //socket: mioloObj.socket,
+        login,
+        logout,
+        useSsrData
+      }}>
+      {children}
+    </Context.Provider>
+  )
+}
+
+
+export default MioloContextProvider

package/src/context/useMioloContext.jsx

@@ -0,0 +1,6 @@
+import {useContext} from 'react'
+import MioloContext from './MioloContext.mjs'
+
+const useMioloContext = () => useContext(MioloContext)
+
+export default useMioloContext

package/src/context/withMioloContext.jsx

@@ -0,0 +1,15 @@
+import React, {useContext} from 'react'
+import MioloContext from './MioloContext.mjs'
+
+/* eslint react/display-name:0 */
+const withMioloContext = (BaseComponent) => (props) => {
+  const context = useContext(MioloContext)
+
+  return (
+    <BaseComponent {...props}
+                   {...context}/>
+  );
+}
+
+
+export default withMioloContext

package/src/index.mjs

@@ -0,0 +1,7 @@
+import withMioloContext from './context/withMioloContext.jsx'
+import useMioloContext from './context/useMioloContext.jsx'
+
+import AppBrowser from './AppBrowser.jsx'
+import AppServer from './AppServer.jsx'
+
+export {withMioloContext, useMioloContext, AppBrowser, AppServer}

package/src/ssr/getSsrDataFromContext.mjs

@@ -0,0 +1,33 @@
+
+const _getDataFromWindow = (name) => {
+  try {
+    if (window != undefined) {
+      const ssr_data= window.__CONTEXT.ssr_data
+      
+      if (ssr_data!=undefined) {
+        if (ssr_data[name]!=undefined) {
+          return ssr_data[name]
+        }
+      }
+    }
+  } catch(e) {}
+    
+  return undefined
+}
+
+const getSsrDataFromContext = (context, name) => {
+  let data= undefined
+
+  if (context?.ssr_data != undefined && context?.ssr_data[name]!=undefined) {
+    data= context.ssr_data[name]
+  } else {
+    const wdata= _getDataFromWindow(name)
+    if (wdata != undefined) {
+      data= wdata
+    }
+  }
+  
+  return data
+}
+
+export default getSsrDataFromContext

package/src/ssr/useSsrDataOrReload.mjs

@@ -0,0 +1,43 @@
+import {useState, useCallback, useEffect} from 'react'
+import getSsrDataFromContext from './getSsrDataFromContext.mjs'
+
+const useSsrDataOrReload = (context, miolo, name, defval, loader, modifier) => {
+  
+  const _maybeModify = useCallback((value) => {
+    return modifier==undefined ? value : modifier(value)
+  }, [modifier])
+
+  const ssrDataFromContext = getSsrDataFromContext(context, name)
+  const [ssrData, setSsrData] = useState(_maybeModify(
+    ssrDataFromContext != undefined 
+    ? ssrDataFromContext : defval))
+  const [needToRefresh, setNeedToRefresh] = useState(ssrDataFromContext == undefined)
+
+  const refreshSsrData = useCallback(() => {
+    if (loader == undefined) {
+      return
+    }
+
+    const {fetcher} = miolo
+
+    async function fetchData() {
+      let nSsrData = await loader(context, fetcher)
+      setSsrData(_maybeModify(nSsrData))
+    }
+
+    fetchData()
+  }, [context, miolo, loader, _maybeModify]) 
+  
+  useEffect(() => {
+    try {
+      if (needToRefresh) {
+        setNeedToRefresh(false)
+        refreshSsrData()
+      }
+    } catch(e) {}
+  }, [needToRefresh, refreshSsrData]) 
+
+  return [ssrData, (data) => setSsrData(_maybeModify(data)), refreshSsrData]
+}
+
+export {useSsrDataOrReload}