feat: agreement improvements

iforge-uos · Apr 23, 2024 · 5aca331 · 5aca331
1 parent a858b95
commit 5aca331
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/apps/forge/src/routes/_authenticated/signin/agreements/$id.tsx b/apps/forge/src/routes/_authenticated/signin/agreements/$id.tsx
@@ -3,19 +3,21 @@ import Title from "@/components/title";
 import { extractError, useUser } from "@/lib/utils";
 import { getAgreement } from "@/services/root/getAgreement";
 import { useQuery } from "@tanstack/react-query";
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { Button } from "@ui/components/ui/button";
 import { Checkbox } from "@ui/components/ui/checkbox";
 import { Label } from "@ui/components/ui/label";
 import { Separator } from "@ui/components/ui/separator";
 import { useState } from "react";
 import Markdown from "react-markdown";
+import { toast } from "sonner";
 
 export default function Component() {
   const { id } = Route.useParams();
 
   const [isChecked, setIsChecked] = useState<string | boolean>(false);
   const user = useUser()!;
+  const navigator = useNavigate();
 
   const {
     data: agreement,
@@ -71,11 +73,12 @@ export default function Component() {
           onClick={async () => {
             if (isChecked) {
               await axiosInstance.post(`/agreements/${id}`, { user });
-              user.agreements_signed.push({ id });
+              toast.success("Successfully signed agreement");
+              return navigator({ to: "/signin/agreements" });
             }
           }}
         >
-          Continue
+          Confirm
         </Button>
       </div>
     </>

diff --git a/apps/forge/src/routes/_authenticated/signin/agreements/index.tsx b/apps/forge/src/routes/_authenticated/signin/agreements/index.tsx
@@ -45,8 +45,8 @@ export default function Component() {
       <p className="accent-accent text-center">The signable agreements in the iForge.</p>
 
       <div className="flex justify-center">
-        <Table>
-          <TableHeader className="bg-accent">
+        <Table className="max-w-xl mx-auto">
+          <TableHeader className="bg-accent rounded-md">
             <TableRow>
               <TableHead>Reasons</TableHead>
               <TableHead className="text-center">Status</TableHead>
@@ -64,7 +64,9 @@ export default function Component() {
                 <TableCell>{agreement.reasons.map((reason) => reason.name).join(", ")}</TableCell>
                 <TableCell>
                   <div className="flex justify-center">
-                    <Badge variant="outline">{getAgreementStatus(agreement)}</Badge>
+                    <Badge variant="outline" className="rounded-md">
+                      {getAgreementStatus(agreement)}
+                    </Badge>
                   </div>
                 </TableCell>
                 <TableCell className="text-center">{agreement.version}</TableCell>