From 5efddef9372e44d6746b00abfcdaca902410396c Mon Sep 17 00:00:00 2001
From: Siddharth <siddharth@debian.siddharth>
Date: Sun, 5 Nov 2023 13:02:05 +0530
Subject: [PATCH] feat: ux changes

rebase
---
 apps/dashboard/app/callback/page.tsx          |  53 +++++---
 .../components/callback/callback-delete.tsx   |  84 +++++++++---
 .../components/callback/callback-input.tsx    |  43 +++---
 .../components/callback/callback-item.tsx     | 123 ++++++++++--------
 .../components/callback/callback-list.tsx     |  64 +++++++++
 .../graphql/queries/callback-query.ts         |   4 +-
 6 files changed, 266 insertions(+), 105 deletions(-)
 create mode 100644 apps/dashboard/components/callback/callback-list.tsx

diff --git a/apps/dashboard/app/callback/page.tsx b/apps/dashboard/app/callback/page.tsx
index 19b426d83c6..8fbc6790295 100644
--- a/apps/dashboard/app/callback/page.tsx
+++ b/apps/dashboard/app/callback/page.tsx
@@ -1,12 +1,16 @@
 import { getServerSession } from "next-auth"
 import React from "react"
 
+import { Box } from "@mui/joy"
+
 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 CallBackList from "@/components/callback/callback-list"
+
 import CreateCallBack from "@/components/callback/callback-input"
+import { fetchCallbackData } from "@/services/graphql/queries/callback-query"
+import CallBackCardItem from "@/components/callback/callback-item"
 
 export default async function page() {
   const session = await getServerSession(authOptions)
@@ -14,27 +18,46 @@ export default async function page() {
   if (!token || typeof token !== "string") {
     throw new Error("invalid token")
   }
-
   let response
   try {
     response = await fetchCallbackData(token)
-  } catch {
+  } catch (err) {
     return null
   }
 
-  const callbackEndpoints = response.data.me?.defaultAccount.callbackEndpoints || []
+  const endpoints = response.data.me?.defaultAccount.callbackEndpoints || []
+
   return (
     <ContentContainer>
-      <CreateCallBack />
-      {callbackEndpoints.map((endpointItem) => {
-        return (
-          <CallbackItem
-            key={endpointItem.id}
-            id={endpointItem.id}
-            url={endpointItem.url}
-          />
-        )
-      })}
+      <Box
+        sx={{
+          maxWidth: "90em",
+          margin: "0 auto",
+          width: "100%",
+        }}
+      >
+        <CreateCallBack />
+        <Box
+          sx={{
+            display: {
+              xs: "none",
+              md: "block",
+            },
+          }}
+        >
+          <CallBackList endpoints={endpoints} />
+        </Box>
+        <Box
+          sx={{
+            display: {
+              xs: "block",
+              md: "none",
+            },
+          }}
+        >
+          <CallBackCardItem endpoints={endpoints} />
+        </Box>
+      </Box>
     </ContentContainer>
   )
 }
diff --git a/apps/dashboard/components/callback/callback-delete.tsx b/apps/dashboard/components/callback/callback-delete.tsx
index 54039560425..12bdecfe47e 100644
--- a/apps/dashboard/components/callback/callback-delete.tsx
+++ b/apps/dashboard/components/callback/callback-delete.tsx
@@ -1,11 +1,9 @@
 "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 { Button, Typography, Box, Modal, Sheet, ModalClose } from "@mui/joy"
+
 import DeleteIcon from "@mui/icons-material/Delete"
+import ReportProblemRoundedIcon from "@mui/icons-material/ReportProblemRounded"
 
 import { deleteCallbackAction } from "@/app/callback/server-actions"
 
@@ -15,13 +13,17 @@ type CallbackDeleteProps = {
 
 function DeleteCallback({ id }: CallbackDeleteProps) {
   const [open, setOpen] = useState<boolean>(false)
+  const [loading, setLoading] = useState(false)
 
   const deleteHandler = async () => {
     try {
+      setLoading(true)
       await deleteCallbackAction(id)
       setOpen(false)
     } catch (error) {
       console.error(error)
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -35,33 +37,75 @@ function DeleteCallback({ id }: CallbackDeleteProps) {
         <Sheet
           variant="outlined"
           sx={{
-            maxWidth: "20em",
+            maxWidth: 400,
             borderRadius: "md",
             p: 3,
             boxShadow: "lg",
             display: "flex",
             flexDirection: "column",
-            gap: "1em",
-            justifyContent: "center",
+            gap: 2,
             alignItems: "center",
           }}
         >
-          <ModalClose variant="plain" sx={{ m: 1 }} />
-          <Typography
-            component="h2"
-            id="modal-callback"
-            level="h4"
-            textColor="inherit"
-            fontWeight="lg"
-            mb={1}
+          <ModalClose variant="plain" sx={{ alignSelf: "flex-end" }} />
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+            }}
           >
-            Delete Callback
+            <ReportProblemRoundedIcon
+              sx={{
+                fontSize: "4rem",
+              }}
+            />
+            <Typography
+              component="h2"
+              id="modal-callback"
+              level="h4"
+              textColor="inherit"
+              fontWeight="lg"
+            >
+              Delete Callback
+            </Typography>
+          </Box>
+          <Typography id="modal-desc" textColor="text.tertiary" textAlign="center">
+            Are you sure you want to delete? You will not be able to use this callback
+            further.
           </Typography>
-          <Typography>Are you sure you want to delete?</Typography>
-          <Button onClick={deleteHandler}>Confirm</Button>
+          <Button
+            variant="outlined"
+            loading={loading}
+            color="danger"
+            onClick={deleteHandler}
+            sx={{
+              width: "100%",
+            }}
+          >
+            Confirm
+          </Button>
         </Sheet>
       </Modal>
-      <DeleteIcon sx={{ cursor: "pointer" }} onClick={() => setOpen(true)}></DeleteIcon>
+      <Box
+        sx={{
+          alignItems: "right",
+        }}
+      >
+        <Button onClick={() => setOpen(true)} variant="outlined" color="danger">
+          <DeleteIcon />
+          <Typography
+            sx={{
+              display: {
+                xs: "block",
+                md: "none",
+              },
+            }}
+          >
+            Remove
+          </Typography>
+        </Button>
+      </Box>
     </>
   )
 }
diff --git a/apps/dashboard/components/callback/callback-input.tsx b/apps/dashboard/components/callback/callback-input.tsx
index 603c289172b..e2ab8693bd1 100644
--- a/apps/dashboard/components/callback/callback-input.tsx
+++ b/apps/dashboard/components/callback/callback-input.tsx
@@ -2,6 +2,7 @@
 import Button from "@mui/joy/Button"
 import { Input, FormLabel, FormControl, FormHelperText } from "@mui/joy"
 import Modal from "@mui/joy/Modal"
+import Box from "@mui/joy/Box"
 import ModalClose from "@mui/joy/ModalClose"
 import Typography from "@mui/joy/Typography"
 import Sheet from "@mui/joy/Sheet"
@@ -18,6 +19,8 @@ import {
   experimental_useFormState as useFormState,
 } from "react-dom"
 
+import FormSubmitButton from "../form-submit-button"
+
 import { createCallbackAction } from "@/app/callback/server-actions"
 
 function CreateCallBack() {
@@ -30,7 +33,9 @@ function CreateCallBack() {
   })
 
   if (state.message === "success") {
+    state.error = false
     state.message = null
+    state.responsePayload = null
     setOpen(false)
   }
   return (
@@ -43,15 +48,15 @@ function CreateCallBack() {
         <Sheet
           variant="outlined"
           sx={{
-            maxWidth: "20em",
+            maxWidth: 400,
             borderRadius: "md",
             p: 3,
             boxShadow: "lg",
             display: "flex",
             flexDirection: "column",
-            gap: "1em",
-            justifyContent: "center",
-            alignItems: "center",
+            gap: 2,
+            alignItems: "left",
+            width: "100%",
           }}
         >
           <ModalClose variant="plain" sx={{ m: 1 }} />
@@ -73,9 +78,15 @@ function CreateCallBack() {
               gap: "1em",
               justifyContent: "center",
               alignItems: "center",
+              width: "100%",
             }}
           >
-            <FormControl error={state?.error}>
+            <FormControl
+              sx={{
+                width: "100%",
+              }}
+              error={state?.error}
+            >
               <FormLabel>Callback URL</FormLabel>
               <Input
                 required
@@ -91,27 +102,27 @@ function CreateCallBack() {
                 </FormHelperText>
               ) : null}
             </FormControl>
-            <Button
+            <FormSubmitButton
               sx={{
                 width: "100%",
               }}
-              loading={pending}
               type="submit"
             >
               Create
-            </Button>
+            </FormSubmitButton>
           </form>
         </Sheet>
       </Modal>
-      <Button
-        loading={pending}
-        sx={{
-          width: "10em",
-        }}
-        onClick={() => setOpen(true)}
+      <Box
+        sx={{ display: "flex", justifyContent: "space-between", marginBottom: "1rem" }}
       >
-        Add Callback <AddIcon></AddIcon>
-      </Button>
+        <Typography id="modal-desc" textColor="text.tertiary" textAlign="left">
+          Attach Callback Endpoints
+        </Typography>
+        <Button loading={pending} onClick={() => setOpen(true)}>
+          <AddIcon />
+        </Button>
+      </Box>
     </>
   )
 }
diff --git a/apps/dashboard/components/callback/callback-item.tsx b/apps/dashboard/components/callback/callback-item.tsx
index 5c9c0e4fd53..951f57e0814 100644
--- a/apps/dashboard/components/callback/callback-item.tsx
+++ b/apps/dashboard/components/callback/callback-item.tsx
@@ -1,66 +1,85 @@
-"use client"
 import React from "react"
-
-import { Box, Card, Typography } from "@mui/joy"
+import { Card, Typography, Box } from "@mui/joy"
 
 import DeleteCallback from "./callback-delete"
 
-type CallbackEndpointProps = {
-  id: string
-  url: string
+type EndPointProps = {
+  readonly id: string
+  readonly url: string
+}
+
+type EndPointCardListProps = {
+  endpoints: readonly EndPointProps[]
 }
 
-function callbackItem({ id, url }: CallbackEndpointProps) {
+const CallBackCardItem = ({ endpoints }: EndPointCardListProps) => {
   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
+    <>
+      {endpoints.map(({ id, url }) => (
+        <Card
+          key={id}
           sx={{
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "center",
-            gap: "0.5em",
-            justifyContent: "space-between",
-            padding: "0.4em",
-            borderRadius: "0.5em",
-            backgroundColor: "neutral.solidDisabledBg",
+            "display": "flex",
+            "flexDirection": "column",
+            "alignItems": "flex-start",
+            "borderRadius": "1em",
+            "boxShadow": 1,
+            "marginBottom": "1em",
+            "&:hover": {
+              boxShadow: 3,
+            },
           }}
         >
-          {id}
-        </Box>
+          <Box
+            sx={{
+              width: "100%",
+              padding: 0.5,
+            }}
+          >
+            <Typography>ID</Typography>
+            <Typography
+              sx={{
+                fontWeight: "bold",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                backgroundColor: "neutral.solidDisabledBg",
+                textOverflow: "ellipsis",
+                padding: 1,
+                borderRadius: "0.5em",
+              }}
+            >
+              {id}
+            </Typography>
+          </Box>
 
-        <Typography
-          sx={{
-            fontWeight: "bold",
-          }}
-        >
-          {url}
-        </Typography>
-      </Box>
-      <DeleteCallback id={id}></DeleteCallback>
-    </Card>
+          <Box
+            sx={{
+              width: "100%",
+              padding: 0.5,
+            }}
+          >
+            <Typography>URL</Typography>
+            <Typography
+              sx={{
+                fontWeight: "bold",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                backgroundColor: "neutral.solidDisabledBg",
+                padding: 1,
+                borderRadius: "0.5em",
+              }}
+            >
+              {url}
+            </Typography>
+          </Box>
+
+          <DeleteCallback id={id}></DeleteCallback>
+        </Card>
+      ))}
+      {endpoints.length === 0 && <Typography>No Callbacks Added</Typography>}
+    </>
   )
 }
 
-export default callbackItem
+export default CallBackCardItem
diff --git a/apps/dashboard/components/callback/callback-list.tsx b/apps/dashboard/components/callback/callback-list.tsx
new file mode 100644
index 00000000000..306e233555f
--- /dev/null
+++ b/apps/dashboard/components/callback/callback-list.tsx
@@ -0,0 +1,64 @@
+import React from "react"
+import Table from "@mui/joy/Table"
+
+import { Typography } from "@mui/joy"
+
+import DeleteCallback from "./callback-delete"
+
+type EndPointProps = {
+  readonly id: string
+  readonly url: string
+}
+
+type EndPointCardListProps = {
+  endpoints: readonly EndPointProps[]
+}
+
+const CallBackList = async ({ endpoints }: EndPointCardListProps) => {
+  return (
+    <>
+      <Table aria-label="basic table" sx={{ width: "100%" }}>
+        <thead>
+          <tr>
+            <th style={{ width: "30%", wordBreak: "break-word", wordWrap: "break-word" }}>
+              ID
+            </th>
+            <th style={{ width: "60%", wordBreak: "break-word", wordWrap: "break-word" }}>
+              Endpoint URL
+            </th>
+            <th
+              style={{
+                width: "10%",
+                textAlign: "right",
+                wordBreak: "break-word",
+                wordWrap: "break-word",
+              }}
+            >
+              Action
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {endpoints.map(({ id, url }) => (
+            <tr key={id}>
+              <td style={{ wordBreak: "break-word", wordWrap: "break-word" }}>{id}</td>
+              <td style={{ wordBreak: "break-word", wordWrap: "break-word" }}>{url}</td>
+              <td
+                style={{
+                  textAlign: "right",
+                  wordBreak: "break-word",
+                  wordWrap: "break-word",
+                }}
+              >
+                <DeleteCallback id={id} />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+      {endpoints.length === 0 && <Typography>No Callbacks Added</Typography>}
+    </>
+  )
+}
+
+export default CallBackList
diff --git a/apps/dashboard/services/graphql/queries/callback-query.ts b/apps/dashboard/services/graphql/queries/callback-query.ts
index c1695627404..e6644ff01fe 100644
--- a/apps/dashboard/services/graphql/queries/callback-query.ts
+++ b/apps/dashboard/services/graphql/queries/callback-query.ts
@@ -19,10 +19,10 @@ gql`
 export async function fetchCallbackData(token: string) {
   const client = apollo(token).getClient()
   try {
-    const data = await client.query<CallbackEndpointsQuery>({
+    const response = await client.query<CallbackEndpointsQuery>({
       query: CallbackEndpointsDocument,
     })
-    return data
+    return response
   } catch (err) {
     if (err instanceof Error) {
       console.error("error", err)