From fa5045805bf56f7c756412535ef472f16d2b7a3a Mon Sep 17 00:00:00 2001 From: Ayushya Amitabh Date: Mon, 3 Aug 2020 19:42:00 -0400 Subject: [PATCH] v1.6.0/interactive system message --- app/src/Api.js | 19 ++++++++++++- app/src/Thread.css | 36 +++++++++++++++++++++-- app/src/Thread.js | 57 +++++++++++++++++++++++++++++++++++-- app/src/index.css | 6 ++++ functions/app.js | 1 + functions/webhooks/ask.js | 5 ++++ functions/webhooks/index.js | 6 ++-- 7 files changed, 122 insertions(+), 8 deletions(-) create mode 100644 functions/webhooks/ask.js diff --git a/app/src/Api.js b/app/src/Api.js index 4721bde..893eb21 100644 --- a/app/src/Api.js +++ b/app/src/Api.js @@ -107,6 +107,23 @@ export const fetcher = async ({ endpoint, method, ...args }) => { ); }; +export const webhookFetcher = async ({ endpoint, ...args }) => { + return new Promise((resolve, reject) => + chrome.runtime.sendMessage( + { + type: 'API_CALL', + url: endpoint, + method: 'POST', + ...args, + }, + (response) => { + if (response.status > 299) reject(response); + else resolve({ json: () => response }); + } + ) + ); +}; + export const CreateRoomApi = async (data) => { return fetcher({ endpoint: 'create', @@ -180,4 +197,4 @@ export const UpdateAdminOnly = async (data) => { endpoint: `updateAdminOnly/${data.partyName}/${data.adminOnly}`, method: 'PUT', }); -} +}; diff --git a/app/src/Thread.css b/app/src/Thread.css index 12fdd62..c2f710e 100644 --- a/app/src/Thread.css +++ b/app/src/Thread.css @@ -19,7 +19,7 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia .thread-container * { margin: 0; padding: 0; - font-family: 'Roboto', sans-serif; + font-family: 'Roboto', sans-serif !important; letter-spacing: 1.15px; } .thread-container { @@ -224,10 +224,42 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia margin: 0 auto; background: none; font-size: 12px; - color: #555; + color: #9f9f9f; text-align: center; display: block; } .thread-item.system-message:hover .thread-message p { margin: 0 auto; } +/* + I N T E R A C T I V E + S Y S T E M + M E S S A G E S +*/ +.thread-interactive-text { + display: flex !important; + flex-direction: column !important; + margin: 0 auto !important; + background-color: #222222 !important; + border-radius: 50px !important; + padding: 20px 35px !important; + transition: all ease-in-out 0.3s; + transition-delay: 0.1s; +} +.thread-interactive-text:hover { + background-color: #111111 !important; +} +.thread-interactive-question { + font-size: 10px !important; + letter-spacing: 2px !important; + color: #9f9f9f !important; + line-height: initial !important; + padding: 7.5px 0px !important; + padding-top: 0 !important; +} +.thread-interactive-answer > div { + border-radius: 26px; +} +.thread-interactive-thankyou { + text-align: center !important; +} diff --git a/app/src/Thread.js b/app/src/Thread.js index 927ee80..16b1a48 100644 --- a/app/src/Thread.js +++ b/app/src/Thread.js @@ -17,15 +17,16 @@ Hulu logo is a trademark and intellectual property of Hulu, LLC. HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia Direct,LLC. ************************************************************************/ import React, { Component } from 'react'; -import { Typography, IconButton } from '@material-ui/core'; -import { Reply } from '@material-ui/icons'; +import { Typography, IconButton, Paper, TextField, InputAdornment } from '@material-ui/core'; +import { Reply, Send } from '@material-ui/icons'; import './Thread.css'; -import { LocalData } from './Api'; +import { LocalData, webhookFetcher } from './Api'; export default class Thread extends Component { constructor(props) { super(props); this.getReplyMessage = this.getReplyMessage.bind(this); + this.getMessageTextOrImage = this.getMessageTextOrImage.bind(this); } scrollToMessage(id) { const pcc = document.querySelector('.thread-wrapper'); @@ -34,6 +35,29 @@ export default class Thread extends Component { msg.classList.add('highlight'); setTimeout(() => msg.classList.remove('highlight'), 500); } + handleInteractiveMessageCall(msg) { + const thanksElement = document.createElement('div'); + thanksElement.innerText = 'THANK YOU FOR THE FEEDBACK'; + thanksElement.className = 'thread-interactive-thankyou'; + if (msg.uid === '') { + if (msg.endpoint) { + var bodyData = { + question: msg.text, + }; + if (msg.type === 'interactive/text') { + const answerElement = document.getElementById(`reply-${msg.id}`); + bodyData.answer = answerElement ? answerElement.value : 'ANSWER_ELEM_NOT_FOUND'; + answerElement.disabled = true; + answerElement.parentElement.parentElement.parentElement.firstElementChild.remove(); + answerElement.parentElement.replaceWith(thanksElement); + } + webhookFetcher({ + endpoint: msg.endpoint, + body: JSON.stringify(bodyData), + }); + } + } + } getItemClassNames(uid, userUid, msgIdx) { const lastUid = msgIdx >= 1 ? this.props.messages[msgIdx - 1].uid : ''; return `thread-item ${uid === userUid ? 'my-message' : ''} ${ @@ -44,6 +68,33 @@ export default class Thread extends Component { if (msg.type === 'giphy') { return gif; } + if (msg.type === 'interactive/text') { + return ( + + + {msg.text} + + + this.handleInteractiveMessageCall(msg)}> + + + + ), + }} + rowsMax={2} + /> + + ); + } return

{msg.text}

; } getTimeString(time) { diff --git a/app/src/index.css b/app/src/index.css index b488246..5ddbf58 100644 --- a/app/src/index.css +++ b/app/src/index.css @@ -610,6 +610,12 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb { margin: 5px 0; } +.alert-card { + border: none !important; + border-radius: 26px !important; + margin: 0px 10px !important; +} + .alert-card-content { display: flex; padding: 5px !important; diff --git a/functions/app.js b/functions/app.js index efabb82..f58127f 100644 --- a/functions/app.js +++ b/functions/app.js @@ -9,6 +9,7 @@ const webhooks = express(); webhooks.use(cors({ origin: true })); webhooks.all('/conferenceEnded', Webhooks.conferenceEnd); webhooks.all('/scheduledCleanup', Webhooks.scheduledCleanUp); +webhooks.all('/ask', Webhooks.ask); // VERSION 1 const app = express(); diff --git a/functions/webhooks/ask.js b/functions/webhooks/ask.js new file mode 100644 index 0000000..8cfcee0 --- /dev/null +++ b/functions/webhooks/ask.js @@ -0,0 +1,5 @@ +module.exports = async (req, res) => { + const { question, answer } = JSON.parse(req.body); + console.info(`[RECEIVED]\tWEBHOOKS/ASK\tQ:${question}\tA:${answer}`); + res.status(200).send({ message: 'Got answer.' }); +}; diff --git a/functions/webhooks/index.js b/functions/webhooks/index.js index b6655a4..7a9465a 100644 --- a/functions/webhooks/index.js +++ b/functions/webhooks/index.js @@ -1,7 +1,9 @@ const conferenceEnd = require('./conferenceEnd'); const scheduledCleanUp = require('./scheduledCleanUp'); +const ask = require('./ask'); module.exports = { - conferenceEnd, - scheduledCleanUp + conferenceEnd, + scheduledCleanUp, + ask, };