From abacdb0846566a6af52297bb05e04c5a62c7033e Mon Sep 17 00:00:00 2001 From: Wraeth Date: Fri, 10 Nov 2023 15:24:28 +1100 Subject: [PATCH] POC: migrate index to next app --- src/app/_components/ClientRootComponents.tsx | 12 +++++++++++ src/app/layout.tsx | 20 +++++++++++++++++++ src/app/page.tsx | 10 ++++++++++ src/components/ConnectKitButton.tsx | 2 ++ .../Landing/components/JuicecrowdCTA.tsx | 5 ++--- .../Landing/components/StayInLoopSection.tsx | 2 ++ src/components/layout/AppProvider.tsx | 2 ++ .../Navbar/components/MinimalNavbar.tsx | 2 ++ .../layout/Navbar/components/MobileNavbar.tsx | 2 ++ src/hooks/useInstallJuicecrowdWindowObject.ts | 10 ++++++++++ src/pages/index.tsx | 15 -------------- 11 files changed, 64 insertions(+), 18 deletions(-) create mode 100644 src/app/_components/ClientRootComponents.tsx create mode 100644 src/app/layout.tsx create mode 100644 src/app/page.tsx create mode 100644 src/hooks/useInstallJuicecrowdWindowObject.ts delete mode 100644 src/pages/index.tsx diff --git a/src/app/_components/ClientRootComponents.tsx b/src/app/_components/ClientRootComponents.tsx new file mode 100644 index 00000000..cd76b6df --- /dev/null +++ b/src/app/_components/ClientRootComponents.tsx @@ -0,0 +1,12 @@ +'use client' + +import { Toaster } from '@/components/ui/Toaster' +import { useInstallJuicecrowdWindowObject } from '@/hooks/useInstallJuicecrowdWindowObject' + +/** + * Root components that are only rendered on the client. + */ +export const ClientRootComponents = () => { + useInstallJuicecrowdWindowObject() + return +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx new file mode 100644 index 00000000..ed622872 --- /dev/null +++ b/src/app/layout.tsx @@ -0,0 +1,20 @@ +import { fonts } from '@/lib/fonts' +import '../styles/globals.scss' +import { ClientRootComponents } from './_components/ClientRootComponents' + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + + {children} + + + + ) +} diff --git a/src/app/page.tsx b/src/app/page.tsx new file mode 100644 index 00000000..a9d33314 --- /dev/null +++ b/src/app/page.tsx @@ -0,0 +1,10 @@ +import { LandingPage } from '@/components/Landing' +import { Layout } from '@/components/layout' + +export default function Page() { + return ( + + + + ) +} diff --git a/src/components/ConnectKitButton.tsx b/src/components/ConnectKitButton.tsx index 1e3fdd9d..5d052d30 100644 --- a/src/components/ConnectKitButton.tsx +++ b/src/components/ConnectKitButton.tsx @@ -1,3 +1,5 @@ +'use client' + import { ConnectKitButton as _ConnectKitButton } from 'connectkit' import { Button, buttonVariants } from './ui/Button' import { VariantProps } from 'class-variance-authority' diff --git a/src/components/Landing/components/JuicecrowdCTA.tsx b/src/components/Landing/components/JuicecrowdCTA.tsx index f4059a2e..edf8b746 100644 --- a/src/components/Landing/components/JuicecrowdCTA.tsx +++ b/src/components/Landing/components/JuicecrowdCTA.tsx @@ -1,14 +1,13 @@ +'use client' + import { Link } from '@/components/Link' import { EthereumIconFilled } from '@/components/icon/EthereumIconFilled' import { Button } from '@/components/ui/Button' import { JC01SubmissionsClosed, - JC01_DATES, JC01_DATE_STRINGS, } from '@/lib/constants/crowds' -import { dateToCountdownString } from '@/lib/date/format' import Image from 'next/image' -import { useEffect, useState } from 'react' import { twMerge } from 'tailwind-merge' export type JuicecrowdCTAProps = { diff --git a/src/components/Landing/components/StayInLoopSection.tsx b/src/components/Landing/components/StayInLoopSection.tsx index 21ae4fc8..7ec39770 100644 --- a/src/components/Landing/components/StayInLoopSection.tsx +++ b/src/components/Landing/components/StayInLoopSection.tsx @@ -1,3 +1,5 @@ +'use client' + import { useState } from 'react' import { Input } from '@/components/Input' import { twMerge } from 'tailwind-merge' diff --git a/src/components/layout/AppProvider.tsx b/src/components/layout/AppProvider.tsx index bf7036d5..f6457a5f 100644 --- a/src/components/layout/AppProvider.tsx +++ b/src/components/layout/AppProvider.tsx @@ -1,3 +1,5 @@ +'use client' + import { JBProjectMetadataProvider, _JBProjectMetadata, diff --git a/src/components/layout/Navbar/components/MinimalNavbar.tsx b/src/components/layout/Navbar/components/MinimalNavbar.tsx index 3c22ea30..6ce8bca3 100644 --- a/src/components/layout/Navbar/components/MinimalNavbar.tsx +++ b/src/components/layout/Navbar/components/MinimalNavbar.tsx @@ -1,3 +1,5 @@ +'use client' + import { ConnectKitButton } from '@/components/ConnectKitButton' import { Button } from '@/components/ui/Button' import { useJbProject } from '@/hooks/useJbProject' diff --git a/src/components/layout/Navbar/components/MobileNavbar.tsx b/src/components/layout/Navbar/components/MobileNavbar.tsx index 84416b0b..f5631443 100644 --- a/src/components/layout/Navbar/components/MobileNavbar.tsx +++ b/src/components/layout/Navbar/components/MobileNavbar.tsx @@ -1,3 +1,5 @@ +'use client' + import { Link } from '@/components/Link' import Logo from '@/components/Logo' import { CoinLogo } from '@/components/icon/CoinLogo' diff --git a/src/hooks/useInstallJuicecrowdWindowObject.ts b/src/hooks/useInstallJuicecrowdWindowObject.ts new file mode 100644 index 00000000..7680382f --- /dev/null +++ b/src/hooks/useInstallJuicecrowdWindowObject.ts @@ -0,0 +1,10 @@ +'use client' + +import { installJuicecrowdWindowObject } from '@/lib/featureFlags' +import { useEffect } from 'react' + +export const useInstallJuicecrowdWindowObject = () => { + useEffect(() => { + installJuicecrowdWindowObject() + }, []) +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx deleted file mode 100644 index e0b299b1..00000000 --- a/src/pages/index.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { LandingPage } from '@/components/Landing' -import { Layout } from '@/components/layout' -import { AppProvider } from '@/components/layout/AppProvider' - -export function Page() { - return ( - - - - - - ) -} - -export default Page