tweak(web): cleaning up public lens landing page (#463)

* Add an "already have an account blurb" on landing page * require user to be logged in to see list of lenses * add cursor-pointer to sign-in link * Frequently asked -> Example questions * center example questions on page * add a "powered by spyglass" button to the bottom of search pages * cargo fmt
spyglass-search · May 23, 2023 · 4b3fbec · 4b3fbec
1 parent 59e3f14
commit 4b3fbec
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 36 deletions.
diff --git a/apps/web/src/client.rs b/apps/web/src/client.rs
@@ -461,26 +461,32 @@ impl ApiClient {
     }
 
     pub async fn get_user_data(&self) -> Result<UserData, ApiError> {
-        let mut request = self.client.get(format!("{}/user/lenses", self.endpoint));
-        if let Some(auth_token) = &self.token {
-            request = request.bearer_auth(auth_token);
-        }
+        match &self.token {
+            Some(token) => {
+                let request = self
+                    .client
+                    .get(format!("{}/user/lenses", self.endpoint))
+                    .bearer_auth(token)
+                    .send()
+                    .await?
+                    .error_for_status()?
+                    .json::<Vec<Lens>>()
+                    .await;
+
+                let lenses = match request {
+                    Ok(lenses) => lenses,
+                    Err(err) => {
+                        log::error!("Unable to get lenses: {}", err.to_string());
+                        Vec::new()
+                    }
+                };
 
-        let lenses = request
-            .send()
-            .await?
-            .error_for_status()?
-            .json::<Vec<Lens>>()
-            .await;
-
-        let lenses = match lenses {
-            Ok(lenses) => lenses,
-            Err(err) => {
-                log::error!("Unable to get lenses: {}", err.to_string());
-                Vec::new()
+                Ok(UserData { lenses })
             }
-        };
-
-        Ok(UserData { lenses })
+            None => {
+                log::error!("User is not logged in");
+                Ok(UserData { lenses: Vec::new() })
+            }
+        }
     }
 }
diff --git a/apps/web/src/components/nav.rs b/apps/web/src/components/nav.rs
@@ -124,7 +124,11 @@ pub fn nav_bar_component(props: &NavBarProps) -> Html {
                                 />
                             }
                         } else {
-                            html! {}
+                            html! {
+                                <Btn size={BtnSize::Sm} _type={BtnType::Primary} onclick={auth_login.clone()} classes="w-full">
+                                    {"Sign In"}
+                                </Btn>
+                            }
                         }}
                         </div>
                     }
@@ -151,7 +155,7 @@ pub fn nav_bar_component(props: &NavBarProps) -> Html {
                         }
                     } else {
                         html! {
-                            <Btn size={BtnSize::Sm} _type={BtnType::Primary} onclick={auth_login} classes="w-full hidden">
+                            <Btn size={BtnSize::Sm} _type={BtnType::Primary} onclick={auth_login} classes="w-full">
                                 {"Sign In"}
                             </Btn>
                         }
@@ -168,7 +172,11 @@ pub fn nav_bar_component(props: &NavBarProps) -> Html {
                                 <span>{"Create Lens"}</span>
                             </Btn>
                         }
-                    } else { html! {} }}
+                    } else {
+                        html! {
+                            <div class="text-neutral-400 text-xs">{"Please login to see your lenses"}</div>
+                        }
+                    }}
                     {if let Some(user_data) = &user_data {
                         html!{
                             <LensList

diff --git a/apps/web/src/main.rs b/apps/web/src/main.rs
@@ -185,11 +185,6 @@ impl Component for App {
                         if let Ok(user_data) = api.get_user_data().await {
                             link.send_message(Msg::UpdateUserData(user_data));
                         }
-                    } else {
-                        log::info!("loading public data");
-                        if let Ok(user_data) = api.get_user_data().await {
-                            link.send_message(Msg::UpdateUserData(user_data));
-                        }
                     }
                 });
                 false
@@ -230,7 +225,9 @@ impl Component for App {
             let link = link.clone();
             let uuid = self.session_uuid.clone();
             move |routes: Route| match &routes {
-                Route::Start => html! { <AppPage><LandingPage /></AppPage> },
+                Route::Start => {
+                    html! { <AppPage><LandingPage session_uuid={uuid.clone()} /></AppPage> }
+                }
                 Route::Edit { lens } => html! {
                     <AppPage>
                         <CreateLensPage lens={lens.clone()} onupdate={link.callback(|_| Msg::LoadLenses)} />

diff --git a/apps/web/src/pages/landing.rs b/apps/web/src/pages/landing.rs
@@ -1,14 +1,36 @@
 use ui_components::btn::{Btn, BtnSize, BtnType};
-use yew::prelude::*;
+use yew::{platform::spawn_local, prelude::*};
+
+use crate::{
+    auth0_login,
+    metrics::{Metrics, WebClientEvent},
+};
+
+#[derive(Properties, PartialEq)]
+pub struct LandingPageProps {
+    pub session_uuid: String,
+}
 
 #[function_component(LandingPage)]
-pub fn landing_page() -> Html {
+pub fn landing_page(props: &LandingPageProps) -> Html {
+    let metrics = Metrics::new(false);
+    let uuid = props.session_uuid.clone();
+    let auth_login = Callback::from(move |e: MouseEvent| {
+        e.prevent_default();
+        let metrics = metrics.clone();
+        let uuid = uuid.clone();
+        spawn_local(async move {
+            metrics.track(WebClientEvent::Login, &uuid).await;
+            let _ = auth0_login().await;
+        });
+    });
+
     html! {
         <>
             <div class="p-16 text-center">
                 <h1 class="text-4xl md:text-6xl font-serif px-8">
                     {"Conversational search for your "}
-                    <span class="text-cyan-500">{"content"}</span>
+                    <span class="text-cyan-500">{"community"}</span>
                     {"."}
                 </h1>
                 <div class="text-neutral-400 text-xl">
@@ -28,6 +50,12 @@ pub fn landing_page() -> Html {
                     >
                         {"Join our waitlist"}
                     </Btn>
+                    <div class="pt-2 text-sm">
+                        {"Already have an account?"}
+                        <a class="text-cyan-500 ml-2 font-semibold cursor-pointer" onclick={auth_login}>
+                            {"Sign in"}
+                        </a>
+                    </div>
                 </div>
             </div>
             <div class="pt-8">

diff --git a/apps/web/src/pages/mod.rs b/apps/web/src/pages/mod.rs
@@ -13,7 +13,7 @@ pub struct AppPageProps {
 #[function_component]
 pub fn AppPage(props: &AppPageProps) -> Html {
     html! {
-        <div class="flex-col flex-1">
+        <div class="flex-col flex-1 min-h-screen">
             {props.children.clone()}
         </div>
     }

diff --git a/apps/web/src/pages/search.rs b/apps/web/src/pages/search.rs
@@ -354,7 +354,21 @@ impl Component for SearchPage {
     fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
         let link = ctx.link();
         if let Some(lens) = self.lens_data.clone() {
-            self.render_search(link, &lens)
+            html! {
+                <>
+                    {self.render_search(link, &lens)}
+                    <div class="sticky top-[100vh] mx-auto w-fit text-center pb-4">
+                        <a href="/" class="flex cursor-pointer flex-row items-center rounded-full bg-cyan-700 px-4 py-2 hover:bg-cyan-900">
+                            <img src="/icons/logo@2x.png" class="w-8" />
+                            <div class="ml-2 text-left">
+                                <div class="text-sm font-bold">{"Powered by Spyglass"}</div>
+                                <div class="text-xs text-cyan-200">{"Click to create your own"}</div>
+                            </div>
+                        </a>
+                        <div class="mt-4 text-sm text-neutral-500">{"Made with ☕️ in SF/SD"}</div>
+                    </div>
+                </>
+            }
         } else {
             html! {}
         }
@@ -390,7 +404,7 @@ impl SearchPage {
             .collect::<Vec<Html>>();
 
         html! {
-            <div ref={self.search_wrapper_ref.clone()} class="relative min-h-screen">
+            <div ref={self.search_wrapper_ref.clone()}>
                 <div class="py-6 px-8 flex flex-row">
                     <div class="font-bold text-2xl">{lens.display_name.clone()}</div>
                     {if cfg!(debug_assertions) {
@@ -670,8 +684,8 @@ fn faq_component(props: &FAQComponentProps) -> Html {
         .collect::<Html>();
 
     html! {
-        <div>
-            <div class="text-xl text-white">{"Frequently Asked Questions"}</div>
+        <div class="col-span-2 mx-auto pt-4">
+            <div class="text-xl text-white">{"Example Questions"}</div>
             <div class="text-neutral-500 text-base">
                 {"Not sure where to start? Try one of these questions"}
             </div>