Created
November 1, 2018 14:58
-
-
Save skokenes/1209b68f889e4bb3e03791255089a8d6 to your computer and use it in GitHub Desktop.
Using context and hooks to serve RxQ Handles
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| import QaeProvider from "./qae/qae-provider"; | |
| export default () => { | |
| <div className="App"> | |
| <QaeProvider> | |
| {/* any children in here can read from the context */} | |
| </QaeProvider> | |
| </div> | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useContext } from "react"; | |
| import QaeContext from "./qae-context"; | |
| export default () => { | |
| const QaeService = useContext(QaeContext); // { session, doc, global } | |
| return <h1>render stuff here</h1> | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Need a context that components across the React tree can consume | |
| import { createContext } from "react"; | |
| const QaeContext = createContext(); | |
| export default QaeContext; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Create a provider that will update with the latest global and doc handle when appropriate | |
| import QaeContext from "./qae-context"; | |
| import React, { useState, useEffect } from "react"; | |
| import { connectSession, qAskReplay } from "rxq"; | |
| import { combineLatest } from "rxjs"; | |
| const QaeProvider = ({ children }) => { | |
| const [qaeService, setQaeService] = useState(null); | |
| useEffect(() => { | |
| const session = connectSession({ | |
| host: "localhost", | |
| port: 19076, | |
| appname: "Iris.qvf" | |
| }); | |
| const doc$ = session.global$.pipe(qAskReplay("OpenDoc", "Iris.qvf")); | |
| const sub = combineLatest(session.global$, doc$).subscribe( | |
| ([global, doc]) => { | |
| setQaeService({ | |
| session, | |
| global, | |
| doc | |
| }); | |
| } | |
| ); | |
| return () => sub.unsubscribe(); | |
| }, []); | |
| if (qaeService === null) { | |
| // Loading placeholder... | |
| return "Connecting Qlik"; | |
| } else { | |
| return ( | |
| <QaeContext.Provider value={qaeService}>{children}</QaeContext.Provider> | |
| ); | |
| } | |
| }; | |
| export default QaeProvider; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment