From 75943c9202c58fba596c8d772e00cc16f0441c5a Mon Sep 17 00:00:00 2001
From: KanonKC <kanonkce@gmail.com>
Date: Thu, 1 Feb 2024 17:36:59 +0700
Subject: [PATCH 1/2] Validation accordian can download input/output

---
 @/components/ui/pagination.tsx                | 117 ++++++++++++++++++
 .../Forms/CreateProblemForm/index.tsx         |   8 +-
 .../Tables/ProblemTables/MyProblemsTable.tsx  |   7 +-
 .../TestcaseValidationAccordion.tsx           |  62 ++++++++--
 src/components/shadcn/Pagination.tsx          | 117 ++++++++++++++++++
 5 files changed, 295 insertions(+), 16 deletions(-)
 create mode 100644 @/components/ui/pagination.tsx
 create mode 100644 src/components/shadcn/Pagination.tsx

diff --git a/@/components/ui/pagination.tsx b/@/components/ui/pagination.tsx
new file mode 100644
index 0000000..ea40d19
--- /dev/null
+++ b/@/components/ui/pagination.tsx
@@ -0,0 +1,117 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { ButtonProps, buttonVariants } from "@/components/ui/button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}
diff --git a/src/components/Forms/CreateProblemForm/index.tsx b/src/components/Forms/CreateProblemForm/index.tsx
index c8fe8ec..c65c021 100644
--- a/src/components/Forms/CreateProblemForm/index.tsx
+++ b/src/components/Forms/CreateProblemForm/index.tsx
@@ -24,10 +24,10 @@ const TabList = [
 		value: "requirement",
 		label: "Requirement",
 	},
-	{
-		value: "privacy",
-		label: "Privacy",
-	},
+	// {
+	// 	value: "privacy",
+	// 	label: "Privacy",
+	// },
 	{
 		value: "groups",
 		label: "Manage Groups & Permissions",
diff --git a/src/components/Tables/ProblemTables/MyProblemsTable.tsx b/src/components/Tables/ProblemTables/MyProblemsTable.tsx
index 3f8097d..8e2db36 100644
--- a/src/components/Tables/ProblemTables/MyProblemsTable.tsx
+++ b/src/components/Tables/ProblemTables/MyProblemsTable.tsx
@@ -163,7 +163,12 @@ const columns: ColumnDef<ProblemPopulateTestcases>[] = [
 
 	{
 		accessorKey: "difficulty",
-		header: "Difficulty",
+		header: ({ column }) => (
+			<DataTableSortableLayout onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
+				Difficulty
+			</DataTableSortableLayout>
+
+		),
 		cell: ({ row }) => (
 			<DifficultyBadge level={row.original.difficulty}/>
 		),
diff --git a/src/components/TestcaseValidationAccordion.tsx b/src/components/TestcaseValidationAccordion.tsx
index 66311d7..a2bb850 100644
--- a/src/components/TestcaseValidationAccordion.tsx
+++ b/src/components/TestcaseValidationAccordion.tsx
@@ -1,3 +1,4 @@
+import { FileDown } from "lucide-react";
 import { TestcaseStatusIndicatorColor } from "../constants/TestcaseStatusIndicatorColor";
 import { RuntimeResult } from "../types/apis/Problem.api";
 import { TestcaseModel } from "../types/models/Problem.model";
@@ -8,9 +9,41 @@ import {
 	AccordionTrigger,
 } from "./shadcn/Accordion";
 import { Badge } from "./shadcn/Badge";
+import { Button } from "./shadcn/Button";
 import { Label } from "./shadcn/Label";
 import { Textarea } from "./shadcn/Textarea";
 
+const minimizer = (text: string | null): string => {
+	const LIMIT = 250;
+
+	if (!text) return "";
+
+	if (text.length > LIMIT) {
+		return text.slice(0, LIMIT) + ` ... (${text.length - LIMIT} more)`;
+	}
+	return text;
+};
+
+const downloadTextfile = (filename: string, text: string | null) => {
+	if (!text) return;
+
+	const element = document.createElement("a");
+	const file = new Blob([text], { type: "text/plain" });
+	element.href = URL.createObjectURL(file);
+	element.download = filename;
+	document.body.appendChild(element); // Required for this to work in FireFox
+	element.click();
+};
+
+const DownloadMiniButton = ({...args}:{
+	className?: string;
+	onClick?: React.MouseEventHandler<HTMLParagraphElement>;
+}) => {
+	return (
+		<p  className="flex items-center cursor-pointer hover:text-green-500" {...args}><FileDown size={16} className="mr-1" /> Download .txt</p>
+	)
+}
+
 const TestcaseValidationInstance = ({
 	value,
 	inputValue,
@@ -44,32 +77,39 @@ const TestcaseValidationInstance = ({
 				)}
 			</AccordionTrigger>
 			<AccordionContent>
-				<div className="flex gap-5 pl-1">
-					<div className="w-5/12">
-						<Label>Input</Label>
+				<div className="flex gap-5 px-1">
+					<div className="w-1/2">
+						<div className="flex justify-between">
+							<Label>Input</Label>
+							<DownloadMiniButton onClick={() => downloadTextfile("input.txt", inputValue)}/>
+						</div>
 						<Textarea
-							rows={inputValue?.split("\n").length}
+							rows={minimizer(inputValue)?.split("\n").length}
 							readOnly
 							className="mt-1 font-mono cursor-pointer"
-							value={inputValue}
+							value={minimizer(inputValue)}
 							onClick={() =>
 								navigator.clipboard.writeText(inputValue)
 							}
 						/>
 					</div>
-					<div className="w-5/12">
-						<Label>Output</Label>
+					<div className="w-1/2">
+					<div className="flex justify-between">
+							<Label>Output</Label>
+							<DownloadMiniButton onClick={() => downloadTextfile("output.txt", outputValue)}/>
+						</div>
 						<Textarea
-							rows={outputValue?.split("\n").length}
+							rows={minimizer(outputValue)?.split("\n").length}
 							readOnly
 							className="mt-1 font-mono cursor-pointer"
-							value={outputValue ?? ""}
+							value={minimizer(outputValue)}
 							onClick={() =>
 								navigator.clipboard.writeText(outputValue ?? "")
 							}
 						/>
+						
 					</div>
-					<div className="w-2/12">
+					{/* <div className="w-2/12">
 						<Label>Runtime Status</Label>
 						<p
 							className={`text-xl font-bold text-${
@@ -80,7 +120,7 @@ const TestcaseValidationInstance = ({
 						>
 							{status}
 						</p>
-					</div>
+					</div> */}
 				</div>
 			</AccordionContent>
 		</AccordionItem>
diff --git a/src/components/shadcn/Pagination.tsx b/src/components/shadcn/Pagination.tsx
new file mode 100644
index 0000000..0cda8eb
--- /dev/null
+++ b/src/components/shadcn/Pagination.tsx
@@ -0,0 +1,117 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+import { ButtonProps, buttonVariants } from "./Button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}

From 1fd05f20d89babb61ad9f2020bd0f4937502e8fa Mon Sep 17 00:00:00 2001
From: KanonKC <kanonkce@gmail.com>
Date: Sun, 4 Feb 2024 13:31:12 +0700
Subject: [PATCH 2/2] Clear warnings

---
 .../TestcaseValidationAccordion.tsx           |  2 --
 src/contexts/MyProblemsContext.ts             | 30 +++++++++----------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/components/TestcaseValidationAccordion.tsx b/src/components/TestcaseValidationAccordion.tsx
index a2bb850..79f0a37 100644
--- a/src/components/TestcaseValidationAccordion.tsx
+++ b/src/components/TestcaseValidationAccordion.tsx
@@ -1,5 +1,4 @@
 import { FileDown } from "lucide-react";
-import { TestcaseStatusIndicatorColor } from "../constants/TestcaseStatusIndicatorColor";
 import { RuntimeResult } from "../types/apis/Problem.api";
 import { TestcaseModel } from "../types/models/Problem.model";
 import {
@@ -9,7 +8,6 @@ import {
 	AccordionTrigger,
 } from "./shadcn/Accordion";
 import { Badge } from "./shadcn/Badge";
-import { Button } from "./shadcn/Button";
 import { Label } from "./shadcn/Label";
 import { Textarea } from "./shadcn/Textarea";
 
diff --git a/src/contexts/MyProblemsContext.ts b/src/contexts/MyProblemsContext.ts
index 9828aea..6ddd26f 100644
--- a/src/contexts/MyProblemsContext.ts
+++ b/src/contexts/MyProblemsContext.ts
@@ -1,20 +1,20 @@
-import { createContext, useState } from "react"
-import { ProblemPopulateTestcases } from "../types/models/Problem.model"
+// import { createContext, useState } from "react"
+// import { ProblemPopulateTestcases } from "../types/models/Problem.model"
 
-export type MyProblemsContextStateType = {
-    problems: ProblemPopulateTestcases[]
-}
+// export type MyProblemsContextStateType = {
+//     problems: ProblemPopulateTestcases[]
+// }
 
-const iMyProblemsContextState: MyProblemsContextStateType = {
-    problems: []
-}
+// const iMyProblemsContextState: MyProblemsContextStateType = {
+//     problems: []
+// }
 
-export const getMyProblemsContextStateValue = ():MyProblemsContextStateType => {
-    const [problems, setProblems] = useState<ProblemPopulateTestcases[]>([]);
+// export const getMyProblemsContextStateValue = ():MyProblemsContextStateType => {
+//     const [problems, setProblems] = useState<ProblemPopulateTestcases[]>([]);
 
-    return {
-        problems
-    }
-}
+//     return {
+//         problems
+//     }
+// }
 
-export const MyProblemsContext = createContext<MyProblemsContextStateType>(iMyProblemsContextState);
\ No newline at end of file
+// export const MyProblemsContext = createContext<MyProblemsContextStateType>(iMyProblemsContextState);
\ No newline at end of file