feat: edit api communication page

src/app/(dashboard)/dashboard/api-communications/add/page.tsx

@@ -1,4 +1,6 @@
-import AddAPICommunicationForm from "@/components/add-api-communication-form";
+"use client"
+
+import AddAPICommunicationForm from "@/components/api-communication-form";
 import Breadcrumb from "@/components/breadcrumb";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
@@ -25,7 +27,9 @@ export default function SettingsDisplayPage() {
             </CardHeader>
 
             <CardContent>
-              <AddAPICommunicationForm />
+              <AddAPICommunicationForm  onSubmit={() => {}}
+                btn1_content="Create"
+                btn2_content="Create and add another" />
             </CardContent>
           </Card>
         </div>

src/app/(dashboard)/dashboard/api-communications/edit/[id]/page.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import ConfigurationForm from "@/components/configuration-form";
+import Breadcrumb from "@/components/breadcrumb";
+import { dummyApiCommunications, dummyConfigurations } from "@/constants/data";
+import { Configuration } from "@/types/configuration";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import APICommunicationForm from "@/components/api-communication-form";
+import { ApiCommunication } from "@/types/api-communication";
+
+const breadcrumbItems = [
+  { title: "Dashboard", link: "/dashboard" },
+  { title: "Api Communications", link: "/dashboard/api-communications" },
+  { title: "Edit" },
+];
+
+export default function Page({ params }: { params: { id: string } }) {
+  const apiCommunication = dummyApiCommunications.find(
+    (apiCommunication) => apiCommunication.id === +params.id
+  );
+
+  return (
+    <ScrollArea className="h-[calc(100vh-53px)]">
+      <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
+        <Breadcrumb items={breadcrumbItems} />
+        <div className="w-full h-full flex justify-center items-center">
+          <Card className="max-w-[700px] w-full mb-8">
+            <CardHeader>
+              <CardTitle className="mb-4 font-bold text-xl">
+                Edit Api Communication
+              </CardTitle>
+              <Separator />
+            </CardHeader>
+
+            <CardContent>
+              <APICommunicationForm
+                apiCommunication={apiCommunication as ApiCommunication}
+                onSubmit={() => {}}
+                btn1_content="Save and continue editing"
+                btn2_content="Save changes"
+              />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+      <ScrollBar />
+    </ScrollArea>
+  );
+}

src/components/api-communication-form.tsx

@@ -23,6 +23,7 @@ import {
   SelectValue,
 } from "./ui/select";
 import { Textarea } from "./ui/textarea";
+import { ApiCommunication } from "@/types/api-communication";
 
 const displayFormSchema = z.object({
   pt: z
@@ -89,10 +90,31 @@ const defaultValues: Partial<DisplayFormValues> = {
   evaluation: "",
 };
 
-export default function AddAPICommunicationForm() {
+type Props = {
+  apiCommunication?: ApiCommunication;
+  onSubmit: () => void;
+  btn1_content: string;
+  btn2_content: string;
+};
+
+export default function APICommunicationForm({
+  apiCommunication,
+  onSubmit: onFormSubmit,
+  btn1_content,
+  btn2_content,
+}: Props) {
   const form = useForm<DisplayFormValues>({
     resolver: zodResolver(displayFormSchema),
-    defaultValues,
+    defaultValues: {
+      pt: apiCommunication?.pt ? String(apiCommunication.pt) : "",
+      messages: apiCommunication?.messages || "",
+      completion: apiCommunication?.completion || "",
+      ct: apiCommunication?.ct ? String(apiCommunication.ct) : "",
+      tt: apiCommunication?.tt ? String(apiCommunication.tt) : "",
+      status: apiCommunication?.status || "",
+      type: apiCommunication?.type || "",
+      evaluation: apiCommunication?.evaluation || "",
+    },
   });
 
   function onSubmit(data: DisplayFormValues) {
@@ -104,6 +126,8 @@ export default function AddAPICommunicationForm() {
         </pre>
       ),
     });
+
+    onFormSubmit();
   }
 
   return (
@@ -215,11 +239,12 @@ export default function AddAPICommunicationForm() {
                   </SelectTrigger>
                 </FormControl>
                 <SelectContent>
-                  <SelectItem value="Uploaded at: 2023-09-20 00:00:00 - Uploader: jschultz@php.net - Developer: fabien@potencier.org - Status: finished">
+                  <SelectItem className="truncate" value="Uploaded at: 2023-09-20 00:00:00 - Uploader: jschultz@php.net - Developer: fabien@potencier.org - Status: finished">
                     Uploaded at: 2023-09-20 00:00:00 - Uploader:
                     jschultz@php.net - Developer: fabien@potencier.org - Status:
                     finished
                   </SelectItem>
+                  
                 </SelectContent>
               </Select>
               <FormMessage />
@@ -229,10 +254,10 @@ export default function AddAPICommunicationForm() {
 
         <div className="flex items-center gap-4 flex-col sm:flex-row">
           <Button className="w-full" size="lg">
-            Create
+            {btn1_content}
           </Button>
           <Button variant="secondary" className="w-full" size="lg">
-            Create and add another
+            {btn2_content}
           </Button>
         </div>
       </form>

src/components/api-communication-table/cell-action.tsx

@@ -12,6 +12,7 @@ import { useToast } from "@/components/ui/use-toast";
 import { ApiCommunication } from "@/types/api-communication";
 
 import { Edit, MoreHorizontal, Trash } from "lucide-react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
@@ -47,13 +48,13 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
         <DropdownMenuContent align="end">
           <DropdownMenuLabel>Actions</DropdownMenuLabel>
 
-          <DropdownMenuItem
-            className="cursor-pointer"
-            // onClick={() =>
-            //   router.push(`#`)
-            // }
-          >
-            <Edit className="mr-2 h-4 w-4" /> Update
+          <DropdownMenuItem className="cursor-pointer p-0">
+            <Link
+              href={`/dashboard/api-communications/edit/${data.id}`}
+              className="flex items-center gap-2 px-2 py-1.5 w-full"
+            >
+              <Edit className="h-4 w-4" /> Edit
+            </Link>
           </DropdownMenuItem>
           <DropdownMenuItem
             className="cursor-pointer"

src/constants/data.ts

@@ -164,7 +164,7 @@ export const dummyApiCommunications: ApiCommunication[] = [
     status: "course_creation_success",
     type: "course_creation",
     evaluation:
-      "	Uploaded at: 2023-09-20 00:00:00 - Uploader: jschultz@php.net - Developer: fabien@potencier.org - Status: finished",
+      "Uploaded at: 2023-09-20 00:00:00 - Uploader: jschultz@php.net - Developer: fabien@potencier.org - Status: finished",
     created_at: new Date().toISOString(),
   },
 ];