Feat/refactor usewebrtc hook

components/Community/Room/index.tsx

@@ -1,41 +1,21 @@
 /* eslint-disable jsx-a11y/media-has-caption */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
-import React from 'react';
-import useWebRTC, { LOCAL_VIDEO } from 'utils/useWebRTC';
+import React, { useEffect, useState } from 'react';
 import { inject, observer } from 'mobx-react';
 import RootStore from 'store/rootStore';
-
-function layout(clientsNumber = 1) {
-  const pairs = Array.from({ length: clientsNumber }).reduce((acc, next, index, arr) => {
-    if (index % 2 === 0) {
-      acc.push(arr.slice(index, index + 2));
-    }
-
-    return acc;
-  }, []);
-
-  const rowsNumber = pairs.length;
-  const height = `${100 / rowsNumber}%`;
-
-  return pairs
-    .map((row, index, arr) => {
-      if (index === arr.length - 1 && row.length === 1) {
-        return [
-          {
-            width: '100%',
-            height,
-          },
-        ];
-      }
-
-      return row.map(() => ({
-        width: '50%',
-        height,
-      }));
-    })
-    .flat();
-}
+import { io } from 'socket.io-client';
+import { ACTIONS } from '../../../socket/actions';
+import VideoConference from '../../VideoConference/VideoConference';
+
+// Fake socket
+const options = {
+  'force new connection': true,
+  reconnectionAttemps: "Infinity",
+  timeout: 10000,
+  transports: ['websocket']
+};
+const fakeSocket = io('http://localhost:3001', options);
 
 type RoomT = {
   rootStore: RootStore;
@@ -44,38 +24,26 @@ type RoomT = {
 const Room: React.FC<RoomT> = inject('rootStore')(
   observer((props) => {
     const { rootStore }: RoomT = props;
+    const socket = rootStore.socketTest;
+    console.log(socket);
 
-    const { clients, provideMediaRef } = useWebRTC(rootStore.socketTest, 1);
+    const [rooms, updateRooms] = useState([]);
+    const listener = ({ rooms = [] } = {}) => {
+      updateRooms(rooms);
+    };
 
-    const videoLayout = layout(2);
+    useEffect(() => {
+      fakeSocket.on(ACTIONS.SHARE_ROOMS, listener);
 
-    console.log('clients', clients);
-    console.log('provideMediaRef', provideMediaRef);
-    console.log('videoLayout', videoLayout);
+      // Действие при демонтировании
+      return () => {
+        fakeSocket.off(ACTIONS.SHARE_ROOMS, listener);
+      };
+    }, []);
 
     return (
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexWrap: 'wrap',
-        }}
-      >
-        {clients.map((clientID, index) => (
-          <div key={clientID} style={videoLayout[index]} id={clientID}>
-            <video
-              width="100%"
-              height="100%"
-              ref={(instance) => {
-                provideMediaRef(clientID, instance);
-              }}
-              autoPlay
-              playsInline
-              muted={clientID === LOCAL_VIDEO}
-            />
-          </div>
-        ))}
+      <div>
+        <VideoConference socket={fakeSocket} roomId={rooms[0]}/>
       </div>
     );
   }),

components/Community/Tasks/Header.tsx

@@ -104,7 +104,7 @@ const Header = inject()(
               lineHeight: '20px',
               boxShadow: 0,
               textTransform: 'capitalize',
-  
+
               '&:hover': {
                 boxShadow: 0,
                 bgcolor: tab === 2 ? 'primary.dark' : 'transparent',

components/Home/Communities.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { Stack, Typography } from '@mui/material';
+import { Avatar } from 'kit/Avatar';
+
+const communities = [
+  {
+    title: 'МИПК И.Федорова',
+    avatar: '2',
+    categories: ['4Б-жд', '5Б-жд', '6Б-жд', '7Б-жд', '8Б-жд'],
+  },
+  {
+    title: 'МИПК И.Федорова',
+    avatar: '2',
+    categories: ['4Б-жд', '5Б-жд', '6Б-жд', '7Б-жд', '8Б-жд'],
+  },
+  {
+    title: 'МИПК И.Федорова',
+    avatar: '2',
+    categories: ['4Б-жд', '5Б-жд', '6Б-жд', '7Б-жд', '8Б-жд'],
+  },
+  {
+    title: 'МИПК И.Федорова',
+    avatar: '2',
+    categories: ['4Б-жд', '5Б-жд', '6Б-жд', '7Б-жд', '8Б-жд'],
+  },
+  {
+    title: 'МИПК И.Федорова',
+    avatar: '2',
+    categories: ['4Б-жд', '5Б-жд', '6Б-жд', '7Б-жд', '8Б-жд'],
+  },
+  {
+    title: 'МИПК И.Федорова',
+    avatar: '2',
+    categories: ['4Б-жд', '5Б-жд', '6Б-жд', '7Б-жд', '8Б-жд'],
+  },
+];
+
+const Communities = () => (
+  <Stack
+    direction="row"
+    justifyContent="flex-start"
+    alignItems="center"
+    spacing={4}
+    sx={{
+      width: '100%',
+      height: '248px',
+    }}
+  >
+    {communities.map((item, index) => (
+      <Stack
+        key={index.toString()}
+        direction="column"
+        justifyContent="flex-start"
+        alignItems="flex-start"
+        sx={{
+          width: '365px',
+          height: '248px',
+          bgcolor: 'grayscale.0',
+          borderRadius: '8px',
+          p: '16px 12px',
+        }}
+      >
+        <Stack
+          direction="row"
+          justifyContent="flex-start"
+          alignItems="center"
+          spacing={2}
+          sx={{
+            height: '64px',
+            width: '100%',
+            p: '8px 12px',
+          }}
+        >
+          <Avatar />
+          <Typography
+            sx={{
+              fontWeight: 500,
+              fontSize: '20px',
+              lineHeight: '28px',
+            }}
+          >
+            {item.title}
+          </Typography>
+        </Stack>
+      </Stack>
+    ))}
+  </Stack>
+);
+
+export default Communities;

components/Home/Header.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Stack, Typography } from '@mui/material';
+
+const Header = () => (
+  <Stack
+    direction="row"
+    justifyContent="flex-start"
+    alignItems="center"
+    sx={{
+      width: '100%',
+      height: '40px',
+    }}
+  >
+    <Typography
+      sx={{
+        fontWeight: 600,
+        fontSize: '32px',
+        lineHeight: '40px',
+      }}
+    >
+      Главная
+    </Typography>
+  </Stack>
+);
+
+export default Header;

components/Home/Home.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Communities from './Communities';
+import Header from './Header';
+
+const Home = () => (
+  <>
+    <Header />
+    <Communities />
+  </>
+);
+
+export default Home;

components/Home/index.tsx

@@ -0,0 +1 @@
+export { default as HomePage } from './Home';