Pesquisar na Comunidade

Eu tenho esse código, mas preciso retornar funções puras em vez de funções mutáveis. É possível? Talvez usando OOP? Não sei como melhorar isso. Tentei retornar os valores de cada função, mas não obtive sucesso. import { AssetStatusType } from '@domain/interfaces/common' import { BothComponentType, ComponentsType, GroupFiltersType, OperationType, OverviewModelType, PendenciesOverviewType, PendenciesType, StructurePendenciesCount, StructureStatusCount } from '../../types' const updateStatusCount = ( statusCount: StructureStatusCount, status: AssetStatusType ) => { statusCount[status] = (statusCount[status] || 0) + 1 } const updatePendenciesCount = ( pendenciesCount: StructurePendenciesCount, key: AssetStatusType, subKey: OperationType | PendenciesOverviewType ) => { pendenciesCount[key] = pendenciesCount[key] ?? {} pendenciesCount[key][subKey] = (pendenciesCount[key]?.[subKey] || 0) + 1 } const processOverviewPendencies = ( pendencies: PendenciesType[] | null | undefined, pendenciesCount: StructurePendenciesCount, countedIds: Set<string>, id: string ) => { if (pendencies?.length) { for (const { state, pendencyType } of pendencies) { const uniqueId = `${state}-${pendencyType}-${id}` if (!countedIds.has(uniqueId)) { updatePendenciesCount(pendenciesCount, state, pendencyType) countedIds.add(uniqueId) } } } } const processOverviewComponents = ( components: ComponentsType[], isGroupByTree: boolean, statusCount: StructureStatusCount, pendenciesCount: StructurePendenciesCount, countedIds: Set<string>, id: string, type: BothComponentType ) => { for (const { pendencies, status, operationType } of components) { if (isGroupByTree && type === 'location') { updateStatusCount(statusCount, status) if (operationType) { updatePendenciesCount(pendenciesCount, status, operationType) } } processOverviewPendencies(pendencies, pendenciesCount, countedIds, id) } } const processOverviewData = ( data: OverviewModelType[], groupBy: GroupFiltersType, statusCount: StructureStatusCount, pendenciesCount: StructurePendenciesCount, countedIds: Set<string> ) => { const isGroupByTree = groupBy === 'tree' const isGroupByAsset = groupBy === 'asset' for (const { id, status, components, operationType, type } of data) { if (isGroupByAsset || type === 'asset') { updateStatusCount(statusCount, status) if (operationType) { updatePendenciesCount(pendenciesCount, status, operationType) } } processOverviewComponents( components, isGroupByTree, statusCount, pendenciesCount, countedIds, id, type ) } } export const calculateOverviewCounts = ( data: OverviewModelType[], groupBy: GroupFiltersType ) => { const statusCount: StructureStatusCount = {} as StructureStatusCount const pendenciesCount: StructurePendenciesCount = {} as StructurePendenciesCount const countedIds = new Set<string>() processOverviewData(data, groupBy, statusCount, pendenciesCount, countedIds) return { ...statusCount, pendencies: pendenciesCount } } Existe uma maneira mais limpa e elegante de fazer isso? Preciso retornar um objeto como este: // calculateOverviewCounts return this { pendencies: StructurePendenciesCount; working: number; inAlert: number; warning: number; stopped: number; off: number; } StructurePendenciesCount é:

Opa galera, tudo blz? Recentemente comecei a estudar reactjs e para praticar estou fazendo o clone da Netiflix. Mas estou com um erro ao tentar chamar as imagens da API do TMDB o erro é: TypeError: Cannot read properties of undefined (reading 'results') Já tentei refazer o código varias vezes mas não consegui resolver o problema. Vou postar o resto do código aqui App.js: import React, {useEffect, useState} from 'react'; import Tmdb from './Tmdb'; import MovieRow from './components/MovieRow'; const App = () =>{ const [movieList, setMovieList] = useState([]); useEffect(()=>{ const loaddAll = async () =>{ let list = await Tmdb.getHomeList(); setMovieList(list) } loaddAll(); }, []); return( <div className="page"> <section className="lists"> {movieList.map((item, key)=>( <MovieRow key={key} title={item.title} items={item.items}/> ))} </section> </div> ); } export default App; Consumir a api: Tmdb.js: const API_KEY = '******************************'; const API_BASE = 'https://api.themoviedb.org/3'; const basicFetch = async (endpoint) =>{ const req = await fetch(`${API_BASE}${endpoint}`) const json = await req.json(); return json; } export default { getHomeList: async () =>{ return [ { slug: 'originals', title: 'Originais da Netflix', items: await basicFetch(`/discover/tv?with_networks=213&language=pt-BR&api_key=${API_KEY}`) }, { slug: 'trending', title: 'Recomendados para você', item: await basicFetch(`/trending/all/week?language=pt-BR&api_key=${API_KEY}`) }, { slug: 'toprated', title: 'Em alta', item: await basicFetch(`/movie/top_rated?language=pt-BR&api_key=${API_KEY}`) }, { slug: 'action', title: 'Ação', item: await basicFetch(`/discover/movie?width_genres=28&language-pt-BR&api_key=${API_KEY}`) }, { slug: 'comedy', title: 'Comédia', item: await basicFetch(`/discover/movie?width_genres=35&language-pt-BR&api_key=${API_KEY}`) }, { slug: 'horror', title: 'Terror', item: await basicFetch(`/discover/movie?width_genres=27&language-pt-BR&api_key=${API_KEY}`) }, { slug: 'romance', title: 'Romance', item: await basicFetch(`/discover/movie?width_genres=10749&language-pt-BR&api_key=${API_KEY}`) }, { slug: 'documentary', title: 'Documentários', item: await basicFetch(`/discover/movie?width_genres=99&language-pt-BR&api_key=${API_KEY}`) }, ] } } Componente para mostrar os filmes: MovieRow.js: import React from "react"; import './MovieRow.css'; export default ({title, items}) =>{ return ( <div> <h2>{title}</h2> <div className="moviewRow--listarea"> {items.results.length > 0 && items.results.map((key, item)=>( <img src={`https://image.tmdb.org/t/p/w300${item.poster_path}`} /> ))} </div> </div> ); } Se alguém pudesse me ajudar eu ficaria muito grato.

Olá pessoa, terminei a faculdade e recebi algumas propostas de projetos web, mas como ainda estou iniciando não tenho muita noção de quanto cobrar. Para um site, eu pensei em cobrar um valor razoável de entrada , e além deste valor, definir um contrato de um valor mensal para fazer manutenções necessárias, assim eu terei o cliente e uma renda sempre. Por outro lado, o cliente pode ficar com o site por pouco tempo e não chegar ao valor que eu gostaria pelo projeto. Pensei também em cobrar por projeto, no minimo R$ 1000 por um site simples, já que to começando. Ai entra outro falta de experiência minha. Se eu cobrar por projeto, o cliente ficaria responsável por pagar o domínio e hospedagem dele ou eu contrataria uma hospedagem com a possibilidade de hospedar varios sites para quando eu tiver mais clientes. Indo mais direto ao ponto, gostaria que me ajudasse em como começar, cobrar, etc. Agradeço a quem puder ajudar.

Estou fazendo minha primeira grande aplicação em react, e estou com um problema onde TODOS meus componentes estão sendo renderizados desnecessariamente, causando trava na UI por 1 ou 2 segundos. Tenho 2 grandes problemas no momento: 1. Estou renderizando uma lista com varios componentes, essa lista possui um checkbox individual e um checkbox geral para selecionar a lista inteira. Ao selecionar a lista inteira, vejo que a ui trava por um tempo (nesse tempo ela esta renderiznado todos os componentes novamente) 2. Ao buscar mais itens para a lista, a UI tambe trava por um tempo, acredito que ele esteja renderizando novamente os componentes da lista que ja estavam renderizados, mais os novos itens que foram buscados. Eu estou usando a context API para fazer algumas chamadas HTTP e buscar todas as informações que preciso, e salvando elas em um estado. Depois estou iterando esse estado para renderiar as informações. Quando busco mais itens para a lista, estou dando um push nesse array de estado ja existente. Dentro do meu componente de lista, estou usando useMemo para tentar bloquear essas renderizações desnecessárias, porém não parece estar funcionando. ```javascript const memoizedCardBaseInfo = useMemo(() => { return ( <CatalogCardBaseInfo response={response} tags={tags} checkCard={checkCard} checkedAll={checkedAll} singleChecked={singleChecked} setSingleChecked={setSingleChecked} setCheckedAll={setCheckedAll} indexRef={indexRef} /> ); }, [singleChecked, checkedAll]); const memoizedCatalogChartGroup = useMemo(() => <CatalogCardChartGroup response={response} />, [response]); const memoizedCatalogCardMktpExpd = useMemo(() => <CatalogCardMktpExpd response={response} />, [response]); ``` O que estou fazendo de errado aqui ? Como faço para bloquear renderizações desnecessárias ?

Bom estou fazendo um collapse porem ele esta show/hide todos os elementos, quando eu clico em sensores chief ele abre todos os sensores chief era para ser apenas aquelas sensores chief q pertence aquele gateway. como eu poderia fazer para mostra/esconder apenas naqueles certo. tela: assim esta montado minha função: butão: é coloquei aki:

tegcommerce - plataforma de e-commerce open source https://tegcommerce.org https://github.com/tegcommerce https://t.me/tegcommerce objetivo do brasil para o mundo a maior plataforma de e-commerce open source skills necessários qualquer contribuição é bem vinda acesse nosso grupo do telegram: https://t.me/tegcommerce projetos similares wordpress e woocommerce drupal joomla magento