From efcf50f6cd0566c4a55d5b13c344965cc091d9b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Colombaro?=
Date: Wed, 1 Mar 2023 16:18:45 +0000
Subject: [PATCH] Much much better manage page
---
pages/app/components/Milestone.tsx | 31 ++++++++++++
pages/app/components/Rule.tsx | 78 ++++++++++++++++--------------
pages/app/components/RulesList.tsx | 54 ---------------------
pages/app/components/Setting.tsx | 2 +-
pages/app/models/rule.server.ts | 1 +
pages/app/routes/manage.tsx | 20 ++------
sdk/api.d.ts | 1 +
7 files changed, 81 insertions(+), 106 deletions(-)
create mode 100644 pages/app/components/Milestone.tsx
delete mode 100644 pages/app/components/RulesList.tsx
diff --git a/pages/app/components/Milestone.tsx b/pages/app/components/Milestone.tsx
new file mode 100644
index 0000000..49f10dd
--- /dev/null
+++ b/pages/app/components/Milestone.tsx
@@ -0,0 +1,31 @@
+import { IntlDate } from '~/components/IntlDate'
+
+export const Milestone = ({
+ name,
+ date,
+}: {
+ name: string
+ date: Date | string | undefined
+}) => {
+ return (
+ (date && (
+
+
+
+
+
+ {name}d
+
+
+ )) || <>>
+ )
+}
diff --git a/pages/app/components/Rule.tsx b/pages/app/components/Rule.tsx
index 15920d7..5c42cd5 100644
--- a/pages/app/components/Rule.tsx
+++ b/pages/app/components/Rule.tsx
@@ -1,41 +1,47 @@
-import { Form } from '@remix-run/react'
-import { IntlDate } from '~/components/IntlDate'
+import { Milestone } from './Milestone.js'
export const Rule = ({ rule }: { rule: Rule }) => {
return (
-
- {rule.matchers[0].value} |
-
-
- {rule.enabled
- ? rule.actions[0].type === 'worker'
- ? 'Deprecated'
- : 'Active'
- : 'Expired'}
-
- |
-
-
- |
-
- {/* */}
- |
-
+
+
+
+ {rule.matchers[0].value}
+
+ {rule.enabled
+ ? rule.actions[0].type === 'worker'
+ ? '⏲️ Deprecated'
+ : '📨 Active'
+ : '🗃️ Expired'}
+
+
+
+
+
+
+
+
+
+
+ {/* */}
+
)
}
-
-//
-//
-//
{rule.matchers[0].value}
-//
-//
-//
-//
diff --git a/pages/app/components/RulesList.tsx b/pages/app/components/RulesList.tsx
deleted file mode 100644
index e486669..0000000
--- a/pages/app/components/RulesList.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { defer, LoaderArgs, SerializeFrom } from '@remix-run/cloudflare'
-import { Await, useAsyncValue, useLoaderData } from '@remix-run/react'
-import { Suspense } from 'react'
-import { Rule } from '~/components/Rule'
-import { getRules } from '~/models/rule.server'
-import { getZones } from '~/models/zone.server'
-
-export const loader = async ({ context }: LoaderArgs) => {
- const zones = await getZones(context)
- const rules = getRules(zones, context)
-
- return defer({
- rules,
- })
-}
-
-export const RulesList = () => {
- const data = useLoaderData()
-
- return (
- }>
- Error loading rules list}
- >
-
-
-
- Rule address |
- Status |
- Expire on |
- |
-
-
-
-
-
-
-
-
- )
-}
-
-function RulesListTable() {
- const rules: Rule[] = useAsyncValue['rules']>()
-
- return (
-
- {rules.map((rule) => (
-
- ))}
-
- )
-}
diff --git a/pages/app/components/Setting.tsx b/pages/app/components/Setting.tsx
index 8363466..419ab43 100644
--- a/pages/app/components/Setting.tsx
+++ b/pages/app/components/Setting.tsx
@@ -50,7 +50,7 @@ export const Setting = ({
}
>
{(valueResolved) => {
- setValue(valueResolved)
+ setValue(valueResolved || setting.value)
return (
{(rules: Rule[]) => (
-
-
-
- Rule address |
- Status |
- Expire on |
- |
-
-
-
- {rules.map((rule) => (
-
- ))}
-
-
+
+ {rules.map((rule) => (
+
+ ))}
+
)}
diff --git a/sdk/api.d.ts b/sdk/api.d.ts
index cf7e693..e29cf59 100644
--- a/sdk/api.d.ts
+++ b/sdk/api.d.ts
@@ -35,6 +35,7 @@ type Rule = {
type DispoflareData = {
dispoflare: true
+ activate: Date | string
expire: Date | string
remove: Date | string | undefined
deprecate: Date | string | undefined