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={[

              { name: 'Tópicos', value: 'topics' },

              { name: 'Recompensas', value: 'rewards' }

            ]}

          />

        </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}

      />

    </>

  );

}