const accountId = context.accountId; if (!accountId) { return "Please sign in with NEAR wallet"; } const data = Social.get(`${accountId}/graph/widget/*`, "final"); if (!data) { return "Loading"; } const widgets = Object.entries(data); const wrappedWidgets = []; const maxIndex = 0; for (let i = 0; i < widgets.length; ++i) { const index = widgets[i][0]; maxIndex = Math.max(maxIndex, index); const src = widgets[i][1]; wrappedWidgets.push( <tr border="1"> <td>{index}:</td> <td> <a href={`#/${src}`}>{<i>{src}</i>}</a> </td> </tr> ); } State.init({ new_widget: "", next_index: maxIndex + 1 }); return ( <div> <div>{accountId}</div> <div>{state.next_index}</div> <table border="1"> <th>Index</th> <th>Link</th> {wrappedWidgets} </table> <br /> <div className="mb-2"> <h4>Add widget</h4> <input type="text" className="form-control" placeholder="mob.near/widget/Welcome" onChange={(e) => State.update({ new_widget: e.target.value })} /> </div> <CommitButton data={{ graph: { widget: { [state.next_index]: state.new_widget } } }} onCommit={(e) => State.update({ next_index: state.next_index + 1 })} > Save </CommitButton> <br /> <div className="mb-2"> <h4>Remove widget</h4> <input type="text" className="form-control" placeholder="0" onChange={(e) => State.update({ new_widget: e.target.value })} /> </div> <CommitButton data={{ graph: { widget: { [state.new_widget]: null } } }}> Save </CommitButton> </div> );