Ms6 shavonne/collab history

frontend/src/app/profile/_components/QuestionHistory/QuestionColumns/CollaboratorsColumn.tsx

@@ -1,7 +1,7 @@
-import { Question } from "@/types/Question";
 import { ColumnDef } from "@tanstack/react-table";
 import UserAvatar from "@/components/UserAvatar";
 import { UserProfile } from "@/types/User";
+import { HistoryItem } from "@/types/History";
 
 const mockCollaborators: UserProfile[] = [
   {
@@ -26,7 +26,7 @@ const mockCollaborators: UserProfile[] = [
   },
 ];
 
-const StatusColumn: ColumnDef<Question> = {
+const StatusColumn: ColumnDef<HistoryItem> = {
   accessorKey: "_id",
   header: () => <div className="px-4">Collaborators</div>,
   cell: () => {

frontend/src/app/profile/_components/QuestionHistory/QuestionColumns/DateColumn.tsx

@@ -0,0 +1,43 @@
+import { HistoryItem, HistoryItemSchema } from "@/types/History";
+import { ColumnDef } from "@tanstack/react-table";
+import { DataTableColumnHeader } from "../data-table-column-header";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+
+function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  const day = String(date.getDate()).padStart(2, '0');
+  const month = date.toLocaleString('default', { month: 'long' });
+  const year = date.getFullYear();
+  return `${month} ${day}, ${year}`; // "November 05, 2024"
+}
+
+const DateColumn: ColumnDef<HistoryItem> = {
+  accessorKey: "question.date",
+  header: ({ column }) => {
+    return (
+      <DataTableColumnHeader column={column} title="Date" className="w-1/2" />
+    );
+  },
+  cell: ({ row }) => {
+    const historyItem = HistoryItemSchema.parse(row.original);
+    const formattedDate = formatDate(historyItem.date); 
+    // const formattedDate =historyItem.date;
+
+    return (
+      <HoverCard>
+        <HoverCardTrigger className="hover:cursor-pointer">
+          {formattedDate}
+        </HoverCardTrigger>
+        <HoverCardContent>
+          <h2 className="mb-2 text-2xl">{formattedDate}</h2>
+        </HoverCardContent>
+      </HoverCard>
+    );
+  },
+};
+
+export default DateColumn;

frontend/src/app/profile/_components/QuestionHistory/QuestionColumns/DifficultyColumn.tsx

@@ -1,48 +1,29 @@
-import { Question, QuestionSchema } from "@/types/Question";
+import { HistoryItem, HistoryItemSchema } from "@/types/History";
 import { ColumnDef } from "@tanstack/react-table";
 import { DataTableColumnHeader } from "../data-table-column-header";
 import { cn } from "@/lib/utils";
 
-const DifficultyColumn: ColumnDef<Question> = {
-  accessorKey: "difficulty",
+const DifficultyPreferenceColumn: ColumnDef<HistoryItem> = {
+  accessorKey: "difficultyPreference",
   header: ({ column }) => {
     return (
-      <DataTableColumnHeader
-        column={column}
-        title="Difficulty"
-        className="w-1/4"
-      />
+      <DataTableColumnHeader column={column} title="Difficulty" className="w-1/4" />
     );
   },
   cell: ({ row }) => {
-    const question = QuestionSchema.parse(row.original);
-
+    const historyItem = HistoryItemSchema.parse(row.original);
     return (
       <span
-        className={cn(
-          question.difficulty == "Easy" && "text-difficulty-easy",
-          question.difficulty == "Medium" && "text-difficulty-medium",
-          question.difficulty == "Hard" && "text-difficulty-hard"
-        )}
-      >
-        {question.difficulty}
-      </span>
+      className={cn(
+        historyItem.difficultyPreference == "Easy" && "text-difficulty-easy",
+        historyItem.difficultyPreference == "Medium" && "text-difficulty-medium",
+        historyItem.difficultyPreference == "Hard" && "text-difficulty-hard"
+      )}
+    >
+      {historyItem.difficultyPreference}
+    </span>
     );
   },
-  sortingFn: (rowA, rowB) => {
-    const difficultyMap = {
-      Easy: 0,
-      Medium: 1,
-      Hard: 2,
-    };
-    return (
-      difficultyMap[rowA.original.difficulty] -
-      difficultyMap[rowB.original.difficulty]
-    );
-  },
-  filterFn: (row, key, value) => {
-    return value.includes(row.getValue(key));
-  },
 };
 
-export default DifficultyColumn;
+export default DifficultyPreferenceColumn;

frontend/src/app/profile/_components/QuestionHistory/QuestionColumns/DurationColumn.tsx

@@ -1,8 +1,8 @@
-import { Question } from "@/types/Question";
 import { ColumnDef } from "@tanstack/react-table";
 import { DataTableColumnHeader } from "../data-table-column-header";
+import { HistoryItem } from "@/types/History";
 
-const DurationColumn: ColumnDef<Question> = {
+const DurationColumn: ColumnDef<HistoryItem> = {
   accessorKey: "duration",
   header: ({ column }) => {
     return (

frontend/src/app/profile/_components/QuestionHistory/QuestionColumns/EloColumn.tsx

@@ -1,8 +1,8 @@
-import { Question } from "@/types/Question";
+import { HistoryItem } from "@/types/History";
 import { ColumnDef } from "@tanstack/react-table";
 import { Zap } from "lucide-react";
 
-const StatusColumn: ColumnDef<Question> = {
+const StatusColumn: ColumnDef<HistoryItem> = {
   accessorKey: "_id",
   header: () => <div className="px-4">Elo</div>,
   cell: () => {

frontend/src/app/profile/_components/QuestionHistory/QuestionColumns/TitleColumn.tsx

@@ -1,32 +1,35 @@
-import { Question, QuestionSchema } from "@/types/Question";
 import { ColumnDef } from "@tanstack/react-table";
 import { DataTableColumnHeader } from "../data-table-column-header";
 import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@/components/ui/hover-card";
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { HistoryItem, HistoryItemSchema } from "@/types/History";
 
-const TitleColumn: ColumnDef<Question> = {
-  accessorKey: "title",
+const TitleColumn: ColumnDef<HistoryItem> = {
+  accessorKey: "questionTitle",
   header: ({ column }) => {
     return (
       <DataTableColumnHeader column={column} title="Title" className="w-1/2" />
     );
   },
   cell: ({ row }) => {
-    const question = QuestionSchema.parse(row.original);
+    const historyItem = HistoryItemSchema.parse(row.original);
 
     return (
-      <HoverCard>
-        <HoverCardTrigger className="hover:cursor-pointer">
-          {question.title}
-        </HoverCardTrigger>
-        <HoverCardContent>
-          <h2 className="mb-2 text-2xl">{question.title}</h2>
-          <p>{question.description}</p>
-        </HoverCardContent>
-      </HoverCard>
+      <Dialog>
+        <DialogTrigger asChild className="hover:cursor-pointer">
+          <p>{historyItem.question.title}</p>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>{historyItem.question.title}</DialogTitle>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
     );
   },
 };

frontend/src/app/profile/_components/QuestionHistory/QuestionColumns/TopicsColumn.tsx

@@ -1,42 +1,42 @@
-import { Question, QuestionSchema } from "@/types/Question";
+import { HistoryItem, HistoryItemSchema } from "@/types/History";
 import { ColumnDef } from "@tanstack/react-table";
 import { DataTableColumnHeader } from "../data-table-column-header";
 
-const TopicsColumn: ColumnDef<Question> = {
-  accessorKey: "topics",
+const TopicPreferenceColumn: ColumnDef<HistoryItem> = {
+  accessorKey: "topicPreference",
   header: ({ column }) => {
     return (
-      <DataTableColumnHeader column={column} title="Topic" className="w-1/4" />
+      <DataTableColumnHeader column={column} title="Topics" className="w-1/4" />
     );
   },
   cell: ({ row }) => {
-    const question = QuestionSchema.parse(row.original);
+    const historyItem = HistoryItemSchema.parse(row.original);
 
     return (
       <div className="flex flex-wrap gap-2">
-        {question.categories.map((category, id) => (
-          <label
-            key={id}
-            className="px-3 py-1 rounded-md bg-background-200 text-primary"
-          >
-            {category}
-          </label>
-        ))}
-      </div>
+      {historyItem.topicPreference.map((category, id) => (
+        <label
+          key={id}
+          className="px-3 py-1 rounded-md bg-background-200 text-primary"
+        >
+          {category}
+        </label>
+      ))}
+    </div>
     );
   },
   sortingFn: (rowA, rowB) => {
-    const a = rowA.original.categories.sort();
-    const b = rowB.original.categories.sort();
+    const a = rowA.original.topicPreference.sort();
+    const b = rowB.original.topicPreference.sort();
 
     return a.length !== b.length
       ? a.length - b.length
       : a.join().localeCompare(b.join());
   },
   filterFn: (row, key, value: string[]) => {
-    const rowValue = row.original.categories;
+    const rowValue = row.original.topicPreference;
     return rowValue.some((v) => value.includes(v));
   },
 };
 
-export default TopicsColumn;
+export default TopicPreferenceColumn;

frontend/src/app/profile/_components/QuestionHistory/QuestionHistory.tsx

@@ -1,31 +1,39 @@
 import {
-    getQuestionCategories,
-    getQuestions,
-  } from "@/services/questionService";
-  import { QuestionsResponse } from "@/types/Question";
-  import { CategoriesResponse } from "@/types/Category";
-  import { questionTableColumns } from "./column";
-  import { DataTable } from "./data-table";
-
-  export default async function QuestionTable() {
-    const questionsResponse: QuestionsResponse = await getQuestions();
-    const categoriesResponse: CategoriesResponse = await getQuestionCategories();
-
-    if (!questionsResponse.data) {
-      return <div>{questionsResponse.message}</div>;
-    }
-
-    const questions = questionsResponse.data.questions;
-    const categories = categoriesResponse.data
-      ? categoriesResponse.data.categories
-      : [];
-
-    return (
-      <DataTable
-        columns={questionTableColumns}
-        data={questions}
-        categories={categories}
-      />
-    );
+  getQuestionCategories,
+  getQuestions,
+} from "@/services/questionService";
+import { QuestionsResponse } from "@/types/Question";
+import { CategoriesResponse } from "@/types/Category";
+import { questionTableColumns } from "./column";
+import { DataTable } from "./data-table";
+import { HistoryResponseSchema } from "@/types/History";
+import { fetchHistory } from "@/services/userService";
+
+export default async function HistoryTable() {
+  const questionsResponse: QuestionsResponse = await getQuestions();
+  const categoriesResponse: CategoriesResponse = await getQuestionCategories();
+
+  let historyResponse;
+  historyResponse = await fetchHistory();
+
+  if (historyResponse.statusCode !== 200) {
+    throw new Error(historyResponse.message);
   }
-
+
+  const validatedHistoryResponse = HistoryResponseSchema.parse(historyResponse);
+
+  const history = validatedHistoryResponse.data;
+
+  const questions = questionsResponse.data.questions;
+  const categories = categoriesResponse.data
+    ? categoriesResponse.data.categories
+    : [];
+
+  return (
+    <DataTable
+      columns={questionTableColumns}
+      data={history}
+      categories={categories}
+    />
+  );
+}

frontend/src/app/profile/_components/QuestionHistory/column.tsx

@@ -1,18 +1,18 @@
 "use client";
 
-import { Question } from "@/types/Question";
 import { ColumnDef } from "@tanstack/react-table";
 import TitleColumn from "./QuestionColumns/TitleColumn";
 import TopicsColumn from "./QuestionColumns/TopicsColumn";
 import DifficultyColumn from "./QuestionColumns/DifficultyColumn";
 import DurationColumn from "./QuestionColumns/DurationColumn";
 import CollaboratorsColumn from "./QuestionColumns/CollaboratorsColumn";
 import EloColumn from "./QuestionColumns/EloColumn";
+import { HistoryItem } from "@/types/History";
+import DateColumn from "./QuestionColumns/DateColumn";
 
-
-
-export const questionTableColumns: ColumnDef<Question>[] = [
+export const questionTableColumns: ColumnDef<HistoryItem>[] = [
   TitleColumn,
+  DateColumn,
   TopicsColumn,
   DifficultyColumn,
   DurationColumn,