From f1e6266c659b7f616ef335414b73dae3e2b93cc1 Mon Sep 17 00:00:00 2001
From: Nikhil Rao <nikhil@pynecone.io>
Date: Mon, 30 Jan 2023 14:35:06 -0800
Subject: [PATCH] Fix format route and code cleanup (#399)

---
 pynecone/compiler/compiler.py        |  2 +-
 pynecone/compiler/templates.py       |  2 +-
 pynecone/components/base/document.py |  9 ++-------
 pynecone/components/component.py     |  5 -----
 pynecone/constants.py                |  5 +++++
 pynecone/style.py                    | 13 ++++---------
 pynecone/utils.py                    |  6 ++++--
 tests/test_utils.py                  |  1 +
 8 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/pynecone/compiler/compiler.py b/pynecone/compiler/compiler.py
index b5788ad2472..3c10c9b9561 100644
--- a/pynecone/compiler/compiler.py
+++ b/pynecone/compiler/compiler.py
@@ -17,7 +17,7 @@
     "next/router": {"useRouter"},
     f"/{constants.STATE_PATH}": {"connect", "updateState", "E"},
     "": {"focus-visible/dist/focus-visible"},
-    "@chakra-ui/react": {"useColorMode"},
+    "@chakra-ui/react": {constants.USE_COLOR_MODE},
 }
 
 
diff --git a/pynecone/compiler/templates.py b/pynecone/compiler/templates.py
index 3977235d047..7ce4c974616 100644
--- a/pynecone/compiler/templates.py
+++ b/pynecone/compiler/templates.py
@@ -199,4 +199,4 @@ def format_state(
 SOCKET = "const socket = useRef(null)"
 
 # Color toggle
-COLORTOGGLE = "const { colorMode, toggleColorMode } = useColorMode()"
+COLORTOGGLE = f"const {{ {constants.COLOR_MODE}, {constants.TOGGLE_COLOR_MODE} }} = {constants.USE_COLOR_MODE}()"
diff --git a/pynecone/components/base/document.py b/pynecone/components/base/document.py
index 28a846b3abf..eaa6990fd74 100644
--- a/pynecone/components/base/document.py
+++ b/pynecone/components/base/document.py
@@ -1,6 +1,7 @@
 """Document components."""
 
 from pynecone.components.component import Component
+from pynecone.components.libs.chakra import ChakraComponent
 
 
 class NextDocumentLib(Component):
@@ -33,13 +34,7 @@ class Script(NextDocumentLib):
     tag = "NextScript"
 
 
-class ChakraUiReactLib(Component):
-    """Chakra UI React document components."""
-
-    library = "@chakra-ui/react"
-
-
-class ColorModeScript(ChakraUiReactLib):
+class ColorModeScript(ChakraComponent):
     """Chakra color mode script."""
 
     tag = "ColorModeScript"
diff --git a/pynecone/components/component.py b/pynecone/components/component.py
index 16399cee315..c9b4e34566a 100644
--- a/pynecone/components/component.py
+++ b/pynecone/components/component.py
@@ -162,11 +162,6 @@ def _create_event_chain(
         Raises:
             ValueError: If the value is not a valid event chain.
         """
-        # If it's a JS var, return it.
-        if isinstance(value, Var):
-            if value.is_local is False and value.is_string is False:
-                return value
-
         # If it's an event chain var, return it.
         if isinstance(value, Var):
             if value.type_ is not EventChain:
diff --git a/pynecone/constants.py b/pynecone/constants.py
index 2aaacd19b3d..3798a956087 100644
--- a/pynecone/constants.py
+++ b/pynecone/constants.py
@@ -226,3 +226,8 @@ class RouteRegex(SimpleNamespace):
 TITLE_404 = "404 - Not Found"
 FAVICON_404 = "favicon.ico"
 DESCRIPTION_404 = "The page was not found"
+
+# Color mode variables
+USE_COLOR_MODE = "useColorMode"
+COLOR_MODE = "colorMode"
+TOGGLE_COLOR_MODE = "toggleColorMode"
diff --git a/pynecone/style.py b/pynecone/style.py
index 379a106b1f6..cfbcf0162a8 100644
--- a/pynecone/style.py
+++ b/pynecone/style.py
@@ -2,17 +2,12 @@
 
 from typing import Optional
 
-from pynecone import utils
-from pynecone.var import Var
+from pynecone import constants, utils
+from pynecone.event import EventChain
+from pynecone.var import BaseVar, Var
 
 
-def toggle_color_mode():
-    """Toggle the color mode.
-
-    Returns:
-        Toggle color mode JS event as a variable
-    """
-    return Var.create(value="toggleColorMode", is_local=False, is_string=False)
+toggle_color_mode = BaseVar(name=constants.TOGGLE_COLOR_MODE, type_=EventChain)
 
 
 def convert(style_dict):
diff --git a/pynecone/utils.py b/pynecone/utils.py
index 75d1f248e13..b3908ec1cf8 100644
--- a/pynecone/utils.py
+++ b/pynecone/utils.py
@@ -952,12 +952,14 @@ def format_route(route: str) -> str:
     Returns:
         The formatted route.
     """
+    # Strip the route.
+    route = route.strip("/")
+    route = to_snake_case(route).replace("_", "-")
+
     # If the route is empty, return the index route.
     if route == "":
         return constants.INDEX_ROUTE
 
-    route = route.strip("/")
-    route = to_snake_case(route).replace("_", "-")
     return route
 
 
diff --git a/tests/test_utils.py b/tests/test_utils.py
index 11cdfb99883..0e56e6a8ac2 100644
--- a/tests/test_utils.py
+++ b/tests/test_utils.py
@@ -210,6 +210,7 @@ def test_is_generic_alias(cls: type, expected: bool):
     "route,expected",
     [
         ("", "index"),
+        ("/", "index"),
         ("custom-route", "custom-route"),
         ("custom-route/", "custom-route"),
         ("/custom-route", "custom-route"),