- UI

- Created home page to view all stations
- Model
  - Sort stations by popularity and filter stations by reliability
  - Type improvements

app/components/page-layout.tsx

@@ -46,6 +46,9 @@ export function PageLayout({ children }: PageLayoutProps) {
                     <li className="menu-title">
                         <span>Listen</span>
                     </li>
+                    <li>
+                        <NavLink to="/listen/home">Home</NavLink>
+                    </li>
                     <li>
                         <NavLink to="/listen/channel/music">Music</NavLink>
                     </li>

app/components/station-player.tsx

@@ -1,8 +1,7 @@
-import type { StationWithTags } from "~/models/station.server";
-import type { ConvertDatesToStrings } from "~/utils";
+import type { StationWithTagsClientSide } from "~/models/station.server";
 
 export type StationPlayerProps = {
-    station: ConvertDatesToStrings<NonNullable<StationWithTags>>
+    station: StationWithTagsClientSide
 };
 
 export function StationPlayer({ station }: StationPlayerProps) {

app/components/stations-gallery.tsx

@@ -1,11 +1,11 @@
 import type { Tag } from "@prisma/client";
 import { Link } from "@remix-run/react";
-import type { StationWithTags } from "~/models/station.server";
+import type { StationWithTagsClientSide } from "~/models/station.server";
 import type { Channel } from "~/routes/listen.channel.$channel";
 import type { ConvertDatesToStrings } from "~/utils";
 
 export type StationsGalleryProps = {
-    stations: ConvertDatesToStrings<NonNullable<StationWithTags>>[];
+    stations: StationWithTagsClientSide[];
     tag?: ConvertDatesToStrings<Tag>;
     channel?: ConvertDatesToStrings<Channel>;
 };
@@ -19,7 +19,7 @@ export function StationsGallery({ stations, tag, channel }: StationsGalleryProps
         if (tag) {
             return `/listen/tag/${tag?.slug}/${id}`;
         }
-        return `/listen/station/${id}`;
+        return `/listen/home/${id}`;
     }
 
     return (

app/models/station.server.ts

@@ -1,6 +1,7 @@
 import type { Prisma, PrismaClient, Station, Tag } from "@prisma/client";
 import { prisma } from "~/db.server";
 import { upsertTagOnName } from "~/models/tag.server";
+import type { ConvertDatesToStrings } from "~/utils";
 import { slugify } from "~/utils";
 
 export type StationInput = {
@@ -16,9 +17,27 @@ export type StationInput = {
 
 export type PrismaTxClient = Omit<PrismaClient, "$connect" | "$disconnect" | "$on" | "$transaction" | "$use">;
 
-export function findStationsByTags(tags: string[]) {
+export function getStations(reliability: number = 80) {
+    return prisma.station.findMany({
+        where: { reliability: { gte: reliability } },
+        include: {
+            tags: {
+                include: {
+                    tag: true
+                }
+            }
+        },
+        orderBy: [
+            { popularity: "desc" }
+        ]
+    });
+}
+
+
+export function findStationsByTags(tags: string[], reliability: number = 80) {
     return prisma.station.findMany({
         where: {
+            reliability: { gte: reliability },
             tags: {
                 some: {
                     tag: {
@@ -33,11 +52,15 @@ export function findStationsByTags(tags: string[]) {
                     tag: true
                 }
             }
-        }
+        },
+        orderBy: [
+            { popularity: "desc" }
+        ]
     });
 }
 
-export type StationWithTags = Prisma.PromiseReturnType<typeof getStationById>;
+export type StationWithTags = NonNullable<Prisma.PromiseReturnType<typeof getStationById>>;
+export type StationWithTagsClientSide = ConvertDatesToStrings<StationWithTags>;
 
 export function getStationById(id: string) {
     return prisma.station.findUnique({

app/routes/listen._index.tsx

@@ -1,13 +0,0 @@
-import { Link } from "@remix-run/react";
-import { Breadcrumbs } from "~/components/breadcrumbs";
-
-export default function ListenHome() {
-    return (
-        <>
-            <Breadcrumbs>
-                <Link to="/listen">Home</Link>
-            </Breadcrumbs>
-        </>
-    );
-
-}

app/routes/listen.channel.$channel.tsx

@@ -38,7 +38,7 @@ export async function loader({ params }: LoaderArgs) {
         throw notFound();
     }
 
-    const stations: NonNullable<StationWithTags>[] = await findStationsByTags(channel.tags);
+    const stations: StationWithTags[] = await findStationsByTags(channel.tags);
     return json({ channel, stations });
 }
 

app/routes/listen.home.$station.tsx

@@ -0,0 +1,4 @@
+import ListenChanelStation from "~/routes/listen.channel.$channel.$station";
+
+export { loader } from "~/routes/listen.channel.$channel.$station";
+export default ListenChanelStation;

app/routes/listen.home.tsx

@@ -0,0 +1,27 @@
+import { json } from "@remix-run/node";
+import { Link, Outlet, useLoaderData } from "@remix-run/react";
+import { Breadcrumbs } from "~/components/breadcrumbs";
+import { StationsGallery } from "~/components/stations-gallery";
+import type { StationWithTags } from "~/models/station.server";
+import { getStations } from "~/models/station.server";
+
+
+export async function loader() {
+    const stations: StationWithTags[] = await getStations();
+    return json({ stations });
+}
+
+export default function ListenHome() {
+    const { stations } = useLoaderData<typeof loader>();
+
+    return (
+        <>
+            <Breadcrumbs>
+                <Link to="/listen">Home</Link>
+            </Breadcrumbs>
+            <StationsGallery stations={stations} />
+            <Outlet />
+        </>
+    );
+
+}

app/routes/listen.tag.$tag.tsx

@@ -19,7 +19,7 @@ export async function loader({ params }: LoaderArgs) {
         throw notFound();
     }
 
-    const stations: NonNullable<StationWithTags>[] = await findStationsByTags([tag.name]);
+    const stations: StationWithTags[] = await findStationsByTags([tag.name]);
 
     return json({ tag, stations });