(#4) Draw: draft

pages/api/ponix/draw.ts

@@ -0,0 +1,25 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import type { Ponix } from "../../../typings/models";
+import type { ApiError } from "../../../typings/errors";
+
+import { EmptyPonix, PonixList } from "../../../constants/ponix";
+import { DRAW_FAIL_RATE } from "../../../constants/variables";
+
+export const internalHandler: () => Ponix = () => {
+    return Math.random() >= DRAW_FAIL_RATE
+        ? PonixList[Math.floor(PonixList.length * Math.random())]
+        : EmptyPonix;
+};
+
+export const handler = (req: NextApiRequest, res: NextApiResponse<Ponix | ApiError>) => {
+    if (req.method === "POST") {
+        res.status(200).json(internalHandler());
+    } else {
+        res.status(405).json({
+            message: "Method Not Allowed",
+            redirect: "/draw",
+        });
+    }
+};
+
+export default handler;

pages/draw.tsx

@@ -0,0 +1,61 @@
+import type { Ponix } from "../typings/models";
+
+import React from "react";
+
+import { GetServerSideProps } from "next";
+import { internalHandler as apiDraw } from "./api/ponix/draw";
+
+import { Layout } from "../layout";
+
+import { LOCALSTORAGE_KEY } from "../constants/strings";
+import PonixView from "../components/PonixView";
+
+interface DrawProps {
+    ponix: Ponix;
+}
+
+interface DrawState {}
+
+class Draw extends React.Component<DrawProps, DrawState> {
+    addPonixToStorage = (ponix: Ponix) => {
+        let items = JSON.parse(localStorage.getItem(LOCALSTORAGE_KEY) || "[]");
+        localStorage.setItem(
+            LOCALSTORAGE_KEY,
+            JSON.stringify([ponix.id, ...items.filter((i: string) => i != ponix.id)])
+        );
+    };
+
+    isDrawSuccess = (ponix: Ponix) => {
+        return ponix.no !== -1;
+    };
+
+    componentDidMount = () => {
+        if (this.isDrawSuccess(this.props.ponix)) {
+            this.addPonixToStorage(this.props.ponix);
+        }
+    };
+
+    render = () => {
+        const { ponix } = this.props;
+
+        const success = (
+            <>
+                <PonixView ponix={ponix} />
+            </>
+        );
+
+        const failed = <>Failed!</>;
+
+        return <Layout title={"Draw"}>{this.isDrawSuccess(ponix) ? success : failed}</Layout>;
+    };
+}
+
+export const getServerSideProps: GetServerSideProps<DrawProps> = async (context) => {
+    return {
+        props: {
+            ponix: apiDraw(),
+        },
+    };
+};
+
+export default Draw;