create useFeatures and FeaturesProvider

3 files changed, 43 insertions, 10 deletions

diff --git a/src/hooks/useFeatures.js b/src/hooks/useFeatures.js
new file mode 100644
index 0000000..b91399e
--- /dev/null
+++ b/src/hooks/useFeatures.js
@@ -0,0 +1,28 @@
+import React from "react";
+import { useEffect } from "react";
+
+const FeaturesContext = React.createContext();
+
+export function FeaturesProvider({ children }) {
+    const [features, setFeatures] = React.useState([]);
+
+    useEffect(() => {
+        fetch('/api/v1/features')
+            .then(response => response.json())
+            .then(data => {
+                console.debug("features:", data);
+                setFeatures(data);
+            })
+            .catch(error => {
+                console.error(error);
+            });
+    }, []);
+
+    return <FeaturesContext.Provider value={features}>
+        {children}
+    </FeaturesContext.Provider>
+}
+
+export function useFeatures() {
+    return React.useContext(FeaturesContext);
+}
diff --git a/src/index.js b/src/index.js
index ea84600..a679253 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,24 +1,27 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
 import './index.css';
-// import App from './App';
 import SignUp from './routes/SignUp.js';
 import Login from './routes/Login';
 import reportWebVitals from './reportWebVitals';
 import { AuthProvider } from './hooks/useAuth';
+import { FeaturesProvider } from './hooks/useFeatures';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
+
 root.render(
   <React.StrictMode>
     <AuthProvider>
-      <BrowserRouter>
-        <Routes>
-          { /* <Route path="/" element={<Home />} /> */}
-          <Route path="login" element={<Login />} />
-          <Route path="signup" element={<SignUp />} />
-        </Routes>
-      </BrowserRouter>
+      <FeaturesProvider>
+        <BrowserRouter>
+          <Routes>
+            { /* <Route path="/" element={<Home />} /> */}
+            <Route path="login" element={<Login />} />
+            <Route path="signup" element={<SignUp />} />
+          </Routes>
+        </BrowserRouter>
+      </FeaturesProvider>
     </AuthProvider>
   </React.StrictMode>
 );
diff --git a/src/routes/Login.js b/src/routes/Login.js
index 49ec5ed..85e0f88 100644
--- a/src/routes/Login.js
+++ b/src/routes/Login.js
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import React from "react";
 import {
   Routes,
@@ -12,6 +12,7 @@ import {
 import Button from "../uikit/Button.js";
 import Input from "../uikit/Input.js";
 import { useAuth } from "../hooks/useAuth";
+import { useFeatures } from "../hooks/useFeatures";
 import { isExpired } from "react-jwt";
 import { styled } from "@stitches/react";
 import { debounce } from "lodash";
@@ -62,6 +63,7 @@ function Login(props) {
   let auth = useAuth();
   let navigate = useNavigate();
   let location = useLocation();
+  let features = useFeatures();
   const [totpRequired, setTotpRequired] = useState(false);
 
   let from = location.state?.from?.pathname || "/";