News in the launch page and setlist page

src/components/LaunchPage/index.tsx

@@ -8,6 +8,7 @@ import { calculatePayloadPercentage } from "@app/utils/Download/payload";
 import { useDialogManager } from "@app/dialogs/DialogProvider";
 import TooltipWrapper from "../TooltipWrapper";
 import { intlFormatDistance } from "date-fns";
+import NewsSection from "../NewsSection";
 
 const INITIAL_RELEASE_DATE = new Date("2023-03-09T05:00:00.000Z");
 
@@ -67,9 +68,7 @@ const LaunchPage: React.FC<Props> = ({ version, releaseTag, playName, descriptio
  <div className={styles.actions} />
  </div>
  <div className={styles.main}>
- <div className={styles.content}>
- Don&apos;t eat the YARG gems...
- </div>
+ <NewsSection categoryFilter="yarg" />
  <div className={styles.sidebar}>
  <LaunchButton style={{ width: "100%" }} />
  <GenericBox>

src/components/NewsSection/NewsEntry/index.tsx

@@ -12,7 +12,7 @@ interface Props {
 }
 
 const NewsEntry: React.FC<Props> = ({ article }: Props) => {
- return <Link to={`news/${article.md}`} key={article.md} style={{ width: "100%" }}>
+ return <Link to={`/news/${article.md}`} key={article.md} style={{ width: "100%" }}>
  <div className={styles.container}>
  <img className={styles.thumbnail} src={`https://raw.githubusercontent.com/YARC-Official/News/master/images/thumbs/${article.thumb}`} />
  <div className={styles.main}>

src/components/NewsSection/index.tsx

@@ -4,9 +4,14 @@ import NewsEntry from "./NewsEntry";
 import { useNews } from "@app/hooks/useNews";
 import { useState } from "react";
 
-const NewsSection: React.FC = () => {
+interface Props {
+ categoryFilter?: string
+ startingEntries?: number
+}
+
+const NewsSection: React.FC<Props> = ({ categoryFilter, startingEntries }: Props) => {
  const { data, error, isLoading, isSuccess } = useNews();
- const [displayCount, setDisplayCount] = useState(4);
+ const [displayCount, setDisplayCount] = useState(startingEntries ? startingEntries : 4);
 
  if (isLoading) return "Loading..";
 
@@ -20,7 +25,11 @@ const NewsSection: React.FC = () => {
  </div>
  </div>
  {
- Array.from(data.articles.slice(0, displayCount)).map(article => <NewsEntry article={article} key={article.md} />)
+ Array.from(data.articles).filter(i => {
+ // Filter out everything that doesn't meet the filter
+ if (!categoryFilter) return true;
+ return i.category === categoryFilter;
+ }).slice(0, displayCount).map(article => <NewsEntry article={article} key={article.md} />)
  }
  <div className={styles.load_more} onClick={() => setDisplayCount(displayCount + 4)}>Load More...</div>
  </div>;

src/hooks/useNews.ts

@@ -7,7 +7,8 @@ export interface ArticleData {
  thumb: string,
  author: string,
  avatar: string,
- release: string
+ release: string,
+ category: string
 }
 
 export interface NewsData {

src/routes/NewsPage/NewsPage.module.css

@@ -23,6 +23,8 @@
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
+
+ cursor: pointer;
 }
 
 .header_info {

src/routes/NewsPage/index.tsx

@@ -1,5 +1,5 @@
 import { useNewsArticle } from "@app/hooks/useNewsArticle";
-import { Link, useParams } from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
 import matter from "gray-matter";
 import { marked } from "marked";
 import SanitizedHTML from "@app/components/SanitizedHTML";
@@ -23,6 +23,7 @@ function NewsPage() {
 
  if (isSuccess) {
  const { data: articleData, content } = matter(data);
+ const navigate = useNavigate();
 
  let videoElem = <></>;
  if ("video" in articleData) {
@@ -37,10 +38,10 @@ function NewsPage() {
 
  return <>
  <div className={styles.header} style={{ "--bannerURL": `url(https://raw.githubusercontent.com/YARC-Official/News/master/images/banners/${articleData.banner})` } as CSSProperties}>
- <Link to="/" className={styles.header_back}>
+ <div onClick={() => navigate(-1)} className={styles.header_back}>
  <BackIcon />
  RETURN
- </Link>
+ </div>
  <div className={styles.header_info}>
  <NewsBadge badgeType={articleData.type} />
  <div className={styles.title}>{articleData.title}</div>

src/routes/Setlist/index.tsx

@@ -12,6 +12,7 @@ import TooltipWrapper from "@app/components/TooltipWrapper";
 import { calculatePayloadPercentage } from "@app/utils/Download/payload";
 import { useDialogManager } from "@app/dialogs/DialogProvider";
 import { intlFormatDistance } from "date-fns";
+import NewsSection from "@app/components/NewsSection";
 
 interface Props {
  setlistId: SetlistID
@@ -54,12 +55,15 @@ const SetlistPage: React.FC<Props> = ({ setlistId }: Props) => {
  return <>
  <div className={styles.banner} />
  <div className={styles.main}>
- <GenericBoxSlim style={{ flex: "1 0 0" }}>
- {setlistData.songs.map(i =>
- <SongEntry title={i.title} artist={i.artist} length={i.length}
- newSong={isConsideredNewRelease(i.releaseDate, newestSongRelease.releaseDate)} key={i.title} />
- )}
- </GenericBoxSlim>
+ <div className={styles.content}>
+ <GenericBoxSlim >
+ {setlistData.songs.map(i =>
+ <SongEntry title={i.title} artist={i.artist} length={i.length}
+ newSong={isConsideredNewRelease(i.releaseDate, newestSongRelease.releaseDate)} key={i.title} />
+ )}
+ </GenericBoxSlim>
+ <NewsSection categoryFilter="setlist_official" startingEntries={2} />
+ </div>
  <div className={styles.sidebar}>
  <SetlistButton style={{ width: "100%" }} />
  <GenericBox>

src/routes/Setlist/setlist.module.css

@@ -22,6 +22,14 @@
  background: var(--white-background);
 }
 
+.content {
+ flex: 1 0 0;
+
+ display: flex;
+ flex-direction: column;
+ gap: 50px;
+}
+
 .sidebar {
  display: flex;
  width: 300px;