const contract = props.contract || "docschain.ws-protocol-63"; const componentOwnerId = props.componentOwnerId ?? "calimero.testnet"; const redirectConfig = !componentOwnerId || componentOwnerId === "calimero.near" ? {} : { redirect: (url) => url.replace("calimero.near", componentOwnerId)}; const transformUrl = (url) => !componentOwnerId || componentOwnerId === "calimero.near" ? "calimero.near" : url.replace("calimero.near", componentOwnerId); const PageContainer = styled.div` width: 100%; height: 100vh; padding-left: 60px; padding-right: 60px; background-color: #0e0e10; color: #ffffff; `; State.init({ articleId: props.articleId, editArticle: false, }); State.update({ ...state, article: Near.calimeroView(contract, "get_article", { article_id: props.articleId, }), }); console.log(state.article); const saveArticle = () => { if (!state.editorInput) { return; } const params = { article_id: state.articleId, body: state.editorInput, }; Near.fakCalimeroCall(contract, "post_article", params); }; return ( <PageContainer> <Widget src={"calimero.near/widget/Calimero.DocsChain.Navbar.HorizontalNavbar"} config={redirectConfig} /> <div className="d-flex"> <Widget src={"calimero.near/widget/Calimero.DocsChain.Sidebar.DocsSidebar"} config={redirectConfig} props={{ onOpenCreatePage: state.onOpenCreatePage, createPageOpen: state.createPage.open, }} /> <div> <h1>Article: {state.articleId}</h1> {/* === BUTTON - EDIT ARTICLE === */} { <button onClick={() => { State.update({ ...state, editArticle: true, editorInput: state.article.body, }); }} > Edit Article </button> } {/* === BUTTON - SAVE ARTICLE === */} {state.editArticle && ( <> <button type="button" className="btn btn-success" onClick={() => { saveArticle(); }} > Save Article{" "} </button> <button type="button" className="btn btn-danger" onClick={() => { State.update({ ...state, editArticle: false, editorInput: undefined, }); }} > Cancel{" "} </button> </> )} {/* === BUTTON - VIEW HISTORY === */} <span className="ps-4"> <button onClick={() => { State.update({ ...state, viewHistory: !state.viewHistory, }); }} > View History </button> </span> {/* === EDIT ARTICLE === */} {state.editArticle && ( <> <div className="d-flex gap-2" style={{ minHeight: "300px" }}> <div className="w-50"> <Widget src="calimero.near/widget/Calimero.DocsChain.MarkdownEditorIframe" config={redirectConfig} props={{ initialText: state.article.body, onChange: (newBody) => State.update({ editorInput: newBody, }), }} /> </div> <div className="w-50"> <Widget src="calimero.near/widget/Calimero.DocsChain.SocialMarkdown" config={redirectConfig} props={{ text: state.editorInput }} /> </div> </div> </> )} {/* MARKDOWN and TAGS list when user doesn't edit article */} {!state.editArticle && ( <> <Markdown text={state.editorInput || state.article.body} /> </> )} {/* === VIEW HISTORY === */} {state.viewHistory && ( <div className="mt-3 ps-5">Not implemented yet</div> )} {/* === FOOTER === */} <Widget src={`calimero.near/widget/Calimero.DocsChain.ArticleFooter`} config={redirectConfig} props={{ author: state.article.author, lastEditor: state.article.author, // expand contract to allow editors timeLastEdit: state.article.timestamp, version: state.article.version, }} /> </div> </div> </PageContainer> );