diff --git a/apps/journal/app/routes/feed.tsx b/apps/journal/app/routes/feed.tsx index ce7ff89..755ac3b 100644 --- a/apps/journal/app/routes/feed.tsx +++ b/apps/journal/app/routes/feed.tsx @@ -1,17 +1,28 @@ import { data, redirect } from "react-router"; +import { Link } from "react-router"; import { useTranslation } from "react-i18next"; import type { Route } from "./+types/feed"; import { getSessionUser } from "~/lib/auth.server"; -import { listSocialFeed } from "~/lib/activities.server"; +import { listSocialFeed, listRecentPublicActivities } from "~/lib/activities.server"; import { ClientDate } from "~/components/ClientDate"; import { ClientMap } from "~/components/ClientMap"; +type View = "followed" | "public"; + export async function loader({ request }: Route.LoaderArgs) { const user = await getSessionUser(request); if (!user) throw redirect("/auth/login"); - const rows = await listSocialFeed(user.id, 50); + const url = new URL(request.url); + const view: View = url.searchParams.get("view") === "public" ? "public" : "followed"; + + const rows = + view === "public" + ? await listRecentPublicActivities(50) + : await listSocialFeed(user.id, 50); + return data({ + view, activities: rows.map((a) => ({ id: a.id, name: a.name, @@ -27,27 +38,77 @@ export async function loader({ request }: Route.LoaderArgs) { }); } -export function meta(_args: Route.MetaArgs) { - return [{ title: "Feed — trails.cool" }]; +export function meta({ data: loaderData }: Route.MetaArgs) { + const view = loaderData?.view ?? "followed"; + const title = view === "public" ? "Public — trails.cool" : "Following — trails.cool"; + return [{ title }]; +} + +function ToggleLink({ + to, + active, + label, +}: { + to: string; + active: boolean; + label: string; +}) { + return ( + + {label} + + ); } export default function Feed({ loaderData }: Route.ComponentProps) { - const { activities } = loaderData; + const { view, activities } = loaderData; const { t } = useTranslation("journal"); + const heading = + view === "public" + ? t("social.feed.public.heading") + : t("social.feed.heading"); + + const emptyMessage = + view === "public" + ? t("social.feed.public.empty") + : t("social.feed.empty"); + return (
-

{t("social.feed.heading")}

+

{heading}

+ +
+ + +
{activities.length === 0 ? (
-

{t("social.feed.empty")}

- - {t("social.feed.publicFeedLink")} - +

{emptyMessage}

+ {view === "followed" && ( + + {t("social.feed.seePublic")} + + )}
) : (