Resources page (#36)

* feat: added the add info section

* feat: added the option to submit info

* feat: add AdditionalContent model and related API endpoints for managing additional resources

* feat: added the CRUD for resources

* fix

* fix

* fix

* fix

* refactor: clean up unused imports and variables in resources and post components

* refactor: remove unused 'use client' directive and React import from isAdmin component

* add comment time and little ui adjustment

* fix trpc client import

* Delete src/trpc/client.ts

---------

Co-authored-by: Héctor Tovar <soyeduardoo20@gmail.com>
Co-authored-by: Rodro <rodrigo.gamboa@Outlook.com>

Author: 3 people

package-lock.json

@@ -29,6 +29,7 @@
     "@trpc/react-query": "^11.0.0-rc.446",
     "@trpc/server": "^11.0.0-rc.446",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.18.1",
     "geist": "^1.3.0",
     "graphql": "^16.10.0",
     "graphql-request": "^7.1.2",

package.json

@@ -7,12 +7,6 @@ datasource db {
   url      = env("DATABASE_URL")
 }
 
-enum Difficulty {
-  EASY
-  MEDIUM
-  HARD
-}
-
 model Account {
   id                       String  @id @default(cuid())
   userId                   String
@@ -41,16 +35,17 @@ model Session {
 }
 
 model User {
-  id             String    @id @default(cuid())
-  name           String?
-  email          String?   @unique
-  emailVerified  DateTime?
-  image          String?
-  leetcodeUser   String?
-  role           String    @default("MEMBER")
-  accounts       Account[]
-  sessions       Session[]
-  solvedProblems Problem[] @relation("SolvedProblems")
+  id                 String              @id @default(cuid())
+  name               String?
+  email              String?             @unique
+  emailVerified      DateTime?
+  image              String?
+  role               String              @default("MEMBER")
+  leetcodeUser       String?
+  accounts           Account[]
+  additionalContents AdditionalContent[] @relation("UserAdditionalContents")
+  sessions           Session[]
+  solvedProblems     Problem[]           @relation("SolvedProblems")
 }
 
 model VerificationToken {
@@ -80,4 +75,20 @@ model Problem {
   weekId      String
   week        Week       @relation(fields: [weekId], references: [id], onDelete: Cascade)
   solvedBy    User[]     @relation("SolvedProblems")
+  
+}
+
+model AdditionalContent {
+  id        String   @id @default(cuid())
+  topic     String
+  content   String
+  createdAt DateTime @default(now())
+  authorId  String
+  author    User     @relation("UserAdditionalContents", fields: [authorId], references: [id], onDelete: Cascade)
+}
+
+enum Difficulty {
+  EASY
+  MEDIUM
+  HARD
 }

prisma/schema.prisma

@@ -1,10 +1,34 @@
+'use client';
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import Resources from "~/app/_components/nav/navResources";
+import ResourceContent from "~/app/_components/resources/resourceContent";
 
-const Resources = () => {
-    return (
-        <div>
-            Hi
-        </div>
-    )
-}
+const HomeResources = () => {
+  const [selectedResource, setSelectedResource] = useState("Resources Page");
 
-export default Resources;
+  return (
+    <div className="flex"> 
+      <div className="w-1/4 overflow-y-auto">
+        <Resources onSelect={setSelectedResource} selected={selectedResource}/>
+      </div>
+      <div className="w-3/4 overflow-y-auto"> 
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={selectedResource}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.35 }}
+            className="p-6 flex-1 text-white relative"
+          >
+            <h1 className="text-4xl font-bold mb-4">{selectedResource}</h1>
+            <ResourceContent topic={selectedResource}/>
+          </motion.div>
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+};
+
+export default HomeResources;

src/app/(pages)/resources/page.tsx

@@ -3,7 +3,6 @@
 import { api } from "~/trpc/react";
 
 export function TestButton() {
-  const utils = api.useUtils();
   const { data } = api.leetcode.hasCompletedProblemRecently.useQuery({
     username: "Oscar_gg",
     problemSlug: "final-array-state-after-k-multiplication-operations-i",

src/app/_components/fetchData.tsx

@@ -0,0 +1,50 @@
+type NavResourcesProps = {
+  onSelect: (topic: string) => void;
+  selected: string;
+}
+
+const topics = [
+  "Complexities and Analysis of Algorithm",
+  "Arrays",
+  "Searching Algorithms",
+  "Sorting Algorithms",
+  "Hashing",
+  "Two Pointer Technique",
+  "Window Sliding Technique",
+  "Prefix Sum Technique",
+  "String",
+  "Recursion",
+  "Matrix/Grid",
+  "Linked List",
+  "Stack",
+  "Queue",
+  "Deque",
+  "Tree",
+  "Heap",
+  "Graph",
+  "Greedy Algorithm",
+  "Dynamic Programming",
+  "Mocks Interviews",
+];
+
+const Resources = ({ onSelect, selected }: NavResourcesProps) => {
+  return (
+    <nav className="flex flex-col gap-2 p-4 text-white min-w-[200px] h-screen overflow-y-auto">
+      {topics.map((topic) => (
+        <button
+          key={topic}
+          onClick={() => onSelect(topic)}
+          className={`
+            text-left p-2 rounded duration-300
+            hover:bg-gray-700 hover:scale-105
+            ${selected === topic ? "underline font-semibold bg-gray-800" : ""}
+          `}
+        >
+          {topic}
+        </button>
+      ))}
+    </nav>
+  );
+};
+
+export default Resources;