dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

REFACTOR: HomePage and ResultsPage for improved data handling

Browse Source
This commit is contained in:
Chris-1010
2025-02-16 14:19:51 +00:00
parent 557aeb9091
commit bd091b079a
9 changed files with 239 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/pages/FoundPage.tsx
View File

@@ -1,60 +0,0 @@
import React from 'react'
import { useLocation, useNavigate } from "react-router-dom";
const FoundPage: React.FC = ({}) => {
const location = useLocation();
const navigate = useNavigate();
const { searchResults, query } = location.state || { searchResults: null, query: "" };
if (!searchResults) {
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>
);
}
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">{category.category_name}</li>
))}
</ul>
</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">{user.username} {user.is_live ? "🔴" : ""}</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">
{stream.title} - {stream.num_viewers} viewers
</li>
))}
</ul>
</div>
<button onClick={() => navigate(-1)} className="mt-4 px-4 py-2 bg-purple-500 text-white rounded">
Go Back
</button>
</div>
);
};
export default FoundPage

12
frontend/src/pages/HomePage.tsx
View File

@@ -2,14 +2,15 @@ import React from "react";
import Navbar from "../components/Layout/Navbar";
import ListRow from "../components/Layout/ListRow";
import { useNavigate } from "react-router-dom";
import { useStreams } from "../context/StreamsContext";
import { useStreams, useCategories } from "../context/ContentContext";
interface HomePageProps {
variant?: "default" | "personalised";
}
const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
const { featuredStreams, featuredCategories } = useStreams();
const { streams } = useStreams();
const { categories } = useCategories();
const navigate = useNavigate();
const handleStreamClick = (streamerName: string) => {
@@ -32,14 +33,14 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
<ListRow
type="stream"
title={
"Live Now" + (variant === "personalised" ? " - Recommended" : "")
"Streams - Live Now" + (variant === "personalised" ? " - Recommended" : "")
}
description={
variant === "personalised"
? "We think you might like these streams - Streamers recommended for you"
: "Streamers that are currently live"
}
items={featuredStreams}
items={streams}
onClick={handleStreamClick}
extraClasses="bg-red-950/60"
/>
@@ -57,10 +58,9 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
? "Current streams from your followed categories"
: "Categories that have been 'popping off' lately"
}
items={featuredCategories}
items={categories}
onClick={handleCategoryClick}
extraClasses="bg-green-950/60"
/>
</div>
);

72
frontend/src/pages/ResultsPage.tsx Normal file
View File

@@ -0,0 +1,72 @@
import React from "react";
import { useLocation, useNavigate } from "react-router-dom";
const ResultsPage: React.FC = ({}) => {
const location = useLocation();
const navigate = useNavigate();
const { searchResults, query } = location.state || {
searchResults: null,
query: "",
};
if (!searchResults) {
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>
);
}
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">
{category.category_name}
</li>
))}
</ul>
</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">
{user.username} {user.is_live ? "🔴" : ""}
</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">
{stream.title} - {stream.num_viewers} viewers
</li>
))}
</ul>
</div>
<button
onClick={() => navigate(-1)}
className="mt-4 px-4 py-2 bg-purple-500 text-white rounded"
>
Go Back
</button>
</div>
);
};
export default ResultsPage;