Hide profiles if not logged in and put nice home page

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 <div />
+  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 <div/>
 
   return (
     <LovePage trackPageView={'user profiles'}>
@@ -178,34 +202,70 @@ export default function ProfilesPage() {
               >
                 Sign up
               </Button>
-              <SignUpAsMatchmaker className="flex-1" />
+              <SignUpAsMatchmaker className="flex-1"/>
             </Col>
           )}
-          <Title className="!mb-2 text-3xl">Profiles</Title>
-          <Search
-            youLover={you}
-            starredUserIds={starredUserIds ?? []}
-            filters={filters}
-            updateFilter={updateFilter}
-            clearFilters={clearFilters}
-            setYourFilters={setYourFilters}
-            isYourFilters={isYourFilters}
-            locationFilterProps={locationFilterProps}
-          />
+          {!user && <>
+            <h1
+              className="pt-12 pb-2 text-7xl md:text-8xl xs:text-6xl font-extrabold max-w-4xl leading-tight xl:whitespace-nowrap md:whitespace-nowrap ">
+              Don't Swipe.<br/><span id="typewriter"></span><span id="cursor" className="animate-pulse">|</span>
+            </h1>
+            <div className="w-full bg-gray-50 dark:bg-gray-900 py-8 mt-20">
+              <div className="max-w-6xl mx-auto px-4">
+                <div className="grid md:grid-cols-3 gap-8 text-center">
+                  <div className="space-y-2">
+                    <h3 className="text-lg font-bold">Radically Transparent</h3>
+                    <p className="text-gray-600 dark:text-gray-400">
+                      No algorithms. Every profile searchable.
+                    </p>
+                  </div>
 
-          {displayLovers === undefined || compatibleLovers === undefined ? (
-            <LoadingIndicator />
-          ) : (
-            <ProfileGrid
-              lovers={displayLovers}
-              loadMore={loadMore}
-              isLoadingMore={isLoadingMore}
-              isReloading={isReloading}
-              compatibilityScores={compatibleLovers?.loverCompatibilityScores}
-              starredUserIds={starredUserIds}
-              refreshStars={refreshStars}
-            />
-          )}
+                  <div className="space-y-2">
+                    <h3 className="text-lg font-bold">Built for Depth</h3>
+                    <p className="text-gray-600 dark:text-gray-400">
+                      Filter by any keyword and what matters most.
+                    </p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <h3 className="text-lg font-bold">Community Owned</h3>
+                    <p className="text-gray-600 dark:text-gray-400">
+                      Free forever. Built by users, for users.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </>}
+          {user &&
+              <>
+                  <Title className="!mb-2 text-3xl">Profiles</Title>
+                  <Search
+                      youLover={you}
+                      starredUserIds={starredUserIds ?? []}
+                      filters={filters}
+                      updateFilter={updateFilter}
+                      clearFilters={clearFilters}
+                      setYourFilters={setYourFilters}
+                      isYourFilters={isYourFilters}
+                      locationFilterProps={locationFilterProps}
+                  />
+
+                {displayLovers === undefined || compatibleLovers === undefined ? (
+                  <LoadingIndicator/>
+                ) : (
+                  <ProfileGrid
+                    lovers={displayLovers}
+                    loadMore={loadMore}
+                    isLoadingMore={isLoadingMore}
+                    isReloading={isReloading}
+                    compatibilityScores={compatibleLovers?.loverCompatibilityScores}
+                    starredUserIds={starredUserIds}
+                    refreshStars={refreshStars}
+                  />)
+                }
+              </>
+          }
         </Col>
       </Col>
     </LovePage>