added sensitive info toggle

master
Tudor Stanciu 2023-03-05 00:49:07 +02:00
parent fea35bab90
commit 3e9e9534e1
5 changed files with 102 additions and 11 deletions

View File

@ -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;

View File

@ -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>

View File

@ -1 +1,4 @@
export { useToast } from "./useToast";
import { useToast } from "./useToast";
import { useSensitiveInfo } from "../providers/SensitiveInfoProvider";
export { useToast, useSensitiveInfo };

View File

@ -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")
);

View File

@ -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;