Merge pull request #129 from Logannford/dashboard/todays-question-dashboard-card-component

Dashboard/todays question dashboard card component

Author: Logannford

prisma/migrations/20241109205431_adds_difficulty_to_question_schema/migration.sql

@@ -0,0 +1,5 @@
+-- CreateEnum
+CREATE TYPE "QuestionDifficulty" AS ENUM ('EASY', 'MEDIUM', 'HARD');
+
+-- AlterTable
+ALTER TABLE "Questions" ADD COLUMN     "QuestionDifficulty" "QuestionDifficulty" NOT NULL DEFAULT 'EASY';

prisma/migrations/20241109205633_difficulty_name_change/migration.sql

@@ -0,0 +1,9 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `QuestionDifficulty` on the `Questions` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "Questions" DROP COLUMN "QuestionDifficulty",
+ADD COLUMN     "difficulty" "QuestionDifficulty" NOT NULL DEFAULT 'EASY';

prisma/schema.prisma

@@ -16,6 +16,12 @@ enum userLevel {
   PREMIUM
 }
 
+enum QuestionDifficulty {
+  EASY
+  MEDIUM
+  HARD
+}
+
 model Users {
   uid       String  @id()
   email     String  @unique
@@ -80,6 +86,8 @@ model Questions {
   dailyQuestion Boolean @default(false)
 
   tags QuestionTags[]
+
+  difficulty QuestionDifficulty @default(EASY)
 }
 
 model Tag {

src/actions/questions/get-today.ts

@@ -1,21 +1,37 @@
 'use server';
 import { Question } from '@/types/Questions';
 import { prisma } from '@/utils/prisma';
+import { getTagsFromQuestion } from '../utils/get-tags-from-question';
 
 export const getTodaysQuestion = async (): Promise<Question | null> => {
   try {
     // Get the current date at 00:00:00 and the end of the day 23:59:59
     const todayStart = new Date().toISOString().split('T')[0];
 
     // Find a question where `questionDate` is today
-    return await prisma.questions.findFirst({
+    const res = await prisma.questions.findFirst({
       where: {
-        questionDate: todayStart
+        questionDate: todayStart,
       },
       include: {
         answers: true,
+        tags: {
+          include: {
+            tag: true,
+          },
+        },
       },
     });
+
+    if (!res) {
+      console.error('Question not found');
+      return null;
+    }
+
+    // get the tags from out the question
+    const question = getTagsFromQuestion(res) as unknown as Question;
+
+    return question;
   } catch (error) {
     console.error("Failed to get today's question:", error);
     return null;

src/actions/questions/get-yesterdays-question.ts

@@ -0,0 +1,46 @@
+'use server';
+import { Question } from '@/types/Questions';
+import { prisma } from '@/utils/prisma';
+import { getTagsFromQuestion } from '../utils/get-tags-from-question';
+
+export const getYesterdaysQuestion = async (): Promise<Question | null> => {
+  try {
+    // Get yesterday's date at midnight UTC
+    const yesterday = new Date();
+    yesterday.setDate(yesterday.getDate() - 1);
+    yesterday.setHours(0, 0, 0, 0);
+    const yesterdayISOString = yesterday.toISOString().split('T')[0];
+
+    // Find a question where `questionDate` is yesterday
+    const res = await prisma.questions.findFirst({
+      where: {
+        questionDate: yesterdayISOString,
+      },
+      include: {
+        answers: true,
+        tags: {
+          include: {
+            tag: true,
+          },
+        },
+      },
+    });
+
+    console.log({
+      res,
+    });
+
+    if (!res) {
+      console.error('No question found for yesterday');
+      return null;
+    }
+
+    // Get the tags from the question
+    const question = getTagsFromQuestion(res) as unknown as Question;
+
+    return question;
+  } catch (error) {
+    console.error("Failed to get yesterday's question:", error);
+    return null;
+  }
+};

src/app/(default_layout)/dashboard/page.tsx

@@ -1,14 +1,21 @@
+import { getUserFromDb, getUserFromSession } from '@/actions/user/get-user';
 import DashboardBentoGrid from '@/components/dashboard/dashboard-bento-grid';
 import LanguageSwitcher from '@/components/global/language-dropdown';
 import UserProfileDropdown from '@/components/global/user-profile-dropdown';
 import { Separator } from '@/components/ui/separator';
+import { getUserDisplayName } from '@/utils/user';
 
 export default async function Dashboard() {
+  const user = await getUserFromSession();
+  if (!user?.data?.user?.id) return null;
+  const userData = await getUserFromDb(user?.data?.user?.id);
+  if (!userData) return null;
+
   return (
     <div className="text-white flex flex-col gap-y-4 h-full">
       <div className="flex w-full justify-between">
         <h1 className="text-xl md:text-4xl font-satoshi font-semibold">
-          Overview
+          Welcome back, {getUserDisplayName(userData)}!
         </h1>
         <div className="flex item-center gap-x-3">
           <LanguageSwitcher />

src/app/(default_layout)/layout.tsx

@@ -30,7 +30,7 @@ export default function Layout({
             {/* Scrollable content */}
             <AppSidebar />
             <main className="w-full pr-6 py-6 lg:pt-6 lg:pb-3">
-              <div className="lg:pl-4 h-full">
+              <div className="lg:pl-4 h-[95%]">
                 {/* <SidebarTrigger className="size-4 h-full flex items-center my-auto -top-2.5 relative" /> */}
                 {children}
               </div>

src/app/(default_layout)/leaderboard/today/page.client.tsx

@@ -42,14 +42,15 @@ export default function TodaysLeaderboardPageClient(opts: {
 
   return (
     <div className="h-full">
-      {data?.fastestTimes.length === 0 && (
-        <div className="w-full flex flex-col gap-y-1 justify-center items-center ">
-          <p>No fastest times yet!</p>
-          <Button variant="secondary" href={`/question/${questionUid}`}>
-            Click here to be the first!
-          </Button>
-        </div>
-      )}
+      {data?.fastestTimes.length === 0 ||
+        (!data && (
+          <div className="w-full flex flex-col gap-y-1 justify-center items-center ">
+            <p>No fastest times yet!</p>
+            <Button variant="secondary" href={`/question/${questionUid}`}>
+              Click here to be the first!
+            </Button>
+          </div>
+        ))}
       <div className="h-full flex flex-col justify-between">
         <div className="flex flex-col gap-y-1">
           {data?.fastestTimes.map((time, i) => {

src/app/globals.css

@@ -58,7 +58,7 @@ body {
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
+    --card: 0 0% 5% 1;
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;

src/components/questions/dashboard/all-questions-bento-box.tsx renamed to src/components/dashboard/all-questions-bento-box.tsx

@@ -1,9 +1,9 @@
 'use client';
 import React, { useState } from 'react';
-import Chip from '../../global/chip';
+import Chip from '../global/chip';
 import DashboardQuestionCard from './dashboard-question-card';
-import { Arrow } from '@radix-ui/react-tooltip';
 import { ArrowRight } from 'lucide-react';
+import { Grid } from '../ui/grid';
 
 export default function AllQuestionsDashboardBentoBox() {
   const questions = [
@@ -19,18 +19,23 @@ export default function AllQuestionsDashboardBentoBox() {
   const [allQuestions] = useState([...questions, ...questions, ...questions]);
 
   return (
-    <section className="h-full flex flex-col gap-y-5 group">
+    <section className="h-full flex flex-col gap-y-5 group p-4 relative overflow-hidden">
+      <Grid size={20} position="top-right" />
       <div className="space-y-3">
         <Chip color="accent" text="Questions" />
         <h6 className="text-lg lg:text-xl flex items-center">
           View all Questions
-          <ArrowRight className="w-4 h-4 inline-block ml-1 group-hover:ml-2 duration-300" />
+          <ArrowRight className="size-4 inline-block ml-1 group-hover:ml-2 duration-300" />
         </h6>
       </div>
 
-      <div className="relative overflow-hidden mt-3 h-64">
+      <div className="relative overflow-hidden mt-3 md:h-64 xl:h-[17rem]">
+        {/* Top fade effect */}
+        <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-black-75 to-transparent z-10" />
+
+        {/* Scrolling content */}
         <div
-          className="animate-scroll hover:pause-animation"
+          className="animate-scroll hover:pause-animation relative z-0"
           style={
             { '--question-count': questions.length } as React.CSSProperties
           }
@@ -42,6 +47,9 @@ export default function AllQuestionsDashboardBentoBox() {
             />
           ))}
         </div>
+
+        {/* Bottom fade effect */}
+        <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-black-75 to-transparent z-10" />
       </div>
     </section>
   );