From c020cce56b8f80796c43490c6d4965e17dc0f83f Mon Sep 17 00:00:00 2001
From: Luis-Hebendanz <luis.nixos@gmail.com>
Date: Mon, 14 Aug 2023 19:08:15 +0200
Subject: [PATCH] UI: Replaced enum infavor of hash keys

---
 pkgs/ui/src/app/layout.tsx         | 14 ++++++++++++++
 pkgs/ui/src/app/nodes/NodeList.tsx |  4 ++--
 pkgs/ui/src/data/nodeData.tsx      | 14 ++++++++------
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/pkgs/ui/src/app/layout.tsx b/pkgs/ui/src/app/layout.tsx
index 208d3e8..8043492 100644
--- a/pkgs/ui/src/app/layout.tsx
+++ b/pkgs/ui/src/app/layout.tsx
@@ -8,6 +8,7 @@ import {
   IconButton,
   ThemeProvider,
   useMediaQuery,
+  useTheme,
 } from "@mui/material";
 import { ChangeEvent, useState } from "react";
 
@@ -38,8 +39,21 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   const userPrefersDarkmode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useTheme();
+  const is_small = useMediaQuery(theme.breakpoints.down("sm"));
+
   let [useDarkTheme, setUseDarkTheme] = useState(false);
   let [showSidebar, setShowSidebar] = useState(true);
+
+  // If the screen is small, hide the sidebar
+  React.useEffect(() => {
+    if (is_small) {
+      setShowSidebar(false);
+    } else {
+      setShowSidebar(true);
+    }
+  }, [is_small]);
+
   React.useEffect(() => {
     if (useDarkTheme !== userPrefersDarkmode) {
       // Enable dark theme if the user prefers dark mode
diff --git a/pkgs/ui/src/app/nodes/NodeList.tsx b/pkgs/ui/src/app/nodes/NodeList.tsx
index 2228e7b..b0bac51 100644
--- a/pkgs/ui/src/app/nodes/NodeList.tsx
+++ b/pkgs/ui/src/app/nodes/NodeList.tsx
@@ -41,7 +41,7 @@ import {
 } from "@mui/material";
 import hexRgb from "hex-rgb";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { NodeStatus, TableData } from "@/data/nodeData";
+import { NodeStatus, NodeStatusKeys, TableData } from "@/data/nodeData";
 
 interface HeadCell {
   disablePadding: boolean;
@@ -379,7 +379,7 @@ function Row(props: {
   selected: string | undefined;
   setSelected: (a: string | undefined) => void;
 }) {
-  function renderStatus(status: NodeStatus) {
+  function renderStatus(status: NodeStatusKeys) {
     switch (status) {
       case NodeStatus.Online:
         return (
diff --git a/pkgs/ui/src/data/nodeData.tsx b/pkgs/ui/src/data/nodeData.tsx
index ed15e1e..9a73d03 100644
--- a/pkgs/ui/src/data/nodeData.tsx
+++ b/pkgs/ui/src/data/nodeData.tsx
@@ -1,20 +1,22 @@
 export interface TableData {
   name: string;
   id: string;
-  status: NodeStatus;
+  status: NodeStatusKeys;
   last_seen: number;
 }
 
-export enum NodeStatus {
-  Online,
-  Offline,
-  Pending,
+export const NodeStatus = {
+  Online: "Online",
+  Offline: "Offline",
+  Pending: "Pending",
 }
 
+export type NodeStatusKeys = typeof NodeStatus[keyof typeof NodeStatus];
+
 function createData(
   name: string,
   id: string,
-  status: NodeStatus,
+  status: NodeStatusKeys,
   last_seen: number,
 ): TableData {
   return {