From 4ccc7dba204824e1aeb83138af90989366a1f66b Mon Sep 17 00:00:00 2001 From: psankhe28 Date: Wed, 6 Mar 2024 20:16:28 +0530 Subject: [PATCH 1/4] Added toggle for dark mode and local storage functionality --- src/components/Layout.js | 14 ++++++++++++-- src/components/Navbar.js | 19 +++++++++---------- 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/src/components/Layout.js b/src/components/Layout.js index 302bcc9..9d05386 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -20,13 +20,15 @@ import TaskCreateRuns from './TaskCreate'; const Layout = () => { const [scroll, setScroll] = useState(0); - const [darkMode, setDarkMode] = useState(false); const [isLoggedIn, setIsLoggedIn] = useState('loading'); const [userData, setUserData] = useState({}); const location = useLocation(); const params = new URLSearchParams(location.hash); const navigate = useNavigate(); + const storedDarkMode = JSON.parse(localStorage.getItem('darkMode')); + const [darkMode, setDarkMode] = useState(storedDarkMode || false); + function arr2obj(arr) { const obj = {}; arr.forEach((v) => { @@ -51,7 +53,7 @@ const Layout = () => { navigate('/'); } if (!param) { - setIsLoggedIn('false'); + setIsLoggedIn('true'); } else { setIsLoggedIn('loading'); (async function () { @@ -80,10 +82,18 @@ const Layout = () => { }; }); + useEffect(() => { + if (darkMode) { + document.body.classList.add('dark'); + document.body.classList.add('bg-gray-800'); + } + }, [darkMode]); + const toggleDarkMode = () => { document.body.classList.toggle('dark'); document.body.classList.toggle('bg-gray-800'); setDarkMode(!darkMode); + localStorage.setItem('darkMode', JSON.stringify(!darkMode)); }; const showToast = (type, msg) => { diff --git a/src/components/Navbar.js b/src/components/Navbar.js index ce55b2b..1785ee2 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -4,11 +4,12 @@ import Avatar from 'react-avatar'; import { Menu, MenuItem, MenuButton } from '@szhsin/react-menu'; import { host_uri } from '../config'; import { confirmAlert } from 'react-confirm-alert'; +import DarkModeToggle from 'react-dark-mode-toggle'; const Navbar = ({ scroll, - toggleDarkMode, darkMode, + toggleDarkMode, isLoggedIn, userData, setIsLoggedIn, @@ -19,9 +20,7 @@ const Navbar = ({ const getAccessToken = () => { const localStorageData = localStorage.params; - // console.log(localStorageData) if (!localStorageData) { - // console.warn(`nothing in localStorage`); return; } const localStorageDataJson = JSON.parse(localStorageData); @@ -42,7 +41,6 @@ const Navbar = ({ const handleCopyToClipboard = () => { if (accessToken === undefined) getAccessToken(); navigator.clipboard.writeText(accessToken); - // console.log(accessToken); showToast('success', 'Copied to clipboard'); }; @@ -50,7 +48,7 @@ const Navbar = ({ confirmAlert({ customUI: ({ onClose }) => { return ( -
+

Are you sure to logout from{' '} KRINI? @@ -100,7 +98,6 @@ const Navbar = ({ : 'bg-white z-10 fixed w-full shadow-lg py-5 pt-10 md:px-32 px-10 flex justify-between items-center' } > - {/*
*/}
@@ -135,14 +132,18 @@ const Navbar = ({
) : ( -
+
+
{ - // console.log(showOption); setShowOption(!showOption); }} > @@ -174,8 +175,6 @@ const Navbar = ({
)} - - {/*
*/}
); }; From 446c989ecb1dd98aa0031af4a5ad97ae5fc67d0e Mon Sep 17 00:00:00 2001 From: Pratiksha Sankhe Date: Wed, 6 Mar 2024 20:18:08 +0530 Subject: [PATCH 2/4] Update Layout.js --- src/components/Layout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Layout.js b/src/components/Layout.js index 9d05386..c1b849c 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -53,7 +53,7 @@ const Layout = () => { navigate('/'); } if (!param) { - setIsLoggedIn('true'); + setIsLoggedIn('false'); } else { setIsLoggedIn('loading'); (async function () { From debe68bc3bea0ffe7d1025d1d1a0c850b3bb9cda Mon Sep 17 00:00:00 2001 From: psankhe28 Date: Wed, 6 Mar 2024 20:29:11 +0530 Subject: [PATCH 3/4] Fixed the code --- src/components/Navbar.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 1785ee2..9a8b1ee 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -8,8 +8,8 @@ import DarkModeToggle from 'react-dark-mode-toggle'; const Navbar = ({ scroll, - darkMode, toggleDarkMode, + darkMode, isLoggedIn, userData, setIsLoggedIn, @@ -20,7 +20,9 @@ const Navbar = ({ const getAccessToken = () => { const localStorageData = localStorage.params; + // console.log(localStorageData) if (!localStorageData) { + // console.warn(`nothing in localStorage`); return; } const localStorageDataJson = JSON.parse(localStorageData); @@ -41,6 +43,7 @@ const Navbar = ({ const handleCopyToClipboard = () => { if (accessToken === undefined) getAccessToken(); navigator.clipboard.writeText(accessToken); + // console.log(accessToken); showToast('success', 'Copied to clipboard'); }; @@ -98,6 +101,7 @@ const Navbar = ({ : 'bg-white z-10 fixed w-full shadow-lg py-5 pt-10 md:px-32 px-10 flex justify-between items-center' } > + {/*
*/}
@@ -144,6 +148,7 @@ const Navbar = ({
{ + // console.log(showOption); setShowOption(!showOption); }} > @@ -175,6 +180,8 @@ const Navbar = ({
)} + + {/*
*/}
); }; From 8c758ffacb0d98401f7328f848f4da3451d7b831 Mon Sep 17 00:00:00 2001 From: Prati28 Date: Sat, 20 Apr 2024 01:23:04 +0530 Subject: [PATCH 4/4] Fixing failed tests --- package-lock.json | 10 ++++++++++ package.json | 1 + 2 files changed, 11 insertions(+) diff --git a/package-lock.json b/package-lock.json index 94ad76c..062b261 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "react": "^18.1.0", "react-avatar": "^4.1.0", "react-confirm-alert": "^2.8.0", + "react-dark-mode-toggle": "^0.2.0", "react-dom": "^18.1.0", "react-fast-marquee": "^1.3.2", "react-files": "^3.0.0-alpha.3", @@ -16526,6 +16527,15 @@ "react-dom": ">=16.0.0" } }, + "react-dark-mode-toggle": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/react-dark-mode-toggle/-/react-dark-mode-toggle-0.2.0.tgz", + "integrity": "sha512-YGN6EKU54TaEIQ2G5veB+XVRXSsbyrW9+rop/1Ap06A0z1j6QBVuMIZjhQpwYLKVhSPIxoe7zsWj0cZaEf7cQA==", + "requires": { + "parse-unit": "^1.0.1", + "react-lottie-player": "^1.1.1" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", diff --git a/package.json b/package.json index 88ddd3e..7438ebb 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react": "^18.1.0", "react-avatar": "^4.1.0", "react-confirm-alert": "^2.8.0", + "react-dark-mode-toggle": "^0.2.0", "react-dom": "^18.1.0", "react-fast-marquee": "^1.3.2", "react-files": "^3.0.0-alpha.3",