button to load more items in post feed

near · Nov 1, 2023 · 458c404 · 458c404
1 parent cc98bb1
commit 458c404
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 13 deletions.
diff --git a/src/Posts/Feed.jsx b/src/Posts/Feed.jsx
@@ -121,7 +121,7 @@ const loadMorePosts = () => {
   fetchGraphQL(createQuery(type), queryName, {
     offset: posts.length,
     // limit: LIMIT,
-    limit: 50,
+    limit: 10,
   }).then(({ data }) => {
     // if (result.status === 200 && result.body) {
     // if (result.body.errors) {
@@ -190,7 +190,7 @@ return (
       {posts?.length &&
         posts.map((post) => {
           return (
-            <div style={{ borderBottom: "1px solid black" }}>
+            <div>
               <Widget
                 src="bwe-demos.near/widget/Posts.Post"
                 props={post}
@@ -200,6 +200,7 @@ return (
             </div>
           );
         })}
+      <button onClick={loadMorePosts}>Load more</button>
     </div>
     <Widget src="bwe-demos.near/widget/Posts.Sidebar" id="right" />
   </div>

diff --git a/src/Posts/Markdown.jsx b/src/Posts/Markdown.jsx
@@ -1,12 +1,10 @@
-// const [markdown, setMarkdown] = useState(null);
-// const importMarkdown = async () => {
-//   try {
-//     const markdownDyn = await import("https://esm.sh/marked-react");
-//     console.log("markdown imported");
-//     setMarkdown(markdownDyn);
-//   } catch (err) {
-//     console.log("markdown import error", err);
-//   }
+// ! This component uses a package imported from a cdn which is not
+// ! yet officially supported by BOS Web Engine. It is meant for
+// ! demonstration purposes only and will likely change in the future.
+
+// Originally tried to use the `marked-react` package but custom React
+// components (e.g. <Markdown />) do not function under BWE. Ideally
+// that would be a valid approach eventually.
 
 // };
 const [markdown, setMarkdown] = useState(null);
@@ -40,5 +38,4 @@ useEffect(() => {
   );
 }, [markdown]);
 
-// const Markdown = markdown;
 return markdown ? <div>{rendered}</div> : <div>Loading</div>;
diff --git a/src/Posts/Post.jsx b/src/Posts/Post.jsx
@@ -11,7 +11,14 @@ try {
 // debugger;
 
 return (
-  <div style={{ display: "flex", flexDirection: "column", maxWidth: "100%" }}>
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      maxWidth: "100%",
+      borderBottom: "1px solid #e7e7e7",
+    }}
+  >
     <div style={{ display: "flex", flexDirection: "row", columnGap: "0.5rem" }}>
       <span>{author}</span>
       <span>{new Date(block_timestamp / 1000000).toLocaleString()}</span>