feat: added callback, add, delete. list in dashboard

rebase

apps/dashboard/app/callback/page.tsx

@@ -0,0 +1,40 @@
+import { getServerSession } from "next-auth"
+import React from "react"
+
+import { authOptions } from "../api/auth/[...nextauth]/route"
+
+import ContentContainer from "@/components/content-container"
+import { fetchCallbackData } from "@/services/graphql/queries/callback-query"
+import CallbackItem from "@/components/callback/callback-item"
+import CreateCallBack from "@/components/callback/callback-input"
+
+export default async function page() {
+  const session = await getServerSession(authOptions)
+  const token = session?.accessToken
+  if (!token || typeof token !== "string") {
+    throw new Error("invalid token")
+  }
+
+  let response
+  try {
+    response = await fetchCallbackData(token)
+  } catch {
+    return null
+  }
+
+  const callbackEndpoints = response.data.me?.defaultAccount.callbackEndpoints || []
+  return (
+    <ContentContainer>
+      <CreateCallBack />
+      {callbackEndpoints.map((endpointItem) => {
+        return (
+          <CallbackItem
+            key={endpointItem.id}
+            id={endpointItem.id}
+            url={endpointItem.url}
+          />
+        )
+      })}
+    </ContentContainer>
+  )
+}

apps/dashboard/app/callback/server-actions.ts

@@ -0,0 +1,92 @@
+"use server"
+import { getServerSession } from "next-auth"
+
+import { revalidatePath } from "next/cache"
+
+import { authOptions } from "../api/auth/[...nextauth]/route"
+
+import {
+  callbackEndpointAdd,
+  callbackEndpointDelete,
+} from "@/services/graphql/mutations/callback-mutation"
+
+export const createCallbackAction = async (_prevState: unknown, formData: FormData) => {
+  const session = await getServerSession(authOptions)
+  const callBackUrl = formData.get("callBackUrl")
+  console.log(callBackUrl)
+  const token = session?.accessToken
+  if (!token || typeof token !== "string") {
+    throw new Error("invalid token")
+  }
+
+  if (!callBackUrl || typeof callBackUrl !== "string") {
+    return {
+      error: true,
+      message: "Please Provide a Valid Value",
+    }
+  }
+
+  let response
+  try {
+    response = await callbackEndpointAdd(callBackUrl, token)
+  } catch (err) {
+    return {
+      error: true,
+      message: "Something went wrong!",
+    }
+  }
+
+  if (response?.callbackEndpointAdd.errors.length) {
+    return {
+      error: true,
+      message: response?.callbackEndpointAdd.errors[0].message,
+      data: null,
+    }
+  }
+
+  revalidatePath("/callback")
+  return {
+    error: false,
+    message: "success",
+    data: null,
+  }
+}
+
+export const deleteCallbackAction = async (callBackId: string) => {
+  const session = await getServerSession(authOptions)
+  const token = session?.accessToken
+  if (!token || typeof token !== "string") {
+    throw new Error("invalid token")
+  }
+  if (!callBackId || typeof callBackId !== "string") {
+    return {
+      error: true,
+      message: "Please Provide a Valid Value",
+    }
+  }
+
+  let response
+  try {
+    response = await callbackEndpointDelete(callBackId, token)
+  } catch (err) {
+    return {
+      error: true,
+      message: "Something went wrong!",
+    }
+  }
+
+  if (response?.callbackEndpointDelete.errors.length) {
+    return {
+      error: true,
+      message: response?.callbackEndpointDelete.errors[0].message,
+      data: null,
+    }
+  }
+
+  revalidatePath("/callback")
+  return {
+    error: false,
+    message: "success",
+    data: null,
+  }
+}

apps/dashboard/app/url.ts

@@ -6,4 +6,5 @@ interface UrlInfo {
 export const URLS: Record<string, UrlInfo> = {
   "/": { title: "Home", protected: true },
   "/transactions": { title: "Transactions", protected: true },
+  "/callback": { title: "Callback", protected: true },
 }

apps/dashboard/components/callback/callback-delete.tsx

@@ -0,0 +1,69 @@
+"use client"
+import { useState } from "react"
+import Button from "@mui/joy/Button"
+import Modal from "@mui/joy/Modal"
+import ModalClose from "@mui/joy/ModalClose"
+import Typography from "@mui/joy/Typography"
+import Sheet from "@mui/joy/Sheet"
+import DeleteIcon from "@mui/icons-material/Delete"
+
+import { deleteCallbackAction } from "@/app/callback/server-actions"
+
+type CallbackDeleteProps = {
+  id: string
+}
+
+function DeleteCallback({ id }: CallbackDeleteProps) {
+  const [open, setOpen] = useState<boolean>(false)
+
+  const deleteHandler = async () => {
+    try {
+      await deleteCallbackAction(id)
+      setOpen(false)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return (
+    <>
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
+      >
+        <Sheet
+          variant="outlined"
+          sx={{
+            maxWidth: "20em",
+            borderRadius: "md",
+            p: 3,
+            boxShadow: "lg",
+            display: "flex",
+            flexDirection: "column",
+            gap: "1em",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <ModalClose variant="plain" sx={{ m: 1 }} />
+          <Typography
+            component="h2"
+            id="modal-callback"
+            level="h4"
+            textColor="inherit"
+            fontWeight="lg"
+            mb={1}
+          >
+            Delete Callback
+          </Typography>
+          <Typography>Are you sure you want to delete?</Typography>
+          <Button onClick={deleteHandler}>Confirm</Button>
+        </Sheet>
+      </Modal>
+      <DeleteIcon sx={{ cursor: "pointer" }} onClick={() => setOpen(true)}></DeleteIcon>
+    </>
+  )
+}
+
+export default DeleteCallback

apps/dashboard/components/callback/callback-input.tsx

@@ -0,0 +1,119 @@
+"use client"
+import Button from "@mui/joy/Button"
+import { Input, FormLabel, FormControl, FormHelperText } from "@mui/joy"
+import Modal from "@mui/joy/Modal"
+import ModalClose from "@mui/joy/ModalClose"
+import Typography from "@mui/joy/Typography"
+import Sheet from "@mui/joy/Sheet"
+import { useState } from "react"
+import AddIcon from "@mui/icons-material/Add"
+import InfoOutlined from "@mui/icons-material/InfoOutlined"
+
+import {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  experimental_useFormStatus as useFormStatus,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  experimental_useFormState as useFormState,
+} from "react-dom"
+
+import { createCallbackAction } from "@/app/callback/server-actions"
+
+function CreateCallBack() {
+  const [open, setOpen] = useState<boolean>(false)
+  const { pending } = useFormStatus()
+  const [state, formAction] = useFormState(createCallbackAction, {
+    error: false,
+    message: null,
+    responsePayload: null,
+  })
+
+  if (state.message === "success") {
+    state.message = null
+    setOpen(false)
+  }
+  return (
+    <>
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
+      >
+        <Sheet
+          variant="outlined"
+          sx={{
+            maxWidth: "20em",
+            borderRadius: "md",
+            p: 3,
+            boxShadow: "lg",
+            display: "flex",
+            flexDirection: "column",
+            gap: "1em",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <ModalClose variant="plain" sx={{ m: 1 }} />
+          <Typography
+            component="h2"
+            id="modal-callback"
+            level="h4"
+            textColor="inherit"
+            fontWeight="lg"
+            mb={1}
+          >
+            Create Callback
+          </Typography>
+          <form
+            action={formAction}
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: "1em",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <FormControl error={state?.error}>
+              <FormLabel>Callback URL</FormLabel>
+              <Input
+                required
+                placeholder="Enter the Callback URL"
+                type="url"
+                name="callBackUrl"
+                id="callBackUrl"
+              />
+              {state?.error ? (
+                <FormHelperText>
+                  <InfoOutlined />
+                  {state?.message}
+                </FormHelperText>
+              ) : null}
+            </FormControl>
+            <Button
+              sx={{
+                width: "100%",
+              }}
+              loading={pending}
+              type="submit"
+            >
+              Create
+            </Button>
+          </form>
+        </Sheet>
+      </Modal>
+      <Button
+        loading={pending}
+        sx={{
+          width: "10em",
+        }}
+        onClick={() => setOpen(true)}
+      >
+        Add Callback <AddIcon></AddIcon>
+      </Button>
+    </>
+  )
+}
+
+export default CreateCallBack

apps/dashboard/components/callback/callback-item.tsx

@@ -0,0 +1,66 @@
+"use client"
+import React from "react"
+
+import { Box, Card, Typography } from "@mui/joy"
+
+import DeleteCallback from "./callback-delete"
+
+type CallbackEndpointProps = {
+  id: string
+  url: string
+}
+
+function callbackItem({ id, url }: CallbackEndpointProps) {
+  return (
+    <Card
+      id={id}
+      sx={{
+        "display": "flex",
+        "flexDirection": "row",
+        "alignItems": "center",
+        "justifyContent": "space-between",
+        "padding": 2,
+        "borderRadius": 1,
+        "boxShadow": 1,
+        "&:hover": {
+          boxShadow: 3,
+        },
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          boxShadow: 0.5,
+          gap: "1em",
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            gap: "0.5em",
+            justifyContent: "space-between",
+            padding: "0.4em",
+            borderRadius: "0.5em",
+            backgroundColor: "neutral.solidDisabledBg",
+          }}
+        >
+          {id}
+        </Box>
+
+        <Typography
+          sx={{
+            fontWeight: "bold",
+          }}
+        >
+          {url}
+        </Typography>
+      </Box>
+      <DeleteCallback id={id}></DeleteCallback>
+    </Card>
+  )
+}
+
+export default callbackItem