if (context.loading) return 'Loading ...'; // indexedKnowledge is basically a list of titles, uuids and blockheights const indexedKnowledge = Social.index('knowledge', 'darija', { order: 'desc' }) || []; // We store the lessons as a JSON-encoded array, since anyway we might want to change them const lessonsDB = Social.get('gagdiez.near/darija/lessons') || []; const uuids = []; const filteredKnowledge = []; for (const indexed of indexedKnowledge) { let { blockHeight, value: { title, uuid } } = indexed; console.log(uuid, blockHeight, title); uuid = uuid ? uuid : blockHeight; if (uuids.includes(uuid)) continue uuids.push(uuid) filteredKnowledge.push({ uuid, title }) } // We hardcode this, since anyway they need to be coded const evaluators = [ { name: 'Select', link: 'gagdiez.near/widget/Lessons.Select' }, { name: 'Translate', link: 'gagdiez.near/widget/Lessons.Translate' } ] // Link to Creator widget const knowledgeLink = (blockHeight) => `gagdiez.near/widget/Darija.Knowledge.Create?uuid=${blockHeight}` const [lessons, setLessons] = useState(lessonsDB) const update = () => { // transform lesson title into uuid and evaluator name into link const newLessons = lessons.map(lesson => { const knowledge = filteredKnowledge.find(item => item.title === lesson.knowledge).uuid const evaluator = evaluators.find(item => item.name === lesson.evaluator).link return { ...lesson, knowledge, evaluator } }) Social.set({ 'darija/lessons': JSON.stringify(newLessons), }) } return <> <div className="container"> <div className=""> <h5>Knowledge</h5> <ul className="list-group mt-3"> {filteredKnowledge.map((item, index) => ( <li class="list-group-item"> <a href={knowledgeLink(item.uuid)}> {item.title}</a> </li> ))} <li class="list-group-item"> <a href={knowledgeLink(null)}>(+) Nuevo (+)</a> </li> </ul> </div> <hr /> <div className=""> <h5>Lessons</h5> <Widget src="gagdiez.near/widget/Darija.Components.Table" props={{ elements: lessons, keys: ["knowledge", "evaluator"], editors: { knowledge: { type: "select", options: filteredKnowledge.map(item => item.title) }, evaluator: { type: "select", options: evaluators.map(item => item.name) }, }, onUpdate: setLessons, }} /> <button class="btn btn-success" onClick={update}>Update</button> </div> </div> </>