const contract = "dev-1691010025881-40821320474792" State.init({ members: [], channels: [], currentChannel: null, currentChat: null, nextMessage: '', newChannelName: null, initialized: false, }); if (context.loading) { console.log('loading'); return "Loading..." } if (!context.accountId) { return "You must log in to use Curb!" } State.update({ members: Near.view(contract, "get_members", {}, undefined, true) }) State.update({ channels: Near.view(contract, "get_groups", {}, undefined, true) }) if (state.currentChat === null) { State.update({ currentChat: Storage.privateGet('currentChat') }) } if (state.currentChannel === null) { State.update({ currentChannel: Storage.privateGet('currentChannel') }) } const selectChannel = (channel) => { console.log('Selecting channel', channel) Storage.privateSet('currentChat', null) Storage.privateSet('currentChannel', channel) State.update({ currentChannel: channel, currentChat: null }); } const selectChat = (chat) => { console.log('Selecting chat', chat) Storage.privateSet('currentChat', chat) Storage.privateSet('currentChannel', null) State.update({ currentChannel: null, currentChat: chat }); } const currentTalk = () => { if (state.currentChat) { return `Chatting with: ${state.currentChat}` } else if (state.currentChannel) { return `Group: ${state.currentChannel.name}` } else { return '' } } const messages = () => { let messages = [] if (state.currentChat) { messages = Near.view(contract, "get_messages", { accounts: [state.currentChat, context.accountId] }, undefined, true) || [] } else if (state.currentChannel) { messages = Near.view(contract, "get_messages", { group: state.currentChannel }, undefined, true) || [] } else { return <div></div> } return ( <ul> {(messages || []).map((m) => { const date = new Date(m.timestamp) const dateFormat = date.getHours() + ":" + date.getMinutes() + ", "+ date.toDateString(); return <li>From: {m.sender} at {dateFormat}<br />  {m.text}</li> } )} </ul> ) } const onMessageChange = ({ target }) => { State.update({ nextMessage: target.value }); }; const sendMessage = () => { let params = {} if (state.currentChat) { params = { account: state.currentChat } } else if (state.currentChannel) { params = { group: state.currentChannel } } params.message = state.nextMessage Near.call(contract, "send_message", params); State.update({ nextMessage: '' }) }; const onChannelNameChange = ({ target }) => { State.update({ newChannelName: target.value }); }; const createNewChannel = () => { let params = {} if (state.newChannelName !== null) { params = { group: { name: state.newChannelName } } Near.call(contract, "create_group", params); State.update({ newChannelName: null }) } else { State.update({ newChannelName: '' }) } }; const join = () => { return Near.call(contract, "join"); }; const messageForm = ( <> <div class="border border-black p-3"> <label>Send Message</label> <input placeholder="Type here..." onChange={onMessageChange} /> <button class="btn btn-primary mt-2" onClick={sendMessage}> Send </button> </div> </> ); if (state.members !== null && !state.members.includes(context.accountId)) { return (<div><button onClick={join}>Join</button></div>) } return ( <div> <div>Groups</div> {(state.channels || []).length > 0 ? <ul> {(state.channels || []).map((m) => <li><button onClick={() => selectChannel(m)}>{m.name}</button></li>)} </ul> : <div>N/A</div>} {state.newChannelName !== null ? <input placeholder="Channel name..." onChange={onChannelNameChange} /> : ''} <button onClick={createNewChannel}>{state.newChannelName !== null ? "Create" : "New Group"}</button> <div>Members</div> {(state.members || []).length > 0 ? <ul> {(state.members || []).map((m) => <li><li><button onClick={() => selectChat(m)}>{m}</button></li></li>)} </ul> : <div>N/A</div>} <hr /> <div>{currentTalk()}</div> {messages()} {currentTalk() ? messageForm : ''} </div> )