UPDATE: Style ResultsPage;

UPDATE: Improve components;
2025-02-22 20:23:24 +00:00
parent 12d9f3660a
commit cd7ea461a8
10 changed files with 243 additions and 117 deletions
--- a/frontend/src/components/Input/Button.tsx
+++ b/frontend/src/components/Input/Button.tsx
@@ -15,7 +15,7 @@ const Button: React.FC<ButtonProps> = ({
  return (
    <button
      type={type}
-      className={`${extraClasses} p-2 text-[1.5rem] text-white hover:text-purple-600 bg-black/30 hover:bg-black/80 rounded-md border border-gray-300 hover:border-purple-500 hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all`}
+      className={`${extraClasses} p-2 text-[1.5vw] text-white hover:text-purple-600 bg-black/30 hover:bg-black/80 rounded-md border border-gray-300 hover:border-purple-500 hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all`}
      {...props}
    >
      {children}
--- a/frontend/src/components/Input/SearchBar.tsx
+++ b/frontend/src/components/Input/SearchBar.tsx
@@ -3,8 +3,12 @@ import Input from "./Input";
 import { Search as SearchIcon } from "lucide-react";
 import { useNavigate } from "react-router-dom";

-const SearchBar: React.FC = () => {
-  const [searchQuery, setSearchQuery] = useState("");
+interface SearchBarProps {
+  value?: string;
+}
+
+const SearchBar: React.FC<SearchBarProps> = ({ value = "" }) => {
+  const [searchQuery, setSearchQuery] = useState(value);
  //const [debouncedQuery, setDebouncedQuery] = useState(searchQuery);
  const navigate = useNavigate();

@@ -21,7 +25,6 @@ const SearchBar: React.FC = () => {
      });

      const data = await response.json();
-      console.log("Search results:", data);

      navigate("/results", {
        state: { searchResults: data, query: searchQuery },
--- a/frontend/src/components/Layout/ListItem.tsx
+++ b/frontend/src/components/Layout/ListItem.tsx
@@ -1,10 +1,10 @@
 import React from "react";

 export interface ListItemProps {
-  type: "stream" | "category";
+  type: "stream" | "category" | "user";
  id: number;
  title: string;
-  streamer?: string;
+  username?: string;
  streamCategory?: string;
  viewers: number;
  thumbnail?: string;
@@ -15,13 +15,38 @@ export interface ListItemProps {
 const ListItem: React.FC<ListItemProps> = ({
  type,
  title,
-  streamer,
+  username,
  streamCategory,
  viewers,
  thumbnail,
  onItemClick,
  extraClasses = "",
 }) => {
+  if (type === "user") {
+    return (
+      <div className="p-4 pb-10">
+        <div
+          className={`group relative w-fit flex flex-col bg-blue-600 rounded-tl-xl rounded-xl min-h-[calc((20vw+20vh)/3)] max-w-[calc((20vw+20vh)/2)] justify-end items-center cursor-pointer mx-auto hover:bg-blue-800 z-50`}
+          onClick={onItemClick}
+        >
+          <img
+            src="/images/monkey.png"
+            alt={`user ${username}`}
+            className="rounded-xl max-w-[calc((20vw+20vh)/2)] border-[0.15em] border-purple-500 cursor-pointer"
+          />
+          <button className="text-[calc((2vw+2vh)/2)] font-bold hover:underline w-full py-2">
+            {title}
+          </button>
+
+          {title.includes("🔴") && (
+            <p className="absolute font-black bottom-5 opacity-0 group-hover:translate-y-full group-hover:opacity-100 group-hover:-bottom-1 transition-all">
+              Currently Live!
+            </p>
+          )}
+        </div>
+      </div>
+    );
+  }
  return (
    <div className="p-4">
      <div
@@ -41,7 +66,7 @@ const ListItem: React.FC<ListItemProps> = ({
        </div>
        <div className="p-3">
          <h3 className="font-semibold text-lg text-center">{title}</h3>
-          {type === "stream" && <p className="font-bold">{streamer}</p>}
+          {type === "stream" && <p className="font-bold">{username}</p>}
          {type === "stream" && (
            <p className="text-sm text-gray-300">{streamCategory}</p>
          )}
--- a/frontend/src/components/Layout/ListRow.tsx
+++ b/frontend/src/components/Layout/ListRow.tsx
@@ -5,32 +5,41 @@ import {
 } from "lucide-react";
 import "../../assets/styles/listRow.css";
 import ListItem, { ListItemProps } from "./ListItem";
+import { useNavigate } from "react-router-dom";

 interface ListRowProps {
+  variant?: "default" | "search";
  type: "stream" | "category" | "user";
  title?: string;
  description?: string;
  items: ListItemProps[];
-  wrap: boolean;
+  wrap?: boolean;
  onClick: (itemName: string) => void;
+  titleClickable?: boolean;
  extraClasses?: string;
  itemExtraClasses?: string;
+  amountForScroll?: number;
  children?: React.ReactNode;
 }

 // Row of entries
 const ListRow: React.FC<ListRowProps> = ({
+  variant = "default",
+  type,
  title = "",
  description = "",
  items,
-  wrap,
+  wrap = false,
+  titleClickable = false,
  onClick,
  extraClasses = "",
  itemExtraClasses = "",
+  amountForScroll = 4,
  children,
 }) => {
  const slider = useRef<HTMLDivElement>(null);
  const scrollAmount = window.innerWidth * 0.3;
+  const navigate = useNavigate();

  const slideRight = () => {
    if (!wrap && slider.current) {
@@ -44,17 +53,46 @@ const ListRow: React.FC<ListRowProps> = ({
    }
  };

+  const handleTitleClick = (type: string) => {
+    switch (type) {
+      case "stream":
+        break;
+      case "category":
+        navigate("/categories");
+        break;
+      case "user":
+        break;
+      default:
+        break;
+    }
+  };
+
  return (
    <div
-      className={`flex flex-col w-full space-y-4 py-6 text-white px-5 mx-2 mt-5 rounded-[1.5rem] transition-all ${extraClasses}`}
+      className={`${extraClasses} flex w-full rounded-[1.5rem] text-white transition-all ${
+        variant === "search"
+          ? "items-center"
+          : "flex-col space-y-4 py-6 px-5 mx-2 mt-5"
+      }`}
    >
-      <div className="space-y-1">
-        <h2 className="text-2xl font-bold">{title}</h2>
+      <div
+        className={`text-center ${
+          variant === "search" ? "min-w-fit px-auto w-[15vw]" : ""
+        }`}
+      >
+        <h2
+          className={`${
+            titleClickable ? "cursor-pointer hover:underline" : "cursor-default"
+          } text-2xl font-bold`}
+          onClick={titleClickable ? () => handleTitleClick(type) : undefined}
+        >
+          {title}
+        </h2>
        <p>{description}</p>
      </div>

-      <div className="relative overflow-hidden flex items-center z-0">
-        {!wrap && items.length > 4 && (
+      <div className="relative overflow-hidden flex flex-grow items-center z-0">
+        {!wrap && items.length > amountForScroll && (
          <>
            <ArrowLeftIcon
              onClick={slideLeft}
@@ -73,24 +111,24 @@ const ListRow: React.FC<ListRowProps> = ({
          ref={slider}
          className={`flex ${
            wrap ? "flex-wrap" : "overflow-x-scroll whitespace-nowrap"
-          } max-w-[95%] items-center justify-between scroll-smooth scrollbar-hide gap-5 mx-auto`}
+          } max-w-[95%] items-center justify-evenly w-full mx-auto scroll-smooth scrollbar-hide gap-5`}
        >
-
          {items.map((item) => (
            <ListItem
              key={`${item.type}-${item.id}`}
              id={item.id}
-              type={item.type}
+              type={type}
              title={item.title}
-              streamer={item.type === "stream" ? item.streamer : undefined}
+              username={item.type === "category" ? undefined : item.username}
              streamCategory={
                item.type === "stream" ? item.streamCategory : undefined
              }
              viewers={item.viewers}
              thumbnail={item.thumbnail}
              onItemClick={() =>
-                item.type === "stream" && item.streamer
-                  ? onClick?.(item.streamer)
+                (item.type === "stream" || item.type === "user") &&
+                item.username
+                  ? onClick?.(item.username)
                  : onClick?.(item.title)
              }
              extraClasses={`${itemExtraClasses} min-w-[20vw]`}
--- a/frontend/src/components/Layout/Logo.tsx
+++ b/frontend/src/components/Layout/Logo.tsx
@@ -2,17 +2,21 @@ import React from "react";

 interface LogoProps {
  variant?: "home" | "default";
+  extraClasses?: string;
 }

-const Logo: React.FC<LogoProps> = ({ variant = "default" }) => {
+const Logo: React.FC<LogoProps> = ({
+  variant = "default",
+  extraClasses = "",
+}) => {
  const gradient = "text-transparent group-hover:mx-1 transition-all";
  return (
    <div
      id="logo"
-      className={`group py-3 cursor-pointer text-center font-bold hover:scale-110 transition-all ${
+      className={`${extraClasses} group py-3 cursor-pointer text-center font-bold hover:scale-110 transition-all ${
        variant === "home" ? "text-[12vh]" : "text-[4vh]"
      }`}
-      onClick={() => {window.location.href = "/";}}
+      onClick={() => (window.location.href = "/")}
    >
      <h6 className="text-sm bg-gradient-to-br from-blue-400 via-green-500 to-indigo-500 font-black text-transparent bg-clip-text">
        Go on, have a...
--- a/frontend/src/components/Navigation/Sidebar.tsx
+++ b/frontend/src/components/Navigation/Sidebar.tsx
@@ -104,7 +104,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
          <ul className="mt-2 space-y-2">
            {followedStreamers.map((streamer) => (
              <li
-                key={streamer.user_id}
+                key={`streamer-${streamer.user_id}`}
                className="cursor-pointer bg-black py-2 rounded-lg text-white hover:text-purple-500 transition-colors"
                onClick={() => navigate(`/user/${streamer.username}`)}
              >
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -66,6 +66,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
        items={categories}
        wrap={false}
        onClick={handleCategoryClick}
+        titleClickable={true}
        extraClasses="bg-[var(--recommend)]"
      >
        <Button
--- a/frontend/src/pages/ResultsPage.tsx
+++ b/frontend/src/pages/ResultsPage.tsx
@@ -1,82 +1,143 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
+import Button from "../components/Input/Button";
+import SearchBar from "../components/Input/SearchBar";
+import ListRow from "../components/Layout/ListRow";
+import Logo from "../components/Layout/Logo";

 const ResultsPage: React.FC = ({}) => {
+  const [overflow, setOverflow] = useState(false);
  const location = useLocation();
  const navigate = useNavigate();
  const { searchResults, query } = location.state || {
-    searchResults: null,
+    searchResults: { categories: [], users: [], streams: [] },
    query: "",
  };
-  if (!searchResults) {
+
+  useEffect(() => {
+    const checkHeight = () => {
+      setOverflow(
+        document.documentElement.scrollHeight + 20 > window.innerHeight
+      );
+    };
+
+    checkHeight();
+    window.addEventListener("resize", checkHeight);
+
+    return () => window.removeEventListener("resize", checkHeight);
+  }, []);
+
+  if (
+    searchResults.categories.length === 0 &&
+    searchResults.users.length === 0 &&
+    searchResults.streams.length === 0
+  ) {
    return (
-      <div className="p-4">
-        <h2 className="text-xl font-bold">No results found for "{query}"</h2>
-        <button
-          onClick={() => navigate(-1)}
-          className="mt-4 px-4 py-2 bg-purple-500 text-white rounded"
-        >
-          Go Back
-        </button>
+      <div className="flex flex-col items-center justify-evenly min-h-[70vh] my-[15vh] p-4">
+        <h1 className="text-3xl font-bold mb-4">
+          Search results for "{query}"
+        </h1>
+        <SearchBar value={query} />
+        <h3 className="text-2xl text-gray-400">Nothing Found</h3>
+        <div className="flex gap-8">
+          <Button onClick={() => navigate(-1)}>Go Back</Button>
+        </div>
      </div>
    );
  }

  return (
-    <div className="p-4">
-      <h2 className="text-xl font-bold mb-4">Search Results for "{query}"</h2>
-
-      <div>
-        <h3 className="text-lg font-semibold">Categories</h3>
-        <ul>
-          {searchResults.categories.map((category: any, index: number) => (
-            <li
-              key={index}
-              className="border p-2 rounded my-2 cursor-pointer"
-              onClick={() => navigate(`/category/${category.category_name}`)}
+    <div
+      id="results-page"
+      className="flex flex-col items-center justify-evenly min-h-[96vh] p-4"
    >
-              {category.category_name}
-            </li>
-          ))}
-        </ul>
+      <Logo extraClasses="absolute top-[5vh] left-0" />
+      <h1 className="text-3xl font-bold mb-4">Search results for "{query}"</h1>
+      <SearchBar value={query} />
+
+      <div id="results" className="flex flex-col flex-grow w-full">
+        {searchResults.streams.length > 0 && (
+          <ListRow
+            variant="search"
+            type="stream"
+            items={searchResults.streams.map((stream: any) => ({
+              id: stream.user_id,
+              type: "stream",
+              title: stream.title,
+              username: stream.username,
+              streamCategory: stream.category_name,
+              viewers: stream.num_viewers,
+              thumbnail: stream.thumbnail_url,
+            }))}
+            title="Streams"
+            onClick={(streamer_name: string) =>
+              (window.location.href = `/${streamer_name}`)
+            }
+            itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
+            amountForScroll={3}
+          />
+        )}
+
+        {searchResults.categories.length > 0 && (
+          <ListRow
+            variant="search"
+            type="category"
+            items={searchResults.categories.map((category: any) => ({
+              id: category.category_id,
+              type: "category",
+              title: category.category_name,
+              viewers: 0,
+              thumbnail: `/images/category_thumbnails/${category.category_name
+                .toLowerCase()
+                .replace(/ /g, "_")}.webp`,
+            }))}
+            title="Categories"
+            onClick={(category_name: string) =>
+              navigate(`/category/${category_name}`)
+            }
+            titleClickable={true}
+            itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
+            amountForScroll={3}
+          />
+        )}
+
+        {searchResults.users.length > 0 && (
+          <ListRow
+            variant="search"
+            type="user"
+            items={searchResults.users.map((user: any) => ({
+              id: user.user_id,
+              type: "user",
+              title: `${user.is_live ? "🔴" : ""} ${user.username}`,
+              viewers: 0,
+              username: user.username,
+              thumbnail: user.profile_picture,
+            }))}
+            title="Users"
+            onClick={(username: string) =>
+              (window.location.href = `/user/${username}`)
+            }
+            amountForScroll={3}
+            itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
+          />
+        )}
      </div>

-      <div>
-        <h3 className="text-lg font-semibold">Users</h3>
-        <ul>
-          {searchResults.users.map((user: any, index: number) => (
-            <li
-              key={index}
-              className="border p-2 rounded my-2 cursor-pointer"
-              onClick={() => window.location.href = `/user/${user.username}`}
+      <div
+        className={`${
+          overflow && "absolute top-[5vh] right-[2vw]"
+        } flex gap-[2vw]`}
      >
-              {user.is_live ? "🔴" : ""} {user.username}
-            </li>
-          ))}
-        </ul>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold">Streams</h3>
-        <ul>
-          {searchResults.streams.map((stream: any, index: number) => (
-            <li
-              key={index}
-              className="border p-2 rounded my-2 cursor-pointer"
-              onClick={() => window.location.href = `/${stream.username}`}
-            >
-              {stream.title} - {stream.username} - {stream.num_viewers} viewers
-            </li>
-          ))}
-        </ul>
-      </div>
-
-      <button
-        onClick={() => navigate(-1)}
-        className="mt-4 px-4 py-2 bg-purple-500 text-white rounded"
+        <Button
+          extraClasses="text-[2vw]"
+          onClick={() => (window.location.href = "/")}
        >
+          Go Home
+        </Button>
+        <Button extraClasses="text-[2vw]" onClick={() => navigate(-1)}>
          Go Back
-      </button>
+        </Button>
+      </div>
    </div>
  );
 };
--- a/frontend/src/pages/UserPage.tsx
+++ b/frontend/src/pages/UserPage.tsx
@@ -9,7 +9,6 @@ import { useNavigate } from "react-router-dom";
 import Button, { EditButton } from "../components/Input/Button";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";

-
 interface UserProfileData {
  id: number;
  username: string;
@@ -110,23 +109,23 @@ const UserPage: React.FC = () => {
  }
  return (
    <DynamicPageContent
-      className={`min-h-screen ${profileData.isLive
+      className={`min-h-screen ${
+        profileData.isLive
          ? "bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#2efd2d]"
          : bgColors[userPageVariant]
      } text-white flex flex-col`}
    >
-
      <div className="flex justify-evenly justify-self-center items-center h-full px-4 py-8 max-w-[80vw] w-full">

        <div className="grid grid-cols-4 grid-rows-[0.1fr_4fr] w-full gap-8">
          {/* Profile Section - TOP  */}

-
-          <div id="profile"
+          <div
+            id="profile"
            className="col-span-4 row-span-1 h-full bg-[var(--user-bg)] 
        rounded-[30px] p-3 shadow-lg 
-        relative flex flex-col items-center">
-
+        relative flex flex-col items-center"
+          >
            {/* Border Overlay (Always on Top) */}
            <div className="absolute left-[0px] inset-0 border-[5px] border-[var(--user-borderBg)] rounded-[20px] z-20"></div>

@@ -134,15 +133,16 @@ const UserPage: React.FC = () => {
            {/* Background Box */}
            <div className="absolute flex top-0 left-[0.55px] w-[99.9%] h-[5vh] min-h-[1em] max-h-[10em] rounded-t-[25.5px] 
                 bg-[var(--user-box)] z-10 flex-shrink justify-center"
-              style={{ boxShadow: 'var(--user-box-shadow)' }}
+              style={{ boxShadow: "var(--user-box-shadow)" }}
            >
              <div className="absolute top-4 w-[99.8%] h-[1.5vh] min-h-[10px] max-h-[2em]  bg-[var(--user-box-strip)]"></div>
-
            </div>
            {/* Profile Picture */}
-            <div className="relative -top-[40px] sm:-top-[90px] w-[16vw] h-[16vw] sm:w-[20vw] sm:h-[20vw] max-w-[10em] max-h-[10em]
+            <div
+              className="relative -top-[40px] sm:-top-[90px] w-[16vw] h-[16vw] sm:w-[20vw] sm:h-[20vw] max-w-[10em] max-h-[10em]
               rounded-full overflow-hidden flex-shrink-0 border-4 border-[var(--user-pfp-border)] inset-0 z-20"
-              style={{ boxShadow: 'var(--user-pfp-border-shadow)' }}>
+              style={{ boxShadow: "var(--user-pfp-border-shadow)" }}
+            >
              <img
                src="/images/monkey.png"
                alt={`${profileData.username}'s profile`}
@@ -156,10 +156,6 @@ const UserPage: React.FC = () => {
              {profileData.username}
            </h1>

-
-
-
-
            {/* Follower Count  */}
            {userPageVariant === "streamer" && (
              <>
@@ -178,9 +174,7 @@ const UserPage: React.FC = () => {
                {!isFollowing ? (
                  <Button
                    extraClasses="w-full bg-purple-700 hover:bg-[#28005e]"
-                    onClick={() =>
-                      followUser(profileData.id, setShowAuthModal)
-                    }
+                    onClick={() => followUser(profileData.id, setShowAuthModal)}
                  >
                    Follow
                  </Button>
@@ -194,7 +188,6 @@ const UserPage: React.FC = () => {
                    Unfollow
                  </Button>
                )}
-
              </>
            )}
          </div>
@@ -207,8 +200,12 @@ const UserPage: React.FC = () => {
            <small className="text-green-400">{userPageVariant.toUpperCase()}</small>

            <div className="mt-6 text-center">
-              <h2 className="text-xl font-semibold mb-3">About {profileData.username}</h2>
-              <p className="text-gray-300 whitespace-pre-wrap">{profileData.bio}</p>
+              <h2 className="text-xl font-semibold mb-3">
+                About {profileData.username}
+              </h2>
+              <p className="text-gray-300 whitespace-pre-wrap">
+                {profileData.bio}
+              </p>
            </div>
          </div>

@@ -298,13 +295,9 @@ const UserPage: React.FC = () => {
            </div>

          </div>
-
-
        </div>
      </div>
      {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
-
-
    </DynamicPageContent>
  );
 };
--- a/web_server/blueprints/search_bar.py
+++ b/web_server/blueprints/search_bar.py
@@ -41,10 +41,11 @@ def search_results():

    # 3 streams
    streams = db.fetchall("""
-                    SELECT bm25(stream_fts) AS score, s.user_id, s.title, s.num_viewers, s.category_id, u.username
+                    SELECT bm25(stream_fts) AS score, s.user_id, s.title, s.num_viewers, c.category_name, u.username
                    FROM streams AS s
                    INNER JOIN stream_fts AS f ON s.user_id = f.user_id
                    INNER JOIN users AS u ON s.user_id = u.user_id
+                    INNER JOIN categories AS c ON s.category_id = c.category_id
                    WHERE f.title LIKE '%' || ? || '%'
                    ORDER BY score ASC
                    LIMIT 3;
@@ -54,7 +55,7 @@ def search_results():

    print(query, streams, users, categories, flush=True)
    
-    return jsonify({"categories": categories, "users": users, "streams": streams})
+    return jsonify({"streams": streams, "categories": categories, "users": users})

@search_bp.route("/search/categories", methods=["GET", "POST"])
 def search_categories():