+ {imageUrl && (
{
+const useFilters = (initialIndustry: string, initialProduct: string) => {
const router = useRouter()
const [industry, setIndustry] = useState(initialIndustry)
const [product, setProduct] = useState(initialProduct)
@@ -30,7 +33,7 @@ export const useFilters = (initialIndustry: string, initialProduct: string) => {
const params = new URLSearchParams()
if (industry !== 'all') params.set('industry', industry)
if (product !== 'all') params.set('product', product)
- router.replace({ pathname: '/customers', query: params.toString() }, undefined, {
+ router?.replace({ pathname: '/customers', query: params.toString() }, undefined, {
shallow: true,
})
}
@@ -45,6 +48,7 @@ export const useFilters = (initialIndustry: string, initialProduct: string) => {
function CustomerFilters({ allCustomers, setCustomers, industries, products }: Props) {
const isMobile = useBreakpoint('sm')
const router = useRouter()
+ const pathname = usePathname()
const {
industry: activeIndustry,
setIndustry,
@@ -73,35 +77,37 @@ function CustomerFilters({ allCustomers, setCustomers, industries, products }: P
}, [activeIndustry, activeProduct])
const handleIndustryFilter = (selectedIndustry: string) => {
+ if (!router) return
if (selectedIndustry === 'all') {
setIndustry('all')
const { industry, ...rest } = router.query
- router.push({
- pathname: router.pathname,
+ router?.push({
+ pathname: pathname,
query: rest,
})
} else {
setIndustry(selectedIndustry)
- router.push({
- pathname: router.pathname,
- query: { ...router.query, industry: selectedIndustry },
+ router?.push({
+ pathname: pathname,
+ query: { ...router?.query, industry: selectedIndustry },
})
}
}
const handleProductFilter = (selectedProduct: string) => {
+ if (!router) return
if (selectedProduct === 'all') {
setProduct('all')
const { product, ...rest } = router.query
- router.push({
- pathname: router.pathname,
+ router?.push({
+ pathname: pathname,
query: rest,
})
} else {
setProduct(selectedProduct)
- router.push({
- pathname: router.pathname,
- query: { ...router.query, product: selectedProduct },
+ router?.push({
+ pathname: pathname,
+ query: { ...router?.query, product: selectedProduct },
})
}
}
diff --git a/apps/www/components/CustomerStories/CustomersSliderMobile.tsx b/apps/www/components/CustomerStories/CustomersSliderMobile.tsx
index 5c3cedd2f04b4..5a809b48bdbb9 100644
--- a/apps/www/components/CustomerStories/CustomersSliderMobile.tsx
+++ b/apps/www/components/CustomerStories/CustomersSliderMobile.tsx
@@ -1,3 +1,5 @@
+'use client'
+
import 'swiper/css'
import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
diff --git a/apps/www/components/CustomerStories/CutomsersSliderDesktop.tsx b/apps/www/components/CustomerStories/CutomsersSliderDesktop.tsx
index 146a43678d098..0150ed81c59c2 100644
--- a/apps/www/components/CustomerStories/CutomsersSliderDesktop.tsx
+++ b/apps/www/components/CustomerStories/CutomsersSliderDesktop.tsx
@@ -1,3 +1,5 @@
+'use client'
+
import React from 'react'
import { range } from 'lib/helpers'
import { cn } from 'ui'
diff --git a/apps/www/components/CustomerStories/index.tsx b/apps/www/components/CustomerStories/index.tsx
index 6dbc535caf8a2..f79b6c58b649f 100644
--- a/apps/www/components/CustomerStories/index.tsx
+++ b/apps/www/components/CustomerStories/index.tsx
@@ -1,3 +1,5 @@
+'use client'
+
import { PropsWithChildren } from 'react'
import dynamic from 'next/dynamic'
import Link from 'next/link'
diff --git a/apps/www/components/Events/EventsFilters.tsx b/apps/www/components/Events/EventsFilters.tsx
index 71c372c8d45a7..b941218c892f4 100644
--- a/apps/www/components/Events/EventsFilters.tsx
+++ b/apps/www/components/Events/EventsFilters.tsx
@@ -2,7 +2,7 @@ import { useBreakpoint } from 'common'
import { AnimatePresence, motion } from 'framer-motion'
import { startCase } from 'lib/helpers'
import { useSearchParams } from 'next/navigation'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/compat/router'
import Link from 'next/link'
import { useEffect, useRef, useState } from 'react'
import { useKey } from 'react-use'
@@ -63,9 +63,9 @@ function EventFilters({ allEvents, setEvents, categories, onDemandEvents }: Prop
}, [q])
const handleReplaceRouter = () => {
- if (!searchTerm && category !== 'all') {
+ if (!searchTerm && category !== 'all' && router) {
router.query.category = category
- router.replace(router, undefined, { shallow: true, scroll: false })
+ router?.replace(router, undefined, { shallow: true, scroll: false })
}
}
@@ -89,19 +89,20 @@ function EventFilters({ allEvents, setEvents, categories, onDemandEvents }: Prop
}, [isMobile])
useEffect(() => {
- if (router.isReady && q) {
+ if (router?.isReady && q) {
setSearchTerm(q)
}
- if (router.isReady && activeCategory && activeCategory !== 'all') {
+ if (router?.isReady && activeCategory && activeCategory !== 'all') {
setCategory(activeCategory)
}
- }, [activeCategory, router.isReady, q])
+ }, [activeCategory, router?.isReady, q])
const handleSearchByText = (text: string) => {
setSearchTerm(text)
- searchParams?.has('q') && router.replace('/events', undefined, { shallow: true, scroll: false })
- router.replace(`/events?q=${text}`, undefined, { shallow: true, scroll: false })
- if (text.length < 1) router.replace('/events', undefined, { shallow: true, scroll: false })
+ searchParams?.has('q') &&
+ router?.replace('/events', undefined, { shallow: true, scroll: false })
+ router?.replace(`/events?q=${text}`, undefined, { shallow: true, scroll: false })
+ if (text.length < 1) router?.replace('/events', undefined, { shallow: true, scroll: false })
const matches = allEvents.filter((event: any) => {
const found =
@@ -119,8 +120,8 @@ function EventFilters({ allEvents, setEvents, categories, onDemandEvents }: Prop
searchTerm && setSearchTerm('')
setCategory(category)
category === 'all'
- ? router.replace('/events', undefined, { shallow: true, scroll: false })
- : router.replace(`/events?category=${category}`, undefined, {
+ ? router?.replace('/events', undefined, { shallow: true, scroll: false })
+ : router?.replace(`/events?category=${category}`, undefined, {
shallow: true,
scroll: false,
})
diff --git a/apps/www/components/Footer/index.tsx b/apps/www/components/Footer/index.tsx
index d4c64ebc02150..49d067de71326 100644
--- a/apps/www/components/Footer/index.tsx
+++ b/apps/www/components/Footer/index.tsx
@@ -1,8 +1,9 @@
+'use client'
+
import { CheckIcon } from '@heroicons/react/outline'
import { REALTIME_CHANNEL_STATES } from '@supabase/supabase-js'
import Image from 'next/image'
import Link from 'next/link'
-import { useRouter } from 'next/router'
import { useEffect } from 'react'
import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
@@ -13,6 +14,7 @@ import { ThemeToggle } from 'ui-patterns/ThemeToggle'
import supabase from '~/lib/supabase'
import useDarkLaunchWeeks from '../../hooks/useDarkLaunchWeeks'
import SectionContainer from '../Layouts/SectionContainer'
+import { usePathname } from 'next/navigation'
interface Props {
className?: string
@@ -20,10 +22,10 @@ interface Props {
}
const Footer = (props: Props) => {
- const { pathname } = useRouter()
+ const pathname = usePathname()
const isDarkLaunchWeek = useDarkLaunchWeeks()
- const isGAWeek = pathname.includes('/ga-week')
+ const isGAWeek = pathname?.includes('/ga-week')
const forceDark = isDarkLaunchWeek
useEffect(() => {
@@ -48,7 +50,6 @@ const Footer = (props: Props) => {
isGAWeek && 'dark:bg-alternative',
props.className
)}
- aria-labelledby="footerHeading"
>