added sorting of the list of opponents: online users are displayed before offline users.

Author: AlinLob

services/app/apps/codebattle/assets/js/widgets/pages/lobby/CreateGameDialog.jsx

@@ -35,29 +35,68 @@ const unchosenTask = { id: null };
 const OpponentSelect = memo(({ setOpponent, opponent }) => {
   const dispatch = useDispatch();
   const currentUserId = useSelector(selectors.currentUserIdSelector);
+  const { presenceList } = useSelector(selectors.lobbyDataSelector);
+  console.log('presenceList:', presenceList);
+  const loadOptions = useCallback(
+    (inputValue, callback) => {
+      const queryParamsString = qs.stringify({
+        q: {
+          name_ilike: inputValue,
+        },
+      });
 
-  const loadOptions = useCallback((inputValue, callback) => {
-    const queryParamsString = qs.stringify({
-      q: {
-        name_ilike: inputValue,
-      },
-    });
+      axios
+        .get(`/api/v1/users?${queryParamsString}`)
+        .then(({ data }) => {
+          const { users: apiUsers } = camelizeKeys(data);
+          const filteredApiUsers = apiUsers.filter(
+            ({ id }) => id !== currentUserId
+          );
+          const onlineUsersFromPresence = presenceList
+            .map((p) => p.user)
+            .filter((user) => user.id !== currentUserId);
+          const combinedUsersMap = new Map();
 
-    axios
-      .get(`/api/v1/users?${queryParamsString}`)
-      .then(({ data }) => {
-        const { users } = camelizeKeys(data);
+          filteredApiUsers.forEach((user) => {
+            const isOnline = presenceList.some(
+              (presence) => String(presence.id) === String(user.id)
+            );
+            combinedUsersMap.set(user.id, { ...user, online: isOnline });
+          });
 
-        const options = users
-          .filter(({ id }) => currentUserId !== id)
-          .map(user => ({ label: <UserLabel user={user} />, value: user }));
+          onlineUsersFromPresence.forEach((onlineUser) => {
+            if (!combinedUsersMap.has(onlineUser.id)) {
+              combinedUsersMap.set(onlineUser.id, {
+                ...onlineUser,
+                online: true,
+              });
+            }
+          });
 
-        callback(options);
-      })
-      .catch(error => {
-        dispatch(actions.setError(error));
-      });
-  }, [currentUserId, dispatch]);
+          const combinedUsers = Array.from(combinedUsersMap.values());
+
+          const sortedUsers = combinedUsers.sort((a, b) => {
+            const aOnline = a.online;
+            const bOnline = b.online;
+            if (aOnline === bOnline) {
+              return 0;
+            }
+            return aOnline ? -1 : 1;
+          });
+
+          const options = sortedUsers.map((user) => ({
+            label: <UserLabel user={user} />,
+            value: user,
+          }));
+
+          callback(options);
+        })
+        .catch((error) => {
+          dispatch(actions.setError(error));
+        });
+    },
+    [currentUserId, dispatch, presenceList]
+  );
 
   return (
     <AsyncSelect
@@ -76,22 +115,22 @@ const OpponentSelect = memo(({ setOpponent, opponent }) => {
 });
 
 const LevelButtonGroup = memo(({ value, onChange }) => {
-  const getLevelClassName = level => {
+  const getLevelClassName = (level) => {
     const isLevelActive = level === value;
     return cn('btn border-0 mb-2 rounded-lg', {
       'bg-orange': isLevelActive,
       'btn-outline-orange': !isLevelActive,
     });
   };
 
-  const changeGameLevel = level => {
+  const changeGameLevel = (level) => {
     if (level === value) return;
     onChange(level);
   };
 
   return (
     <div className="d-flex justify-content-around px-sm-3 px-md-5">
-      {gameLevels.map(level => (
+      {gameLevels.map((level) => (
         <button
           key={level}
           type="button"
@@ -109,7 +148,7 @@ const LevelButtonGroup = memo(({ value, onChange }) => {
 });
 
 const GameTypeButtonGroup = memo(({ value, onChange }) => {
-  const getGameTypeClassName = gameType => {
+  const getGameTypeClassName = (gameType) => {
     const isGameTypeActive = gameType === value;
     return cn('btn mr-1 mb-1 mb-sm-0 rounded-lg text-nowrap', {
       'bg-orange text-white': isGameTypeActive,
@@ -119,7 +158,7 @@ const GameTypeButtonGroup = memo(({ value, onChange }) => {
 
   return (
     <div className="d-flex flex-wrap flex-sm-nowrap justify-content-around px-sm-3 px-md-5 mt-3">
-      {gameTypeCodes.map(gameTypeCode => (
+      {gameTypeCodes.map((gameTypeCode) => (
         <button
           key={gameTypeCode}
           type="button"
@@ -135,7 +174,9 @@ const GameTypeButtonGroup = memo(({ value, onChange }) => {
 
 function CreateGameDialog({ hideModal }) {
   const dispatch = useDispatch();
-  const { gameOptions: givenGameOptions, opponentInfo } = useSelector(selectors.modalSelector);
+  const { gameOptions: givenGameOptions, opponentInfo } = useSelector(
+    selectors.modalSelector
+  );
   const [opponent, setOpponent] = useState(opponentInfo);
   const [chosenTask, setChosenTask] = useState(unchosenTask);
   const [chosenTags, setChosenTags] = useState([]);
@@ -148,13 +189,19 @@ function CreateGameDialog({ hideModal }) {
   const isInvite = gameType === 'invite';
   const isTaskChosen = chosenTask.id !== null;
 
-  const handleTimeoutChange = useCallback(e => setGameTimeout(e.target.value * 60), [setGameTimeout]);
+  const handleTimeoutChange = useCallback(
+    (e) => setGameTimeout(e.target.value * 60),
+    [setGameTimeout]
+  );
 
-  const switchGameLevel = useCallback(level => {
-    setGameLevel(level);
-    setChosenTask(unchosenTask);
-    setChosenTags([]);
-  }, [setGameLevel, setChosenTask, setChosenTags]);
+  const switchGameLevel = useCallback(
+    (level) => {
+      setGameLevel(level);
+      setChosenTask(unchosenTask);
+      setChosenTags([]);
+    },
+    [setGameLevel, setChosenTask, setChosenTags]
+  );
 
   const createGame = () => {
     if (isInvite && opponent) {
@@ -166,7 +213,7 @@ function CreateGameDialog({ hideModal }) {
           recipient_name: opponent.name,
           task_id: chosenTask.id,
           task_tags: isTaskChosen ? [] : chosenTags,
-        }),
+        })
       );
     } else if (!isInvite) {
       lobbyMiddlewares.createGame({