diff --git a/web/pages/index.tsx b/web/pages/index.tsx index 8a94957c..c6faf0af 100644 --- a/web/pages/index.tsx +++ b/web/pages/index.tsx @@ -1,31 +1,28 @@ -import { Lover } from 'common/love/lover' -import { removeNullOrUndefinedProps } from 'common/util/object' -import { Search } from 'web/components/filters/search' -import { LovePage } from 'web/components/love-page' -import { SignUpAsMatchmaker } from 'web/components/nav/love-sidebar' -import { useLover } from 'web/hooks/use-lover' -import { useCompatibleLovers } from 'web/hooks/use-lovers' -import { getStars } from 'web/lib/supabase/stars' -import { signupThenMaybeRedirectToSignup } from 'web/lib/util/signup' +import {Lover} from 'common/love/lover' +import {removeNullOrUndefinedProps} from 'common/util/object' +import {Search} from 'web/components/filters/search' +import {LovePage} from 'web/components/love-page' +import {SignUpAsMatchmaker} from 'web/components/nav/love-sidebar' +import {useLover} from 'web/hooks/use-lover' +import {useCompatibleLovers} from 'web/hooks/use-lovers' +import {getStars} from 'web/lib/supabase/stars' +import {signupThenMaybeRedirectToSignup} from 'web/lib/util/signup' import Router from 'next/router' -import { useCallback, useEffect, useRef, useState } from 'react' -import { Button } from 'web/components/buttons/button' -import { orderLovers, useFilters } from 'web/components/filters/use-filters' -import { Col } from 'web/components/layout/col' -import { ProfileGrid } from 'web/components/profile-grid' -import { LoadingIndicator } from 'web/components/widgets/loading-indicator' -import { Title } from 'web/components/widgets/title' -import { useGetter } from 'web/hooks/use-getter' -import { usePersistentInMemoryState } from 'web/hooks/use-persistent-in-memory-state' -import { useSaveReferral } from 'web/hooks/use-save-referral' -import { useTracking } from 'web/hooks/use-tracking' -import { useUser } from 'web/hooks/use-user' -import { api } from 'web/lib/api' -import { debounce, omit } from 'lodash' -import { - PREF_AGE_MAX, - PREF_AGE_MIN, -} from 'web/components/filters/location-filter' +import {useCallback, useEffect, useRef, useState} from 'react' +import {Button} from 'web/components/buttons/button' +import {orderLovers, useFilters} from 'web/components/filters/use-filters' +import {Col} from 'web/components/layout/col' +import {ProfileGrid} from 'web/components/profile-grid' +import {LoadingIndicator} from 'web/components/widgets/loading-indicator' +import {Title} from 'web/components/widgets/title' +import {useGetter} from 'web/hooks/use-getter' +import {usePersistentInMemoryState} from 'web/hooks/use-persistent-in-memory-state' +import {useSaveReferral} from 'web/hooks/use-save-referral' +import {useTracking} from 'web/hooks/use-tracking' +import {useUser} from 'web/hooks/use-user' +import {api} from 'web/lib/api' +import {debounce, omit} from 'lodash' +import {PREF_AGE_MAX, PREF_AGE_MIN,} from 'web/components/filters/location-filter' export default function ProfilesPage() { const you = useLover() @@ -64,7 +61,10 @@ export default function ProfilesPage() { [] ) + const user = useUser() + useEffect(() => { + if (!user) return debouncedSetAge({ min: filters.pref_age_min ?? PREF_AGE_MIN, max: filters.pref_age_max ?? PREF_AGE_MAX, @@ -73,6 +73,7 @@ export default function ProfilesPage() { const id = useRef(0) useEffect(() => { + if (!user) return setIsReloading(true) const current = ++id.current api( @@ -83,7 +84,7 @@ export default function ProfilesPage() { ...filters, }) as any ) - .then(({ lovers }) => { + .then(({lovers}) => { if (current === id.current) { setLovers(lovers) } @@ -99,11 +100,10 @@ export default function ProfilesPage() { debouncedAgeRange.max, ]) - const user = useUser() useTracking('view love profiles') useSaveReferral(user) const lover = useLover() - const { data: starredUserIds, refresh: refreshStars } = useGetter( + const {data: starredUserIds, refresh: refreshStars} = useGetter( 'star', user?.id, getStars @@ -154,7 +154,31 @@ export default function ProfilesPage() { const displayLovers = lovers && orderLovers(lovers, starredUserIds) - if (user === undefined) return
+ useEffect(() => { + const text = "Search."; + const typewriter = document.getElementById("typewriter"); + let i = 0; + let timeoutId: any; + let intervalId; + if (typewriter) typewriter.textContent = "" + + function typeWriter() { + if (i < text.length && typewriter) { + typewriter.textContent = text.substring(0, i + 1); + i++; + timeoutId = setTimeout(typeWriter, 150); + } + } + + intervalId = setTimeout(() => typeWriter(), 500); + return () => { + clearTimeout(timeoutId); + clearTimeout(intervalId); + if (typewriter) typewriter.textContent = "Search." + }; + }, []); + + if (user === undefined) return return (+ No algorithms. Every profile searchable. +
++ Filter by any keyword and what matters most. +
++ Free forever. Built by users, for users. +
+