const accountId = context.accountId; State.init({ selectedKeys: {}, nonce: 0, }); const value = Social.getr(accountId, undefined, { nonce: state.nonce, }); const extractKeys = (data, prefix) => Object.entries(data) .map((kv) => typeof kv[1] === "string" ? { key: `${prefix}${kv[0]}`, value: kv[1] } : extractKeys(kv[1], `${prefix}${kv[0]}/`) ) .flat(); const kvs = extractKeys(value || {}, ""); const kvCmp = (a, b) => { const aKey = a.key; const bKey = b.key; return aKey < bKey ? -1 : aKey > bKey; }; kvs.sort(kvCmp); const hasKey = (key) => { let t = state.selectedKeys; key.split("/").forEach((k) => { t = t[k]; }); return t === null; }; const onSelect = (key) => { const val = hasKey(key) ? undefined : null; let t = state.selectedKeys; const path = key.split("/"); path.slice(0, -1).forEach((k) => { t[k] = t[k] || {}; t = t[k]; }); t[path[path.length - 1]] = val; State.update(); }; return ( <div> <table className="table table-striped"> <thead> <tr> <th>X</th> <th>Key</th> <th>Value</th> </tr> </thead> <tbody> {kvs.map((kv) => { return ( <tr> <td> <input className="form-check-input" type="checkbox" checked={hasKey(kv.key)} onChange={() => onSelect(kv.key)} /> </td> <td className="text-truncate font-monospace">{kv.key}</td> <td className="text-truncate font-monospace">{kv.value}</td> </tr> ); })} </tbody> </table> <div> <CommitButton data={state.selectedKeys} disabled={Object.keys(state.selectedKeys).length === 0} onCommit={() => State.update({ selectedKeys: {}, nonce: state.nonce + 1 }) } > Delete selected keys </CommitButton> </div> </div> );