feat: ux changes

rebase

apps/dashboard/app/callback/page.tsx

@@ -1,40 +1,63 @@
 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)
   const token = session?.accessToken
   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>
   )
 }

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>
     </>
   )
 }

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>
     </>
   )
 }