feat/refactor: checkbox disabled quando cronômetro está rodando e aju…

…stes finos com hofs

public/manifest.json

@@ -1,25 +1,65 @@
 {
   "short_name": "Vai dar tempo",
   "name": "Um timer rápido para intervalo de aula",
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff",
+  "scope": "./",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
     },
     {
-      "src": "logo192.png",
+      "src": "icon-144x144.png",
+      "sizes": "144x144",
       "type": "image/png",
-      "sizes": "192x192"
+      "purpose": "maskable any"
     },
     {
-      "src": "logo512.png",
+      "src": "icon-152x152.png",
+      "sizes": "152x152",
       "type": "image/png",
-      "sizes": "512x512"
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
     }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
+  ]
+}

src/App.css

@@ -156,6 +156,7 @@ header p {
 
 .cardapio {
 	min-width: 45vw;
+	max-width: 92vw;
   overflow: none;
 	padding-bottom: 10vh;
 }

src/App.js

@@ -93,7 +93,7 @@ export default class App extends Component {
               </div>
             </div>
         ) }
-          <Acoes check={ this.check }/>
+          <Acoes check={ this.check } started={ this.state.click } />
         </Container>
         </div>
         <div className={ this.state.currentTheme }>

src/components/Acao.jsx

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+export default class Acao extends Component {
+  render() {
+    const { content, value, name } = this.props.frase;
+    return (
+      <label htmlFor={ this.props.value }>
+        <div className='item'>
+          <div className='item-product'>
+            <input
+              id={ this.props.idx }
+              value={ value }
+              type='checkbox'
+              disabled={ this.props.started }
+              onChange={(e) => this.props.check(e)}
+            />
+            { content }
+          </div>
+          <div className='item-price'>{ name }</div>
+        </div>
+      </label>
+    );
+  }
+}

src/components/Acoes.jsx

@@ -1,144 +1,42 @@
 import React, { Component } from 'react';
+import Acao from './Acao';
 // Importação graças a ajuda do Washington
 const actions = require('../conteudo/acoes');
 
 export default class Acoes extends Component {
   state = {
     frases: '',
-  }
+  };
 
   componentDidMount() {
     const sorteiaAcao = () => {
-      const chaves = Object.keys(actions);
+      const times = Object.keys(actions);
       const frases = [];
-      for (let i = 0; i < chaves.length; i += 1) {
-        const chave = chaves[i];
-        const random = Math.floor(Math.random() * actions[chave].length);
-        const temp = actions[chave][random];
-        frases.push(temp);
+      for (let i = 0; i < times.length; i += 1) {
+        const content = actions[times[i]].actions[Math.floor(Math.random() * actions[times[i]].actions.length)]
+        frases.push({ content: content, value: actions[times[i]].value, name: actions[times[i]].name });
       }
       this.setState({
         frases,
-      })
-    }
+      });
+    };
     sorteiaAcao();
   }
 
   render() {
     const { check } = this.props;
     const { frases } = this.state;
     return (
-      <div className="cardapio">
-        <form className="form">
-            <div className="itens">
-              <label htmlFor="um">
-                <div className="item">
-                  <div className="item-product">
-                    <input
-                      id="um"
-                      value="1"
-                      type="checkbox"
-                      onChange={ (e) => check(e) }
-                    />
-                    { frases[0] }
-                  </div>
-                  <div className="item-price">1 min</div>
-                </div>
-              </label>
-
-              <label htmlFor="umemeio">
-                <div className="item">
-                  <div className="item-product">
-                    <input
-                      id="umemeio"
-                      value="1.5"
-                      type="checkbox"
-                      onChange={ (e) => check(e) }
-                    />
-                    { frases[1] }
-                  </div>
-                  <div className="item-price">1 min 30 seg</div>
-                </div>
-              </label>
-
-              <label htmlFor="dois">
-                <div className="item">
-                  <div className="item-product">
-                    <input
-                      id="dois"
-                      value="2"
-                      type="checkbox"
-                      onChange={ (e) => check(e) }
-                    />
-                    { frases[2] }
-                  </div>
-                  <div className="item-price">2 min</div>
-                </div>
-              </label>
-
-              <label htmlFor="doismeio">
-                <div className="item">
-                  <div className="item-product">
-                    <input
-                      id="doismeio"
-                      value="2.5"
-                      type="checkbox"
-                      onChange={ (e) => check(e) }
-                    />
-                    { frases[3] }
-                  </div>
-                  <div className="item-price">2 min 30 seg</div>
-                </div>
-              </label>
-
-              <label htmlFor="tres">
-                <div className="item">
-                  <div className="item-product">
-                    <input
-                      id="tres"
-                      value="3"
-                      type="checkbox"
-                      onChange={ (e) => check(e) }
-                    />
-                    { frases[4] }
-                  </div>
-                  <div className="item-price">3 min</div>
-                </div>
-              </label>
-
-              <label htmlFor="quatro">
-                <div className="item">
-                  <div className="item-product">
-                    <input
-                      id="quatro"
-                      value="4"
-                      type="checkbox"
-                      onChange={ (e) => check(e) }
-                    />
-                    { frases[5] }
-                  </div>
-                  <div className="item-price">4 min</div>
-                </div>
-              </label>
-
-              <label htmlFor="cinco">
-                <div className="item">
-                  <div className="item-product">
-                    <input
-                      id="cinco"
-                      value="5"
-                      type="checkbox"
-                      onChange={ (e) => check(e) }
-                    />
-                    { frases[6] }
-                  </div>
-                  <div className="item-price">5 min</div>
-                </div>
-              </label>
-
-            </div>
-          </form>            
-        </div>
-    )
+      <div className='cardapio'>
+        <form className='form'>
+          <div className='itens'>
+            {frases &&
+              frases?.map((frase, idx) => (
+                <Acao frase={ frase } key={ idx } started={ this.props.started } check={ check } />
+              ))}
+          </div>
+        </form>
+      </div>
+    );
   }
 }

src/components/Quotes.jsx

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
-import quotes from '../conteudo/quotes'; 
+import quotes from '../conteudo/quotes';
 
 export default class Quotes extends Component {
   state = {
     totalDeQuotes: [],
     showQuotes: false,
     random: 0,
-  }
+  };
 
   yes = () => {
     const totalDeQuotes = [];
@@ -18,35 +18,31 @@ export default class Quotes extends Component {
     this.setState({
       quotes: totalDeQuotes,
       showQuotes: true,
-    })
+    });
     setInterval(() => {
-      this.setState(prevState => ({
+      this.setState((prevState) => ({
         random: prevState.random + 1,
-      }))
-    }, 60000)
-  }
+      }));
+    }, 60000);
+  };
 
   startIn = (sec) => {
-    setTimeout(() => this.yes(), sec * 1000)
-  }
+    setTimeout(() => this.yes(), sec * 1000);
+  };
 
   render() {
     const { showQuotes, quotes, random } = this.state;
     return (
-      <div className="quotainer">
-        { showQuotes ? (<blockquote className='tech fadeinquote'>{ quotes[random] }</blockquote>) : (
-          <>
-            <div>
-              Enquanto aguarda, vou mostrar frases inspiracionais a não ser que você cancele ok?
-            </div>
-            <div>
-              <button onClick={ () => this.yes() }>Sim</button>
-              <button onClick={ () => this.yes() }>Não vou cancelar</button>
-              { this.startIn(5) }
-            </div>
-          </>
-        ) }
+      <div className='quotainer'>
+        {showQuotes ? (
+          <blockquote className='tech fadeinquote'>{quotes[random]}</blockquote>
+        ) : (
+          <h1>
+            Cronômetro rodando!
+            { this.startIn(5) }
+          </h1>
+        )}
       </div>
-    )
+    );
   }
 }