const contract = "dev-1692884041174-88609968624907" const authorForWidget = "igi.testnet"; // const article = Near.view(contract, "get_article", {"article_id": props.articleId}); // console.log("ARTICLE"); // console.log(article); State.init({ articleId: props.articleId, editArticle: false, }); State.update({ ...state, article: Near.view(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.call(contract, "post_article", params); }; return ( <> <Widget src={`${authorForWidget}/widget/Calimero.DocsChain.MainNavigation`} props={{ currentNavPill: "articles" }} /> <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="igi.testnet/widget/Calimero.DocsChain.MarkdownEditorIframe" props={{ initialText: state.article.body, onChange: (newBody) => State.update({ editorInput: newBody}), }} /> </div> <div className="w-50"> <Widget src="igi.testnet/widget/Calimero.DocsChain.SocialMarkdown" 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={`${authorForWidget}/widget/Calimero.DocsChain.ArticleFooter`} props={{ author: state.article.author, lastEditor: state.article.author, // expand contract to allow editors timeLastEdit: state.article.timestamp, version: state.article.version, }} /> </div> </> );