Add nearby users to lobby

Author: vtm9

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

@@ -25,9 +25,9 @@ export const loadUserStats = dispatch => async user => {
   }
 };
 
-export const loadUserOpponents = (abortController, onSuccess, onFailure) => {
+export const loadNearbyUsers = (abortController, onSuccess, onFailure) => {
   axios
-    .get('/api/v1/user/opponents', { signal: abortController.signal })
+    .get('/api/v1/user/nearby_users', { signal: abortController.signal })
     .then(camelizeKeys)
     .then(onSuccess)
     .catch(onFailure);
@@ -41,22 +41,22 @@ export const loadSimpleUserStats = (onSuccess, onFailure) => user => {
 };
 
 export const sendPremiumRequest = (requestStatus, userId) => async dispatch => {
-  try {
-    await axios.post(
-      `/api/v1/user/${userId}/send_premium_request`,
-      { status: requestStatus },
-      {
-        headers: {
-          'Content-Type': 'application/json',
-          'x-csrf-token': window.csrf_token,
+    try {
+      await axios.post(
+        `/api/v1/user/${userId}/send_premium_request`,
+        { status: requestStatus },
+        {
+          headers: {
+            'Content-Type': 'application/json',
+            'x-csrf-token': window.csrf_token,
+          },
         },
-      },
-    );
-    dispatch(actions.togglePremiumRequestStatus());
-  } catch (error) {
-    dispatch(actions.setError(error));
-  }
-};
+      );
+      dispatch(actions.togglePremiumRequestStatus());
+    } catch (error) {
+      dispatch(actions.setError(error));
+    }
+  };
 
 const periodToTimeUnit = {
   weekly: 'week',
@@ -71,26 +71,26 @@ const getDateByPeriod = period => {
 };
 
 export const getUsersRatingPage = ({ name, period, withBots }, { attribute, direction }, page, pageSize) => dispatch => {
-  const queryParamsString = qs.stringify({
-    page,
-    page_size: pageSize,
-    s: `${attribute}+${direction}`,
-    q: {
-      name_ilike: name,
-    },
-    date_from: getDateByPeriod(period),
-    with_bots: withBots,
-  });
-
-  axios
-    .get(`/api/v1/users?${queryParamsString}`)
-    .then(({ data }) => {
-      dispatch(actions.updateUsersRatingPage(camelizeKeys(data)));
-      dispatch(actions.finishStoreInit());
-    })
-    .catch(error => {
-      dispatch(actions.setError(error));
+    const queryParamsString = qs.stringify({
+      page,
+      page_size: pageSize,
+      s: `${attribute}+${direction}`,
+      q: {
+        name_ilike: name,
+      },
+      date_from: getDateByPeriod(period),
+      with_bots: withBots,
     });
-};
+
+    axios
+      .get(`/api/v1/users?${queryParamsString}`)
+      .then(({ data }) => {
+        dispatch(actions.updateUsersRatingPage(camelizeKeys(data)));
+        dispatch(actions.finishStoreInit());
+      })
+      .catch(error => {
+        dispatch(actions.setError(error));
+      });
+  };
 
 export default loadUserStats;

services/app/apps/codebattle/assets/js/widgets/middlewares/Users.js

@@ -1,5 +1,5 @@
 import React, {
-  useState, useRef, useEffect, useCallback,
+ useState, useRef, useEffect, useCallback,
 } from 'react';
 
 import cn from 'classnames';
@@ -90,7 +90,7 @@ const LobbyWidget = () => {
     seasonTournaments,
     // completedTournaments,
     presenceList,
-    opponents,
+    nearbyUsers,
     channel: { online },
   } = useSelector(selectors.lobbyDataSelector);
 
@@ -121,13 +121,16 @@ const LobbyWidget = () => {
       handleShowCreateGameModal();
     }
   }, [activeGame, handleShowCreateGameModal]);
-  const handleExperimentalGameBtnClick = useCallback(event => {
-    const type = event.currentTarget.dataset.type || 'css';
+  const handleExperimentalGameBtnClick = useCallback(
+    event => {
+      const type = event.currentTarget.dataset.type || 'css';
 
-    if (isAdmin) {
-      lobbyMiddlewares.createExperimentGame({ type });
-    }
-  }, [isAdmin]);
+      if (isAdmin) {
+        lobbyMiddlewares.createExperimentGame({ type });
+      }
+    },
+    [isAdmin],
+  );
 
   useEffect(() => {
     const channel = lobbyMiddlewares.fetchState(currentUserId)(dispatch);
@@ -192,7 +195,7 @@ const LobbyWidget = () => {
         liveTournaments={liveTournaments}
         seasonTournaments={seasonTournaments}
         user={currentUser}
-        opponents={opponents}
+        nearbyUsers={nearbyUsers}
         controls={(
           <div className="d-flex flex-column mt-2">
             <div className="d-flex w-100">