Create the marketplace search page base structure

src/pages/MarketplaceSearch/MarketplaceSearch.page.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import MarketplaceSearchHeader from './MarketplaceSearchHeader';
@@ -10,15 +10,70 @@ import './MarketplaceSearch.style.less';
 const MarketplaceSearch = () => {
   const history = useHistory();
 
+  const [filters, setFilters] = useState(() => {
+    const searchParams = new URLSearchParams(history.location.search);
+    const paramsObject = {};
+    searchParams.forEach((value, key) => {
+      paramsObject[key] = value === 'true'; // value is a string
+    });
+    return paramsObject;
+  });
+
+  const [listType, setListType] = useState('grid');
+  const [listOrder, setListOrder] = useState('new');
+
   const handleGoBack = () => {
     history.goBack();
   };
 
+  const handleChangeFilters = (categoryKey, isChecked) => {
+    setFilters((currentFilters) => {
+      const filtersClone = { ...currentFilters };
+      if (isChecked) filtersClone[categoryKey] = isChecked;
+      else delete filtersClone[categoryKey];
+
+      history.push({
+        pathname: history.location.pathname,
+        search: `?${new URLSearchParams(filtersClone)}`,
+      });
+
+      return filtersClone;
+    });
+  };
+
+  const handleClearFilters = () => {
+    setFilters({});
+    history.push({
+      pathname: history.location.pathname,
+      search: '',
+    });
+  };
+
+  const handleChangeListType = () => {
+    setListType((currentListType) =>
+      currentListType === 'grid' ? 'list' : 'grid'
+    );
+  };
+
   return (
     <div className='marketplace-search'>
       <MarketplaceSearchHeader handleGoBack={handleGoBack} />
-      <MarketplaceSearchFilters filters={{}} />
-      <MarketplaceSearchResults tasks={[]} />
+
+      <div className='marketplace-search-content'>
+        <MarketplaceSearchFilters
+          filters={filters}
+          handleClearFilters={handleClearFilters}
+          handleChangeFilters={handleChangeFilters}
+        />
+
+        <MarketplaceSearchResults
+          tasks={[]}
+          listType={listType}
+          listOrder={listOrder}
+          handleChangeListOrder={setListOrder}
+          handleChangeListType={handleChangeListType}
+        />
+      </div>
     </div>
   );
 };

src/pages/MarketplaceSearch/MarketplaceSearch.style.less

@@ -45,4 +45,101 @@
       }
     }
   }
+
+  .marketplace-search-content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    flex: 1;
+
+    @media only screen and (max-width: 768px) {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+
+  .marketplace-search-filters {
+    background: white;
+    width: 300px;
+    height: 100%;
+
+    .marketplace-search-filters-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+      padding: 16px 24px 0 24px;
+
+      .marketplace-search-filters-header-title {
+        font-size: 16px;
+      }
+    }
+
+    .marketplace-search-filters-group {
+      padding: 24px;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #00000017;
+      }
+
+      .marketplace-search-filters-group-title {
+        margin: 0 0 16px 0;
+      }
+
+      .marketplace-search-filters-group-checkbox {
+        display: block;
+        margin: 0 0 8px 0;
+      }
+    }
+  }
+
+  .marketplace-search-results {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 16px 24px;
+
+    .marketplace-search-results-header {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
+
+      .marketplace-search-results-header-total {
+        > *:not(:last-child) {
+          margin-right: 8px;
+        }
+      }
+
+      .marketplace-search-results-header-options {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+
+        > *:not(:last-child) {
+          margin-right: 8px;
+        }
+      }
+    }
+
+    .marketplace-search-results-tasks {
+      flex: 1;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: stretch;
+      justify-content: flex-start;
+      margin: -8px;
+
+      .marketplace-search-results-task {
+        flex: 1 25%;
+        min-width: 250px;
+        margin: 8px;
+      }
+
+      .marketplace-search-results-tasks-empty {
+        align-self: center;
+        margin: 0 auto;
+      }
+    }
+  }
 }

src/pages/MarketplaceSearch/MarketplaceSearchFilters.jsx

@@ -1,16 +1,89 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Typography, Checkbox, Button } from 'antd';
 
-const MarketplaceSearchFilters = ({ filters }) => {
-  return <div>{JSON.stringify(filters)}</div>;
+import { MARKETPLACE_TASK_CATEGORIES } from 'configs';
+
+const TASK_CATEGORIES_TO_FILTER = [
+  MARKETPLACE_TASK_CATEGORIES.DATASETS,
+  MARKETPLACE_TASK_CATEGORIES.FEATURE_ENGINEERING,
+  MARKETPLACE_TASK_CATEGORIES.PREDICTOR,
+  MARKETPLACE_TASK_CATEGORIES.DESCRIPTIVE_STATISTICS,
+];
+
+const FLOW_CATEGORIES_TO_FILTER = [
+  MARKETPLACE_TASK_CATEGORIES.COMPUTER_VISION,
+  MARKETPLACE_TASK_CATEGORIES.OPTIMIZATION,
+  MARKETPLACE_TASK_CATEGORIES.OTHER,
+];
+
+const MarketplaceSearchFilters = ({
+  filters,
+  handleClearFilters,
+  handleChangeFilters,
+}) => {
+  const mapCategoryToCheckbox = (category) => {
+    const isChecked = !!filters[category.key];
+
+    return (
+      <Checkbox
+        key={category.key}
+        checked={isChecked}
+        className='marketplace-search-filters-group-checkbox'
+        onChange={(e) => handleChangeFilters(category.key, e.target.checked)}
+      >
+        {category.name}
+      </Checkbox>
+    );
+  };
+
+  return (
+    <div className='marketplace-search-filters'>
+      <div className='marketplace-search-filters-header'>
+        <Typography.Text className='marketplace-search-filters-header-title'>
+          Filtrar Por:
+        </Typography.Text>
+
+        <Button type='link' onClick={handleClearFilters}>
+          Limpar Filtros
+        </Button>
+      </div>
+
+      <div className='marketplace-search-filters-group'>
+        <Typography.Title
+          className='marketplace-search-filters-group-title'
+          level={5}
+        >
+          TAREFAS
+        </Typography.Title>
+
+        {TASK_CATEGORIES_TO_FILTER.map(mapCategoryToCheckbox)}
+      </div>
+
+      <div className='marketplace-search-filters-group'>
+        <Typography.Title
+          className='marketplace-search-filters-group-title'
+          level={5}
+        >
+          FLUXOS
+        </Typography.Title>
+
+        {FLOW_CATEGORIES_TO_FILTER.map(mapCategoryToCheckbox)}
+      </div>
+    </div>
+  );
 };
 
 MarketplaceSearchFilters.propTypes = {
   filters: PropTypes.object,
+  handleClearFilters: PropTypes.func,
+  handleChangeFilters: PropTypes.func,
 };
 
 MarketplaceSearchFilters.defaultProps = {
   filters: {},
+  handleClearFilters: null,
+  handleChangeFilters: null,
 };
 
 export default MarketplaceSearchFilters;

src/pages/MarketplaceSearch/MarketplaceSearchResults.jsx

@@ -1,22 +1,114 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Typography, Select, Button } from 'antd';
+import {
+  ShoppingOutlined,
+  UnorderedListOutlined,
+  BlockOutlined,
+} from '@ant-design/icons';
 
-const MarketplaceSearchResults = ({ tasks }) => {
+import { MarketplaceTaskItem, Placeholder } from 'components';
+
+const MarketplaceSearchResults = ({
+  tasks,
+  listType,
+  listOrder,
+  handleChangeListType,
+  handleChangeListOrder,
+}) => {
   return (
-    <div>
-      {tasks.map((_, index) => {
-        return <div key={index}></div>;
-      })}
+    <div className='marketplace-search-results'>
+      <div className='marketplace-search-results-header'>
+        <div className='marketplace-search-results-header-total'>
+          <Typography.Text>{tasks.length}</Typography.Text>
+          <Typography.Text>
+            {tasks.length === 1 ? 'Resultado' : 'Resultados'}
+          </Typography.Text>
+        </div>
+
+        <div className='marketplace-search-results-header-options'>
+          <Typography.Text>Mostrar Primeiro:</Typography.Text>
+
+          <Select
+            value={listOrder}
+            onChange={handleChangeListOrder}
+            placeholder='Selecione a ordem de exibição'
+          >
+            <Select.Option value='new'>Mais recentes</Select.Option>
+            <Select.Option value='old'>Mais antigos</Select.Option>
+          </Select>
+
+          <Button shape='round' onClick={handleChangeListType}>
+            {listType === 'list' ? (
+              <BlockOutlined />
+            ) : (
+              <UnorderedListOutlined />
+            )}
+
+            <span>
+              {listType === 'list' ? 'Ver como grid' : 'Ver como lista'}
+            </span>
+          </Button>
+        </div>
+      </div>
+
+      <div className='marketplace-search-results-tasks'>
+        {tasks.map((task) => {
+          const handleSeeTask = () => {
+            history.push(`/marketplace/tarefas/${task.uuid}`);
+          };
+
+          return (
+            <MarketplaceTaskItem.Box
+              key={task.uuid}
+              onClick={handleSeeTask}
+              taskCategory={task.category}
+              className='marketplace-search-tasks-task'
+              header={
+                <MarketplaceTaskItem.Title>
+                  {task.name}
+                </MarketplaceTaskItem.Title>
+              }
+              footer={
+                <MarketplaceTaskItem.InlineData
+                  taskType={task.type}
+                  taskCategory={task.category}
+                />
+              }
+            >
+              <MarketplaceTaskItem.Description>
+                {task.description}
+              </MarketplaceTaskItem.Description>
+            </MarketplaceTaskItem.Box>
+          );
+        })}
+
+        {!tasks.length && (
+          <Placeholder
+            className='marketplace-search-results-tasks-empty'
+            message='Nenhuma tarefa ou fluxo encontrado'
+            iconComponent={<ShoppingOutlined />}
+          />
+        )}
+      </div>
     </div>
   );
 };
 
 MarketplaceSearchResults.propTypes = {
   tasks: PropTypes.array,
+  listType: PropTypes.oneOf(['list', 'grid']),
+  listOrder: PropTypes.oneOf(['new', 'old']),
+  handleChangeListType: PropTypes.func,
+  handleChangeListOrder: PropTypes.func,
 };
 
 MarketplaceSearchResults.defaultProps = {
   tasks: [],
+  listType: 'grid',
+  listOrder: 'new',
+  handleChangeListType: null,
+  handleChangeListOrder: null,
 };
 
 export default MarketplaceSearchResults;