[#22] | add statistic result

src/app/leaderboard/page.tsx

@@ -1,12 +1,5 @@
-import { Navigation, ChevronDown } from "lucide-react";
-import React, { useState } from "react";
+import React from "react";
 
-import { Card } from "@/components/ui/card";
-import {
-  HoverCard,
-  HoverCardTrigger,
-  HoverCardContent,
-} from "@/components/ui/hover-card";
 import { prisma } from "@/lib/prisma";
 import { ResultsTable } from "@/components/results-table";
 import { Result } from "@prisma/client";
@@ -37,7 +30,7 @@ export default async function LeaderboardPage({
         ])
       : [];
 
-  const { results, totalResults } = await prisma.$transaction(async (tx) => {
+  const { results, totalResults } = await prisma.$transaction(async (_) => {
     const results = await prisma.result.findMany({
       take,
       skip,

src/app/race/typingCode.tsx

@@ -6,6 +6,7 @@ import type { User } from "next-auth";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { saveUserResult } from "./actions";
+import { useRouter } from "next/navigation"
 import RacePositionTracker from "./racePositionTracker";
 
 const code = `printf("hello world")`;
@@ -29,6 +30,8 @@ export default function TypingCode({ user }: TypingCodeProps) {
   const [errors, setErrors] = useState<number[]>([]);
   const [isTyping, setIsTyping] = useState(false);
   const inputEl = useRef<HTMLInputElement | null>(null);
+  const [isEnd, setIsEnd] = useState(false)
+  const router = useRouter()
 
   useEffect(() => {
     if (startTime && endTime) {
@@ -49,7 +52,9 @@ export default function TypingCode({ user }: TypingCodeProps) {
       inputEl.current.focus();
     }
 
-  }, [endTime, startTime, user, errors.length]);
+    if (isEnd && endTime && startTime) router.push("/result")
+
+  }, [endTime, startTime, user, errors.length, isEnd, router]);
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setInput(event.target.value);
@@ -60,6 +65,7 @@ export default function TypingCode({ user }: TypingCodeProps) {
     } else if (event.target.value === code) {
       setEndTime(new Date());
       setIsTyping(false);
+      setIsEnd(true)
     } else {
       setErrors(() => {
         const currentText: string = code.substring(

src/app/result/chart.tsx

@@ -0,0 +1,126 @@
+// import "./styles.css";
+import React, { useState, useCallback } from "react";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer
+} from "recharts";
+
+const data = [
+  {
+    name: "Page A",
+    wpm: 4000,
+    accuracy: 2400,
+    error: 2400
+  },
+  {
+    name: "Page B",
+    wpm: 3000,
+    accuracy: 1398,
+    error: 2210
+  },
+  {
+    name: "Page C",
+    wpm: 2000,
+    accuracy: 9800,
+    error: 2290
+  },
+  {
+    name: "Page D",
+    wpm: 2780,
+    accuracy: 3908,
+    error: 2000
+  },
+  {
+    name: "Page E",
+    wpm: 1890,
+    accuracy: 4800,
+    error: 2181
+  },
+  {
+    name: "Page F",
+    wpm: 2390,
+    accuracy: 3800,
+    error: 2500
+  },
+  {
+    name: "Page G",
+    wpm: 3490,
+    accuracy: 4300,
+    error: 2100
+  }
+];
+
+export default function Chart() {
+  const [opacity, setOpacity] = useState({
+    wpm: 1,
+    accuracy: 1,
+    error: 1
+  });
+
+  const handleMouseEnter = useCallback(
+    (o:any) => {
+      const { dataKey } = o;
+
+      setOpacity({ ...opacity, [dataKey]: 0.5 });
+    },
+    [opacity, setOpacity]
+  );
+
+  const handleMouseLeave = useCallback(
+    (o:any) => {
+      const { dataKey } = o;
+      setOpacity({ ...opacity, [dataKey]: 1 });
+    },
+    [opacity, setOpacity]
+  );
+
+  return (
+    <div style={{ width: "100%", height: 300 }} className="mx-auto">
+      <ResponsiveContainer>
+      <LineChart
+        data={data}
+        margin={{
+          top: 5,
+          right: 30,
+          left: 20,
+          bottom: 5
+        }}
+      >
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+        <Legend
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        />
+        <Line
+          type="monotone"
+          dataKey="accuracy"
+          strokeOpacity={opacity.accuracy}
+          stroke="#0261b9"
+          activeDot={{ r: 8 }}
+        />
+        <Line
+          type="monotone"
+          dataKey="wpm"
+          strokeOpacity={opacity.wpm}
+          stroke="#0ee2c6"
+        />
+        <Line
+          type="monotone"
+          dataKey="error"
+          strokeOpacity={opacity.wpm}
+          stroke="#f00d0d"
+        />
+      </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

src/app/result/page.tsx

@@ -0,0 +1,74 @@
+"use client"
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import Chart from "./chart";
+import { Icons } from "@/components/icons";
+import { useRouter } from "next/navigation";
+
+const card = [
+  { title: "WPM", value: "81 %" },
+  { title: "Accuracy", value: "90 %" },
+  { title: "Rank", value: "20" },
+  { title: "Miss", value: "21" },
+  { title: "Times", value: "30s" },
+]
+
+export default function ResultsChart() {
+  const router = useRouter()
+
+  const handlerChangePage = () => {
+    router.push("/race")
+  }
+
+  return (
+    <div className="w-auto">
+      <div className="flex flex-col justify-center gap-4 mt-5">
+        <div className="flex flex-row mx-28 gap-6">
+          {
+            card.map((c, idx) => {
+              return (
+                <Card className="w-[30%]" key={idx}>
+                  <CardHeader>
+                    <CardTitle className="">{c.title}</CardTitle>
+                  </CardHeader>
+                  <CardContent>{c.value}</CardContent>
+                </Card>
+              )
+            })
+          }
+        </div>
+      </div>
+      <div className="p-8 flex flex-col  rounded-xl bg-dark-lake">
+        <div>
+        </div>
+        <div className="flex flex-wrap justify-center gap-4">
+          <Chart />
+        </div>
+      </div>
+      <div className="flex flex-wrap justify-center gap-4 p-2"  tabIndex={-1}  >
+        <Button onClick={handlerChangePage}  >
+          <Icons.chevronRight
+            className="h-5 w-5"
+            aria-hidden="true"
+          />
+        </Button>
+        <Button onClick={handlerChangePage}>
+          <Icons.refresh
+            className="h-5 w-5"
+            aria-hidden="true"
+          />
+        </Button>
+        <Button>
+          <Icons.picture
+            className="h-5 w-5"
+            aria-hidden="true"
+          />
+        </Button>
+      </div>
+        <div className="text-center mt-5 text-gray-600">
+          <span className="bg-[#0b1225]  m-1 p-1 rounded-md" > tab </span> + <span className="bg-[#0b1225] m-1 p-1 rounded-md" > enter </span> - restart game
+        </div>
+    </div>
+  );
+}

src/components/data-table.tsx

@@ -25,7 +25,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "./ui/select";
-import { Input } from "./ui/input";
 
 interface ColumnSort {
   id: string;
@@ -119,7 +118,7 @@ export function DataTable<TData, TValue>({
       setSorting={setSorting}
       setPagination={setPagination}
       renders={{
-        table: ({ children, tableInstance }) => {
+        table: ({ children }) => {
           return (
             <div className="rounded-md border mt-8 mb-4">
               <Table>{children}</Table>
@@ -161,9 +160,9 @@ export function DataTable<TData, TValue>({
         // filter inputs for columns 
         // we can also specify them in our
         // columns
-        filterInput: ({ props }) => null,
+        filterInput: () => null,
         // custom pagination bar
-        paginationBar: ({ tableInstance }) => {
+        paginationBar: () => {
           return (
             <div className="flex justify-center flex-col-reverse items-center gap-4 py-2 md:flex-row">
               <div className="flex flex-col items-center gap-3 sm:flex-row sm:gap-6">

src/components/icons.tsx

@@ -13,6 +13,8 @@ import {
   ChevronLeftSquareIcon,
   User2,
   LineChart,
+  RefreshCcwIcon,
+  ImageIcon
 } from "lucide-react";
 
 import Image from "next/image";
@@ -45,4 +47,6 @@ export const Icons = {
   lineChart: LineChart,
   mobileNavOpen: ChevronDownSquareIcon,
   mobileNavClosed: ChevronLeftSquareIcon,
+  refresh: RefreshCcwIcon,
+  picture: ImageIcon
 };