a tool for shared writing and social publishing
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

support logged out view for Reader with empty states

+38 -19
+8 -5
app/reader/ReaderContent.tsx
··· 19 19 import { getReaderFeed } from "./getReaderFeed"; 20 20 import { useEffect, useRef } from "react"; 21 21 import { useRouter } from "next/navigation"; 22 + import Link from "next/link"; 22 23 23 24 export const ReaderContent = (props: { 24 25 root_entity: string; ··· 266 267 </div> 267 268 ); 268 269 }; 269 - const ReaderEmpty = () => { 270 + export const ReaderEmpty = () => { 270 271 return ( 271 - <div className="flex flex-col gap-2 container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center font-bold text-tertiary"> 272 + <div className="flex flex-col gap-2 container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center text-tertiary"> 272 273 Nothing to read yet… <br /> 273 274 Subscribe to publications and find their posts here! 274 - <ButtonPrimary className="mx-auto place-self-center"> 275 - <DiscoverSmall /> Discover Publications 276 - </ButtonPrimary> 275 + <Link href={"/discover"}> 276 + <ButtonPrimary className="mx-auto place-self-center"> 277 + <DiscoverSmall /> Discover Publications 278 + </ButtonPrimary> 279 + </Link> 277 280 </div> 278 281 ); 279 282 };
+8 -5
app/reader/SubscriptionsContent.tsx
··· 7 7 import useSWRInfinite from "swr/infinite"; 8 8 import { useEffect, useRef } from "react"; 9 9 import { Cursor } from "./getReaderFeed"; 10 + import Link from "next/link"; 10 11 11 12 export const SubscriptionsContent = (props: { 12 13 publications: PublicationSubscription[]; ··· 90 91 ); 91 92 }; 92 93 93 - const SubscriptionsEmpty = () => { 94 + export const SubscriptionsEmpty = () => { 94 95 return ( 95 - <div className="flex flex-col gap-2 container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center font-bold text-tertiary"> 96 + <div className="flex flex-col gap-2 container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center text-tertiary"> 96 97 You haven't subscribed to any publications yet! 97 - <ButtonPrimary className="mx-auto place-self-center"> 98 - <DiscoverSmall /> Discover Publications 99 - </ButtonPrimary> 98 + <Link href={"/discover"}> 99 + <ButtonPrimary className="mx-auto place-self-center"> 100 + <DiscoverSmall /> Discover Publications 101 + </ButtonPrimary> 102 + </Link> 100 103 </div> 101 104 ); 102 105 };
+22 -9
app/reader/page.tsx
··· 11 11 12 12 import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout"; 13 13 import { DashboardLayout } from "components/PageLayouts/DashboardLayout"; 14 - import { ReaderContent } from "./ReaderContent"; 15 - import { SubscriptionsContent } from "./SubscriptionsContent"; 14 + import { ReaderContent, ReaderEmpty } from "./ReaderContent"; 15 + import { 16 + SubscriptionsContent, 17 + SubscriptionsEmpty, 18 + } from "./SubscriptionsContent"; 16 19 import { getReaderFeed } from "./getReaderFeed"; 17 20 import { getSubscriptions } from "./getSubscriptions"; 18 21 ··· 23 26 let permission_token = auth_res?.home_leaflet; 24 27 if (!permission_token) 25 28 return ( 26 - <NotFoundLayout> 27 - <p className="font-bold">Sorry, we can't find this page!</p> 28 - <p> 29 - This may be a glitch on our end. If the issue persists please{" "} 30 - <a href="mailto:contact@leaflet.pub">send us a note</a>. 31 - </p> 32 - </NotFoundLayout> 29 + <DashboardLayout 30 + id="reader" 31 + cardBorderHidden={false} 32 + currentPage="reader" 33 + defaultTab="Read" 34 + actions={null} 35 + tabs={{ 36 + Read: { 37 + controls: null, 38 + content: <ReaderEmpty />, 39 + }, 40 + Subscriptions: { 41 + controls: null, 42 + content: <SubscriptionsEmpty />, 43 + }, 44 + }} 45 + /> 33 46 ); 34 47 let [homeLeafletFacts] = await Promise.all([ 35 48 supabaseServerClient.rpc("get_facts", {