Adds ability to select and edit existing blogs (#379)

* feat: adds workflow to deploy to testnet * fix: prettier * fix: build script * feature: devhub.testnet workflow * feat: creates dev script * feat: replaces release workflow * feature: init root * feature: pass props for widgets accountId and contract accountId * feature: demo for new root * feature: adds the configurators wip * feature: branding configurator * feature: about and information configurator * feature: adds new addon flow * fix: communities metadata * fix: pass widgets to addon configurator * fix: formatting and centering * feature: refactored configurator * feature: working information, about, and access control editors * fix: branding for upload, but broken preview * feature: blog start * feature: tab links * refactor: working communities with new root * feature: implements feed * fix: format * feature: addons and configs with swapping config * feat: puts in replacements for the refactor * fix: name casing * fix: format * Implement server side search (#298) * Implement server side search * case insensitive search on content * add search test * Update deploy-dev-testnet.yml * feature: adds addons and their configurators (#326) * fix: bos-loader pulls from cargo * fix: links and replacements * chore: dummy data * feature: rename page * wip: plugins * feature: able to configure addons from community config * feat: dummy data * fix: key in tab selection * feat: telegram configurator * feature: init github * refactor: moves configurators inside of configuration * refactor: posts and blog * fix: replace mob * fix: broken link * fix: move app and clean-up * refactor: structure * fix: scripts * fix: bos-loader pulls from cargo * fix: links and replacements * feat: adds workflow to deploy to testnet (#305) * feat: adds workflow to deploy to testnet * fix: prettier * fix: build script * feature: devhub.testnet workflow * feat: creates dev script * feat: replaces release workflow * feat: adds weekly promotion of develop to main * fix: adds replacements for mainnet (#318) * Fix community posting (#308) * chore: Format * Fix community post button --------- Co-authored-by: Bo Yao <[email protected]> * fix: main branch deploy action (#319) * fix: adds replacements for mainnet * fix: changes devhub.testnet to devhubtest.testnet * Improve search ux (#317) * big improvement on search ux * add search icon * feat: adds workflow to deploy to testnet * feat: creates dev script * refactor: structure clean up and fixes (#330) * fix: adds replacements for mainnet (#318) * Fix community posting (#308) * chore: Format * Fix community post button --------- Co-authored-by: Bo Yao <[email protected]> * fix: main branch deploy action (#319) * fix: adds replacements for mainnet * fix: changes devhub.testnet to devhubtest.testnet * Improve search ux (#317) * big improvement on search ux * add search icon * fix: bos-loader pulls from cargo * fix: links and replacements * fix: formatting * fix: bos-loader pulls from cargo * feat: adds workflow to deploy to testnet (#305) * feat: adds workflow to deploy to testnet * fix: prettier * fix: build script * feature: devhub.testnet workflow * feat: creates dev script * feat: replaces release workflow * feat: adds weekly promotion of develop to main * fix: adds replacements for mainnet (#318) * Fix community posting (#308) * chore: Format * Fix community post button --------- Co-authored-by: Bo Yao <[email protected]> * fix: main branch deploy action (#319) * fix: adds replacements for mainnet * fix: changes devhub.testnet to devhubtest.testnet * Improve search ux (#317) * big improvement on search ux * add search icon * feat: adds workflow to deploy to testnet * feat: creates dev script * refactor: rename to devhub * chore: removes hello * refactor: renames from DevHub to devhub references in code * fix: marks legacy and makes new feed test * feature: catches up to main * fix: formatting * feature: wrapped kanban and github wip * test: adds tests for community * fix: formatting * fix: bash explicit * fix: adds check for jq --------- Co-authored-by: Carina.Akaia.near <[email protected]> Co-authored-by: Bo Yao <[email protected]> * refactor: structure clean up and fixes (#330) * fix: adds replacements for mainnet (#318) * Fix community posting (#308) * chore: Format * Fix community post button --------- Co-authored-by: Bo Yao <[email protected]> * fix: main branch deploy action (#319) * fix: adds replacements for mainnet * fix: changes devhub.testnet to devhubtest.testnet * Improve search ux (#317) * big improvement on search ux * add search icon * fix: bos-loader pulls from cargo * fix: links and replacements * fix: formatting * fix: bos-loader pulls from cargo * feat: adds workflow to deploy to testnet (#305) * feat: adds workflow to deploy to testnet * fix: prettier * fix: build script * feature: devhub.testnet workflow * feat: creates dev script * feat: replaces release workflow * feat: adds weekly promotion of develop to main * fix: adds replacements for mainnet (#318) * Fix community posting (#308) * chore: Format * Fix community post button --------- Co-authored-by: Bo Yao <[email protected]> * fix: main branch deploy action (#319) * fix: adds replacements for mainnet * fix: changes devhub.testnet to devhubtest.testnet * Improve search ux (#317) * big improvement on search ux * add search icon * feat: adds workflow to deploy to testnet * feat: creates dev script * refactor: rename to devhub * chore: removes hello * refactor: renames from DevHub to devhub references in code * fix: marks legacy and makes new feed test * feature: catches up to main * fix: formatting * feature: wrapped kanban and github wip * test: adds tests for community * fix: formatting * fix: bash explicit * fix: adds check for jq --------- Co-authored-by: Carina.Akaia.near <[email protected]> Co-authored-by: Bo Yao <[email protected]> * refactor: moves over search post feature * refactor: converts legacy * refactor: replaces a with Link and separates out community card and spawner * refactor: simplfies configurator wip * fix: community configurator * feat: blog configuration * feat: improved configurator for wiki * feat: blog editor * fix: tag component * Website Redesign (#336) * Rebase to develop branch * fix: organize componnets according to atomic design * feat: Add hrefs to navlinks * fix: remove duplicate banner * fix: remove duplicate Navbar dropdown * fix: remove comments from app layout * feat: add visual indicator to navbar on selected link feat: adds deploy script fix: access control configurator fix: ids for addons fix: formatting fix: communities test * refactor: new devhub root and refactor of current app chore: removes homepage work chore: removes homepage from app.js fix: removes from contributing fix: cleans pull request fix: removes change to deploy-dev workflow step * feat: configures tests for different wallet connection scenarios fix: remove deploy fix: removes deploy script * fix: formatting * feat: adds community addon framework, wiki and telegram plugins * fix: formatting * test: bootstraps addon test wip * fix: formatting * test: modifies test criteria * initial commit * feat: work in progress * fix: formatting * feat: clean feed component * refactor: change tags to labels * fix: formatting * feat: sets post template * feat: blog page * fix: Page is module * fix: formatting * feature: starting better editor * feat: blog page * refactor: condenses blog feeds * wip: editor * feat: blog editor * feat: adds styles * fix: cleanup --------- Co-authored-by: Thomas <[email protected]> Co-authored-by: Bo Yao <[email protected]> Co-authored-by: Carina.Akaia.near <[email protected]> Co-authored-by: Zeeshan Ahmad <[email protected]>
NEAR-DevHub · Nov 2, 2023 · 0194a07 · 0194a07
1 parent be6bbd3
commit 0194a07
Show file tree

Hide file tree

Showing 10 changed files with 408 additions and 110 deletions.
diff --git a/src/devhub/entity/addon/blog/Configurator.jsx b/src/devhub/entity/addon/blog/Configurator.jsx
@@ -76,7 +76,7 @@ const handleSubmit = () => {
 };
 
 return (
-  <Tile className="p-3">
+  <Tile className="p-3 bg-white">
     <ul className="nav nav-tabs" id="blogConfiguratorTabs" role="tablist">
       <li className="nav-item" role="presentation">
         <button
@@ -267,7 +267,7 @@ return (
       >
         <Container>
           <Widget
-            src={"${REPL_DEVHUB}/widget/devhub.entity.addon.blog.Creator"}
+            src={"${REPL_DEVHUB}/widget/devhub.entity.addon.blog.editor.index"}
             props={{
               data,
               handle,

diff --git a/src/devhub/entity/addon/blog/Feed.jsx b/src/devhub/entity/addon/blog/Feed.jsx
@@ -1,42 +1,14 @@
-const { Item } = props;
+const { Item, Layout } = props;
 
-const Container = styled.div``;
-
-const Layout = styled.div`
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 1rem;
+Layout = Layout || (() => <></>);
 
-  @media screen and (max-width: 768px) {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-`;
+const Container = styled.div``;
 
 const Loader = styled.div`
   text-align: center;
   padding: 20px;
 `;
 
-const Notification = styled.p`
-  text-align: center;
-  color: #3252a6;
-`;
-
-const Heading = styled.h3`
-  color: #151515;
-  font-size: 2.5rem;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 120%; /* 48px */
-  margin-bottom: 2rem;
-
-  @media screen and (max-width: 768px) {
-    font-size: 2rem;
-  }
-`;
-
 const QUERYAPI_ENDPOINT = `https://near-queryapi.api.pagoda.co/v1/graphql/`;
 const DISPLAY_COUNT = 10;
 
@@ -107,21 +79,19 @@ const fetchPostIds = (offset) => {
   if (loading) return;
   setLoading(true);
   const variables = { limit: DISPLAY_COUNT, offset, where: buildWhereClause() };
-  const result = fetchGraphQL(query, "DevhubPostsQuery", variables).then(
-    (result) => {
-      if (result.status === 200) {
-        if (result.body.data) {
-          const data = result.body.data[queryName];
-          const newPostIds = data.map((p) => p.post_id);
-          setPostIds(offset === 0 ? newPostIds : [...postIds, ...newPostIds]);
-          setHasNext(data.length >= variables.limit);
-        } else {
-          console.error("GraphQL Error:", result.errors);
-        }
-        setLoading(false);
+  fetchGraphQL(query, "DevhubPostsQuery", variables).then((result) => {
+    if (result.status === 200) {
+      if (result.body.data) {
+        const data = result.body.data[queryName];
+        const newPostIds = data.map((p) => p.post_id);
+        setPostIds(offset === 0 ? newPostIds : [...postIds, ...newPostIds]);
+        setHasNext(data.length >= variables.limit);
+      } else {
+        console.error("GraphQL Error:", result.errors);
       }
+      setLoading(false);
     }
-  );
+  });
 };
 
 useEffect(() => {
@@ -160,7 +130,6 @@ return (
         hasMore={hasNext}
         loader={renderLoader()}
       >
-        <Heading>Latest Blog Posts</Heading>
         <Layout>
           {/* Layout */}
           {postIds.map(cachedRenderItem)}

diff --git a/src/devhub/entity/addon/blog/Viewer.jsx b/src/devhub/entity/addon/blog/Viewer.jsx
@@ -8,11 +8,26 @@ const { includeLabels, excludeLabels, layout, handle } = props;
 
 const Grid = styled.div`
   display: grid;
-  grid-template-columns: 1fr;
-  gap: 16px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
 
-  @media (min-width: 769px) {
-    grid-template-columns: repeat(2, 1fr);
+  @media screen and (max-width: 768px) {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+`;
+
+const Heading = styled.h3`
+  color: #151515;
+  font-size: 2.5rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 120%; /* 48px */
+  margin-bottom: 2rem;
+
+  @media screen and (max-width: 768px) {
+    font-size: 2rem;
   }
 `;
 
@@ -35,15 +50,15 @@ function BlogCard(postId) {
 
 return (
   <div class="row w-100">
+    <Heading>Latest Blog Posts</Heading>
     <Widget
       src={"${REPL_DEVHUB}/widget/devhub.entity.addon.blog.Feed"}
       // TODO: This needs to filter by more labels
       props={{
         includeLabels: ["blog", handle, ...(includeTags || [])], // make sure this has the community handle
         excludeLabels: excludeTags,
         renderItem: BlogCard,
-        Layout: ({ children }) =>
-          layout === "grid" ? <Grid>{children}</Grid> : children,
+        Layout: ({ children }) => <Grid>{children}</Grid>,
       }}
     />
   </div>

diff --git a/src/devhub/entity/addon/blog/Creator.jsx → ...vhub/entity/addon/blog/editor/content.jsx b/src/devhub/entity/addon/blog/Creator.jsx → ...vhub/entity/addon/blog/editor/content.jsx
@@ -60,7 +60,7 @@ const FormContainer = styled.div`
   }
 `;
 
-const { data, handle } = props;
+const { data, handle, onSubmit } = props;
 
 const initialData = data; // TODO: Check Storage API
 
@@ -70,7 +70,9 @@ const [subtitle, setSubtitle] = useState(initialData.subtitle || "");
 const [description, setDescription] = useState(initialData.description || "");
 const [author, setAuthor] = useState(initialData.author || "");
 const [previewMode, setPreviewMode] = useState("card"); // "card" or "page"
-const [date, setDate] = useState(new Date().toISOString().split("T")[0]);
+const [date, setDate] = useState(
+  (initialData.date && new Date(initialData.date)) || new Date()
+);
 const [category, setCategory] = useState("guide");
 
 // Legacy State.init for IpfsUploader
@@ -80,6 +82,16 @@ State.init({
   },
 });
 
+let timeoutId;
+
+const debounce = (func, delay) => {
+  if (!delay) {
+    delay = 300;
+  }
+  clearTimeout(timeoutId);
+  timeoutId = setTimeout(func, delay);
+};
+
 const Container = styled.div`
   width: 100%;
   margin: 0 auto;
@@ -98,61 +110,57 @@ const hasDataChanged = () => {
 };
 
 const handlePublish = () => {
-  Near.call({
-    contractName: "${REPL_DEVHUB_CONTRACT}",
-    methodName: "add_post",
-    args: {
-      labels: ["blog", handle],
-      body: {
-        post_type: "Comment",
-        description: JSON.stringify({
-          title,
-          subtitle,
-          description,
-          date,
-          content,
-          author,
-          image: state.image.cid,
-          tags: data.includeLabels,
-          community: handle,
-        }),
-        comment_version: "V2",
+  onSubmit &&
+    onSubmit(
+      {
+        id: data.id || undefined,
+        title,
+        subtitle,
+        description,
+        date,
+        content,
+        author,
+        image: state.image.cid,
+        tags: data.includeLabels,
+        community: handle,
       },
-    },
-    deposit: Big(10).pow(21).mul(2),
-    gas: Big(10).pow(12).mul(100),
-  });
+      data.id !== undefined
+    );
 };
 
 function Preview() {
   switch (previewMode) {
     case "card": {
       return (
         <Card
-          title={title}
-          subtitle={subtitle}
-          description={description}
-          date={date}
-          content={content}
-          author={author}
-          image={state.image}
-          tags={data.includeLabels} // filter out "blog" and community handle?
-          community={handle}
+          data={{
+            title,
+            subtitle,
+            description,
+            date,
+            content,
+            author,
+            image: state.image,
+            tags: data.includeLabels,
+            community: handle,
+          }}
         />
       );
     }
     case "page": {
       return (
         <Page
-          title={title}
-          subtitle={subtitle}
-          description={description}
-          date={date}
-          content={content}
-          author={author}
-          image={state.image}
-          tags={data.includeLabels} // filter out "blog" and community handle?
-          community={handle}
+          data={{
+            title,
+            subtitle,
+            description,
+            date,
+            content,
+            author,
+            image: state.image,
+            tags: data.includeLabels,
+            community: handle,
+          }}
         />
       );
     }
@@ -219,7 +227,7 @@ return (
                 src="${REPL_DEVHUB}/widget/devhub.components.molecule.Input"
                 props={{
                   className: "flex-grow-1",
-                  onChange: (e) => setTitle(e.target.value),
+                  onChange: debounce((e) => setTitle(e.target.value)),
                   value: title,
                   placeholder: "Title",
                 }}
@@ -233,7 +241,7 @@ return (
                 src="${REPL_DEVHUB}/widget/devhub.components.molecule.Input"
                 props={{
                   className: "flex-grow-1",
-                  onChange: (e) => setSubtitle(e.target.value),
+                  onChange: debounce((e) => setSubtitle(e.target.value)),
                   value: subtitle,
                   placeholder: "Subtitle",
                 }}
@@ -270,7 +278,7 @@ return (
                 src="${REPL_DEVHUB}/widget/devhub.components.molecule.Input"
                 props={{
                   className: "flex-grow-1",
-                  onChange: (e) => setDescription(e.target.value),
+                  onChange: debounce((e) => setDescription(e.target.value)),
                   value: description,
                   placeholder: "Description",
                 }}
@@ -284,28 +292,28 @@ return (
                 src="${REPL_DEVHUB}/widget/devhub.components.molecule.Input"
                 props={{
                   className: "flex-grow-1",
-                  onChange: (e) => setAuthor(e.target.value),
+                  onChange: debounce((e) => setAuthor(e.target.value)),
                   value: author,
                   placeholder: "Author",
                 }}
               />
             </div>
           </div>
-          <div>
-            <h5>Content</h5>
-            <Widget
-              src="${REPL_DEVHUB}/widget/devhub.components.molecule.MarkdownEditor"
-              props={{ data: { content }, onChange: setContent }}
-            />
-          </div>
           <div>
             <h5>Date</h5>
             <input
               type="date"
-              value={date}
+              value={date.toISOString().split("T")[0]}
               onChange={(e) => setDate(e.target.value)}
             />
           </div>
+          <div>
+            <h5>Content</h5>
+            <Widget
+              src="${REPL_DEVHUB}/widget/devhub.components.molecule.MarkdownEditor"
+              props={{ data: { content }, onChange: setContent }}
+            />
+          </div>
         </FormContainer>
         <div
           className={"d-flex align-items-center justify-content-end gap-3 mt-4"}