-
Notifications
You must be signed in to change notification settings - Fork 195
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #384 from getAlby/upgrade/react-router-v6
React Router v6 + Auth Flow
- Loading branch information
Showing
29 changed files
with
480 additions
and
495 deletions.
There are no files selected for viewing
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
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import React, { useState, useEffect, createContext } from "react"; | ||
| import utils from "../../common/lib/utils"; | ||
|
|
||
| interface AuthContextType { | ||
| account: string | null; | ||
| loading: boolean; | ||
| unlock: (user: string, callback: VoidFunction) => void; | ||
| lock: (callback: VoidFunction) => void; | ||
| } | ||
|
|
||
| const AuthContext = createContext<AuthContextType>(null!); | ||
|
|
||
| export function AuthProvider({ children }: { children: React.ReactNode }) { | ||
| const [account, setAccount] = useState<string | null>(null); | ||
| const [loading, setLoading] = useState(true); | ||
|
|
||
| const unlock = (password: string, callback: VoidFunction) => { | ||
| return utils.call("unlock", { password }).then((response) => { | ||
| setAccount(response.currentAccountId); | ||
| callback(); | ||
| }); | ||
| }; | ||
|
|
||
| const lock = (callback: VoidFunction) => { | ||
| return utils.call("lock").then(() => { | ||
| setAccount(null); | ||
| callback(); | ||
| }); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| utils | ||
| .call("status") | ||
| .then((response) => { | ||
| if (!response.configured) { | ||
| utils.openPage("welcome.html"); | ||
| window.close(); | ||
| } else if (response.unlocked) { | ||
| setAccount(response.currentAccountId); | ||
| } else { | ||
| setAccount(null); | ||
| } | ||
| }) | ||
| .catch((e) => { | ||
| alert(`An unexpected error occurred (${e.message})`); | ||
| }) | ||
| .finally(() => { | ||
| setLoading(false); | ||
| }); | ||
| }, []); | ||
|
|
||
| const value = { account, loading, unlock, lock }; | ||
|
|
||
| return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>; | ||
| } | ||
|
|
||
| export function useAuth() { | ||
| return React.useContext(AuthContext); | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,95 +1,101 @@ | ||
| import React, { useState, useEffect } from "react"; | ||
| import { HashRouter, Switch, Redirect, Route } from "react-router-dom"; | ||
| import { HashRouter, Navigate, Outlet, Routes, Route } from "react-router-dom"; | ||
|
|
||
| import utils from "../../../common/lib/utils"; | ||
| import { AuthProvider } from "../../context/AuthContext"; | ||
| import RequireAuth from "../RequireAuth"; | ||
| import Container from "../../components/Container"; | ||
| import Navbar from "../../components/Navbar"; | ||
| import UserMenu from "../../components/UserMenu"; | ||
| import Publishers from "../../screens/Publishers"; | ||
| import Publisher from "../../screens/Publisher"; | ||
| import ChooseConnector from "../../screens/Options/ChooseConnector"; | ||
| import TestConnection from "../../screens/Options/TestConnection"; | ||
| import Send from "../../screens/Send"; | ||
| import Receive from "../../screens/Receive"; | ||
| import Settings from "../../screens/Settings"; | ||
| import Unlock from "../../screens/Unlock"; | ||
|
|
||
| function Options() { | ||
| return ( | ||
| <AuthProvider> | ||
| <HashRouter> | ||
| <Routes> | ||
| <Route | ||
| path="/" | ||
| element={ | ||
| <RequireAuth> | ||
| <Layout /> | ||
| </RequireAuth> | ||
| } | ||
| > | ||
| <Route index element={<Navigate to="/publishers" replace />} /> | ||
| <Route path="publishers"> | ||
| <Route path=":id" element={<Publisher />} /> | ||
| <Route index element={<Publishers />} /> | ||
| </Route> | ||
| <Route path="send" element={<Send />} /> | ||
| <Route path="receive" element={<Receive />} /> | ||
| <Route path="settings" element={<Settings />} /> | ||
| <Route | ||
| path="accounts/new/*" | ||
| element={ | ||
| <Container> | ||
| <ChooseConnector /> | ||
| </Container> | ||
| } | ||
| /> | ||
| <Route | ||
| path="test-connection" | ||
| element={ | ||
| <Container> | ||
| <TestConnection /> | ||
| </Container> | ||
| } | ||
| /> | ||
| </Route> | ||
| <Route path="unlock" element={<Unlock />} /> | ||
| </Routes> | ||
| </HashRouter> | ||
| </AuthProvider> | ||
| ); | ||
| } | ||
|
|
||
| const Layout = () => { | ||
| const [accountInfo, setAccountInfo] = useState({}); | ||
|
|
||
| function loadAccountInfo() { | ||
| useEffect(() => { | ||
| getAccountInfo(); | ||
| }, []); | ||
|
|
||
| function getAccountInfo() { | ||
| setAccountInfo({}); | ||
| return utils.call("accountInfo").then((response) => { | ||
| utils.call("accountInfo").then((response) => { | ||
| const { alias } = response.info; | ||
| const balance = parseInt(response.balance.balance); // TODO: handle amounts | ||
| setAccountInfo({ alias, balance }); | ||
| }); | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| utils | ||
| .call("status") | ||
| .then((response) => { | ||
| if (!response.configured) { | ||
| utils.openPage("welcome.html"); | ||
| window.close(); | ||
| } | ||
| }) | ||
| .catch((e) => { | ||
| console.log(e); | ||
| }); | ||
| loadAccountInfo(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <HashRouter> | ||
| <div> | ||
| <Navbar | ||
| title={accountInfo.alias} | ||
| subtitle={ | ||
| typeof accountInfo.balance === "number" | ||
| ? `${accountInfo.balance} sat` | ||
| : "" | ||
| } | ||
| onAccountSwitch={loadAccountInfo} | ||
| onAccountSwitch={getAccountInfo} | ||
| > | ||
| <Navbar.Link href="/publishers">Websites</Navbar.Link> | ||
| <Navbar.Link href="/send">Send</Navbar.Link> | ||
| <Navbar.Link href="/receive">Receive</Navbar.Link> | ||
| <Navbar.Link href="/settings">Settings</Navbar.Link> | ||
| </Navbar> | ||
|
|
||
| <Switch> | ||
| <Redirect from="/home" to="/publishers" /> | ||
| <Route exact path="/"> | ||
| <Redirect to="/publishers" /> | ||
| </Route> | ||
| <Route exact path="/publishers"> | ||
| <Publishers /> | ||
| </Route> | ||
| <Route path="/publishers/:id"> | ||
| <Publisher /> | ||
| </Route> | ||
| <Route path="/send"> | ||
| <Send /> | ||
| </Route> | ||
| <Route path="/receive"> | ||
| <Receive /> | ||
| </Route> | ||
| <Route path="/settings"> | ||
| <Settings /> | ||
| </Route> | ||
| <Route path="/accounts/new"> | ||
| <Container> | ||
| <ChooseConnector /> | ||
| </Container> | ||
| </Route> | ||
| <Route path="/test-connection"> | ||
| <Container> | ||
| <TestConnection /> | ||
| </Container> | ||
| </Route> | ||
| </Switch> | ||
| </HashRouter> | ||
| <Outlet /> | ||
| </div> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| export default Options; |
Oops, something went wrong.