task choice improvement

services/app/assets/css/style.scss

@@ -616,3 +616,13 @@ td {
     font-size: 16px;
   }
 }
+
+.tag-btn-outline-orange {
+  border-color: $orange;
+  color: $orange;
+}
+
+.tag-btn-outline-orange:hover {
+  border-color: $orange;
+  color: $orange;
+}

services/app/assets/js/__mocks__/react-select.jsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+
+const Select = ({ options, onChange, filterOption }) => {
+  const [selectInput, setSelectInput] = useState('task');
+
+  return (
+    <div>
+      {options
+        .filter(option => (
+          filterOption({ value: { name: option.value.name } }, selectInput)
+        ))
+        .map(option => (
+          <button
+            type="button"
+            onClick={() => onChange({ value: option.value })}
+            key={option.value.name}
+          >
+            {option.value.name}
+          </button>
+      ))}
+      <button
+        type="button"
+        onClick={() => setSelectInput('nAme')}
+        key="filterOption"
+      >
+        filter tasks by name
+      </button>
+    </div>
+  );
+};
+
+export default Select;

services/app/assets/js/__tests__/LobbyWidget.test.jsx

@@ -42,6 +42,7 @@ jest.mock(
     const gonParams = {
       local: 'en',
       current_user: { id: 1, sound_settings: {} },
+      task_tags: ['math', 'string', 'rest'],
     };
     return { getAsset: type => gonParams[type] };
   },
@@ -50,15 +51,17 @@ jest.mock(
 
 jest.mock('axios');
 const tasks = [
-  { name: 'task1 name', id: 1 },
-  { name: 'task2 name', id: 2 },
+  { name: 'task1 name', id: 1, tags: [''] },
+  { name: 'task2 name', id: 2, tags: [''] },
+  { name: 'task3 filtered', id: 3, tags: [''] },
 ];
 const users = [{ name: 'user1', id: -4 }, { name: 'user2', id: -2 }];
 axios.get.mockResolvedValue({ data: { tasks, users } });
 
+jest.mock('react-select');
 jest.mock('react-select/async');
 /*
-  AsyncSelect component mock is made by means of the series of buttons.
+  AsyncSelect and Select component mock is made by means of the series of buttons.
   Each button represents one option.
   Clicking the buttons you simulate a choice of the options in the AsyncSelect component.
 */
@@ -199,6 +202,7 @@ test('test task choice', async () => {
     opponent_type: 'other_user',
     timeout_seconds: 480,
     task_id: null,
+    tags: [],
   };
 
   expect(lobbyMiddlewares.createGame).toHaveBeenCalledWith(params);
@@ -235,4 +239,17 @@ test('test task choice', async () => {
     task_id: 1,
   };
   expect(mainMiddlewares.createInvite).toHaveBeenCalledWith(paramsWithOpponentAndChosenTask);
-});
+
+  fireEvent.click(await findByRole('button', { name: 'Create a Game' }));
+
+  const firstTaskOpt = await findByRole('button', { name: 'task1 name' });
+  const secondTaskOpt = getByRole('button', { name: 'task2 name' });
+  const thirdTaskOpt = getByRole('button', { name: 'task3 filtered' });
+
+  fireEvent.click(getByRole('button', { name: 'filter tasks by name' }));
+
+  expect(firstTaskOpt).toBeInTheDocument();
+  expect(secondTaskOpt).toBeInTheDocument();
+  expect(thirdTaskOpt).not.toBeInTheDocument();
+},
+8000);

services/app/assets/js/widgets/components/Game/CreateGameDialog.jsx

@@ -14,6 +14,7 @@ import * as lobbyMiddlewares from '../../middlewares/Lobby';
 import * as mainMiddlewares from '../../middlewares/Main';
 import i18n from '../../../i18n';
 import levelRatio from '../../config/levelRatio';
+import TaskChoice from './TaskChoice';
 
 const TIMEOUTS = [3300, 2040, 1260, 780, 480, 300, 180, 120, 60];
 
@@ -81,46 +82,6 @@ const OpponentSelect = ({ setOpponent, opponent }) => {
   );
 };
 
-const TaskLabel = ({ task }) => (
-  <span className="text-truncate">
-    <span>{task.name}</span>
-  </span>
-);
-
-const TaskSelect = ({ chosenTask, setChosenTask, randomTask }) => {
-  const dispatch = useDispatch();
-
-  const loadOptions = (inputValue, callback) => {
-    axios
-      .get('/api/v1/tasks')
-      .then(({ data }) => {
-        const { tasks } = camelizeKeys(data);
-        const options = [randomTask, ...tasks]
-          .map(task => ({ label: <TaskLabel task={task} />, value: task }));
-
-        callback(options);
-      })
-      .catch(error => {
-        dispatch(actions.setError(error));
-      });
-  };
-
-  return (
-    <AsyncSelect
-      className="w-100"
-      value={
-        {
-          label: <TaskLabel task={chosenTask} />,
-          value: chosenTask,
-        }
-      }
-      defaultOptions
-      onChange={({ value }) => setChosenTask(value)}
-      loadOptions={loadOptions}
-    />
-  );
-};
-
 const CreateGameDialog = ({ hideModal }) => {
   const dispatch = useDispatch();
 
@@ -137,6 +98,7 @@ const CreateGameDialog = ({ hideModal }) => {
 
   const randomTask = { name: i18n.t('random task'), value: {} };
   const [chosenTask, setChosenTask] = useState(randomTask);
+  const [chosenTags, setChosenTags] = useState([]);
 
   const [game, setGame] = useState({
     level: gameLevels[0],
@@ -165,6 +127,7 @@ const CreateGameDialog = ({ hideModal }) => {
           timeout_seconds: game.timeoutSeconds,
           recipient_id: opponent.id,
           task_id: _.get(chosenTask, 'id', null),
+          task_tags: chosenTags,
         }),
       );
     } else if (!isInvite) {
@@ -173,6 +136,7 @@ const CreateGameDialog = ({ hideModal }) => {
         opponent_type: game.type,
         timeout_seconds: game.timeoutSeconds,
         task_id: _.get(chosenTask, 'id', null),
+        task_tags: chosenTags,
       });
     }
     hideModal();
@@ -244,10 +208,14 @@ const CreateGameDialog = ({ hideModal }) => {
           </div>
         </>
       )}
-      <h5>{i18n.t('Choose task')}</h5>
-      <div className="d-flex justify-content-around px-5 mt-3 mb-2">
-        <TaskSelect setChosenTask={setChosenTask} chosenTask={chosenTask} randomTask={randomTask} />
-      </div>
+      <TaskChoice
+        chosenTask={chosenTask}
+        setChosenTask={setChosenTask}
+        chosenTags={chosenTags}
+        setChosenTags={setChosenTags}
+        level={game.level}
+        randomTask={randomTask}
+      />
       <button type="button" className={createBtnClassname} onClick={createGame}>
         {createBtnTitle}
       </button>