From 82d481898c6cf61b7071c4a869bdc0bb5e1612d9 Mon Sep 17 00:00:00 2001 From: viet nguyen Date: Sat, 28 Oct 2023 12:18:44 -0700 Subject: [PATCH 1/2] fix: improve CTA feat: add loading skeleton to recent edits --- src/app/components/LandingCTA.tsx | 22 ++++++++++++++------ src/app/components/LandingHero.tsx | 11 +++------- src/app/components/RecentEdits.tsx | 33 ++++++++++++++++++++++++++++-- src/app/components/RecentTags.tsx | 5 +++++ src/app/page.tsx | 9 +++++--- 5 files changed, 61 insertions(+), 19 deletions(-) diff --git a/src/app/components/LandingCTA.tsx b/src/app/components/LandingCTA.tsx index 18233a6ca..6f8097b0a 100644 --- a/src/app/components/LandingCTA.tsx +++ b/src/app/components/LandingCTA.tsx @@ -1,11 +1,11 @@ import clx from 'classnames' - import { LoginButtonClient } from './LoginButton' import { ShowEmailJS } from './ShowEmailJS' +import { ReactNode } from 'react' export const LandingCTA: React.FC = () => { return ( -
+
@@ -20,7 +20,12 @@ const Card4Coders: React.FC = () => { return ( +
  • ☑️ Fix a bug.
    • +
  • ☑️ Use OpenBeta API & data in your projects.
    • + + } action={ <> Dev onboarding @@ -35,7 +40,12 @@ const Card4All: React.FC = () => { return ( +
  • ☑️ Add missing climbs
    • +
  • ☑️ Help us make your local climbing's area page even better!
    • + + } action={} /> ) @@ -63,7 +73,7 @@ const Donate: React.FC = () => { interface CTACardProps { title: string - body: string + body: string | ReactNode action: React.ReactNode className?: string } @@ -74,7 +84,7 @@ const Card: React.FC = ({ title, body, action, className }) => {

    {title}

    -

    {body}

    +
    {body}
    {action}
    diff --git a/src/app/components/LandingHero.tsx b/src/app/components/LandingHero.tsx index 4387cbedb..d535cdb2f 100644 --- a/src/app/components/LandingHero.tsx +++ b/src/app/components/LandingHero.tsx @@ -1,13 +1,8 @@ -import Heart from '@/assets/icons/heart-hero' - export const LandingHero: React.FC = () => { return ( -
    -
    - Knowledge - + - You = -
    +
    +

    Share your climbing route knowledge!

    +

    Join OpenBeta and help build a community resource for climbers

    ) } diff --git a/src/app/components/RecentEdits.tsx b/src/app/components/RecentEdits.tsx index bdc0dfef8..3dc33f8c4 100644 --- a/src/app/components/RecentEdits.tsx +++ b/src/app/components/RecentEdits.tsx @@ -1,9 +1,17 @@ +import Link from 'next/link' import { ArrowRightIcon } from '@heroicons/react/24/outline' import { getChangeHistoryServerSide } from '@/js/graphql/contribAPI' import { ChangesetRow } from '@/components/edit/RecentChangeHistory' -import Link from 'next/link' +/** + * Cache time in seconds + */ +export const revalidate = 300 + +/** + * Show most recent edits + */ export const RecentEdits: React.FC = async () => { const history = await getChangeHistoryServerSide() return ( @@ -15,7 +23,9 @@ export const RecentEdits: React.FC = async () => {
    {history.splice(0, 10).map(changetset => - )} + + )} +
    See more @@ -23,3 +33,22 @@ export const RecentEdits: React.FC = async () => {
    ) } + +/** + * Loading skelton. + * Todo: somehow reuse the structure and css from the real component + */ +export const RecentEditsSkeleton: React.FC = () => { + return ( +
    +
    +

    Recent edits

    + See more +
    +
    +
    + {[1, 2, 3, 4, 5].map(item =>
    )} +
    +
    + ) +} diff --git a/src/app/components/RecentTags.tsx b/src/app/components/RecentTags.tsx index bbce08bc0..3267334ad 100644 --- a/src/app/components/RecentTags.tsx +++ b/src/app/components/RecentTags.tsx @@ -1,6 +1,11 @@ import { RecentImageCard } from '@/components/home/RecentMediaCard' import { getMediaForFeed } from '@/js/graphql/api' +/** + * Cache time in seconds + */ +export const revalidate = 300 + /** * Horizontal gallery of recent images with tags */ diff --git a/src/app/page.tsx b/src/app/page.tsx index a8711eb83..313cf6f79 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,6 +1,7 @@ +import { Suspense } from 'react' import { LandingCTA } from './components/LandingCTA' import { LandingHero } from './components/LandingHero' -import { RecentEdits } from './components/RecentEdits' +import { RecentEdits, RecentEditsSkeleton } from './components/RecentEdits' import { RecentTags } from './components/RecentTags' import { USAToC } from './components/USAToC' @@ -8,13 +9,15 @@ export default async function Home (): Promise { return (
    -
    +

    Our website is undergoing a facelift. Visit the old home.
    Questions or comments? hello@openbeta.io

    - + }> + +
    From 46328972f64198556d9d0f39b1591f92f7b5d684 Mon Sep 17 00:00:00 2001 From: viet nguyen Date: Sat, 28 Oct 2023 13:58:11 -0700 Subject: [PATCH 2/2] fix: correct LCO action strs --- src/app/components/LandingCTA.tsx | 6 ++--- src/app/components/RecentEdits.tsx | 4 +-- src/app/components/RecentTags.tsx | 4 +-- src/app/layout.tsx | 3 ++- src/app/page.tsx | 3 +++ src/components/edit/RecentChangeHistory.tsx | 27 ++++++++++++--------- src/components/ui/Card/Card.tsx | 2 +- 7 files changed, 28 insertions(+), 21 deletions(-) diff --git a/src/app/components/LandingCTA.tsx b/src/app/components/LandingCTA.tsx index 6f8097b0a..205f18ce4 100644 --- a/src/app/components/LandingCTA.tsx +++ b/src/app/components/LandingCTA.tsx @@ -5,7 +5,7 @@ import { ReactNode } from 'react' export const LandingCTA: React.FC = () => { return ( -
    +
    @@ -42,7 +42,7 @@ const Card4All: React.FC = () => { title='Climbers' body={
      -
    • ☑️ Add missing climbs
      • +
    • ☑️ Add missing climbs.
    • ☑️ Help us make your local climbing's area page even better!
    } @@ -81,7 +81,7 @@ interface CTACardProps { const Card: React.FC = ({ title, body, action, className }) => { return (
    -

    {title}

    +

    {title}

    {body}
    diff --git a/src/app/components/RecentEdits.tsx b/src/app/components/RecentEdits.tsx index 3dc33f8c4..f8cf8f061 100644 --- a/src/app/components/RecentEdits.tsx +++ b/src/app/components/RecentEdits.tsx @@ -2,7 +2,7 @@ import Link from 'next/link' import { ArrowRightIcon } from '@heroicons/react/24/outline' import { getChangeHistoryServerSide } from '@/js/graphql/contribAPI' -import { ChangesetRow } from '@/components/edit/RecentChangeHistory' +import { ChangesetCard } from '@/components/edit/RecentChangeHistory' /** * Cache time in seconds @@ -23,7 +23,7 @@ export const RecentEdits: React.FC = async () => {
    {history.splice(0, 10).map(changetset => - + )}
    diff --git a/src/app/components/RecentTags.tsx b/src/app/components/RecentTags.tsx index 3267334ad..c337553ab 100644 --- a/src/app/components/RecentTags.tsx +++ b/src/app/components/RecentTags.tsx @@ -24,12 +24,12 @@ export const RecentTags: React.FC = async () => { }) return ( -
    +

    Recent Tags

    -
    +
    { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 440854d65..86a754721 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -11,7 +11,8 @@ export const metadata: Metadata = { openGraph: { description: 'OpenBeta is a free climbing platform. Join the community and share your knowledge today.', images: '/south-africa-og.jpeg' - } + }, + metadataBase: new URL(`https://${process.env.VERCEL_URL ?? 'http://localhost:3000'}`) } export default function RootLayout ({ diff --git a/src/app/page.tsx b/src/app/page.tsx index 313cf6f79..77f94af73 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -5,6 +5,9 @@ import { RecentEdits, RecentEditsSkeleton } from './components/RecentEdits' import { RecentTags } from './components/RecentTags' import { USAToC } from './components/USAToC' +/** + * Root home page + */ export default async function Home (): Promise { return (
    diff --git a/src/components/edit/RecentChangeHistory.tsx b/src/components/edit/RecentChangeHistory.tsx index 6f8d25946..59a254a0a 100644 --- a/src/components/edit/RecentChangeHistory.tsx +++ b/src/components/edit/RecentChangeHistory.tsx @@ -9,10 +9,14 @@ import { ChangesetType, ChangeType, AreaType, ClimbType, OrganizationType, Docum export interface RecentChangeHistoryProps { history: ChangesetType[] } + +/** + * Show all changes + */ export default function RecentChangeHistory ({ history }: RecentChangeHistoryProps): JSX.Element { return (
    - {history.map(changetset => )} + {history.map(changetset => )}
    ) } @@ -21,7 +25,10 @@ interface ChangsetRowProps { changeset: ChangesetType } -export const ChangesetRow = ({ changeset }: ChangsetRowProps): JSX.Element => { +/** + * A card showing individual changeset + */ +export const ChangesetCard: React.FC = ({ changeset }) => { const { createdAt, editedByUser, operation, changes } = changeset // @ts-expect-error @@ -186,13 +193,6 @@ const ActionIcon = ({ icon, clz }: ActionIconProps): JSX.Element => (
    {icon}
    ) -interface OpBadgeProps { - label: string - clz?: string -} - -const OpBadge = ({ label, clz = 'badge-outline' }: OpBadgeProps): JSX.Element => {label} - const operationLabelMap = { addArea: { borderCue: 'border-l-green-500', @@ -235,15 +235,18 @@ const operationLabelMap = { icon: } /> }, addOrganization: { - badge: , + badge: 'added an organization', + borderCue: 'border-l-green-500', icon: } clz='bg-success' /> }, updateOrganization: { - badge: , + badge: 'updated an organization', + borderCue: 'border-l-black', icon: } /> }, deleteOrganization: { - badge: , + badge: 'deleted an organization', + borderCue: 'border-l-pink-500', icon: } clz='bg-error' /> } } diff --git a/src/components/ui/Card/Card.tsx b/src/components/ui/Card/Card.tsx index e28cf9349..3ed9eb6ba 100644 --- a/src/components/ui/Card/Card.tsx +++ b/src/components/ui/Card/Card.tsx @@ -17,7 +17,7 @@ export default function Card ({ bordered = false }: CardProps): JSX.Element { return ( -
    +
    {header}
    {image}