format code and no semi

lyc8503 · Nov 5, 2023 · 8761170 · 8761170
1 parent eba65bd
commit 8761170
Show file tree

Hide file tree

Showing 11 changed files with 132 additions and 154 deletions.
diff --git a/.prettierrc → .prettierrc.yaml b/.prettierrc → .prettierrc.yaml
@@ -2,3 +2,4 @@ trailingComma: 'es5'
 tabWidth: 2
 semi: false
 singleQuote: true
+printWidth: 100
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -3,11 +3,7 @@ import classes from '@/styles/Header.module.css'
 import config from '@/uptime.config'
 
 export default function Header() {
-  const linkToElement = (link: {
-    label: string
-    link: string
-    highlight?: boolean
-  }) => {
+  const linkToElement = (link: { label: string; link: string; highlight?: boolean }) => {
     return (
       <a
         key={link.label}
@@ -46,9 +42,7 @@ export default function Header() {
         </Group>
 
         <Group gap={5} hiddenFrom="sm">
-          {config.page.links
-            .filter((link) => link.highlight)
-            .map(linkToElement)}
+          {config.page.links.filter((link) => link.highlight).map(linkToElement)}
         </Group>
       </Container>
     </header>

diff --git a/components/MonitorDetail.tsx b/components/MonitorDetail.tsx
@@ -31,21 +31,17 @@ export default function MonitorDetail({
           {monitor.name}
         </Text>
         <Text mt="sm" fw={700}>
-          No data available, please make sure you have deployed your workers
-          with latest config and check your worker status!
+          No data available, please make sure you have deployed your workers with latest config and
+          check your worker status!
         </Text>
       </>
     )
 
   const statusIcon =
     state.incident[monitor.id].slice(-1)[0].end === undefined ? (
-      <IconAlertCircle
-        style={{ width: '1.25em', height: '1.25em', color: '#b91c1c' }}
-      />
+      <IconAlertCircle style={{ width: '1.25em', height: '1.25em', color: '#b91c1c' }} />
     ) : (
-      <IconCircleCheck
-        style={{ width: '1.25em', height: '1.25em', color: '#059669' }}
-      />
+      <IconCircleCheck style={{ width: '1.25em', height: '1.25em', color: '#059669' }} />
     )
 
   let totalTime = Date.now() / 1000 - state.incident[monitor.id][0].start[0]
@@ -56,26 +52,15 @@ export default function MonitorDetail({
 
   console.log(totalTime)
   console.log(downTime)
-  const uptimePercent = (
-    ((totalTime - downTime) / totalTime) *
-    100
-  ).toPrecision(4)
+  const uptimePercent = (((totalTime - downTime) / totalTime) * 100).toPrecision(4)
 
   return (
     <>
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-        <Text
-          mt="sm"
-          fw={700}
-          style={{ display: 'inline-flex', alignItems: 'center' }}
-        >
+        <Text mt="sm" fw={700} style={{ display: 'inline-flex', alignItems: 'center' }}>
           {statusIcon} {monitor.name}
         </Text>
-        <Text
-          mt="sm"
-          fw={700}
-          style={{ display: 'inline', color: getColor(uptimePercent, true) }}
-        >
+        <Text mt="sm" fw={700} style={{ display: 'inline', color: getColor(uptimePercent, true) }}>
           Overall: {uptimePercent}%
         </Text>
       </div>

diff --git a/components/MonitorList.tsx b/components/MonitorList.tsx
@@ -2,13 +2,7 @@ import { MonitorState, MonitorTarget } from '@/uptime.types'
 import { Card, Center, Divider } from '@mantine/core'
 import MonitorDetail from './MonitorDetail'
 
-export default function MonitorList({
-  config,
-  state,
-}: {
-  config: any
-  state: MonitorState
-}) {
+export default function MonitorList({ config, state }: { config: any; state: MonitorState }) {
   return (
     <Center>
       <Card

diff --git a/components/OverallStatus.tsx b/components/OverallStatus.tsx
@@ -7,18 +7,14 @@ export default function OverallStatus({
   state: { overallUp: number; overallDown: number; lastUpdate: number }
 }) {
   let statusString = ''
-  let icon = (
-    <IconAlertCircle style={{ width: 64, height: 64, color: '#b91c1c' }} />
-  )
+  let icon = <IconAlertCircle style={{ width: 64, height: 64, color: '#b91c1c' }} />
   if (state.overallUp === 0 && state.overallDown === 0) {
     statusString = 'No data yet'
   } else if (state.overallUp === 0) {
     statusString = 'All systems not operational'
   } else if (state.overallDown === 0) {
     statusString = 'All systems operational'
-    icon = (
-      <IconCircleCheck style={{ width: 64, height: 64, color: '#059669' }} />
-    )
+    icon = <IconCircleCheck style={{ width: 64, height: 64, color: '#059669' }} />
   } else {
     statusString = `Some systems not operational (${state.overallDown} out of ${
       state.overallUp + state.overallDown
@@ -31,11 +27,7 @@ export default function OverallStatus({
       <Title mt="sm" style={{ textAlign: 'center' }} order={1}>
         {statusString}
       </Title>
-      <Title
-        mt="sm"
-        style={{ textAlign: 'center', color: '#70778c' }}
-        order={5}
-      >
+      <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

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -26,8 +26,8 @@ export default function Home({ state }: { state: MonitorState }) {
         {state === undefined ? (
           <Center>
             <Text fw={700}>
-              Monitor State is not defined now, please check your worker&apos;s
-              status and KV binding!
+              Monitor State is not defined now, please check your worker&apos;s status and KV
+              binding!
             </Text>
           </Center>
         ) : (
@@ -64,10 +64,7 @@ export async function getServerSideProps() {
   const { UPTIMEFLARE_STATE } = process.env as unknown as {
     UPTIMEFLARE_STATE: KVNamespace
   }
-  const state = (await UPTIMEFLARE_STATE?.get(
-    'state',
-    'json'
-  )) as unknown as MonitorState
+  const state = (await UPTIMEFLARE_STATE?.get('state', 'json')) as unknown as MonitorState
 
   return { props: { state } }
 }
diff --git a/styles/Header.module.css b/styles/Header.module.css
@@ -2,8 +2,7 @@
   height: rem(56px);
   margin-bottom: rem(120px);
   background-color: var(--mantine-color-body);
-  border-bottom: rem(1px) solid
-    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
 }
 
 .inner {
@@ -24,10 +23,7 @@
   font-weight: 500;
 
   @mixin hover {
-    background-color: light-dark(
-      var(--mantine-color-gray-0),
-      var(--mantine-color-dark-6)
-    );
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
   }
 
   [data-mantine-color-scheme] &[data-active] {

diff --git a/uptime.config.ts b/uptime.config.ts
@@ -10,9 +10,7 @@ const config = {
     ],
   },
   callback: async (statusChangeMsg: string) => {
-    await fetch(
-      'https://server.lyc8503.site/wepush?key=wepushkey&msg=' + statusChangeMsg
-    )
+    await fetch('https://server.lyc8503.site/wepush?key=wepushkey&msg=' + statusChangeMsg)
   },
   monitors: [
     {