feat: add support for persist storage

App.js

@@ -15,28 +15,24 @@
 import * as React from "react";
 import {PaperProvider} from "react-native-paper";
 import {NavigationContainer} from "@react-navigation/native";
+import {BulletList} from "react-content-loader/native";
+import {SQLiteProvider} from "expo-sqlite";
 import Header from "./Header";
 import NavigationBar from "./NavigationBar";
-import {UserProvider} from "./UserContext";
-import {CasdoorServerProvider} from "./CasdoorServerContext";
+import {migrateDb} from "./TotpDatabase";
 
 const App = () => {
-
- const [userInfo, setUserInfo] = React.useState(null);
- const [token, setToken] = React.useState(null);
- const [casdoorServer, setCasdoorServer] = React.useState(null);
-
  return (
- <CasdoorServerProvider value={{casdoorServer, setCasdoorServer}} >
- <UserProvider value={{userInfo, setUserInfo, token, setToken}} >
+ <React.Suspense fallback={<BulletList />}>
+ <SQLiteProvider databaseName="totp.db" onInit={migrateDb} options={{enableChangeListener: true}}>
  <NavigationContainer>
  <PaperProvider>
  <Header />
  <NavigationBar />
  </PaperProvider>
  </NavigationContainer>
- </UserProvider>
- </CasdoorServerProvider>
+ </SQLiteProvider>
+ </React.Suspense>
  );
 };
 export default App;

CasdoorLoginPage.js

@@ -12,15 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useEffect} from "react";
+import React, {useEffect, useState} from "react";
 import {WebView} from "react-native-webview";
 import {View} from "react-native";
 import {Portal} from "react-native-paper";
 import SDK from "casdoor-react-native-sdk";
-import UserContext from "./UserContext";
 import PropTypes from "prop-types";
 import EnterCasdoorSdkConfig from "./EnterCasdoorSdkConfig";
-import CasdoorServerContext from "./CasdoorServerContext";
+import useStore from "./useStorage";
 // import {LogBox} from "react-native";
 // LogBox.ignoreAllLogs();
 
@@ -29,10 +28,20 @@ const CasdoorLoginPage = ({onWebviewClose}) => {
  CasdoorLoginPage.propTypes = {
  onWebviewClose: PropTypes.func.isRequired,
  };
- const [casdoorLoginURL, setCasdoorLoginURL] = React.useState("");
- const {setUserInfo, setToken} = React.useContext(UserContext);
- const [showConfigPage, setShowConfigPage] = React.useState(true);
- const {casdoorServer} = React.useContext(CasdoorServerContext);
+ const [casdoorLoginURL, setCasdoorLoginURL] = useState("");
+ const [showConfigPage, setShowConfigPage] = useState(true);
+
+ const {
+ serverUrl,
+ clientId,
+ redirectPath,
+ appName,
+ organizationName,
+ getCasdoorConfig,
+ setUserInfo,
+ setToken,
+ } = useStore();
+
  const handleHideConfigPage = () => {
  setShowConfigPage(false);
  };
@@ -42,14 +51,15 @@ const CasdoorLoginPage = ({onWebviewClose}) => {
  };
 
  useEffect(() => {
- if (casdoorServer) {
- sdk = new SDK(casdoorServer);
+ if (serverUrl && clientId && redirectPath && appName && organizationName) {
+ sdk = new SDK(getCasdoorConfig());
  getCasdoorSignInUrl();
  }
- }, [casdoorServer]);
+ }, [serverUrl, clientId, redirectPath, appName, organizationName]);
 
  const onNavigationStateChange = async(navState) => {
- if (navState.url.startsWith(casdoorServer.redirectPath)) {
+ const {redirectPath} = getCasdoorConfig();
+ if (navState.url.startsWith(redirectPath)) {
  onWebviewClose();
  const token = await sdk.getAccessToken(navState.url);
  const userInfo = sdk.JwtDecode(token);
@@ -75,7 +85,9 @@ const CasdoorLoginPage = ({onWebviewClose}) => {
  </Portal>
  );
 };
+
 export const CasdoorLogout = () => {
- sdk.clearState();
+ if (sdk) {sdk.clearState();}
 };
+
 export default CasdoorLoginPage;

EditAccountDetails.js

@@ -29,6 +29,7 @@ export default function EnterAccountDetails({onClose, onEdit, placeholder}) {
  const handleConfirm = () => {
  onEdit(accountName);
  };
+
  return (
  <View style={{flex: 1, justifyContent: "center", alignItems: "center"}}>
  <Text style={{fontSize: 24, marginBottom: 5}}>Enter new account name</Text>

EnterCasdoorSdkConfig.js

@@ -12,52 +12,46 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useState} from "react";
+import React from "react";
 import {Alert, Text, View} from "react-native";
 import {Button, IconButton, Portal, TextInput} from "react-native-paper";
 import DefaultCasdoorSdkConfig from "./DefaultCasdoorSdkConfig";
-import CasdoorServerContext from "./CasdoorServerContext";
 import PropTypes from "prop-types";
+import useStore from "./useStorage";
 
 const EnterCasdoorSdkConfig = ({onClose, onWebviewClose}) => {
  EnterCasdoorSdkConfig.propTypes = {
  onClose: PropTypes.func.isRequired,
  };
- const {setCasdoorServer} = React.useContext(CasdoorServerContext);
 
- const [CasdoorSdkConfig, setCasdoorSdkConfig] = useState({
- serverUrl: "",
- clientId: "",
- appName: "",
- organizationName: "",
- redirectPath: "http://casdoor-app",
- signinPath: "/api/signin",
- });
-
- const handleInputChange = (key, value) => {
- setCasdoorSdkConfig({...CasdoorSdkConfig, [key]: value});
- };
+ const {
+ serverUrl,
+ clientId,
+ redirectPath,
+ appName,
+ organizationName,
+ setServerUrl,
+  setClientId,
+ setAppName,
+  setOrganizationName,
+ setCasdoorConfig,
+ } = useStore();
 
  const closeConfigPage = () => {
  onClose();
  onWebviewClose();
  };
+
  const handleSave = () => {
- if (
- !CasdoorSdkConfig.serverUrl ||
- !CasdoorSdkConfig.clientId ||
- !CasdoorSdkConfig.appName ||
- !CasdoorSdkConfig.organizationName ||
- !CasdoorSdkConfig.redirectPath
- ) {
+ if (!serverUrl || !clientId || !appName || !organizationName || !redirectPath) {
  Alert.alert("Please fill in all the fields!");
  return;
  }
- setCasdoorServer(CasdoorSdkConfig);
  onClose();
  };
+
  const handleUseDefault = () => {
- setCasdoorServer(DefaultCasdoorSdkConfig);
+ setCasdoorConfig(DefaultCasdoorSdkConfig);
  onClose();
  };
 
@@ -68,8 +62,8 @@ const EnterCasdoorSdkConfig = ({onClose, onWebviewClose}) => {
  <Text style={{fontSize: 24, marginBottom: 5}}>Casdoor server</Text>
  <TextInput
  label="Endpoint"
- value={CasdoorSdkConfig.serverUrl}
- onChangeText={(text) => handleInputChange("serverUrl", text)}
+ value={serverUrl}
+ onChangeText={setServerUrl}
  autoCapitalize="none"
  style={{
  borderWidth: 3,
@@ -85,8 +79,8 @@ const EnterCasdoorSdkConfig = ({onClose, onWebviewClose}) => {
  />
  <TextInput
  label="ClientID"
- value={CasdoorSdkConfig.clientId}
- onChangeText={(text) => handleInputChange("clientId", text)}
+ value={clientId}
+ onChangeText={setClientId}
  autoCapitalize="none"
  style={{
  borderWidth: 3,
@@ -102,8 +96,8 @@ const EnterCasdoorSdkConfig = ({onClose, onWebviewClose}) => {
  />
  <TextInput
  label="appName"
- value={CasdoorSdkConfig.appName}
- onChangeText={(text) => handleInputChange("appName", text)}
+ value={appName}
+ onChangeText={setAppName}
  autoCapitalize="none"
  style={{
  borderWidth: 3,
@@ -119,8 +113,8 @@ const EnterCasdoorSdkConfig = ({onClose, onWebviewClose}) => {
  />
  <TextInput
  label="organizationName"
- value={CasdoorSdkConfig.organizationName}
- onChangeText={(text) => handleInputChange("organizationName", text)}
+ value={organizationName}
+ onChangeText={setOrganizationName}
  autoCapitalize="none"
  style={{
  borderWidth: 3,
@@ -173,4 +167,5 @@ const EnterCasdoorSdkConfig = ({onClose, onWebviewClose}) => {
  </Portal>
  );
 };
+
 export default EnterCasdoorSdkConfig;