From 3e9e9534e1ba4a574560bdc2d8cf823548880a77 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Sun, 5 Mar 2023 00:49:07 +0200
Subject: [PATCH] added sensitive info toggle

---
 src/components/layout/SensitiveInfoToggle.js | 25 +++++++++
 src/components/layout/TopBar.js              |  2 +
 src/hooks/index.js                           |  5 +-
 src/index.js                                 | 23 ++++----
 src/providers/SensitiveInfoProvider.js       | 58 ++++++++++++++++++++
 5 files changed, 102 insertions(+), 11 deletions(-)
 create mode 100644 src/components/layout/SensitiveInfoToggle.js
 create mode 100644 src/providers/SensitiveInfoProvider.js

diff --git a/src/components/layout/SensitiveInfoToggle.js b/src/components/layout/SensitiveInfoToggle.js
new file mode 100644
index 0000000..e88e837
--- /dev/null
+++ b/src/components/layout/SensitiveInfoToggle.js
@@ -0,0 +1,25 @@
+import React from "react";
+import { IconButton } from "@material-ui/core";
+import {
+  Visibility as VisibilityIcon,
+  VisibilityOff as VisibilityOffIcon
+} from "@material-ui/icons";
+import { useSensitiveInfo } from "../../hooks";
+
+const SensitiveInfoToggle = () => {
+  const { enabled, onSensitiveInfoEnabled } = useSensitiveInfo();
+
+  const handleChange = () => onSensitiveInfoEnabled(!enabled);
+
+  return (
+    <IconButton
+      aria-label="sensitive-info-toggle"
+      color="inherit"
+      onClick={handleChange}
+    >
+      {enabled ? <VisibilityOffIcon /> : <VisibilityIcon />}
+    </IconButton>
+  );
+};
+
+export default SensitiveInfoToggle;
diff --git a/src/components/layout/TopBar.js b/src/components/layout/TopBar.js
index 026f3a4..b065e81 100644
--- a/src/components/layout/TopBar.js
+++ b/src/components/layout/TopBar.js
@@ -6,6 +6,7 @@ import { AppBar, Toolbar, Typography, IconButton } from "@material-ui/core";
 import MenuIcon from "@material-ui/icons/Menu";
 import ProfileButton from "./ProfileButton";
 import LightDarkToggle from "./LightDarkToggle";
+import SensitiveInfoToggle from "./SensitiveInfoToggle";
 import styles from "./styles";
 
 const useStyles = makeStyles(styles);
@@ -35,6 +36,7 @@ const TopBar = ({ open, handleDrawerOpen }) => {
         <Typography variant="h6" noWrap className={classes.title}>
           Network resurrector
         </Typography>
+        <SensitiveInfoToggle />
         <LightDarkToggle />
         <ProfileButton />
       </Toolbar>
diff --git a/src/hooks/index.js b/src/hooks/index.js
index bc64692..a6f8e8a 100644
--- a/src/hooks/index.js
+++ b/src/hooks/index.js
@@ -1 +1,4 @@
-export { useToast } from "./useToast";
+import { useToast } from "./useToast";
+import { useSensitiveInfo } from "../providers/SensitiveInfoProvider";
+
+export { useToast, useSensitiveInfo };
diff --git a/src/index.js b/src/index.js
index 2dc491a..2706ab8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,20 +6,23 @@ import App from "./components/App";
 import { TuitioProvider } from "@flare/tuitio-client-react";
 import ApplicationStateProvider from "./providers/ApplicationStateProvider";
 import ToastProvider from "./providers/ToastProvider";
+import SensitiveInfoProvider from "./providers/SensitiveInfoProvider";
 import "./utils/i18n";
 
 ReactDOM.render(
   <TuitioProvider tuitioUrl={process.env.REACT_APP_TUITIO_URL}>
-    <ApplicationStateProvider>
-      <ThemeProvider>
-        <CssBaseline />
-        <Suspense fallback={<div>Loading...</div>}>
-          <ToastProvider>
-            <App />
-          </ToastProvider>
-        </Suspense>
-      </ThemeProvider>
-    </ApplicationStateProvider>
+    <ThemeProvider>
+      <CssBaseline />
+      <SensitiveInfoProvider>
+        <ApplicationStateProvider>
+          <Suspense fallback={<div>Loading...</div>}>
+            <ToastProvider>
+              <App />
+            </ToastProvider>
+          </Suspense>
+        </ApplicationStateProvider>
+      </SensitiveInfoProvider>
+    </ThemeProvider>
   </TuitioProvider>,
   document.getElementById("root")
 );
diff --git a/src/providers/SensitiveInfoProvider.js b/src/providers/SensitiveInfoProvider.js
new file mode 100644
index 0000000..7507230
--- /dev/null
+++ b/src/providers/SensitiveInfoProvider.js
@@ -0,0 +1,58 @@
+import React, { useReducer, useMemo, useContext } from "react";
+import PropTypes from "prop-types";
+
+const SensitiveInfoContext = React.createContext();
+
+const initialState = {
+  enabled: false
+};
+
+const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case "onSensitiveInfoEnabled": {
+      return {
+        ...state,
+        enabled: action.payload.enabled
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+};
+
+const dispatchActions = dispatch => ({
+  onSensitiveInfoEnabled: enabled =>
+    dispatch({ type: "onSensitiveInfoEnabled", payload: { enabled } })
+});
+
+const useSensitiveInfo = () => {
+  const { state, actions } = useContext(SensitiveInfoContext);
+  const { enabled } = state;
+  const { onSensitiveInfoEnabled } = actions;
+
+  return { enabled, onSensitiveInfoEnabled };
+};
+
+const SensitiveInfoProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const actions = useMemo(() => dispatchActions(dispatch), [dispatch]);
+
+  return (
+    <SensitiveInfoContext.Provider
+      value={{
+        state,
+        actions
+      }}
+    >
+      {children}
+    </SensitiveInfoContext.Provider>
+  );
+};
+
+SensitiveInfoProvider.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export { SensitiveInfoProvider, useSensitiveInfo };
+export default SensitiveInfoProvider;