From 76327f8e75c78f696c109a9f20934d17ed73853e Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Thu, 12 May 2022 14:25:28 +0530
Subject: [PATCH] update ThemeSwitcher

---
 src/components/Sidebar/ThemeSwitcher.tsx | 35 +++++++++++++++++++-----
 src/components/Sidebar/ThemeToggler.tsx  | 30 --------------------
 src/utils/storage/localStorage.ts        |  1 +
 3 files changed, 29 insertions(+), 37 deletions(-)
 delete mode 100644 src/components/Sidebar/ThemeToggler.tsx

diff --git a/src/components/Sidebar/ThemeSwitcher.tsx b/src/components/Sidebar/ThemeSwitcher.tsx
index f1abf452d..31c91fbc3 100644
--- a/src/components/Sidebar/ThemeSwitcher.tsx
+++ b/src/components/Sidebar/ThemeSwitcher.tsx
@@ -1,9 +1,30 @@
-import React, { useState } from 'react';
+import { ToggleButton, ToggleButtonGroup } from '@mui/material';
+import React from 'react';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
 import { THEMES } from 'types/theme';
-import ThemeToggler from './ThemeToggler';
-
-export default function ThemeSwitcher() {
-    const [theme, setTheme] = useState<THEMES>(THEMES.DARK);
-
-    return <ThemeToggler theme={theme} setTheme={setTheme} />;
+interface Iprops {
+    theme: THEMES;
+    setTheme: (theme: THEMES) => void;
+}
+export default function ThemeSwitcher({ theme, setTheme }: Iprops) {
+    const handleChange = (event, theme: THEMES) => {
+        setTheme(theme);
+    };
+
+    return (
+        <ToggleButtonGroup
+            color="primary"
+            size="small"
+            value={theme}
+            exclusive
+            onChange={handleChange}>
+            <ToggleButton value={THEMES.LIGHT}>
+                <LightModeIcon />
+            </ToggleButton>
+            <ToggleButton value={THEMES.DARK}>
+                <DarkModeIcon />
+            </ToggleButton>
+        </ToggleButtonGroup>
+    );
 }
diff --git a/src/components/Sidebar/ThemeToggler.tsx b/src/components/Sidebar/ThemeToggler.tsx
deleted file mode 100644
index 3d65410ee..000000000
--- a/src/components/Sidebar/ThemeToggler.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { ToggleButton, ToggleButtonGroup } from '@mui/material';
-import React from 'react';
-import DarkModeIcon from '@mui/icons-material/DarkMode';
-import LightModeIcon from '@mui/icons-material/LightMode';
-import { THEMES } from 'types/theme';
-interface Iprops {
-    theme: THEMES;
-    setTheme: (theme: THEMES) => void;
-}
-export default function ThemeToggler({ theme, setTheme }: Iprops) {
-    const handleChange = (event, theme: THEMES) => {
-        setTheme(theme);
-    };
-
-    return (
-        <ToggleButtonGroup
-            color="primary"
-            size="small"
-            value={theme}
-            exclusive
-            onChange={handleChange}>
-            <ToggleButton value={THEMES.LIGHT}>
-                <LightModeIcon />
-            </ToggleButton>
-            <ToggleButton value={THEMES.DARK}>
-                <DarkModeIcon />
-            </ToggleButton>
-        </ToggleButtonGroup>
-    );
-}
diff --git a/src/utils/storage/localStorage.ts b/src/utils/storage/localStorage.ts
index 9e5cbc74d..79b9c6aee 100644
--- a/src/utils/storage/localStorage.ts
+++ b/src/utils/storage/localStorage.ts
@@ -18,6 +18,7 @@ export enum LS_KEYS {
     LOGS = 'logs',
     USER_DETAILS = 'userDetails',
     COLLECTION_SORT_BY = 'collectionSortBy',
+    THEME = 'theme',
 }
 
 export const setData = (key: LS_KEYS, value: object) => {