a tool for shared writing and social publishing
unifying empty state
+48
-29
+6
app/(home-pages)/home/HomeLayout.tsx
+6
app/(home-pages)/home/HomeLayout.tsx
···
29
29
HomeEmptyState,
30
30
PublicationBanner,
31
31
} from "./HomeEmpty/HomeEmpty";
32
+
import { EmptyState } from "components/EmptyState";
32
33
33
34
export type Leaflet = {
34
35
added_at: string;
···
213
214
w-full
214
215
${display === "grid" ? "grid auto-rows-max md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-y-4 gap-x-4 sm:gap-x-6 sm:gap-y-5 grow" : "flex flex-col gap-2 "} `}
215
216
>
217
+
{searchedLeaflets.length === 0 && (
218
+
<EmptyState>
219
+
<div className="italic">Oh no! No results!</div>
220
+
</EmptyState>
221
+
)}
216
222
{props.leaflets.map(({ token: leaflet, added_at, archived }, index) => (
217
223
<ReplicacheProvider
218
224
disablePull
+3
-2
app/(home-pages)/reader/ReaderContent.tsx
+3
-2
app/(home-pages)/reader/ReaderContent.tsx
···
21
21
import { useRouter } from "next/navigation";
22
22
import Link from "next/link";
23
23
import { useLocalizedDate } from "src/hooks/useLocalizedDate";
24
+
import { EmptyState } from "components/EmptyState";
24
25
25
26
export const ReaderContent = (props: {
26
27
posts: Post[];
···
272
273
};
273
274
export const ReaderEmpty = () => {
274
275
return (
275
-
<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">
276
+
<EmptyState>
276
277
Nothing to read yet… <br />
277
278
Subscribe to publications and find their posts here!
278
279
<Link href={"/discover"}>
···
280
281
<DiscoverSmall /> Discover Publications
281
282
</ButtonPrimary>
282
283
</Link>
283
-
</div>
284
+
</EmptyState>
284
285
);
285
286
};
+3
-2
app/(home-pages)/reader/SubscriptionsContent.tsx
+3
-2
app/(home-pages)/reader/SubscriptionsContent.tsx
···
8
8
import { useEffect, useRef } from "react";
9
9
import { Cursor } from "./getReaderFeed";
10
10
import Link from "next/link";
11
+
import { EmptyState } from "components/EmptyState";
11
12
12
13
export const SubscriptionsContent = (props: {
13
14
publications: PublicationSubscription[];
···
93
94
94
95
export const SubscriptionsEmpty = () => {
95
96
return (
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">
97
+
<EmptyState>
97
98
You haven't subscribed to any publications yet!
98
99
<Link href={"/discover"}>
99
100
<ButtonPrimary className="mx-auto place-self-center">
100
101
<DiscoverSmall /> Discover Publications
101
102
</ButtonPrimary>
102
103
</Link>
103
-
</div>
104
+
</EmptyState>
104
105
);
105
106
};
+33
-20
app/lish/[did]/[publication]/dashboard/DraftList.tsx
+33
-20
app/lish/[did]/[publication]/dashboard/DraftList.tsx
···
4
4
import React from "react";
5
5
import { usePublicationData } from "./PublicationSWRProvider";
6
6
import { LeafletList } from "app/(home-pages)/home/HomeLayout";
7
+
import { EmptyState } from "components/EmptyState";
7
8
8
9
export function DraftList(props: {
9
10
searchValue: string;
···
12
13
let { data: pub_data } = usePublicationData();
13
14
if (!pub_data?.publication) return null;
14
15
let { leaflets_in_publications, ...publication } = pub_data.publication;
16
+
let filteredLeaflets = leaflets_in_publications
17
+
.filter((l) => !l.documents)
18
+
.filter((l) => !l.archived)
19
+
.map((l) => {
20
+
return {
21
+
archived: l.archived,
22
+
added_at: "",
23
+
token: {
24
+
...l.permission_tokens!,
25
+
leaflets_in_publications: [
26
+
{
27
+
...l,
28
+
publications: {
29
+
...publication,
30
+
},
31
+
},
32
+
],
33
+
},
34
+
};
35
+
});
36
+
37
+
38
+
39
+
if (!filteredLeaflets || filteredLeaflets.length === 0)
40
+
return (
41
+
<EmptyState>
42
+
No drafts yet!
43
+
<NewDraftSecondaryButton publication={pub_data?.publication?.uri} />
44
+
</EmptyState>
45
+
);
46
+
15
47
return (
16
48
<div className="flex flex-col gap-4">
17
49
<NewDraftSecondaryButton
···
24
56
showPreview={false}
25
57
defaultDisplay="list"
26
58
cardBorderHidden={!props.showPageBackground}
27
-
leaflets={leaflets_in_publications
28
-
.filter((l) => !l.documents)
29
-
.filter((l) => !l.archived)
30
-
.map((l) => {
31
-
return {
32
-
archived: l.archived,
33
-
added_at: "",
34
-
token: {
35
-
...l.permission_tokens!,
36
-
leaflets_in_publications: [
37
-
{
38
-
...l,
39
-
publications: {
40
-
...publication,
41
-
},
42
-
},
43
-
],
44
-
},
45
-
};
46
-
})}
59
+
leaflets={filteredLeaflets}
47
60
initialFacts={pub_data.leaflet_data.facts || {}}
48
61
titles={{
49
62
...leaflets_in_publications.reduce(
+1
app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx
+1
app/lish/[did]/[publication]/dashboard/NewDraftButton.tsx
+2
-5
app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
+2
-5
app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
···
20
20
import { useLocalizedDate } from "src/hooks/useLocalizedDate";
21
21
import { LeafletOptions } from "app/(home-pages)/home/LeafletList/LeafletOptions";
22
22
import { StaticLeafletDataContext } from "components/PageSWRDataProvider";
23
+
import { EmptyState } from "components/EmptyState";
23
24
24
25
export function PublishedPostsList(props: {
25
26
searchValue: string;
···
30
31
let { publication } = data!;
31
32
if (!publication) return null;
32
33
if (publication.documents_in_publications.length === 0)
33
-
return (
34
-
<div className="italic text-tertiary w-full container text-center place-items-center flex flex-col gap-3 p-3">
35
-
Nothing's been published yet...
36
-
</div>
37
-
);
34
+
return <EmptyState>Nothing's been published yet...</EmptyState>;
38
35
return (
39
36
<div className="publishedList w-full flex flex-col gap-2 pb-4">
40
37
{publication.documents_in_publications