Add create reminders stuff

Tibowl · Tibowl · commit f23490996ea9 · 2022-01-20T00:31:21.000+01:00
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-markdown": "^7.1.1",
+    "react-modal": "^3.14.4",
     "sharp": "^0.29.3"
   },
   "devDependencies": {
@@ -23,6 +24,7 @@
     "@types/node": "17.0.5",
     "@types/node-fetch": "2",
     "@types/react": "17.0.38",
+    "@types/react-modal": "^3.13.1",
     "autoprefixer": "^10.4.0",
     "eslint": "8.5.0",
     "eslint-config-next": "12.0.7",
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,11 +1,12 @@
 import type { AppProps } from "next/app"
 import Head from "next/head"
-import { Component, useEffect } from "react"
+import { useEffect } from "react"
 import "tailwindcss/tailwind.css"
 import Footer from "../components/Footer"
 import NavBar from "../components/NavBar"
 import * as gtag from "../utils/gtag"
 import "../public/global.css"
+import ReactModal from "react-modal"
 
 export default function MyApp({ Component, pageProps, router }: AppProps) {
   useEffect(() => {
@@ -17,7 +18,8 @@ export default function MyApp({ Component, pageProps, router }: AppProps) {
       router.events.off("routeChangeComplete", handleRouteChange)
     }
   }, [router.events])
-  return <div className="dark:bg-slate-700 min-h-screen flex flex-col items-center justify-between text-slate-900 dark:text-slate-100">
+
+  return <div className="bg-slate-50 dark:bg-slate-700 min-h-screen flex flex-col items-center justify-between text-slate-900 dark:text-slate-100">
     <Head>
       <title>{router.pathname.substring(1).replace(/^\w/, w => w.toUpperCase())} | Hu Tao</title>
       <link rel="icon" href="/favicon.ico" />
diff --git a/pages/api/reminders/create.ts b/pages/api/reminders/create.ts
@@ -0,0 +1,35 @@
+import { NextApiRequest, NextApiResponse } from "next"
+import fetch from "node-fetch"
+import { config } from "../../../utils/config"
+import { parseUser } from "../../../utils/parse-user"
+import { Reminder } from "../../../utils/types"
+
+
+export default async function api(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== "POST") return res.redirect("/")
+  const user = parseUser(req.headers.cookie)
+  const name: string = req.body?.name
+  const duration: string = req.body?.duration
+
+  if (!user) {
+    return {
+      redirect: {
+        destination: "/api/oauth",
+        permanent: false,
+      },
+    }
+  }
+
+  if (!name || !duration || typeof name !== "string" || typeof duration !== "string" || name.length > 128 || duration.length > 128)
+    return res.status(400).send("Invalid data")
+
+  console.log(`[${new Date().toISOString()}] Creating reminder ${user.id} / ${name}: ${duration}`)
+
+  const fetched = await fetch(`${config.discordUri}/reminders/${user.id}/create`, {
+    headers: { Authorization: `${config.discordSecret}`, "Content-Type": "application/json" },
+    body: JSON.stringify({ name, duration }),
+    method: "POST"
+  })
+
+  res.status(fetched.status).send(await fetched.text())
+}
diff --git a/pages/api/reminders/delete.ts b/pages/api/reminders/delete.ts
@@ -1,10 +1,8 @@
+import { NextApiRequest, NextApiResponse } from "next"
 import fetch from "node-fetch"
-import { serialize } from "cookie"
 import { config } from "../../../utils/config"
-import { sign } from "jsonwebtoken"
-import { DiscordUser, Reminder } from "../../../utils/types"
-import { NextApiRequest, NextApiResponse } from "next"
 import { parseUser } from "../../../utils/parse-user"
+import { Reminder } from "../../../utils/types"
 
 
 export default async function api(req: NextApiRequest, res: NextApiResponse) {
diff --git a/pages/api/sendmessage.ts b/pages/api/sendmessage.ts
@@ -0,0 +1,26 @@
+import { NextApiRequest, NextApiResponse } from "next"
+import fetch from "node-fetch"
+import { config } from "../../utils/config"
+import { parseUser } from "../../utils/parse-user"
+
+
+export default async function api(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== "POST") return res.redirect("/")
+  const user = parseUser(req.headers.cookie)
+
+  if (!user) {
+    return {
+      redirect: {
+        destination: "/api/oauth",
+        permanent: false,
+      },
+    }
+  }
+
+  const fetched = await fetch(`${config.discordUri}/testmessage/${user.id}`, {
+    headers: { Authorization: `${config.discordSecret}`, "Content-Type": "application/json" },
+    method: "POST"
+  })
+
+  res.status(fetched.status).send(await fetched.text())
+}
diff --git a/pages/tools/index.tsx b/pages/tools/index.tsx
@@ -26,7 +26,6 @@ export default function Tools({ location }: {location: string}) {
               Reminders are send to your Discord DM&apos;s via the Discord bot. Please make sure you share at least one server with the Discord bot
               and have DM&apos;s enabled in that server. You can invite the bot to your own Discord server or join the support server via the links on
               the <FormattedLink location={location} href="/" >homepage</FormattedLink>.
-
             </div>
           </li>
       </ul>
diff --git a/pages/tools/reminders.tsx b/pages/tools/reminders.tsx
@@ -1,22 +1,63 @@
 import { serialize } from "cookie"
 import { GetServerSideProps } from "next"
 import Head from "next/head"
-import { Component } from "react"
+import { useRouter } from "next/router"
+import { Component, useState } from "react"
+import ReactModal from "react-modal"
 import Main from "../../components/Main"
 import { config } from "../../utils/config"
 import { parseUser } from "../../utils/parse-user"
 import { DiscordUser, Reminder } from "../../utils/types"
+import { send } from "../../utils/utils"
 
 interface Props {
   user: DiscordUser
   reminders: Reminder[]
 }
 
-export default class Reminders extends Component<Props, { reminders: Reminder[] }> {
+const modalStyle: ReactModal.Styles = {
+  overlay: {
+    backgroundColor: "rgba(0, 0, 0, 0.66)"
+  },
+  content: {
+    position: "absolute",
+    top: "min(10%, 200px)",
+    bottom: "auto",
+
+    width: "min(42rem, calc(100% - 40px))",
+    left: "max(calc(50% - (42rem/2)), 20px)",
+
+    border: "1px solid rgb(64, 79, 100)",
+    color: "white",
+    background: "rgb(51 65 85)",
+    borderRadius: "1rem"
+  }
+}
+const erorrModalStyle: ReactModal.Styles = {
+  overlay: {
+    backgroundColor: "rgba(10, 0, 0, 0.66)"
+  },
+  content: {
+    position: "absolute",
+    top: "max(calc(50% - (10rem/2)), 20px)",
+    maxHeight: "10rem",
+
+    width: "min(20rem, calc(100% - 40px))",
+    left: "max(calc(50% - (20rem/2)), 20px)",
+
+    border: "1px solid rgb(156, 79, 100)",
+    color: "white",
+    background: "rgb(156 65 85)",
+    borderRadius: "1rem"
+  }
+}
+
+export default class Reminders extends Component<Props, { reminders: Reminder[], createReminderOpen: boolean }> {
   constructor(props: Props) {
     super(props)
     this.state = {
-      reminders: this.props.reminders
+      reminders: this.props.reminders,
+      createReminderOpen: false
     }
   }
 
@@ -37,21 +78,99 @@ export default class Reminders extends Component<Props, { reminders: Reminder[]
         </h1>
         <div className="text-base">Logged in as: <DiscordAvatar user={user} /> {user.username}<span className="text-xs">#{user.discriminator}</span></div>
         <div className="text-xl mt-3">{reminders.length} reminder{reminders.length == 1 ? "" : "s"}</div>
-        {reminders.map(r => <ReminderCard r={r} key={r.id} onDelete={() => this.setState({
-          reminders: reminders.filter(re => r.id != re.id)
-        })} />)}
+        {reminders.map(r => <ReminderCard
+          r={r}
+          key={r.id}
+          onDelete={() => this.setState({
+            reminders: reminders.filter(re => r.id != re.id)
+          })}
+        />)}
+        <div className="flex flex-wrap gap-2">
+          <span className="bg-blue-600 text-slate-50 w-fit px-3 py-1 text-center rounded-lg mt-2 cursor-pointer" onClick={() => fetch("/api/sendmessage", {
+            headers: { "Content-Type": "application/json" },
+            method: "POST"
+          })}>Send test message</span>
+          <span className="bg-green-600 text-slate-50 w-fit px-3 py-1 text-center rounded-lg mt-2 cursor-pointer" onClick={() => this.setState({ createReminderOpen: true })}>Create reminder</span>
+          <CreateReminder
+            isOpen={this.state.createReminderOpen}
+            requestClose={() => this.setState({ createReminderOpen: false })}
+            addReminder={(r) => this.setState({ reminders: [...reminders, r] })}
+          />
+        </div>
       </Main>
     )
   }
 }
 
+function CreateReminder({ isOpen, requestClose, addReminder }: { isOpen: boolean, requestClose: () => void, addReminder: (r: Reminder) => void }) {
+  const [name, setName] = useState("")
+  const [duration, setDuration] = useState("")
+
+  const [error, setError] = useState("")
+
+  async function createReminder(name: string, duration: string) {
+    if (name.length > 128) return setError("Name too long")
+    if (name.length == 0) return setError("No name given")
+    if (duration.length == 0) return setError("No duration given")
+
+    const res = await send("/api/reminders/create", { name, duration })
+
+    if ((res.status >= 200 && res.status < 300)) {
+      requestClose()
+      addReminder(await res.json())
+
+      setName("")
+      setDuration("")
+    } else {
+      return setError("An error occurred... Try again later")
+    }
+  }
+  return <ReactModal style={modalStyle} isOpen={isOpen} onRequestClose={requestClose} ariaHideApp={false}>
+    <ReactModal style={erorrModalStyle} isOpen={error.length > 0} onRequestClose={() => setError("")} ariaHideApp={false}>
+      <div className="flex flex-1 justify-center items-center h-full" onKeyDown={() => setError("")}>
+        <div className="font-semibold text-xl">
+          {error}
+        </div>
+      </div>
+    </ReactModal>
+
+    <h4 className="text-lg font-semibold">Create a reminder</h4>
+    <div className="flex flex-col">
+      <form onSubmit={(e) => {
+        e.preventDefault()
+        createReminder(name, duration)
+      }}>
+        <TextInput value={name} set={setName} placeholder="Enter a name" maxLength={128} label="Name:" />
+        <TextInput value={duration} set={setDuration} placeholder="Enter a duration (ex. 10 hours 2 resin 5s)" maxLength={128} label="Duration:" />
+        <button className="bg-green-600 text-slate-50 w-fit px-3 py-1 text-center rounded-lg mt-2 cursor-pointer" formAction="submit">Create reminder</button>
+      </form>
+    </div>
+    <br />
+
+    <h4 className="text-lg font-semibold">Presets</h4>
+    <div className="flex flex-wrap gap-2">
+      <span className="bg-green-600 text-slate-50 w-fit px-3 py-1 text-center rounded-lg mt-2 cursor-pointer" onClick={() => createReminder("Parametric", "6d22h")}>Parametric (6d22h)</span>
+      <span className="bg-green-600 text-slate-50 w-fit px-3 py-1 text-center rounded-lg mt-2 cursor-pointer" onClick={() => createReminder("Ores", "72h")}>Ores (72h)</span>
+    </div>
+  </ReactModal>
+}
+
+function TextInput({ value, set, maxLength, placeholder, label }: { value: string, set: (newValue: string) => unknown, maxLength?: number, placeholder: string, label: string }) {
+  return <div><label>
+    {label}
+    <input
+      className="bg-slate-800 rounded-lg px-2 ml-2 mt-1"
+      value={value}
+      onChange={(e) => set(e.target.value)}
+      placeholder={placeholder}
+      maxLength={maxLength}
+    />
+  </label></div>
+}
+
 function ReminderCard({ r, onDelete }: { r: Reminder, onDelete: () => void }) {
   const deleteReminder = async () => {
-    const res = await fetch("/api/reminders/delete", {
-      body: JSON.stringify({ r }),
-      headers: { "Content-Type": "application/json" },
-      method: "POST"
-    })
+    const res = await send("/api/reminders/delete", { r })
 
     if ((res.status >= 200 && res.status < 300) || res.status == 404)
       onDelete()
@@ -86,7 +205,8 @@ export const getServerSideProps: GetServerSideProps<Props> = async function (ctx
         maxAge: 3600,
         sameSite: "lax",
         path: "/",
-      }))
+      })
+    )
 
     return {
       redirect: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/utils/utils.ts b/utils/utils.ts
