refactor: use getServerSideProps
This commit is contained in:
parent
175eac054f
commit
f6e627e045
|
@ -1,27 +1,34 @@
|
||||||
import { redirect } from "next/navigation"
|
import Feed from "@/components/Feed";
|
||||||
import { headers } from "next/headers"
|
import SearchBar from "@/components/SearchBar";
|
||||||
import Feed from "@/components/Feed"
|
import { ApiResponse, fetchFeedData } from "@/lib/feed.ts";
|
||||||
import SearchBar from "@/components/SearchBar"
|
import * as GraphicSection from "@/components/GraphicSection";
|
||||||
import { fetchFeedData } from "@/lib/feed.ts"
|
import { ArrowIcon } from "@/components/ArrowIcon";
|
||||||
import * as GraphicSection from "@/components/GraphicSection"
|
import { GetServerSideProps } from "next";
|
||||||
import { ArrowIcon } from "@/components/ArrowIcon"
|
import { Article } from "@/lib/prisma.ts";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
searchParams?: {
|
data: ApiResponse<Article>;
|
||||||
q?: string | undefined
|
};
|
||||||
}
|
|
||||||
|
export const getServerSideProps: GetServerSideProps<Props> = async ({
|
||||||
|
req,
|
||||||
|
params,
|
||||||
|
}) => {
|
||||||
|
if (!req.headers.referer && params?.q) {
|
||||||
|
return {
|
||||||
|
redirect: {
|
||||||
|
destination: `/search?q=${params?.q}`,
|
||||||
|
permanent: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export default async function Home({ searchParams }: Props) {
|
const data = await fetchFeedData({});
|
||||||
const headerList = headers()
|
|
||||||
const referer = headerList.get("referer")
|
|
||||||
|
|
||||||
if (!referer && searchParams?.q) {
|
return { props: { data } };
|
||||||
redirect(`/search?q=${searchParams.q}`)
|
};
|
||||||
}
|
|
||||||
|
|
||||||
const data = await fetchFeedData({})
|
|
||||||
|
|
||||||
|
export default async function Home({ data }: Props) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SearchBar />
|
<SearchBar />
|
||||||
|
@ -34,7 +41,10 @@ export default async function Home({ searchParams }: Props) {
|
||||||
initialData={data.data}
|
initialData={data.data}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<GraphicSection.Root href="https://lumeweb.com" className="h-[100px] border border-gray-800 cursor-pointer [&:hover_.link]:underline [&:hover_.background]:rotate-12 [&:hover_.background]:scale-110">
|
<GraphicSection.Root
|
||||||
|
href="https://lumeweb.com"
|
||||||
|
className="h-[100px] border border-gray-800 cursor-pointer [&:hover_.link]:underline [&:hover_.background]:rotate-12 [&:hover_.background]:scale-110"
|
||||||
|
>
|
||||||
<GraphicSection.Background>
|
<GraphicSection.Background>
|
||||||
<img
|
<img
|
||||||
src="/lume-logo-bg.png"
|
src="/lume-logo-bg.png"
|
||||||
|
@ -50,9 +60,7 @@ export default async function Home({ searchParams }: Props) {
|
||||||
web together.
|
web together.
|
||||||
</p>
|
</p>
|
||||||
<div className="link flex text-gray-400">
|
<div className="link flex text-gray-400">
|
||||||
<span>
|
<span>Learn more about Lume and join our community</span>
|
||||||
Learn more about Lume and join our community
|
|
||||||
</span>
|
|
||||||
<ArrowIcon className=" ml-2 mt-2" />
|
<ArrowIcon className=" ml-2 mt-2" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -60,5 +68,5 @@ export default async function Home({ searchParams }: Props) {
|
||||||
</GraphicSection.Root>
|
</GraphicSection.Root>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue