From 1d431a649f331bde77c233305910e6dc33117428 Mon Sep 17 00:00:00 2001
From: lyc8503 <admin@lyc8503.site>
Date: Mon, 23 Oct 2023 00:54:26 +0800
Subject: [PATCH] disable ssr & dark mode & bar

---
 components/DetailChart.tsx   |  3 +++
 components/MonitorDetail.tsx |  5 +++--
 components/NoSsr.tsx         | 10 ++++++++++
 components/OverallStatus.tsx |  2 +-
 pages/_app.tsx               | 14 +++++++-------
 5 files changed, 24 insertions(+), 10 deletions(-)
 create mode 100644 components/NoSsr.tsx

diff --git a/components/DetailChart.tsx b/components/DetailChart.tsx
index 8b712cb..5f35d83 100644
--- a/components/DetailChart.tsx
+++ b/components/DetailChart.tsx
@@ -39,6 +39,9 @@ export default function DetailChart({ monitor, state }: { monitor: MonitorTarget
       mode: 'index' as const,
       intersect: false,
     },
+    animation: {
+      duration: 0
+    },
     plugins: {
       tooltip: {
         callbacks: {
diff --git a/components/MonitorDetail.tsx b/components/MonitorDetail.tsx
index 1a63792..9bb35b5 100644
--- a/components/MonitorDetail.tsx
+++ b/components/MonitorDetail.tsx
@@ -3,6 +3,7 @@ import { Text, Tooltip } from "@mantine/core"
 import { MonitorState, MonitorTarget } from "@/uptime.types";
 import { IconAlertCircle, IconCircleCheck } from "@tabler/icons-react";
 import DetailChart from "./DetailChart";
+import NoSsr from "./NoSsr";
 
 function getColor(percent: number | string, darker: boolean): string {
   percent = Number(percent)
@@ -50,10 +51,10 @@ export default function MonitorDetail({ monitor, state }: { monitor: MonitorTarg
     let dayDownTime = 0
     let dayTotalTime = 0
 
-    if (state.incident[monitor.id][0].end)
+    // if (state.incident[monitor.id][0].end)
 
     uptimePercentBars.push(
-      <Tooltip label="Tooltip">
+      <Tooltip key={i} label="Tooltip">
         <div style={{ height: '20px', width: '0.8%', background: 'green', borderRadius: '2px', marginLeft: '0.155%', marginRight: '0.155%' }}/>
       </Tooltip>
     )
diff --git a/components/NoSsr.tsx b/components/NoSsr.tsx
new file mode 100644
index 0000000..19deb96
--- /dev/null
+++ b/components/NoSsr.tsx
@@ -0,0 +1,10 @@
+import dynamic from 'next/dynamic'
+import React from 'react'
+
+const NoSsr = (props: { children: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | React.PromiseLikeOfReactNode | null | undefined }) => (
+  <React.Fragment>{props.children}</React.Fragment>
+)
+
+export default dynamic(() => Promise.resolve(NoSsr), {
+  ssr: false
+})
diff --git a/components/OverallStatus.tsx b/components/OverallStatus.tsx
index 35351e9..d740622 100644
--- a/components/OverallStatus.tsx
+++ b/components/OverallStatus.tsx
@@ -21,7 +21,7 @@ export default function OverallStatus({ state }: { state: { overallUp: number, o
       {icon}
     </Center>
     <Title mt="sm" style={{ textAlign: 'center' }} order={1}>{statusString}</Title>
-    <Title mt="sm" style={{ textAlign: 'center', color: '#70778c' }} order={5}>Last updated on: {new Date(state.lastUpdate * 1000).toLocaleString()} ({Math.round(Date.now() / 1000) - state.lastUpdate} sec ago)</Title>
+    <Title mt="sm" style={{ textAlign: 'center', color: '#70778c' }} order={5}>Last updated on: {`${new Date(state.lastUpdate * 1000).toLocaleString()} (${Math.round(Date.now() / 1000) - state.lastUpdate} sec ago)`}</Title>
   </>)
 }
 
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 60572f6..18decb7 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,15 +1,15 @@
 import '@mantine/core/styles.css';
 import type { AppProps } from 'next/app'
-import { MantineProvider, createTheme } from '@mantine/core';
+import { MantineProvider } from '@mantine/core';
+import NoSsr from '@/components/NoSsr';
 
-const theme = createTheme({
-  /** Put your mantine theme override here */
-});
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <MantineProvider theme={theme}>
-      <Component {...pageProps} />
-    </MantineProvider>
+    <NoSsr>
+      <MantineProvider defaultColorScheme='auto'>
+        <Component {...pageProps} />
+      </MantineProvider>
+    </NoSsr>
   )
 }