Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { Grid, Typography } from '@mui/material';

import { api } from '@shared/libs';
import { useAlert } from '@shared/hooks';

import { Input, Select } from '@shared/components';
import { CapsulesList } from '@marketplace/components';

export function MarketPlacePage() {
  const labels = useSelector(({ intl }) => intl.labels);

  const [capsules, setCapsules] = useState([]);
  const [rewards, setRewards] = useState([]);
  const [categories, setCategories] = useState([]);
  const [searchParams, setSearchParams] = useState({
    search: '',
    category: 'capsules'
  });

  const { showError } = useAlert();

  const handleChange = ({ target }) => {
    setSearchParams({ ...searchParams, [target.name]: target.value });
  };

  const load = async (_search = searchParams.search, _entity = searchParams.category) => {
    api
      .get(`/marketplace?search=${_search}&entity=${_entity}`)
      .then((data) => (_entity === 'capsules' ? setCapsules(data) : setRewards(data)))
      .catch((error) => showError(error.message));
  };

  const getCategories = async () => {
    const categories = await api.get('/marketplace/categories');
    if (categories) {
      const _categories = Object.keys(categories).map((element) => {
        return {
          label: categories[element],
          value: element
        };
      });
      setCategories(_categories);
    }
  };

  const checkParams = () => {
    const url = window.location.href;
    const hasEntity = url.includes('?entity=');
    if (hasEntity) {
      const value = url.split('?entity=')[1];
      if (value) {
        setSearchParams({ ...searchParams, category: value });
      }
    }
  };

  useEffect(() => {
    getCategories();
    checkParams();
  }, []);

  useEffect(() => {
    load(searchParams.search, searchParams.category);
  }, [searchParams]);

  return (
    <>
      <Grid container spacing={1} display='flex' justifyContent='end'>
        <Grid item xs={12} md={3}>
          <Select
            name='category'
            onChange={handleChange}
            value={searchParams.category}
            options={[
              { label: 'Tópicos', value: 'topics' },
              { label: 'Recompensas', value: 'rewards' }
            ]}
            color='secondary'
          />
        </Grid>

        <Grid item xs={12} md={3}>
          <Input
            name='search'
            placeholder={labels.search}
            value={searchParams.search}
            onChange={handleChange}
          />
        </Grid>
      </Grid>

      <Typography variant='h2' sx={{ mt: 2 }}>
        {searchParams.category === 'capsules' ? 'Cápsulas' : 'Recompensas'} de Microaprendizaje
      </Typography>

      <CapsulesList
        capsules={searchParams.category === 'capsules' ? capsules : rewards}
        onEnroll={load}
      />
    </>
  );
}