diff --git a/README.md b/README.md new file mode 100644 index 0000000..c651bcc --- /dev/null +++ b/README.md @@ -0,0 +1,57 @@ +# WhatsLab1 +Atividade em dupla desenvolvida pela [Labenu](https://www.labenu.com.br/). +O objetivo é aplicar e desafiar a praticar os conceitos ministrados nas aulas de React. + +### Instrutores: +[Bruno](https://github.com/BrunoMovio), [Amandinha](https://github.com/amandarangel/), [Darvas](https://github.com/pdarvas/) e [Camis](https://github.com/monteirocamis/). + +## Conceitos aplicados: +- Componentes de classe e Estados +- Renderização de Listas +- Componentes Funcionais + #### Estilização: +- Styled-Components + +## Desenvolvedores +[Gabriela Fogaça](https://github.com/Fogabi) e +[Gabriel Azevedo](https://github.com/gabazevdo) + +## Link Surge + +https://whatslab1.surge.sh/ + + +--- +# Escopo do projeto +Criar um aplicativo de troca de mensagens para bater de frente com os gigantes que existem atualmente, tais como WhatsApp, Telegram, Messenger e muitos outros. + +Um projeto tão grande como este, normalmente, começa com a elaboração de um _MVP_. _MVP_ significa "_Minimum Valiable Product_", em tradução livre, "mínimo produto viável". Isto significa que começaremos implementando as _features_ (funcionalidades) que indiquem o objetivo principal do produto do nosso cliente. Desta forma, não há a necessidade de se desenvolver um sistema que envie e receba mensagens de fora - criaremos algo que simplesmente mostra novas mensagens. + +## O escopo deste _MVP_ é: + +**1. **Lista de mensagem:**** + - Cada mensagem deve possuir um remetente (ou seja, um usuário que enviou) e o conteúdo em si. + - No layout, eles devem ficar assim: + ***nome do remente:** conteúdo da mensagem* + +**2. **Envio de mensagem:**** +- Abaixo da lista citada, deve existir um local onde o usuário escolhe o nome do remetente (input) ; o conteúdo da mensagem (input) e um botão de enviar; +- No layout, eles devem ficar um ao lado do outro. Sendo o campo do remetente com largura muito menor do que o campo do conteúdo +- Ao enviar a mensagem, os campos devem ser resetados para ficar em branco novamente. +#### Exemplos: +[MVP](http://whats4-mvp.surge.sh/) +[Estilização dos balões.](https://www.notion.so/Estilizando-um-bal-o-de-conversa-responsivo-e-bonitinho-9245f28811644abe8d0147d9f686e7f3) + + +## Desafios para o projeto + + - [X] Faça com que tanto o botão de enviar, como o botão "enter" envie + as mensagens. + - [X] Agora, vamos melhorar o design do nosso projeto. + (Obs.: é uma funcionalidade bem parecida com os grupos do Whatsapp). Tentem + seguir o [layout do exemplo](http://whats4-desafio.surge.sh/) como guia. + - [ ] Implemente a funcionalidade de deletar mensagem. Sempre que o + usuário clicar duas vezes em cima de uma mensagem ela deve ser + apagada. + + diff --git a/build/asset-manifest.json b/build/asset-manifest.json new file mode 100644 index 0000000..9457899 --- /dev/null +++ b/build/asset-manifest.json @@ -0,0 +1,18 @@ +{ + "files": { + "main.js": "/static/js/main.3ee415c7.chunk.js", + "main.js.map": "/static/js/main.3ee415c7.chunk.js.map", + "runtime-main.js": "/static/js/runtime-main.e056dd94.js", + "runtime-main.js.map": "/static/js/runtime-main.e056dd94.js.map", + "static/js/2.bc5de5f7.chunk.js": "/static/js/2.bc5de5f7.chunk.js", + "static/js/2.bc5de5f7.chunk.js.map": "/static/js/2.bc5de5f7.chunk.js.map", + "index.html": "/index.html", + "static/js/2.bc5de5f7.chunk.js.LICENSE.txt": "/static/js/2.bc5de5f7.chunk.js.LICENSE.txt", + "static/media/BackgroundWhats.c6f33f60.png": "/static/media/BackgroundWhats.c6f33f60.png" + }, + "entrypoints": [ + "static/js/runtime-main.e056dd94.js", + "static/js/2.bc5de5f7.chunk.js", + "static/js/main.3ee415c7.chunk.js" + ] +} \ No newline at end of file diff --git a/build/index.html b/build/index.html new file mode 100644 index 0000000..aa0133d --- /dev/null +++ b/build/index.html @@ -0,0 +1 @@ +Whatslab1
\ No newline at end of file diff --git a/build/static/js/2.bc5de5f7.chunk.js b/build/static/js/2.bc5de5f7.chunk.js new file mode 100644 index 0000000..0852d76 --- /dev/null +++ b/build/static/js/2.bc5de5f7.chunk.js @@ -0,0 +1,3 @@ +/*! For license information please see 2.bc5de5f7.chunk.js.LICENSE.txt */ +(this.webpackJsonpwhatslab=this.webpackJsonpwhatslab||[]).push([[2],[function(e,t,n){"use strict";e.exports=n(17)},function(e,t,n){"use strict";e.exports=n(21)},function(e,t,n){"use strict";function r(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}n.d(t,"a",(function(){return r}))},function(e,t,n){"use strict";(function(e){n.d(t,"a",(function(){return Ae}));var r=n(4),a=n(0),o=n.n(a),l=n(11),i=n.n(l),u=n(12),s=n(13),c=n(7),f=n(6),d=n.n(f);function p(){return(p=Object.assign||function(e){for(var t=1;t1?t-1:0),r=1;r0?" Args: "+n.join(", "):""))}var x=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e}var t=e.prototype;return t.indexOfGroup=function(e){for(var t=0,n=0;n=this.groupSizes.length){for(var n=this.groupSizes,r=n.length,a=r;e>=a;)(a<<=1)<0&&_(16,""+e);this.groupSizes=new Uint32Array(a),this.groupSizes.set(n),this.length=a;for(var o=r;o=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],r=this.indexOfGroup(e),a=r+n,o=r;o=0;n--){var r=t[n];if(r&&1===r.nodeType&&r.hasAttribute(k))return r}}(n),o=void 0!==a?a.nextSibling:null;r.setAttribute(k,"active"),r.setAttribute("data-styled-version","5.3.0");var l=M();return l&&r.setAttribute("nonce",l),n.insertBefore(r,o),r},j=function(){function e(e){var t=this.element=F(e);t.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,r=t.length;n=0){var n=document.createTextNode(t),r=this.nodes[e];return this.element.insertBefore(n,r||null),this.length++,!0}return!1},t.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--},t.getRule=function(e){return e0&&(s+=e+",")})),r+=""+i+u+'{content:"'+s+'"}/*!sc*/\n'}}}return r}(this)},e}(),V=/(a)(d)/gi,K=function(e){return String.fromCharCode(e+(e>25?39:97))};function Q(e){var t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=K(t%52)+n;return(K(t%52)+n).replace(V,"$1-$2")}var q=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},Y=function(e){return q(5381,e)};function G(e){for(var t=0;t>>0);if(!t.hasNameForId(r,l)){var i=n(o,"."+l,void 0,r);t.insertRules(r,l,i)}a.push(l),this.staticRulesId=l}else{for(var u=this.rules.length,s=q(this.baseHash,n.hash),c="",f=0;f>>0);if(!t.hasNameForId(r,m)){var g=n(c,"."+m,void 0,r);t.insertRules(r,m,g)}a.push(m)}}return a.join(" ")},e}(),J=/^\s*\/\/.*$/gm,ee=[":","[",".","#"];function te(e){var t,n,r,a,o=void 0===e?v:e,l=o.options,i=void 0===l?v:l,s=o.plugins,c=void 0===s?g:s,f=new u.a(i),d=[],p=function(e){function t(t){if(t)try{e(t+"}")}catch(e){}}return function(n,r,a,o,l,i,u,s,c,f){switch(n){case 1:if(0===c&&64===r.charCodeAt(0))return e(r+";"),"";break;case 2:if(0===s)return r+"/*|*/";break;case 3:switch(s){case 102:case 112:return e(a[0]+r),"";default:return r+(0===f?"/*|*/":"")}case-2:r.split("/*|*/}").forEach(t)}}}((function(e){d.push(e)})),h=function(e,r,o){return 0===r&&-1!==ee.indexOf(o[n.length])||o.match(a)?e:"."+t};function m(e,o,l,i){void 0===i&&(i="&");var u=e.replace(J,""),s=o&&l?l+" "+o+" { "+u+" }":u;return t=i,n=o,r=new RegExp("\\"+n+"\\b","g"),a=new RegExp("(\\"+n+"\\b){2,}"),f(l||!o?"":o,s)}return f.use([].concat(c,[function(e,t,a){2===e&&a.length&&a[0].lastIndexOf(n)>0&&(a[0]=a[0].replace(r,h))},p,function(e){if(-2===e){var t=d;return d=[],t}}])),m.hash=c.length?c.reduce((function(e,t){return t.name||_(15),q(e,t.name)}),5381).toString():"",m}var ne=o.a.createContext(),re=(ne.Consumer,o.a.createContext()),ae=(re.Consumer,new B),oe=te();function le(){return Object(a.useContext)(ne)||ae}function ie(){return Object(a.useContext)(re)||oe}function ue(e){var t=Object(a.useState)(e.stylisPlugins),n=t[0],r=t[1],l=le(),u=Object(a.useMemo)((function(){var t=l;return e.sheet?t=e.sheet:e.target&&(t=t.reconstructWithOptions({target:e.target},!1)),e.disableCSSOMInjection&&(t=t.reconstructWithOptions({useCSSOMInjection:!1})),t}),[e.disableCSSOMInjection,e.sheet,e.target]),s=Object(a.useMemo)((function(){return te({options:{prefix:!e.disableVendorPrefixes},plugins:n})}),[e.disableVendorPrefixes,n]);return Object(a.useEffect)((function(){i()(n,e.stylisPlugins)||r(e.stylisPlugins)}),[e.stylisPlugins]),o.a.createElement(ne.Provider,{value:u},o.a.createElement(re.Provider,{value:s},e.children))}var se=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=oe);var r=n.name+t.hash;e.hasNameForId(n.id,r)||e.insertRules(n.id,r,t(n.rules,r,"@keyframes"))},this.toString=function(){return _(12,String(n.name))},this.name=e,this.id="sc-keyframes-"+e,this.rules=t}return e.prototype.getName=function(e){return void 0===e&&(e=oe),this.name+e.hash},e}(),ce=/([A-Z])/,fe=/([A-Z])/g,de=/^ms-/,pe=function(e){return"-"+e.toLowerCase()};function he(e){return ce.test(e)?e.replace(fe,pe).replace(de,"-ms-"):e}var me=function(e){return null==e||!1===e||""===e};function ge(e,t,n,r){if(Array.isArray(e)){for(var a,o=[],l=0,i=e.length;l1?t-1:0),r=1;r?@[\\\]^`{|}~-]+/g,we=/(^-|-$)/g;function ke(e){return e.replace(be,"-").replace(we,"")}var Se=function(e){return Q(Y(e)>>>0)};function Ee(e){return"string"==typeof e&&!0}var Ce=function(e){return"function"==typeof e||"object"==typeof e&&null!==e&&!Array.isArray(e)},_e=function(e){return"__proto__"!==e&&"constructor"!==e&&"prototype"!==e};function xe(e,t,n){var r=e[n];Ce(t)&&Ce(r)?Pe(r,t):e[n]=t}function Pe(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r=0||(a[n]=e[n]);return a}(t,["componentId"]),o=r&&r+"-"+(Ee(e)?e:ke(b(e)));return Ne(e,p({},a,{attrs:S,componentId:o}),n)},Object.defineProperty(C,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(t){this._foldedDefaultProps=r?Pe({},e.defaultProps,t):t}}),C.toString=function(){return"."+C.styledComponentId},l&&d()(C,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,styledComponentId:!0,target:!0,withComponent:!0}),C}var Re=function(e){return function e(t,n,a){if(void 0===a&&(a=v),!Object(r.isValidElementType)(n))return _(1,String(n));var o=function(){return t(n,a,ve.apply(void 0,arguments))};return o.withConfig=function(r){return e(t,n,p({},a,{},r))},o.attrs=function(r){return e(t,n,p({},a,{attrs:Array.prototype.concat(a.attrs,r).filter(Boolean)}))},o}(Ne,e)};["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","marquee","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","textPath","tspan"].forEach((function(e){Re[e]=Re(e)}));var Le=function(){function e(e,t){this.rules=e,this.componentId=t,this.isStatic=G(e),B.registerId(this.componentId+1)}var t=e.prototype;return t.createStyles=function(e,t,n,r){var a=r(ge(this.rules,t,n,r).join(""),""),o=this.componentId+e;n.insertRules(o,o,a)},t.removeStyles=function(e,t){t.clearRules(this.componentId+e)},t.renderStyles=function(e,t,n,r){e>2&&B.registerId(this.componentId+e),this.removeStyles(e,n),this.createStyles(e,t,n,r)},e}();function Ae(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r"+t+""},this.getStyleTags=function(){return e.sealed?_(2):e._emitSheetCSS()},this.getStyleElement=function(){var t;if(e.sealed)return _(2);var n=((t={})[k]="",t["data-styled-version"]="5.3.0",t.dangerouslySetInnerHTML={__html:e.instance.toString()},t),r=M();return r&&(n.nonce=r),[o.a.createElement("style",p({},n,{key:"sc-0-0"}))]},this.seal=function(){e.sealed=!0},this.instance=new B({isServer:!0}),this.sealed=!1}var t=e.prototype;t.collectStyles=function(e){return this.sealed?_(2):o.a.createElement(ue,{sheet:this.instance},e)},t.interleaveWithNodeStream=function(e){return _(3)}}();t.b=Re}).call(this,n(22))},function(e,t,n){"use strict";e.exports=n(23)},function(e,t,n){"use strict";var r=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;function l(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(a){return!1}}()?Object.assign:function(e,t){for(var n,i,u=l(e),s=1;sp)&&(j=(W=W.replace(" ",":")).length),0r&&(r=(t=t.trim()).charCodeAt(0)),r){case 38:return t.replace(g,"$1"+e.trim());case 58:return e.trim()+t.replace(g,"$1"+e.trim());default:if(0<1*n&&0u.charCodeAt(8))break;case 115:l=l.replace(u,"-webkit-"+u)+";"+l;break;case 207:case 102:l=l.replace(u,"-webkit-"+(102r.charCodeAt(0)&&(r=r.trim()),r=[r],0e.length)&&(t=e.length);for(var n=0,r=new Array(t);n