From c6229a4cb57a3e2bc4bfd4afa92dbe3addc59166 Mon Sep 17 00:00:00 2001 From: Harsh Mangalam <57381638+harshmangalam@users.noreply.github.com> Date: Sun, 17 Sep 2023 12:10:44 +0530 Subject: [PATCH] refactor: add `define*()` helpers (#590) --- routes/_app.tsx | 14 ++++---- routes/account/index.tsx | 12 +++---- routes/account/manage.ts | 9 ++--- routes/account/upgrade.ts | 9 ++--- routes/blog/[slug].tsx | 6 ++-- routes/blog/index.tsx | 6 ++-- routes/dashboard/stats.tsx | 10 +++--- routes/dashboard/users.tsx | 10 +++--- routes/feed.ts | 6 ++-- routes/index.tsx | 10 +++--- routes/pricing.tsx | 9 ++--- routes/submit.tsx | 8 ++--- routes/users/[login].tsx | 69 +++++++++++++++++++------------------- 13 files changed, 83 insertions(+), 95 deletions(-) diff --git a/routes/_app.tsx b/routes/_app.tsx index a9aaccd09..0ca3f10f4 100644 --- a/routes/_app.tsx +++ b/routes/_app.tsx @@ -1,20 +1,20 @@ // Copyright 2023 the Deno authors. All rights reserved. MIT license. -import { AppProps } from "$fresh/server.ts"; import Header from "@/components/Header.tsx"; import Footer from "@/components/Footer.tsx"; import type { State } from "@/middleware/session.ts"; +import { defineApp } from "$fresh/server.ts"; -export default function App(props: AppProps) { +export default defineApp((_, ctx) => { return (
- -
+ +
); -} +}); diff --git a/routes/account/index.tsx b/routes/account/index.tsx index 50b4234fe..d398fae8c 100644 --- a/routes/account/index.tsx +++ b/routes/account/index.tsx @@ -1,20 +1,18 @@ // Copyright 2023 the Deno authors. All rights reserved. MIT license. -import type { PageProps } from "$fresh/server.ts"; +import { defineRoute } from "$fresh/server.ts"; import type { SignedInState } from "@/middleware/session.ts"; import { BUTTON_STYLES } from "@/utils/constants.ts"; import { isStripeEnabled } from "@/utils/stripe.ts"; import Head from "@/components/Head.tsx"; import GitHubAvatarImg from "@/components/GitHubAvatarImg.tsx"; -export default function AccountPage( - props: PageProps, -) { - const { sessionUser } = props.state; +export default defineRoute((_req, ctx) => { + const { sessionUser } = ctx.state; const action = sessionUser.isSubscribed ? "Manage" : "Upgrade"; return ( <> - +
); -} +}); diff --git a/routes/account/manage.ts b/routes/account/manage.ts index 9df78c69a..d97fc2be7 100644 --- a/routes/account/manage.ts +++ b/routes/account/manage.ts @@ -1,13 +1,10 @@ // Copyright 2023 the Deno authors. All rights reserved. MIT license. -import type { RouteContext } from "$fresh/server.ts"; +import { defineRoute } from "$fresh/server.ts"; import type { SignedInState } from "@/middleware/session.ts"; import { redirect } from "@/utils/http.ts"; import { isStripeEnabled, stripe } from "@/utils/stripe.ts"; -export default async function AccountManagePage( - _req: Request, - ctx: RouteContext, -) { +export default defineRoute(async (_req, ctx) => { const { sessionUser } = ctx.state; if (!isStripeEnabled() || sessionUser.stripeCustomerId === undefined) { return ctx.renderNotFound(); @@ -18,4 +15,4 @@ export default async function AccountManagePage( return_url: ctx.url.origin + "/account", }); return redirect(url); -} +}); diff --git a/routes/account/upgrade.ts b/routes/account/upgrade.ts index b85cf14e2..04b2d3c02 100644 --- a/routes/account/upgrade.ts +++ b/routes/account/upgrade.ts @@ -1,5 +1,5 @@ // Copyright 2023 the Deno authors. All rights reserved. MIT license. -import type { RouteContext } from "$fresh/server.ts"; +import { defineRoute } from "$fresh/server.ts"; import type { SignedInState } from "@/middleware/session.ts"; import { redirect } from "@/utils/http.ts"; import { @@ -8,10 +8,7 @@ import { stripe, } from "@/utils/stripe.ts"; -export default async function AccountUpgradePage( - _req: Request, - ctx: RouteContext, -) { +export default defineRoute(async (_req, ctx) => { if (!isStripeEnabled()) return ctx.renderNotFound(); const stripePremiumPlanPriceId = getStripePremiumPlanPriceId(); if (stripePremiumPlanPriceId === undefined) { @@ -34,4 +31,4 @@ export default async function AccountUpgradePage( if (url === null) return ctx.renderNotFound(); return redirect(url); -} +}); diff --git a/routes/blog/[slug].tsx b/routes/blog/[slug].tsx index 862fa2cf7..c7b1c41a4 100644 --- a/routes/blog/[slug].tsx +++ b/routes/blog/[slug].tsx @@ -1,11 +1,11 @@ // Copyright 2023 the Deno authors. All rights reserved. MIT license. -import type { RouteContext } from "$fresh/server.ts"; +import { defineRoute } from "$fresh/server.ts"; import { CSS, render } from "$gfm"; import { getPost } from "@/utils/posts.ts"; import Head from "@/components/Head.tsx"; import Share from "@/components/Share.tsx"; -export default async function BlogPostPage(_req: Request, ctx: RouteContext) { +export default defineRoute(async (_req, ctx) => { const post = await getPost(ctx.params.slug); if (post === null) return await ctx.renderNotFound(); @@ -37,4 +37,4 @@ export default async function BlogPostPage(_req: Request, ctx: RouteContext) {
); -} +}); diff --git a/routes/blog/index.tsx b/routes/blog/index.tsx index aada89c29..45bda8e56 100644 --- a/routes/blog/index.tsx +++ b/routes/blog/index.tsx @@ -1,5 +1,5 @@ // Copyright 2023 the Deno authors. All rights reserved. MIT license. -import type { RouteContext } from "$fresh/server.ts"; +import { defineRoute } from "$fresh/server.ts"; import { getPosts, type Post } from "@/utils/posts.ts"; import Head from "@/components/Head.tsx"; import { HEADING_WITH_MARGIN_STYLES } from "@/utils/constants.ts"; @@ -29,7 +29,7 @@ function PostCard(props: Post) { ); } -export default async function BlogPage(_req: Request, ctx: RouteContext) { +export default defineRoute(async (_req, ctx) => { const posts = await getPosts(); return ( @@ -43,4 +43,4 @@ export default async function BlogPage(_req: Request, ctx: RouteContext) { ); -} +}); diff --git a/routes/dashboard/stats.tsx b/routes/dashboard/stats.tsx index 80d43d220..e61a40fe6 100644 --- a/routes/dashboard/stats.tsx +++ b/routes/dashboard/stats.tsx @@ -1,15 +1,15 @@ // Copyright 2023 the Deno authors. All rights reserved. MIT license. -import type { PageProps } from "$fresh/server.ts"; import Chart from "@/islands/Chart.tsx"; import Head from "@/components/Head.tsx"; import TabsBar from "@/components/TabsBar.tsx"; import { HEADING_WITH_MARGIN_STYLES } from "@/utils/constants.ts"; +import { defineRoute } from "$fresh/server.ts"; function randomNumbers(length: number) { return Array.from({ length }, () => Math.floor(Math.random() * 1000)); } -export default function DashboardStatsPage(props: PageProps) { +export default defineRoute((_req, ctx) => { const labels = [ "Monday", "Tuesday", @@ -44,7 +44,7 @@ export default function DashboardStatsPage(props: PageProps) { return ( <> - +

Dashboard

); -} +}); diff --git a/routes/dashboard/users.tsx b/routes/dashboard/users.tsx index d9100487d..6d4e6f617 100644 --- a/routes/dashboard/users.tsx +++ b/routes/dashboard/users.tsx @@ -1,16 +1,16 @@ // Copyright 2023 the Deno authors. All rights reserved. MIT license. -import type { PageProps } from "$fresh/server.ts"; import Head from "@/components/Head.tsx"; import TabsBar from "@/components/TabsBar.tsx"; import { HEADING_WITH_MARGIN_STYLES } from "@/utils/constants.ts"; import UsersTable from "@/islands/UsersTable.tsx"; +import { defineRoute } from "$fresh/server.ts"; -export default function DashboardUsersPage(props: PageProps) { +export default defineRoute((_req, ctx) => { const endpoint = "/api/users"; return ( <> - +
); -} +}); diff --git a/routes/feed.ts b/routes/feed.ts index e9d55e92f..927cb4aed 100644 --- a/routes/feed.ts +++ b/routes/feed.ts @@ -2,12 +2,12 @@ import { Feed } from "feed"; import { getPosts } from "@/utils/posts.ts"; import { SITE_NAME } from "@/utils/constants.ts"; -import { RouteContext } from "$fresh/server.ts"; +import { defineRoute } from "$fresh/server.ts"; const copyright = `Copyright ${new Date().getFullYear()} ${SITE_NAME}`; // Use https://validator.w3.org/feed/ to validate RSS feed syntax. -export default async function FeedPage(_req: Request, ctx: RouteContext) { +export default defineRoute(async (_req, ctx) => { const { origin } = ctx.url; const feed = new Feed({ title: "Deno", @@ -43,4 +43,4 @@ export default async function FeedPage(_req: Request, ctx: RouteContext) { "content-type": "application/atom+xml; charset=utf-8", }, }); -} +}); diff --git a/routes/index.tsx b/routes/index.tsx index f8fc2ad0f..ea012de0d 100644 --- a/routes/index.tsx +++ b/routes/index.tsx @@ -1,8 +1,8 @@ // Copyright 2023 the Deno authors. All rights reserved. MIT license. -import type { PageProps, RouteContext } from "$fresh/server.ts"; import type { State } from "@/middleware/session.ts"; import Head from "@/components/Head.tsx"; import ItemsList from "@/islands/ItemsList.tsx"; +import { defineRoute } from "$fresh/server.ts"; const NEEDS_SETUP = Deno.env.get("GITHUB_CLIENT_ID") === undefined || Deno.env.get("GITHUB_CLIENT_SECRET") === undefined; @@ -40,13 +40,13 @@ function SetupInstruction() { ); } -export default function HomePage(props: PageProps) { - const isSignedIn = props.state.sessionUser !== undefined; +export default defineRoute((_req, ctx) => { + const isSignedIn = ctx.state.sessionUser !== undefined; const endpoint = "/api/items"; return ( <> - + ) { ); -} +}); diff --git a/routes/pricing.tsx b/routes/pricing.tsx index bace3bde5..cbb411763 100644 --- a/routes/pricing.tsx +++ b/routes/pricing.tsx @@ -1,5 +1,4 @@ // Copyright 2023 the Deno authors. All rights reserved. MIT license. -import type { RouteContext } from "$fresh/server.ts"; import type { State } from "@/middleware/session.ts"; import { BUTTON_STYLES } from "@/utils/constants.ts"; import { assertIsPrice, isStripeEnabled, stripe } from "@/utils/stripe.ts"; @@ -7,6 +6,7 @@ import { formatCurrency } from "@/utils/display.ts"; import Stripe from "stripe"; import IconCheckCircle from "tabler_icons_tsx/circle-check.tsx"; import Head from "@/components/Head.tsx"; +import { defineRoute } from "$fresh/server.ts"; const CARD_STYLES = "shadow-md flex flex-col flex-1 space-y-8 p-8 ring-1 ring-gray-300 rounded-xl dark:bg-gray-700 bg-gradient-to-r"; @@ -160,10 +160,7 @@ function EnterprisePricingCard() { ); } -export default async function PricingPage( - _req: Request, - ctx: RouteContext, -) { +export default defineRoute(async (_req, ctx) => { if (!isStripeEnabled()) return await ctx.renderNotFound(); const { data } = await stripe.products.list({ @@ -190,4 +187,4 @@ export default async function PricingPage( ); -} +}); diff --git a/routes/submit.tsx b/routes/submit.tsx index ecfa43fc1..42e9d76f7 100644 --- a/routes/submit.tsx +++ b/routes/submit.tsx @@ -1,14 +1,14 @@ // Copyright 2023 the Deno authors. All rights reserved. MIT license. -import type { PageProps } from "$fresh/server.ts"; import { HEADING_STYLES, INPUT_STYLES } from "@/utils/constants.ts"; import Head from "@/components/Head.tsx"; import IconCheckCircle from "tabler_icons_tsx/circle-check.tsx"; import IconCircleX from "tabler_icons_tsx/circle-x.tsx"; +import { defineRoute } from "$fresh/server.ts"; -export default function SubmitPage(props: PageProps) { +export default defineRoute((_req, ctx) => { return ( <> - +

@@ -87,4 +87,4 @@ export default function SubmitPage(props: PageProps) {

); -} +}); diff --git a/routes/users/[login].tsx b/routes/users/[login].tsx index 3bf5b1057..c15ea4d59 100644 --- a/routes/users/[login].tsx +++ b/routes/users/[login].tsx @@ -1,5 +1,4 @@ // Copyright 2023 the Deno authors. All rights reserved. MIT license. -import type { RouteContext } from "$fresh/server.ts"; import type { State } from "@/middleware/session.ts"; import { getUser } from "@/utils/db.ts"; import IconBrandGithub from "tabler_icons_tsx/brand-github.tsx"; @@ -7,6 +6,7 @@ import { LINK_STYLES } from "@/utils/constants.ts"; import Head from "@/components/Head.tsx"; import GitHubAvatarImg from "@/components/GitHubAvatarImg.tsx"; import ItemsList from "@/islands/ItemsList.tsx"; +import { defineRoute } from "$fresh/server.ts"; interface UserProfileProps { login: string; @@ -37,44 +37,43 @@ function UserProfile(props: UserProfileProps) { ); } -export default async function UserPage( - _req: Request, - ctx: RouteContext, -) { - const { login } = ctx.params; - const user = await getUser(login); - if (user === null) return await ctx.renderNotFound(); +export default defineRoute( + async (_req, ctx) => { + const { login } = ctx.params; + const user = await getUser(login); + if (user === null) return await ctx.renderNotFound(); - const isSignedIn = ctx.state.sessionUser !== undefined; - const endpoint = `/api/users/${login}/items`; + const isSignedIn = ctx.state.sessionUser !== undefined; + const endpoint = `/api/users/${login}/items`; - return ( - <> - - - {isSignedIn && ( + return ( + <> + - )} - -
-
- -
- -
- - ); -} + {isSignedIn && ( + + )} + +
+
+ +
+ +
+ + ); + }, +);