Fix build issue

thanhlmm · Sep 8, 2022 · cef90bc · cef90bc
1 parent 0dac666
commit cef90bc
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 10 deletions.
diff --git a/vite/src/components/Property/MonacoProperty.tsx b/vite/src/components/Property/MonacoProperty.tsx
@@ -1,5 +1,6 @@
 import { actionUpdateDoc } from "@/atoms/firestore.action";
 import { monacoDataErrorAtom } from "@/atoms/ui";
+import { appThemeAtom } from "@/atoms/ui.action";
 import { ClientDocumentSnapshot } from "@/types/ClientDocumentSnapshot";
 import {
   addFirebaseDocSerializeMetaData,
@@ -67,13 +68,12 @@ const deserializeData = (
 };
 
 const MonacoProperty = ({ doc }: IMonacoPropertyProps) => {
-  const theme = useTheme();
-  console.log({ theme });
   const [defaultValue, setDefaultValue] = useState<string | undefined>(
     serializeData(doc)
   );
   const editorView = useRef<any>();
   const setError = useSetRecoilState(monacoDataErrorAtom(doc.ref.path));
+  const appTheme = useRecoilValue(appThemeAtom);
 
   const monaco = useMonaco();
 
@@ -149,11 +149,7 @@ const MonacoProperty = ({ doc }: IMonacoPropertyProps) => {
         defaultLanguage="json"
         value={defaultValue}
         height="100%"
-        theme={
-          theme.name === "light"
-            ? "monacoProperty-light"
-            : "monacoProperty-dark"
-        }
+        theme={appTheme ? "monacoProperty-light" : "monacoProperty-dark"}
         wrapperClassName="border border-gray-300 dark:border-gray-700 pt-2 pb-2"
         onChange={setDefaultValue}
         onValidate={handleEditorValidation}

diff --git a/vite/src/index.tsx b/vite/src/index.tsx
@@ -12,7 +12,9 @@ import "./config";
 import "./firebase";
 
 try {
-  const userSettings = JSON.parse(localStorage.getItem("user-settings"));
+  const userSettings = JSON.parse(
+    localStorage.getItem("user-settings") || "{}"
+  );
   setTheme(userSettings["ui/appTheme"]);
 } catch (error) {
   console.log(error);

diff --git a/vite/src/tabs.tsx b/vite/src/tabs.tsx
@@ -3,12 +3,12 @@ import ReactDOM from "react-dom";
 import "./styles/tailwind.css";
 import * as serviceWorker from "./serviceWorker";
 import { ThemeProvider } from "@zendeskgarden/react-theming";
-import { theme } from "./styles/theme";
+import { lightTheme } from "./styles/theme";
 // import { RecoilExternalStatePortal } from "./atoms/RecoilExternalStatePortal";
 import TabsPage from "./pages/Tabs";
 
 ReactDOM.render(
-  <ThemeProvider theme={theme} focusVisibleRef={null}>
+  <ThemeProvider theme={lightTheme} focusVisibleRef={null}>
     <TabsPage />
   </ThemeProvider>,
   document.getElementById("root")