diff --git a/locales/en.json b/locales/en.json index 53524fe..0cb0d76 100644 --- a/locales/en.json +++ b/locales/en.json @@ -29,6 +29,9 @@ "COMMENT_FOR_TRANSLATOR_2": "the next string is used to change the text 'with' in the sentence 'with '", "with": "with" }, + "settings": { + "componentLoadTimes": "Component load times (some of them)" + }, "footer": { "COMMENT_FOR_TRANSLATOR": "Keep all the strings here as lowercase. It kinda gives a good vibe to the text :D", "web": "front page", diff --git a/package.json b/package.json index cae4296..b091de9 100644 --- a/package.json +++ b/package.json @@ -29,13 +29,15 @@ "i18next": "^23.4.4", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-i18next": "^13.1.2" + "react-i18next": "^13.1.2", + "to-boolean": "^1.0.0" }, "devDependencies": { "@swc/cli": "^0.1.62", "@swc/core": "^1.3.70", "@types/react": "^18.2.14", "@types/react-dom": "^18.2.6", + "@types/to-boolean": "^1.0.0", "@typescript-eslint/eslint-plugin": "^5.61.0", "@typescript-eslint/parser": "^5.61.0", "@vitejs/plugin-react-swc": "^3.3.2", diff --git a/src/App.tsx b/src/App.tsx index c222ee6..e2fd289 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,6 +4,7 @@ import './FunctionalityCard.js'; import FunctionalityCard from './FunctionalityCard.js'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import LanguageSelector from './LanguageSelector'; +import Settings from './Settings'; const darkTheme = createTheme({ palette: { @@ -18,6 +19,7 @@ function App() { return (
+

~$ sern

diff --git a/src/ComponentLoadTimeWidget.css b/src/ComponentLoadTimeWidget.css new file mode 100644 index 0000000..e69de29 diff --git a/src/ComponentLoadTimeWidget.tsx b/src/ComponentLoadTimeWidget.tsx new file mode 100644 index 0000000..5fc1793 --- /dev/null +++ b/src/ComponentLoadTimeWidget.tsx @@ -0,0 +1,7 @@ +import './ComponentLoadTimeWidget.css' + +export default function ComponentLoadTimeWidget(props: { state: { show: boolean, ad: number, bd: number } }) { + return ( +

hi from the widget

+ ) +} \ No newline at end of file diff --git a/src/Settings.css b/src/Settings.css new file mode 100644 index 0000000..ff1b862 --- /dev/null +++ b/src/Settings.css @@ -0,0 +1,13 @@ +.boxStyle { + /* background-color: 'background.paper'; set in sx property of Box tag */ + transform: translate(-50%, -50%); + position: absolute; + top: 50%; + left: 50%; + width: 74.6vw; + height: 74.6vh; + border: 2px solid #FFF; + box-shadow: 24px; + padding: 40px; + color: white; +} \ No newline at end of file diff --git a/src/Settings.tsx b/src/Settings.tsx new file mode 100644 index 0000000..32e08f9 --- /dev/null +++ b/src/Settings.tsx @@ -0,0 +1,73 @@ +import './Settings.css'; +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import Modal from '@mui/material/Modal'; +import SettingsIcon from '@mui/icons-material/Settings'; +import Checkbox from '@mui/material/Checkbox'; +import { useTranslation } from 'react-i18next'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import FormGroup from '@mui/material/FormGroup'; +import { Profiler } from 'react'; +import ComponentLoadTimeWidget from './ComponentLoadTimeWidget'; + +export default function Settings() { + const [CLTW, setCLTW] = React.useState({ show: false, ad: 0, bd: 0 }) + const onRender = (_id: string, _phase: string, actualDuration: number, baseDuration: number, _startTime: EpochTimeStamp, _commitTime: EpochTimeStamp) => { + if (!!window.localStorage.getItem('componentLoadTimes')) { + setCLTW({ + show: true, + ad: actualDuration, + bd: baseDuration + }) + } + } + + const { t } = useTranslation('translation', { keyPrefix: 'settings' }); + const [state, setState] = React.useState({ + componentLoadTimes: !!window.localStorage.getItem('componentLoadTimes') + }); + const { componentLoadTimes } = state; + + const [open, setOpen] = React.useState(false); + const handleModalOpen = () => setOpen(true); + const handleModalClose = () => setOpen(false); + + const handleButtonChange = (event: React.ChangeEvent) => { + setState({ ...state, [event.target.name]: event.target.checked }); + switch (event.target.name) { + case 'componentLoadTimes': + return window.localStorage.setItem('componentLoadTimes', event.target.checked.toString()) + } + console.log(state) + } + + return ( +
+ + + + + + + + Debugging + + + } + label={t('componentLoadTimes')} + /> + + + + +
+ ) +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index ecce5f3..e939299 100644 --- a/yarn.lock +++ b/yarn.lock @@ -915,6 +915,11 @@ resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.0.tgz#591c1ce3a702c45ee15f47a42ade72c2fd78978a" integrity sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw== +"@types/to-boolean@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@types/to-boolean/-/to-boolean-1.0.0.tgz#bce7dd64d2d4dc644d39c69f4cdf62867e1bd5dd" + integrity sha512-rKY7I5UUlC3mUjGasRsZyg/ksLqUDQMahpn0QWXA3nxZehZF25rJpbvTB37Vjd61iW3j662L3Iu/WlRdGlDcJQ== + "@types/verror@^1.10.3": version "1.10.6" resolved "https://registry.yarnpkg.com/@types/verror/-/verror-1.10.6.tgz#3e600c62d210c5826460858f84bcbb65805460bb" @@ -3946,6 +3951,11 @@ tmp@^0.2.0: dependencies: rimraf "^3.0.0" +to-boolean@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/to-boolean/-/to-boolean-1.0.0.tgz#840653cc95abde6ae7fa259e7d74868a91232e3f" + integrity sha512-6BregB7cU5D+BVONyLbjoOd3dZXWDNyz6GFu+WdTzd5YbLcgFdZFstwsSgEmELmjdWy9U5e38q2sYSlFhka/Lw== + to-fast-properties@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"