refactor split panel

Author: ReDBrother

services/app/apps/codebattle/assets/js/widgets/pages/RoomWidget.jsx

@@ -1,8 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import cn from 'classnames';
-import Split from 'react-split';
 import { CSSTransition, SwitchTransition } from 'react-transition-group';
 
 import FeedbackAlertNotification from '../components/FeedbackAlertNotification';
@@ -27,52 +26,6 @@ import NetworkAlert from './game/NetworkAlert';
 import TimeoutGameInfo from './game/TimeoutGameInfo';
 import WaitingOpponentInfo from './game/WaitingOpponentInfo';
 
-const disableSplit = true;
-
-function getWindowDimensions() {
-  const { innerWidth: width, innerHeight: height } = window;
-  return {
-    width,
-    height,
-  };
-}
-
-export function useWindowDimensions() {
-  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
-
-  useEffect(() => {
-    function handleResize() {
-      setWindowDimensions(getWindowDimensions());
-    }
-
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  return windowDimensions;
-}
-
-function PanelsSplitPane({ children, viewMode }) {
-  const dimensions = useWindowDimensions();
-
-  if (viewMode !== 'duel' || dimensions.width < 992 || disableSplit) return children;
-
-  return (
-    <Split
-      style={{ maxHeight: 'calc(100vh - 77px)' }}
-      sizes={[35, 60]}
-      className="d-flex flex-column w-100"
-      direction="vertical"
-      gutterSize={5}
-      gutterAlign="center"
-      cursor="row-resize"
-    >
-      <div style={{ minHeight: 100 }} className="d-flex w-100">{children[0]}</div>
-      <div style={{ minHeight: 200 }} className="d-flex w-100 cb-overflow-y-hidden">{children[1]}</div>
-    </Split>
-  );
-}
-
 function RoomWidget({
   pageName,
   mainMachine,
@@ -140,16 +93,16 @@ function RoomWidget({
             >
               <div className="row no-gutter cb-game">
                 {showTaskBuilder && (
-                  <PanelsSplitPane viewMode={viewMode}>
+                  <>
                     <BuilderSettingsWidget />
                     <BuilderEditorsWidget />
-                  </PanelsSplitPane>
+                  </>
                 )}
                 {showBattleRoom && (
-                  <PanelsSplitPane viewMode={viewMode}>
+                  <>
                     <InfoWidget viewMode={viewMode} />
                     <GameWidget viewMode={viewMode} editorMachine={editorMachine} />
-                  </PanelsSplitPane>
+                  </>
                 )}
                 {mute && (
                   <div className="rounded p-2 bg-dark cb-mute-icon">

services/app/apps/codebattle/assets/js/widgets/pages/game/PanelSplitPane.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import Split from 'react-split';
+
+import { useWindowDimensions } from '@/utils/useWindowDimensions';
+
+function PanelsSplitPane({ children, viewMode }) {
+  const dimensions = useWindowDimensions();
+
+  if (viewMode !== 'duel' || dimensions.width < 992) return children;
+
+  return (
+    <Split
+      style={{ maxHeight: 'calc(100vh - 77px)' }}
+      sizes={[35, 60]}
+      className="d-flex flex-column w-100"
+      direction="vertical"
+      gutterSize={5}
+      gutterAlign="center"
+      cursor="row-resize"
+    >
+      <div style={{ minHeight: 100 }} className="d-flex w-100">{children[0]}</div>
+      <div style={{ minHeight: 200 }} className="d-flex w-100 cb-overflow-y-hidden">{children[1]}</div>
+    </Split>
+  );
+}
+
+export default PanelsSplitPane;

services/app/apps/codebattle/assets/js/widgets/utils/useWindowDimensions.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height,
+  };
+}
+
+function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowDimensions;
+}
+
+export default useWindowDimensions;

services/app/apps/codebattle/lib/codebattle_web/channels/game_channel.ex

@@ -122,6 +122,22 @@ defmodule CodebattleWeb.GameChannel do
     {:noreply, socket}
   end
 
+  def handle_in("like", %{"liked_user_id" => user_id}, socket) do
+    broadcast_from!(socket, "like", %{
+      user_id: user_id
+    })
+
+    {:noreply, socket}
+  end
+
+  def handle_in("dislike", %{"disliked_user_id" => user_id}, socket) do
+    broadcast_from!(socket, "dislike", %{
+      user_id: user_id
+    })
+
+    {:noreply, socket}
+  end
+
   def handle_in("give_up", _, socket) do
     game_id = socket.assigns.game_id
     user = socket.assigns.current_user