leaflet.pub
a tool for shared writing and social publishing
remove features not in scope
cozylittle.house
+8
-63
+8
-42
app/(home-pages)/reader/InboxContent.tsx
+8
-42
app/(home-pages)/reader/InboxContent.tsx
···
73
73
74
74
return () => observer.disconnect();
75
75
}, [data, size, setSize, isValidating]);
76
-
let [searchValue, setSearchValue] = useState("");
77
-
let [sort, setSort] = useState<"recent" | "popular">("popular");
78
76
79
77
const allPosts = data ? data.flatMap((page) => page.posts) : [];
80
-
const postTitles = allPosts.map((p) => {
81
-
p.documents.data?.title;
82
-
});
83
-
const filteredPosts = allPosts
84
-
.filter((p) =>
85
-
p.documents.data?.title.toLowerCase().includes(searchValue.toLowerCase()),
86
-
)
87
-
.sort(
88
-
(a, b) =>
89
-
new Date(b.documents.data?.publishedAt || 0).getTime() -
90
-
new Date(a.documents.data?.publishedAt || 0).getTime(),
91
-
);
78
+
79
+
const sortedPosts = allPosts.sort(
80
+
(a, b) =>
81
+
new Date(b.documents.data?.publishedAt || 0).getTime() -
82
+
new Date(a.documents.data?.publishedAt || 0).getTime(),
83
+
);
92
84
93
85
if (allPosts.length === 0 && !isValidating) return <ReaderEmpty />;
94
86
···
96
88
97
89
return (
98
90
<div className="flex flex-row gap-6 ">
99
-
<div className="flex flex-col gap-6 relative">
100
-
<div className="flex justify-between gap-4 text-tertiary">
101
-
<Input
102
-
className={`inboxSearchInput
103
-
appearance-none! outline-hidden!
104
-
w-full min-w-0 text-primary relative px-1
105
-
border rounded-md border-border-light focus-within:border-border
106
-
bg-transparent ${hasBackgroundImage ? "focus-within:bg-bg-page" : "focus-within:bg-bg-leaflet"} `}
107
-
type="text"
108
-
id="inbox-search"
109
-
size={1}
110
-
placeholder="search posts..."
111
-
value={searchValue}
112
-
onChange={(e) => {
113
-
setSearchValue(e.currentTarget.value);
114
-
}}
115
-
/>
116
-
<button
117
-
className="flex gap-1"
118
-
onClick={() => {
119
-
setSort(sort === "popular" ? "recent" : "popular");
120
-
}}
121
-
>
122
-
{sort === "popular" ? "Popular" : "Recent"}
123
-
<SortSmall />
124
-
</button>
125
-
</div>
126
-
{filteredPosts.map((p) => (
91
+
<div className="flex flex-col gap-8 relative">
92
+
{sortedPosts.map((p) => (
127
93
<PostListing {...p} key={p.documents.uri} />
128
94
))}
129
95
{/* Trigger element for loading more posts */}
-9
app/(home-pages)/reader/LocalContent.tsx
-9
app/(home-pages)/reader/LocalContent.tsx
-5
app/(home-pages)/reader/page.tsx
-5
app/(home-pages)/reader/page.tsx
···
1
1
import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
2
2
import { InboxContent } from "./InboxContent";
3
-
import { LocalContent } from "./LocalContent";
4
3
import { GlobalContent } from "./GlobalContent";
5
4
import { getReaderFeed } from "./getReaderFeed";
6
5
···
19
18
content: (
20
19
<InboxContent nextCursor={posts.nextCursor} posts={posts.posts} />
21
20
),
22
-
},
23
-
Friends: {
24
-
controls: null,
25
-
content: <LocalContent />,
26
21
},
27
22
Global: {
28
23
controls: null,
-7
components/PostListing.tsx
-7
components/PostListing.tsx
···
72
72
73
73
return (
74
74
<div className="postListing flex flex-col gap-1">
75
-
<div className="text-sm text-tertiary flex gap-1 items-center px-1 ">
76
-
<div className="flex ">
77
-
<div className="sm:w-4 w-4 sm:h-4 h-4 rounded-full bg-test border border-border-light first:ml-0 -ml-2" />
78
-
<div className="sm:w-4 w-4 sm:h-4 h-4 rounded-full bg-test border border-border-light first:ml-0 -ml-2" />
79
-
</div>
80
-
others recommend
81
-
</div>
82
75
<BaseThemeProvider {...theme} local>
83
76
<div
84
77
id={`post-listing-${postUri}`}