🥥🦔 -> Add html parsing elements to the nft collection [SSDROP-7] #7

Signal-K · Jul 28, 2022 · 39bdf28 · 39bdf28
1 parent 6135bb4
commit 39bdf28
Show file tree

Hide file tree

Showing 9 changed files with 811 additions and 1 deletion.
diff --git a/cadence b/cadence
diff --git a/cadence/README.md b/cadence/README.md
@@ -0,0 +1,3 @@
+Set of components that are not currently added to the react app, but will be shortly
+
+Migrations folder in root is currently directed towards the cadence/client directory
diff --git a/cadence/chat/chat.html b/cadence/chat/chat.html
@@ -0,0 +1,81 @@
+<html>
+    <head>
+        <title>Chat page</title>
+        <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
+        <script src="https://npmcdn.com/moralis@1.9.1/dist/moralis.js"></script>
+    </head>
+    <body>
+        <p>CHAT</p>
+
+        <div id="chatHistory">
+            <ul id="historyList"></ul>
+        </div>
+
+        <input type="text" id="chatInput" /?
+        <input type="button" value="Send message" id="sendButton" />
+
+        <script>
+            // Connect to the Moralis server
+            Moralis.initialize("");
+            Moralis.serverURL = "";
+
+            /*  Some notes
+                * Messages have to be sent through Moralis cloud functions
+                * Should probably create a single task on Jira for this -> including creating a design in Figma that can be inserted into one of the tabs
+            */
+
+            const queryString = window.location.search;
+            const params = new URLSearchParams(queryString);
+            const chatId = urlParams.get('id')
+            console.log(chatId);
+
+            async function init() {
+                let query = new Moralis.Query('Message'); // live query on the message class from Moralis backend
+                let subscription = await query.subscribe();
+                const historyList = document.getElementById("historyList");
+
+                subscription.on('create', (object) => {
+                    if (object.get("group") == chatId) {
+                        var listItem = document.createElement('li');
+                        listItem.innerHTML = object.get("sender") + " says: <br>" + object.get("text") + "<br>"
+                        historyList.appendChild(listItem);
+                    }
+                });
+            }
+
+            // Retrieve the group chat's list of messages
+            async function getHistory() {
+                const Message = Moralis.Object.extend("Message");
+                const query = new Moralis.Query(Message);
+                query.equalTo("group", chatId);
+                const results = await query.find();
+                const historyList = document.getElementById("historyList");
+
+                for (let i = 0; i < results.length; i++) { // print the message history to the frontend
+                    const object = results[i];
+                    var listItem = document.createElement('li');
+                    listItem.innerHTML = object.get("sender") + " says:<br>" + object.get('text')+"<br>";
+                    historyList.appendChild(listItem);
+                }
+            }
+            init();
+            getHistory();
+
+            async function sendMessage() {
+                let user = Moralis.User.current();
+                let message = document.getElementById("chatInput").value;
+                if (message && message.length > 0) {
+                    const Message = Moralis.Object.extend("Message");
+                    const m = new Message();
+                    m.set("sender", user.get("ethAddress")); // m -> entry in the db
+                    m.set("text", message); // message -> text of the message
+                    m.set("group", chatId);
+                    m.save();
+                    console.log("Sending message " + message + " from " + user.get("ethAddress") + " in group " + chatId);
+                }
+            }
+
+            document.getElementById("sendButton").onClick = sendMessage;
+        </script>
+    </body>
+</html>
diff --git a/cadence/chat/index.html b/cadence/chat/index.html
@@ -0,0 +1,81 @@
+<html>
+    <head>
+        <title>Chat Boilerplate</title>
+        <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
+        <script src="https://npmcdn.com/moralis@1.9.1/dist/moralis.js"></script>
+    </head>
+    <body>
+        <button id="btn-login">Web3 login</button>
+        <button id="btn-logout">Logout</button>
+        <br>
+        <hr>
+        <p>Create new groupchat: </p>
+        <input type="text" placeholder="Group name" id="group-name-text"/>
+        <input type="button" value="Create" id="btn-new-group-chat"/>
+        <br>
+        <p>Join groupchat</p>
+        <div id="chatRooms">
+            <ul id="roomList"></ul>
+        </div>
+        <hr>
+
+        <script>
+            // Connect to the Moralis server
+            Moralis.initialize("");
+            Moralis.serverURL = "";
+
+            async function login() {
+                let user = Moralis.User.current();
+                if (!user) {
+                    user = await Moralis.Web3.authenticate();
+                }
+                console.log("Logged in user: ", user);
+            }
+
+            async function logOut() {
+                await Moralis.User.logOut();
+                console.log("logged out user");
+            }
+
+            // Button -> Create (value)
+            async function newGroupChat() {
+                let chatTitle = document.getElementById("group-name-text".value);
+                const Chats = Moralis.Object.extend("Chats");
+                const chat = new Chats(); 
+                chat.set("title", chatTile); // Create a new chat in the Moralis db
+                chat.save();
+
+                console.log("Created chat with title: " + chatTitle);
+            }
+
+            // Retrieving group chats already active/created from Moralis
+            async function getGroupChats() {
+                const Chats = Moralis.Object.extend("Chats");
+                const query = new Moralis.Query(Chats);
+                const results = await query.find(); // Array of all the chats from the db
+
+                const roomList = document.getElementById("roomList");
+
+                // Loop through the array of group chats and return the title
+                for (let i = 0; i < results.length; i++) {
+                    const object = results[i];
+                    console.log(object.get('title'));
+
+                    // Add each existing chat to the ul tag ^^
+                    var listItem = document.createElement('li'); // create li tag with the chat room name
+                    listItem.innerHTML = "<a href='chat.html?id="+object.id+"'>"+object.get('title')+"</a>";
+                    roomList.appendChild(listItem);
+                }
+            }
+
+            getGroupChats();
+
+            // To-Do: Discord integration, RSS feed (signal-k/marketplace#7), API, integrate into moralis-dao UI, integrate into Unity
+
+            // Function mapping -> divs
+            document.getElementById("btn-login").onclick = login;
+            document.getElementById('btn-logout').onclick = logOut;
+            document.getElementById('btn-new-group-chat').onclick = newGroupChat;
+        </script>
+    </body>
+</html>
diff --git a/cadence/client/README.md b/cadence/client/README.md
@@ -0,0 +1,4 @@
+Planet NFT frontend
+
+Using hardhat/truffle for compiling smart contracts.
+See compiled json in `./contracts`