From d03f37abda7817ec3dd12e06d9718f61f5241dea Mon Sep 17 00:00:00 2001 From: DIYgod Date: Fri, 19 May 2023 18:47:07 +0100 Subject: [PATCH] feat: use different URLs for different activity types --- src/app/(home)/activities/following/page.tsx | 12 +++++ src/app/(home)/activities/hottest/page.tsx | 12 +++++ src/app/(home)/activities/layout.tsx | 27 ++++++++++ src/app/(home)/activities/page.tsx | 33 ++----------- src/app/feed/hottest/route.ts | 2 +- src/components/home/HomeActivitiesTabs.tsx | 43 ++++++++++++++++ src/components/home/HomeFeed.tsx | 52 ++++++-------------- src/models/home.model.ts | 8 +-- 8 files changed, 116 insertions(+), 73 deletions(-) create mode 100644 src/app/(home)/activities/following/page.tsx create mode 100644 src/app/(home)/activities/hottest/page.tsx create mode 100644 src/app/(home)/activities/layout.tsx create mode 100644 src/components/home/HomeActivitiesTabs.tsx diff --git a/src/app/(home)/activities/following/page.tsx b/src/app/(home)/activities/following/page.tsx new file mode 100644 index 00000000..fd2f70cd --- /dev/null +++ b/src/app/(home)/activities/following/page.tsx @@ -0,0 +1,12 @@ +import { Metadata } from "next" + +import { HomeFeed } from "~/components/home/HomeFeed" +import { APP_NAME } from "~/lib/env" + +export const metadata: Metadata = { + title: `Following Activities - ${APP_NAME}`, +} + +export default async function FollowingActivities() { + return +} diff --git a/src/app/(home)/activities/hottest/page.tsx b/src/app/(home)/activities/hottest/page.tsx new file mode 100644 index 00000000..16418ef4 --- /dev/null +++ b/src/app/(home)/activities/hottest/page.tsx @@ -0,0 +1,12 @@ +import { Metadata } from "next" + +import { HomeFeed } from "~/components/home/HomeFeed" +import { APP_NAME } from "~/lib/env" + +export const metadata: Metadata = { + title: `Hottest Activities - ${APP_NAME}`, +} + +export default async function HottestActivities() { + return +} diff --git a/src/app/(home)/activities/layout.tsx b/src/app/(home)/activities/layout.tsx new file mode 100644 index 00000000..aebf81ef --- /dev/null +++ b/src/app/(home)/activities/layout.tsx @@ -0,0 +1,27 @@ +import { Metadata } from "next" + +import { HomeActivitiesTabs } from "~/components/home/HomeActivitiesTabs" +import { HomeSidebar } from "~/components/home/HomeSidebar" +import { APP_NAME } from "~/lib/env" + +export const metadata: Metadata = { + title: `Activities - ${APP_NAME}`, +} + +export default async function ActivitiesLayout({ + children, +}: { + children?: React.ReactNode +}) { + return ( +
+
+
+ + {children} +
+ +
+
+ ) +} diff --git a/src/app/(home)/activities/page.tsx b/src/app/(home)/activities/page.tsx index 13d68c5c..cb82eb04 100644 --- a/src/app/(home)/activities/page.tsx +++ b/src/app/(home)/activities/page.tsx @@ -1,39 +1,12 @@ import { Metadata } from "next" -import { Hydrate, dehydrate } from "@tanstack/react-query" - import { HomeFeed } from "~/components/home/HomeFeed" -import { HomeSidebar } from "~/components/home/HomeSidebar" import { APP_NAME } from "~/lib/env" -import getQueryClient from "~/lib/query-client" -import { prefetchGetFeed } from "~/queries/home.server" export const metadata: Metadata = { - title: `Activities - ${APP_NAME}`, + title: `Latest Activities - ${APP_NAME}`, } -async function Activities() { - const queryClient = getQueryClient() - await prefetchGetFeed( - { - type: "latest", - }, - queryClient, - ) - const dehydratedState = dehydrate(queryClient) - - return ( - -
-
-
- -
- -
-
- - ) +export default async function LatestActivities() { + return } - -export default Activities diff --git a/src/app/feed/hottest/route.ts b/src/app/feed/hottest/route.ts index 3db94feb..84a385ab 100644 --- a/src/app/feed/hottest/route.ts +++ b/src/app/feed/hottest/route.ts @@ -8,7 +8,7 @@ export async function GET(request: Request) { const searchParams = new URLSearchParams(request.url.split("?")[1]) const feed = await getFeed({ - type: "hot", + type: "hottest", daysInterval: parseInt(searchParams.get("interval") || "0"), useHTML: true, limit: 10, diff --git a/src/components/home/HomeActivitiesTabs.tsx b/src/components/home/HomeActivitiesTabs.tsx new file mode 100644 index 00000000..66a703b2 --- /dev/null +++ b/src/components/home/HomeActivitiesTabs.tsx @@ -0,0 +1,43 @@ +"use client" + +import { usePathname, useRouter } from "next/navigation" + +import { useAccountState, useConnectModal } from "@crossbell/connect-kit" + +import { Tabs } from "~/components/ui/Tabs" + +export const HomeActivitiesTabs = () => { + const pathname = usePathname() + const connectModal = useConnectModal() + const router = useRouter() + + const currentCharacterId = useAccountState( + (s) => s.computed.account?.characterId, + ) + + const tabs = [ + { + text: "Latest", + href: "/activities", + active: pathname === "/activities", + }, + { + text: "Hottest", + href: "/activities/hottest", + active: pathname === "/activities/hottest", + }, + { + text: "Following", + onClick: () => { + if (!currentCharacterId) { + connectModal.show() + } else { + router.push(`/activities/following`) + } + }, + active: pathname === "/activities/following", + }, + ] + + return +} diff --git a/src/components/home/HomeFeed.tsx b/src/components/home/HomeFeed.tsx index 496cbcd0..010de17c 100644 --- a/src/components/home/HomeFeed.tsx +++ b/src/components/home/HomeFeed.tsx @@ -174,25 +174,28 @@ const MemoedPost = memo(Post) export const HomeFeed: React.FC<{ noteIds?: string[] - keyword?: string type?: FeedType -}> = ({ noteIds, keyword, type }) => { +}> = ({ noteIds, type }) => { const { t } = useTranslation("common") const searchParams = useSearchParams() - - const [feedType, setFeedType] = useState(type || "latest") + const router = useRouter() const currentCharacterId = useAccountState( (s) => s.computed.account?.characterId, ) + const connectModal = useConnectModal() + if (type === "following" && !currentCharacterId) { + connectModal.show() + } + const [hotInterval, setHotInterval] = useState(7) const [searchType, setSearchType] = useState("latest") const params = useParams() const feed = useGetFeed({ - type: feedType, + type, characterId: currentCharacterId, noteIds: noteIds, daysInterval: hotInterval, @@ -201,7 +204,7 @@ export const HomeFeed: React.FC<{ tag: decodeURIComponent(params?.tag), }) - const hasFiltering = feedType === "latest" + const hasFiltering = type === "latest" const [aiFiltering, setAiFiltering] = useState(true) @@ -240,40 +243,13 @@ export const HomeFeed: React.FC<{ }, { text: "Hottest", - onClick: () => setSearchType("hot"), - active: searchType === "hot", - }, - ] - - const connectModal = useConnectModal() - - const tabs = [ - { - text: "Latest", - onClick: () => setFeedType("latest"), - active: feedType === "latest", - }, - { - text: "Hottest", - onClick: () => setFeedType("hot"), - active: feedType === "hot", - }, - { - text: "Following", - onClick: () => { - if (!currentCharacterId) { - connectModal.show() - } else { - setFeedType("following") - } - }, - active: feedType === "following", + onClick: () => setSearchType("hottest"), + active: searchType === "hottest", }, ] return ( <> - {!type && }
{hasFiltering && (
@@ -309,10 +285,10 @@ export const HomeFeed: React.FC<{
)} - {feedType === "hot" && ( + {type === "hottest" && ( )} - {feedType === "search" && ( + {type === "search" && ( )} @@ -337,7 +313,7 @@ export const HomeFeed: React.FC<{ key={`${post.characterId}-${post.noteId}`} post={post} previousPost={ - feedType === "latest" && index >= 1 + type === "latest" && index >= 1 ? array[index - 1] : undefined } diff --git a/src/models/home.model.ts b/src/models/home.model.ts index 5cc35379..7a290dbd 100644 --- a/src/models/home.model.ts +++ b/src/models/home.model.ts @@ -12,10 +12,10 @@ export type FeedType = | "latest" | "following" | "topic" - | "hot" + | "hottest" | "search" | "tag" -export type SearchType = "latest" | "hot" +export type SearchType = "latest" | "hottest" export async function getFeed({ type, @@ -183,7 +183,7 @@ export async function getFeed({ count: list?.length || 0, } } - case "hot": { + case "hottest": { const client = createClient({ url: "https://indexer.crossbell.io/v1/graphql", exchanges: [cacheExchange, fetchExchange], @@ -269,7 +269,7 @@ export async function getFeed({ limit: limit, cursor, includeCharacterMetadata: true, - orderBy: searchType === "hot" ? "viewCount" : "createdAt", + orderBy: searchType === "hottest" ? "viewCount" : "createdAt", }) const list = await Promise.all(