fixed request and responsiveness

src/Components/TabPanels/PanelComponents/ButtonsArea.js

@@ -18,76 +18,71 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 
 import React from 'react'
 import styled from 'styled-components'
-import {Carregados} from '../StyledComponents.js'
+import { Carregados } from '../StyledComponents.js'
 import Button from '@material-ui/core/Button';
 
-export function ButtonsAreaRecurso (props) {
+export function ButtonsAreaRecurso(props) {
     return (
         <Carregados>
-            <p style={{margin:"0 0 10px", fontSize:"14px"}}>
+            <p style={{ margin: "0 0 10px", fontSize: "14px" }}>
                 Carregados {props.sliceLength} de {props.length}
             </p>
 
             {
-                props.length > 4 &&
-                <React.Fragment>
-                    <ButtonMostrarMaisRecurso onClick={() => {props.showMore()}}>
-                        <span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS</span>
-                    </ButtonMostrarMaisRecurso>
-
-                    <ButtonMostrarTodos onClick={() => {props.showAll()}}>
-                        <span style={{color:"#666", fontSize:"14px", fontWeight:"500"}}>MOSTRAR TODOS</span>
-                    </ButtonMostrarTodos>
-                </React.Fragment>
+                props.end ?
+                    null :
+                    <React.Fragment>
+                        <ButtonMostrarMaisRecurso onClick={() => props.showMore()}>
+                            <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS</span>
+                        </ButtonMostrarMaisRecurso>
+
+                        <ButtonMostrarTodos onClick={() => { props.showAll() }}>
+                            <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR TODOS</span>
+                        </ButtonMostrarTodos>
+                    </React.Fragment>
             }
 
         </Carregados>
     )
 }
 
-export function ButtonsAreaColecao (props) {
+export function ButtonsAreaColecao(props) {
     return (
         <Carregados>
-            <p style={{margin:"0 0 10px", fontSize:"14px"}}>
+            <p style={{ margin: "0 0 10px", fontSize: "14px" }}>
                 Carregados {props.sliceLength} de {props.length}
             </p>
 
-            {
-                props.length > 4 &&
-                <React.Fragment>
-                    <ButtonMostrarMaisColecao onClick={() => {props.showMore()}}>
-                        <span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS</span>
-                    </ButtonMostrarMaisColecao>
-
-                    <ButtonMostrarTodos onClick={() => {props.showAll()}}>
-                        <span style={{color:"#666", fontSize:"14px", fontWeight:"500"}}>MOSTRAR TODOS</span>
-                    </ButtonMostrarTodos>
-                </React.Fragment>
-            }
+            <React.Fragment>
+                <ButtonMostrarMaisColecao onClick={() => { props.showMore() }}>
+                    <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS</span>
+                </ButtonMostrarMaisColecao>
+
+                <ButtonMostrarTodos onClick={() => { props.showAll() }}>
+                    <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR TODOS</span>
+                </ButtonMostrarTodos>
+            </React.Fragment>
 
         </Carregados>
     )
 }
 
-export function ButtonsAreaRede (props) {
+export function ButtonsAreaRede(props) {
     return (
         <Carregados>
-            <p style={{margin:"0 0 10px", fontSize:"14px"}}>
+            <p style={{ margin: "0 0 10px", fontSize: "14px" }}>
                 Carregados {props.sliceLength} de {props.length}
             </p>
 
-            {
-                props.length > 4 &&
-                <React.Fragment>
-                    <ButtonMostrarMaisRede onClick={() => {props.showMore()}}>
-                        <span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS</span>
-                    </ButtonMostrarMaisRede>
-
-                    <ButtonMostrarTodos onClick={() => {props.showAll()}}>
-                        <span style={{color:"#666", fontSize:"14px", fontWeight:"500"}}>MOSTRAR TODOS</span>
-                    </ButtonMostrarTodos>
-                </React.Fragment>
-            }
+            <React.Fragment>
+                <ButtonMostrarMaisRede onClick={() => { props.showMore() }}>
+                    <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS</span>
+                </ButtonMostrarMaisRede>
+
+                <ButtonMostrarTodos onClick={() => { props.showAll() }}>
+                    <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR TODOS</span>
+                </ButtonMostrarTodos>
+            </React.Fragment>
 
         </Carregados>
     )