feat: dynamic prompt pages, fixed UI issues with prompt list (#122)

* feat: dynamic prompt pages, fixed UI issues with prompt list * fix: remove migrate body
Seizoxu · Sep 7, 2024 · e7928e8 · e7928e8
1 parent cf90f5b
commit e7928e8
Show file tree

Hide file tree

Showing 13 changed files with 78 additions and 30 deletions.
diff --git a/nginx-docker/convert-nginx.sh b/nginx-docker/convert-nginx.sh
@@ -1,6 +1,4 @@
 # !/usr/bin/env bash
 
 envsubst '$${NEXTJS_CONTAINER_IP} $${ACTIX_CONTAINER_IP}'  < /etc/nginx/conf.d/${CONF_FILE} > /etc/nginx/conf.d/default.conf 
-rm -rf /etc/nginx/conf.d/dev-nginx.conf
-rm -rf /etc/nginx/conf.d/prod-nginx.conf
 nginx -g "daemon off;"
diff --git a/nginx-docker/nginx.conf b/nginx-docker/nginx.conf
@@ -45,5 +45,5 @@ http {
     # Load modular configuration files from the /etc/nginx/conf.d directory.
     # See http://nginx.org/en/docs/ngx_core_module.html#include
     # for more information.
-    include /etc/nginx/conf.d/*.conf;
+    include /etc/nginx/conf.d/default.conf;
 }
diff --git a/zyenyo-backend/src/models.rs b/zyenyo-backend/src/models.rs
@@ -7,6 +7,7 @@ pub struct Prompt {
     pub title: String,
     pub text: String,
     pub rating: f64,
+    pub slug: String,
 }
 
 #[derive(Clone, Debug, PartialEq, Deserialize, Serialize)]

diff --git a/zyenyo-backend/src/routes/mod.rs b/zyenyo-backend/src/routes/mod.rs
@@ -6,5 +6,6 @@ use actix_web::web;
 pub fn api_config(cfg: &mut web::ServiceConfig) {
     cfg
         .service(prompts::prompts)
+        .service(prompts::prompt)
         .service(botstats::botstats);
 }
diff --git a/zyenyo-backend/src/routes/prompts.rs b/zyenyo-backend/src/routes/prompts.rs
@@ -51,13 +51,13 @@ async fn prompts(
 ) -> impl Responder {
     let info = controls.into_inner();
 
-    match prompt_query(context, info).await {
+    match prompts_query(context, info).await {
         Ok(prompts_vec) => HttpResponse::Ok().json(prompts_vec),
         Err(e) => HttpResponse::InternalServerError().body(e.to_string()),
     }
 }
 
-async fn prompt_query(
+async fn prompts_query(
     context: web::Data<Context>,
     controls: PromptsConfig,
 ) -> Result<Vec<Prompt>, Box<dyn Error>> {
@@ -84,3 +84,27 @@ async fn prompt_query(
         .filter_map(|doc| bson::from_document::<Prompt>(doc.to_owned()).ok())
         .collect())
 }
+
+
+#[get("/prompt/{slug}")]
+async fn prompt(context: web::Data<Context>, path: web::Path<String>) -> impl Responder {
+    let slug = path.into_inner();
+
+    dbg!(&slug);
+
+    match prompts_by_slug_query(context, slug).await {
+        Ok(Some(prompt)) => HttpResponse::Ok().json(prompt),
+        Ok(None) => HttpResponse::NotFound().body("No prompt found"),
+        Err(e) => HttpResponse::InternalServerError().body(e.to_string()),
+    }
+}
+
+async fn prompts_by_slug_query(context: web::Data<Context>, slug: String) -> Result<Option<Prompt>, Box<dyn Error>> {
+    let collection: Collection<Prompt> = context.db.collection("prompts");
+
+    Ok(collection.find_one(doc! {"slug": slug}, None).await?)
+
+
+
+
+}
diff --git a/zyenyo-discord/src/main/java/dataStructures/Aliases.java b/zyenyo-discord/src/main/java/dataStructures/Aliases.java
@@ -62,6 +62,7 @@ public final class Aliases
 			BotConfig.PREFIX + "compare",
 			BotConfig.PREFIX + "c");
 	public static final Set<String> TYPEDIFF = Set.of(
+			BotConfig.PREFIX + "typediff",
 			BotConfig.PREFIX + "difference",
 			BotConfig.PREFIX + "diff");
 	public final static Set<String> CHART = Collections.singleton(BotConfig.PREFIX + "chart");

diff --git a/zyenyo-frontend/src/app/page.tsx b/zyenyo-frontend/src/app/page.tsx
@@ -2,7 +2,7 @@ import Dashboard from '@/components/HomePage/Dashboard'
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center bg-zinc-800 text-white">
+    <main className="flex font-sans flex-col min-h-screen items-center bg-zinc-800 text-white">
 
       <Dashboard/>
 

diff --git a/zyenyo-frontend/src/app/prompts/[slug]/page.tsx b/zyenyo-frontend/src/app/prompts/[slug]/page.tsx
@@ -0,0 +1,28 @@
+"use client"
+import Header from "@/components/Navigation/Header";
+import { Prompt } from "@/components/PromptsPage/PromptControls";
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+export default function Prompt({ params }: { params: { slug: string } }) {
+    const [prompt, setPrompt] = useState<Prompt | null>(null)
+
+    useEffect(() => {
+        async function query() {
+            const res = await axios.get(`/api/prompt/${params.slug}`);
+            setPrompt(res.data as Prompt)
+
+        }
+        query()
+    }, [params.slug])
+
+
+  return (
+    <main className="font-sans flex flex-col min-h-screen justify-start bg-zinc-800 text-white">
+    <Header />
+    <div className="text-3xl font-bold px-8 md:px-24 py-8">{prompt?.title}</div>
+    <div className="px-8 md:px-24 pb-8">{prompt?.text}</div>
+    <div className="px-8 md:px-24 text-zinc-300">Type Rating: {prompt?.rating.toFixed(2)}</div>
+    </main>
+  )
+}
diff --git a/zyenyo-frontend/src/app/prompts/page.tsx b/zyenyo-frontend/src/app/prompts/page.tsx
@@ -3,7 +3,7 @@ import PromptControls from "@/components/PromptsPage/PromptControls";
 
 export default function PromptsPage() {
   return (
-    <main className="flex min-h-screen flex-col items-center bg-zinc-800 text-white">
+    <main className="flex font-sans min-h-screen flex-col items-center bg-zinc-800 text-white">
     <Header />
       <PromptControls/> 
     </main>

diff --git a/zyenyo-frontend/src/components/HomePage/Dashboard.tsx b/zyenyo-frontend/src/components/HomePage/Dashboard.tsx
@@ -20,31 +20,31 @@ const Dashboard = () => {
             <BotStats className="my-5 hidden md:block" />
             <div className="grid grid-cols-1 md:grid-cols-2 mt-auto mb-auto gap-3">
 
-                <Link className="flex flex-col justify-evenly hover:bg-zinc-800 ease-in p-6 gap-3 max-w-[350px] h-[180px] text-left border-2 border-white rounded-3xl " href="https://discord.com/api/oauth2/authorize?client_id=696614233944752130&permissions=137439283200&scope=bot" target="_blank">
+                <Link className="flex flex-col justify-evenly hover:bg-zinc-700 ease-in p-6 gap-3 max-w-[350px] h-[180px] text-left border-2 border-white rounded-3xl " href="https://discord.com/api/oauth2/authorize?client_id=696614233944752130&permissions=137439283200&scope=bot" target="_blank">
                     <StarIcon className="h-8 w-8 text-[#F51A1F]" />
                     <div>
                         <p className="text-lg mb-1 font-bold">Get Zyenyo</p>
                         <p className="text-sm text-gray-50">Add Zyenyo to your server.</p>
                     </div>
                 </Link>
 
-                <Link className="flex flex-col justify-evenly hover:bg-zinc-800 ease-in p-6 gap-3 max-w-[350px] h-[180px] text-left border-2 border-white rounded-3xl " href="/" >
+                <Link className="flex flex-col justify-evenly hover:bg-zinc-700 ease-in p-6 gap-3 max-w-[350px] h-[180px] text-left border-2 border-white rounded-3xl " href="/" >
                     <CommandLineIcon className="h-8 w-8 text-[#F51A1F]" />
                     <div>
                         <p className="text-lg mb-1 font-bold">Commands</p>
                         <p className="text-sm text-gray-50">Documentation for every command Zyenyo has to offer. Coming soon!</p>
                     </div>
                 </Link>
 
-                <Link className="flex flex-col justify-evenly hover:bg-zinc-800 ease-in p-6 gap-3 max-w-[350px] h-[180px] text-left border-2 border-white rounded-3xl " href="/" >
+                <Link className="flex flex-col justify-evenly hover:bg-zinc-700 ease-in p-6 gap-3 max-w-[350px] h-[180px] text-left border-2 border-white rounded-3xl " href="/" >
                     <TrophyIcon className=" h-8 w-8 text-[#F51A1F]" />
                     <div>
                         <p className="text-lg mb-1 font-bold">Leaderboards</p>
                         <p className="text-sm text-gray-50">Player rankings on various typing statistics. Coming soon!</p>
                     </div>
                 </Link>
 
-                <Link className="flex flex-col justify-evenly hover:bg-zinc-800 ease-in p-6 gap-3 max-w-[350px] h-[180px] text-left border-2 border-white rounded-3xl " href="/prompts" >
+                <Link className="flex flex-col justify-evenly hover:bg-zinc-700 ease-in p-6 gap-3 max-w-[350px] h-[180px] text-left border-2 border-white rounded-3xl " href="/prompts" >
                     <ChatBubbleLeftEllipsisIcon className=" h-8 w-8 text-[#F51A1F]" />
                     <div>
                         <p className="text-lg mb-1 font-bold">Prompts</p>

diff --git a/zyenyo-frontend/src/components/Navigation/Header.tsx b/zyenyo-frontend/src/components/Navigation/Header.tsx
@@ -4,7 +4,7 @@ import Link from "next/link"
 
 const Header = () => {
     return (
-        <div className=' flex bg-zinc-900 p-6 w-full justify-center gap-0 text-6xl md:text-6xl mb-12'>
+        <div className='font-sans flex bg-zinc-900 p-6 w-full justify-center gap-0 text-6xl md:text-6xl mb-4'>
         <Link className='flex flex-row' href="/">
             <div className='text-white underline underline-offset-8'>Zyenyo</div><div className='text-[#F51A1F]'>Bot</div>
         </Link>

diff --git a/zyenyo-frontend/src/components/PromptsPage/PromptCard.tsx b/zyenyo-frontend/src/components/PromptsPage/PromptCard.tsx
@@ -1,6 +1,7 @@
 import {useState} from "react"
 import {Prompt} from "./PromptControls"
 import { ChevronDoubleDownIcon, ChevronDoubleUpIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
 
 
 type PromptCardProps = {
@@ -12,18 +13,13 @@ const PromptCard = (props: PromptCardProps) => {
     let { prompt } = props
 
     return (
-        <button className="relative m-2 flex p-10 flex-col border-[3px] border-[#F51A1F] rounded-3xl hover:bg-zinc-800" onClick={() => setCollapsed((prev) => !prev)}>
-            <div className="flex mb-3 justify-between">
-                <p className="text-lg font-bold">{prompt.title}</p>
-                <p className="text-md font-bold">TR: {prompt.rating.toFixed(2)}</p>
+        <Link href={`/prompts/${prompt.slug}`} className="m-3 flex p-8 flex-col border-[3px] border-[#F51A1F] rounded-3xl hover:bg-zinc-700">
+        <p className="text-lg font-bold text-left mb-2">{prompt.title}</p>
+            <div className="flex justify-between w-full">
+                <div className="text-md">TR: {prompt.rating.toFixed(2)}</div>
+                <div className="text-md">Length: {prompt.text.length}</div>
             </div>
-           <p className={`text-sm text-left text-gray-50 ${collapsed ? "truncate" : ""}`}>{prompt.text}</p>
-            {collapsed ? (
-                <ChevronDoubleDownIcon className="absolute h-6 w-6 left-[50%] right-[50%] bottom-1 text-[#F51A1F]" />
-            ) : (
-                <ChevronDoubleUpIcon className="absolute h-6 w-6 left-[50%] right-[50%] bottom-1 text-[#F51A1F]" />
-            )}
-        </button>
+        </Link>
     )
 }
 

diff --git a/zyenyo-frontend/src/components/PromptsPage/PromptControls.tsx b/zyenyo-frontend/src/components/PromptsPage/PromptControls.tsx
@@ -13,6 +13,7 @@ export type Prompt = {
     title: String,
     text: String,
     rating: number,
+    slug: String
 }
 
 const sortOptions = [
@@ -40,19 +41,19 @@ const PromptControls = () => {
     }, [promptControls])
 
     return (
-        <div className='max-w-[300px] md:max-w-[500px]'>
+        <div className='min-w-[300px] md:min-w-[500px]'>
             <input className='flex border-2 border-white rounded-xl w-full bg-zinc-800 h-14 my-3 px-3' placeholder='Search Prompts' onChange={(e) => debounced(e.target.value)}/>
 
 
-            <div className='flex gap-5'>
+            <div className='flex justify-evenly'>
 
                 <div className='flex flex-col gap-1'>
                     <p className='text-sm font-bold ml-2 text-gray-400'>Sort By</p>
                     <Select
                         classNames={{
                             control: () => "bg-zinc-800 border-2 border-amber-400 rounded-xl p-2",
                             menu: () => "bg-zinc-800 border-2 border-amber-400 rounded-xl p-3",
-                            option: (state) => state.isFocused ? 'bg-zinc-800' : 'bg-zinc-800'
+                            option: (state) => state.isFocused ? 'bg-zinc-700' : 'bg-zinc-800'
                         }}
                         unstyled
                         isSearchable={false}
@@ -72,7 +73,7 @@ const PromptControls = () => {
                         classNames={{
                             control: () => "bg-zinc-800 border-2 border-amber-400 rounded-xl p-2",
                             menu: () => "bg-zinc-800 border-2 border-amber-400 rounded-xl p-3",
-                            option: (state) => state.isFocused ? 'bg-zinc-800' : 'bg-zinc-800'
+                            option: (state) => state.isFocused ? 'bg-zinc-700' : 'bg-zinc-800'
                         }}
                         unstyled
                         isSearchable={false}
@@ -100,10 +101,8 @@ const PromptControls = () => {
                 </div>
             </div>
 
-            <div className='flex flex-col h-[70vh] gap-5 mt-12 overflow-y-scroll'>
-
+            <div className='flex flex-col h-full gap-5 mt-12'>
                 {prompts?.map((prompt, idx) => <PromptCard prompt={prompt} key={idx}/>)}
-
             </div>
         </div>
     )