TransWikia.com

Dúvida sobre refatoração do useState ao implementar o SWR?

Stack Overflow em Português Asked on September 27, 2021

Estou iniciando nesse mundo do Javascript e tenho um projeto que estou desenvolvendo que fiz a implementação do SWR no mesmo e com isso deixei de usar o useEffect e o useState do elemento principal que era o inventories.

Para a primeira renderização do componente esta funcionando 100% o meu problema está ocorrendo em uma function onde eu faço um filtro por Data e o retorno era colocado no estado do setInventorie e com isso era renderizado na tela os inventários de acordo com a pesquisa.

Gostaria de saber como posso refatorar meu código dessa função para se adequar e renderizar esse filtro quando necessário agora que estou utilizando o SWR, visando que agora o response.data que me é retornando não é atribuído ao estado e com isso, mesmo fazendo a pesquisa corretamente nada é renderizado em tela.

Como era sem o SWR:

export default function Profile() {
    const [inventories, setInventories] = useState([]);
    const [selectedDate, handleDateChange] = useState('');
    const history = useHistory();
    moment.locale("pt-BR");

    useEffect(() => {
        axios.get('inventoryGroup', {
            headers: {
                Authorization: token,
            }
        }).then(response => {
            setInventories(response.data);
        });
    }, [token]);

    async function dataFilter(date) {
        handleDateChange(date);
        try{
            await axios.get(`/inventoryGroup?created_at=${moment(date).format("DD/MM/YYYY")}`).then(response => {
                if(response.data.length > 0) {
                    toast.success('Inventário encontrado.');
                    setInventories(response.data);
                } else {
                    toast.error('Nenhum inventário encontrado.');
                    axios.get(`/inventoryGroup`).then(response => {
                        setInventories(response.data);
                    })
                }
            })
        } catch(error) {
            toast.error(`Erro ao filtrar inventários ${error}`);
        }
    }
  
  return (
    <MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils} locale="pt-BR">
                <KeyboardDatePicker
                    value={selectedDate}
                    placeholder="Escolha uma data"
                    onChange={date => dataFilter(date)}
                    helperText={''}
                    format="DD/MM/yyyy"
                    error={null}
                />
     </MuiPickersUtilsProvider>
      
    {inventories.map(inventorie => (
                    <div>
                        <div className="separator"></div>
                        <tbody className="list-content" key={inventorie.id}>
                            <tr>      
                                <td>{inventorie.collector}</td>
                            </tr>

                            <tr>             
                                <td>{inventorie.count}</td>
                            </tr>
                            
                            <div className="inventorie-button">
                                <button onClick={() => collectorDetail(inventorie.collector)}
                                type="button" >
                                    <FiPlus scale={20} color="#a8a8b3" />
                                </button>

                                <button onClick={() => download_txt(inventorie.collector)}
                                type="button" >
                                    <FiDownload scale={20} color="#a8a8b3" />
                                </button>
                            </div>
                        </tbody>
                     </div>
                ))}
  )

Como está agora com o SWR:

export default function Profile() {

    const [inventories, setInventories] = useState([]);

    const [selectedDate, handleDateChange] = useState('');

    const history = useHistory();

    moment.locale("pt-BR");

    const { data } = useFetch(inventories ? 'inventoryGroup' : false);
    

    if(!data) {
        return <p>Carregando...</p>
    }    
  
    async function dataFilter(date) {
        handleDateChange(date);
        try{
            await axios.get(`/inventoryGroup?created_at=${moment(date).format("DD/MM/YYYY")}`).then(response => {
                if(response.data.length > 0) {
                    toast.success('Inventário encontrado.');
                    setInventories(response.data);
                } else {
                    toast.error('Nenhum inventário encontrado.');
                    axios.get(`/inventoryGroup`).then(response => {
                    setInventories(response.data);
                    })
                }
            })
        } catch(error) {
            toast.error(`Erro ao filtrar inventários ${error}`);
        }
    }

    return (
        <div className="profile-container">
            <MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils} locale="pt-BR">
                <KeyboardDatePicker
                    value={selectedDate}
                    placeholder="Escolha uma data"
                    onChange={date => dataFilter(date)}
                    helperText={''}
                    format="DD/MM/yyyy"
                    error={null}
                />
            </MuiPickersUtilsProvider>

            {<div className="inventorie-list">
                    <tbody className="list-title">
                            <tr>
                                <td>Coletor:</td>
                            </tr>
                            
                            <tr>
                                <td>Quantidade de Registros:</td>
                            </tr>
                    </tbody>
                
                {data.map(inventorie => (
                    <div>
                        <div className="separator"></div>
                        <tbody className="list-content" key={inventorie.id}>
                            <tr>      
                                <td>{inventorie.collector}</td>
                            </tr>

                            <tr>             
                                <td>{inventorie.count}</td>
                            </tr>
                            
                            <div className="inventorie-button">
                                <button onClick={() => collectorDetail(inventorie.collector)}
                                type="button" >
                                    <FiPlus scale={20} color="#a8a8b3" />
                                </button>

                                <button onClick={() => download_txt(inventorie.collector)}
                                type="button" >
                                    <FiDownload scale={20} color="#a8a8b3" />
                                </button>
                            </div>
                        </tbody>
                     </div>
                ))}
            </div>}
        </div>
    );
}

Função do useFetch que importo para utilização:

import useSWR from 'swr'
import axios from 'axios';

export function useFetch(url) {
  const { data, error, mutate } = useSWR(url, async url => {
    const response = await axios.get(url);

    return response.data;
  }, {
    refreshInterval: 1000,
    refreshWhenHidden: true
  })

  return { data, error, mutate }
}

Lembrando que estou passando apenas o código das partes de onde realmente está meu problema no código.

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP