78 replace connect card with connected card if user is logged in

src/components/connect/card.tsx

@@ -3,6 +3,7 @@ import Image from 'next/image'
 import { Avatar } from 'primereact/avatar'
 import { Button } from 'primereact/button'
 import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
 
 import { ConnectButton } from './button'
 
@@ -13,6 +14,22 @@ import { getImage } from '@utils/get-image'
 export function ConnectCard() {
   const router = useRouter()
   const { data } = useProfileQuery()
+  const [welcomeBackMessage, setWelcomeBackMessage] = useState('')
+
+  const welcomeBackMessages = [
+    'Back so soon?',
+    'We missed you!',
+    'Glad to see you!',
+    'Your artists are waiting...',
+  ]
+
+  useEffect(() => {
+    setWelcomeBackMessage(
+      welcomeBackMessages[
+        Math.floor(Math.random() * welcomeBackMessages.length)
+      ]
+    )
+  }, [])
 
   return (
     <Card className="w-full">
@@ -41,14 +58,23 @@ export function ConnectCard() {
           <div className="flex-column align-items-center flex gap-2 text-center">
             <h1 className="m-0">
               {data?.displayName
-                ? `Welcome ${data.displayName}!`
+                ? `Welcome back ${data.displayName}!`
                 : 'With just one press of a button'}
             </h1>
 
-            <p className="m-0">
-              With just one press of a button you&apos;ll see your top artists,
-              favorite songs and so on.
-            </p>
+            {data?.displayName ? (
+              <>
+                <span className="text-2xl">{welcomeBackMessage}</span>
+                <p className="m-0">
+                  Press the button below to open your profile
+                </p>
+              </>
+            ) : (
+              <p className="m-0">
+                With just one press of a button you&apos;ll see your top
+                artists, favorite songs and so on
+              </p>
+            )}
           </div>
 
           {data?.displayName ? (

src/components/profile/info.tsx

@@ -22,7 +22,12 @@ export function ProfileInfo() {
   const menu = useRef<SlideMenu>(null)
   const toast = useRef<Toast>(null)
 
-  if (!data) return <ConnectButton />
+  if (!data)
+    return (
+      <div className="px-3">
+        <ConnectButton />
+      </div>
+    )
 
   const { displayName, href, images } = data
 

src/pages/index.tsx

@@ -1,8 +1,29 @@
 import { Card } from 'primereact/card'
+import { GetServerSideProps } from 'next'
+import { QueryClient, dehydrate } from '@tanstack/react-query'
 
 import Steps from '@components/connect/steps'
 import { ConnectCard } from '@components/connect'
 import { DiscordCard } from '@components/connect/discord-card'
+import { ACCESS_TOKEN, PROFILE } from '@api/constants'
+import { getProfile } from '@api/fetchers'
+
+export const getServerSideProps: GetServerSideProps = async ({
+  req: { cookies },
+}) => {
+  const accessToken = cookies[ACCESS_TOKEN]
+  const queryClient = new QueryClient()
+
+  await queryClient
+    .fetchQuery([PROFILE], () => getProfile(accessToken))
+    .catch(() => {})
+
+  return {
+    props: {
+      dehydratedState: dehydrate(queryClient),
+    },
+  }
+}
 
 export default function Home() {
   return (