Merge pull request #3 from solaoi/feature_add-recent-requests

add recent logs

app/api/[[...slug]].ts

@@ -26,11 +26,37 @@ const Handler: BlitzApiHandler = async (req: BlitzApiRequest, res: BlitzApiRespo
   if (!obj) {
     return res.status(404).end()
   }
-  const { contentType, statusCode, sleep, response } = obj
+  const { id, contentType, statusCode, sleep, response, logs } = obj
   if (sleep !== 0) {
     await snooze(sleep * 1000)
   }
 
+  const RECENT_LOGS = 3
+  const { slug: _, ...query } = req.query
+  const body = (() => {
+    const bodies = Object.keys(Object.assign({}, req.body))
+    return bodies
+      .map((b) => {
+        try {
+          return JSON.stringify(JSON.parse(b))
+        } catch {
+          return b
+        }
+      })
+      .join(",")
+  })()
+  const log = `date: ${new Date().toLocaleString()}\nquery: ${JSON.stringify(
+    query,
+    null,
+    2
+  )}\nbody: ${body}\nheaders: ${JSON.stringify(req.headers, null, 2)}`
+  const logArr = logs.split("\t")
+  const updatedLogs = [
+    log,
+    ...logArr.filter((_, i) => logArr.length < RECENT_LOGS || i !== logArr.length - 1),
+  ].join("\t")
+  await db.stub.update({ where: { id }, data: { logs: updatedLogs } })
+
   return res.status(Number(statusCode)).setHeader("Content-Type", contentType).end(response)
 }
 

app/pages/stubs/[stubId].tsx

@@ -149,6 +149,29 @@ export const Stub = () => {
               </Box>
             </Flex>
           </Box>
+          <Heading size="md" as="h3" mb="1">
+            Recent Requests
+          </Heading>
+          <Box
+            h="300"
+            overflowY="auto"
+            w="100%"
+            p="2"
+            bgColor="#3c3c3c"
+            color="#fff"
+            borderRadius="lg"
+          >
+            {stub.logs
+              ? stub.logs
+                  .split("\t")
+                  .filter((s) => s !== "")
+                  .map((l, i) => (
+                    <pre style={{ whiteSpace: "pre-wrap" }} key={"log_" + i}>
+                      {i !== 0 ? `\n${l}` : l}
+                    </pre>
+                  ))
+              : "Never been requested..."}
+          </Box>
         </Box>
       </Flex>
     </Box>

app/pages/stubs/new.tsx

@@ -52,7 +52,7 @@ const NewStubPage: BlitzPage = () => {
       <Flex align="center" justify="center" m="6">
         <Card heading="New Stub">
           <StubForm
-            initialValues={{ createdBy: currentUser?.name, updatedBy: currentUser?.name }}
+            initialValues={{ createdBy: currentUser?.name, updatedBy: currentUser?.name, sleep: 0 }}
             submitText="ADD"
             // TODO use a zod schema for form validation
             //  - Tip: extract mutation's schema into a shared `validations.ts` file and

app/stubs/mutations/createStub.ts

@@ -25,6 +25,7 @@ const CreateStub = z.object({
     .regex(/^\d{3}$/, { message: "The status code must be a three-digit number." }),
   response: z.string().default(""),
   sleep: z.number().min(0).default(0),
+  logs: z.string().default(""),
   projectId: z.number(),
 })
 

db/migrations/20210920042923_/migration.sql → db/migrations/20210920070104_/migration.sql

@@ -61,6 +61,7 @@ CREATE TABLE "Stub" (
     "statusCode" TEXT NOT NULL,
     "response" TEXT NOT NULL,
     "sleep" INTEGER NOT NULL,
+    "logs" TEXT NOT NULL,
     "projectId" INTEGER NOT NULL,
     CONSTRAINT "Stub_projectId_fkey" FOREIGN KEY ("projectId") REFERENCES "Project" ("id") ON DELETE CASCADE ON UPDATE CASCADE
 );

db/schema.prisma

@@ -87,6 +87,7 @@ model Stub {
   statusCode  String
   response    String
   sleep       Int
+  logs        String
   project     Project  @relation(fields: [projectId], references: [id], onDelete: Cascade)
   projectId   Int
 }